import MultiDatePicker from 'react-multi-date-picker'
import persian from 'react-date-object/calendars/persian'
import persian_fa from 'react-date-object/locales/persian_fa'
import { DateObject } from 'react-multi-date-picker'
import type { Value } from 'react-multi-date-picker'

interface DateRangeFilterProps {
  startDate: string
  endDate: string
  onStartDateChange: (value: string) => void
  onEndDateChange: (value: string) => void
  startPlaceholder?: string
  endPlaceholder?: string
  className?: string
}

export const DateRangeFilter = ({
  startDate,
  endDate,
  onStartDateChange,
  onEndDateChange,
  startPlaceholder = 'از تاریخ',
  endPlaceholder = 'تا تاریخ',
  className = '',
}: DateRangeFilterProps) => {
  const handleChange = (date: Value, onChange: (value: string) => void) => {
    if (!date) {
      onChange('')
      return
    }

    const dateObj = Array.isArray(date) ? date[0] : date

    if (!dateObj || typeof dateObj === 'string') {
      onChange('')
      return
    }

    const persianDate = dateObj as DateObject
    const nativeDate = persianDate.toDate()
    
    const year = nativeDate.getFullYear()
    const month = String(nativeDate.getMonth() + 1).padStart(2, '0')
    const day = String(nativeDate.getDate()).padStart(2, '0')
    const formattedDate = `${year}-${month}-${day}`

    onChange(formattedDate)
  }

  const getPersianDate = (value: string): DateObject | undefined => {
    if (!value) return undefined

    try {
      const [year, month, day] = value.split('-').map(Number)
      const gregorianDate = new Date(year, month - 1, day)
      return new DateObject({
        date: gregorianDate,
        calendar: persian,
        locale: persian_fa,
      })
    } catch {
      return undefined
    }
  }

  const inputClass = "h-10 w-full rounded-lg border border-gray-200 bg-white px-3 text-sm text-gray-800 placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-gray-500"

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <div className="relative">
        <svg className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400 pointer-events-none z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        <MultiDatePicker
          value={getPersianDate(startDate)}
          onChange={(date) => handleChange(date, onStartDateChange)}
          calendar={persian}
          locale={persian_fa}
          calendarPosition="bottom-right"
          placeholder={startPlaceholder}
          inputClass={`${inputClass} pr-9 w-[140px]`}
          containerClassName="w-auto"
          format="YYYY/MM/DD"
        />
      </div>
      <span className="text-gray-400">-</span>
      <div className="relative">
        <svg className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400 pointer-events-none z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        <MultiDatePicker
          value={getPersianDate(endDate)}
          onChange={(date) => handleChange(date, onEndDateChange)}
          calendar={persian}
          locale={persian_fa}
          calendarPosition="bottom-right"
          placeholder={endPlaceholder}
          inputClass={`${inputClass} pr-9 w-[140px]`}
          containerClassName="w-auto"
          format="YYYY/MM/DD"
        />
      </div>
    </div>
  )
}
