import DatePicker, { registerLocale } from 'react-datepicker'
import '@/styles/datepicker.css'
import { ru } from 'date-fns/locale/ru'
import { cn } from '@/lib/utils'

registerLocale('ru', ru)

interface Props {
  /** ISO YYYY-MM-DD или пустая строка/null. */
  value: string | null
  onChange: (iso: string | null) => void
  placeholder?: string
  required?: boolean
  disabled?: boolean
  className?: string
}

const inputClass = 'h-10 w-full max-w-[180px] rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 px-3 text-sm leading-none focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)] disabled:opacity-60 disabled:bg-slate-50 dark:disabled:bg-slate-800/60'

/** Дата с готовым попапом react-datepicker: RU-локаль, формат DD.MM.YYYY,
 * dropdowns для месяца и года, кнопка «Сегодня», крестик «очистить».
 * Хранит/отдаёт ISO YYYY-MM-DD — API-контракт без изменений. */
export function DateField({ value, onChange, placeholder = 'дд.мм.гггг', required, disabled, className }: Props) {
  const dateValue = value ? new Date(value) : null
  return (
    <DatePicker
      selected={dateValue}
      onChange={(d: Date | null) => {
        if (!d) { onChange(null); return }
        // Локальный YYYY-MM-DD без UTC-смещения, чтобы вечерние даты
        // не сдвигались на день назад в часовом поясе KZ (UTC+5).
        const y = d.getFullYear()
        const m = String(d.getMonth() + 1).padStart(2, '0')
        const dd = String(d.getDate()).padStart(2, '0')
        onChange(`${y}-${m}-${dd}`)
      }}
      dateFormat="dd.MM.yyyy"
      locale="ru"
      placeholderText={placeholder}
      todayButton="Сегодня"
      isClearable
      showMonthDropdown
      showYearDropdown
      dropdownMode="select"
      required={required}
      disabled={disabled}
      autoComplete="off"
      className={cn(inputClass, className)}
      wrapperClassName="inline-block"
      calendarClassName="!font-sans"
      popperClassName="z-[100]"
    />
  )
}
