'use client'

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

interface CancellationPolicyEditorProps {
  disabled?: boolean
  cancellationFeePercent: number
  cancellationFeePercent12To24Hours: number
  cancellationFeePercentMoreThan24Hours: number
  onChange: (
    field: 'cancellationFeePercent' | 'cancellationFeePercent12To24Hours' | 'cancellationFeePercentMoreThan24Hours',
    value: number
  ) => void
}

/**
 * Makes all three time-based cancellation fee tiers explicit to hosts.
 */
export default function CancellationPolicyEditor({
  disabled = false,
  cancellationFeePercent,
  cancellationFeePercent12To24Hours,
  cancellationFeePercentMoreThan24Hours,
  onChange,
}: CancellationPolicyEditorProps) {
  const tiers = [
    {
      field: 'cancellationFeePercentMoreThan24Hours' as const,
      label: texts.events.cancellationFeeMoreThan24HoursLabel,
      value: cancellationFeePercentMoreThan24Hours,
    },
    {
      field: 'cancellationFeePercent12To24Hours' as const,
      label: texts.events.cancellationFee12To24HoursLabel,
      value: cancellationFeePercent12To24Hours,
    },
    {
      field: 'cancellationFeePercent' as const,
      label: texts.events.cancellationFeeLabel,
      value: cancellationFeePercent,
    },
  ]

  return (
    <div className="flex flex-col gap-3">
      {tiers.map((tier) => {
        const normalizedValue = Number.isFinite(tier.value) ? Math.min(100, Math.max(0, tier.value)) : 0

        return (
          <div
            key={tier.field}
            className="rounded-consumer-control bg-[#E2E2E280] p-3"
          >
            <div className="flex items-center justify-between gap-3">
              <p className="text-sm font-medium text-consumer-text">{tier.label}</p>
              <div className="relative shrink-0">
                <Input
                  aria-label={tier.label}
                  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={tier.field}
                  value={normalizedValue}
                  onValueChange={(nextValue) => {
                    const next = Number(nextValue)

                    onChange(tier.field, Number.isFinite(next) ? Math.min(100, Math.max(0, next)) : 0)
                  }}
                />
                <span className="pointer-events-none absolute inset-y-0 start-1 flex items-center text-xs text-secondary-20">٪</span>
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}