'use client'

import Input from '@/components/formElements/Input'
import { texts } from '@/texts'

interface CancellationPolicyEditorProps {
  disabled?: boolean
  value: number
  onChange: (value: number) => void
}

/**
 * Makes the cancellation fee explicit to hosts while keeping the persisted
 * event contract to the existing `cancellationFeePercent` field.
 */
export default function CancellationPolicyEditor({ disabled = false, value, onChange }: CancellationPolicyEditorProps) {
  const normalizedValue = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0

  return (
    <div className="rounded-consumer-control bg-[#E2E2E280] p-3">
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-sm font-medium text-consumer-text">{texts.events.cancellationFeeLabel}</p>
          <p className="mt-1 text-xs leading-5 text-secondary-20">{texts.events.cancellationSectionDescription}</p>
        </div>
        <div className="relative shrink-0">
          <Input
            aria-label={texts.events.cancellationFeeLabel}
            disabled={disabled}
            generalType="numberInput"
            inputWrapper="h-10 w-16 rounded-xl border-0 bg-white px-2 text-center text-sm font-medium text-tertiary-900 shadow-none [&_input]:text-center disabled:bg-white/70"
            maxValue={100}
            minValue={0}
            name="cancellationFeePercent"
            value={normalizedValue}
            onValueChange={(nextValue) => {
              const next = Number(nextValue)

              onChange(Number.isFinite(next) ? Math.min(100, Math.max(0, next)) : 0)
            }}
          />
          {/* This marker belongs to the compact numeric field, not to its value. */}
          <span className="pointer-events-none absolute inset-y-0 start-1 flex items-center text-xs text-secondary-20">٪</span>
        </div>
      </div>
    </div>
  )
}