import { CalendarDays } from 'lucide-react';
import { useCallback, useMemo } from 'react';
import persian from 'react-date-object/calendars/persian';
import DatePicker from 'react-multi-date-picker';
import { Input } from '@/components/ui/input';
import { dariJalaliLocale } from '@/lib/dari-calendar-locale';
import {
    activeJalaliMonthPlaceholder,
    gregorianYmToJalaliDateObject,
    gregorianYmToJalaliMonthDisplay,
    jalaliMonthToGregorianMonthStart,
    JALALI_MONTH_FORMAT,
    normalizeSalaryMonthValue,
} from '@/lib/jalali-picker';
import { cn } from '@/lib/utils';

/**
 * Month field stored as Gregorian YYYY-MM; shown and picked in Solar Hijri (Shamsi).
 *
 * @param {object} props
 * @param {string} props.id
 * @param {string} props.value Gregorian Y-m-d (Shamsi month anchor) or legacy YYYY-MM
 * @param {(gregorianMonthStart: string) => void} props.onChange
 * @param {string} [props.placeholder]
 * @param {boolean} [props.invalid]
 * @param {string} [props.className]
 */
export function AppMonthInput({
    id,
    value,
    onChange,
    placeholder,
    invalid = false,
    className,
}) {
    const activeMonthPlaceholder = useMemo(() => activeJalaliMonthPlaceholder(), []);

    const normalizedValue = useMemo(
        () => normalizeSalaryMonthValue(value),
        [value],
    );

    const pickerValue = useMemo(
        () => gregorianYmToJalaliDateObject(normalizedValue) ?? '',
        [normalizedValue],
    );
    const displayValue = useMemo(
        () => gregorianYmToJalaliMonthDisplay(normalizedValue),
        [normalizedValue],
    );

    const handleChange = useCallback(
        (picked) => {
            const gregorianMonthStart = jalaliMonthToGregorianMonthStart(picked);

            if (gregorianMonthStart) {
                onChange(gregorianMonthStart);
            }
        },
        [onChange],
    );

    return (
        <DatePicker
            id={id}
            value={pickerValue}
            onChange={handleChange}
            onlyMonthPicker
            calendar={persian}
            locale={dariJalaliLocale}
            digits={dariJalaliLocale.digits}
            format={JALALI_MONTH_FORMAT}
            editable={false}
            onlyShowInRangeDates={false}
            calendarPosition="bottom-end"
            containerClassName="w-full"
            className="rmdp-ams rmdp-ams-dari w-full"
            arrow={false}
            portal
            zIndex={200}
            hideOnScroll={false}
            render={(_formatted, openCalendar) => (
                <div className="relative w-full" dir="ltr">
                    <Input
                        id={id}
                        name={id}
                        readOnly
                        dir="ltr"
                        value={displayValue}
                        placeholder={placeholder ?? activeMonthPlaceholder}
                        onFocus={openCalendar}
                        onClick={openCalendar}
                        onKeyDown={(e) => {
                            if (e.key === 'Enter' || e.key === ' ') {
                                e.preventDefault();
                                openCalendar();
                            }
                        }}
                        aria-invalid={invalid}
                        className={cn(
                            'h-9 cursor-pointer pr-10 text-left font-vazirmatn',
                            invalid && 'border-destructive',
                            className,
                        )}
                    />
                    <button
                        type="button"
                        tabIndex={-1}
                        className="text-muted-foreground hover:text-foreground absolute top-1/2 right-2 flex size-7 -translate-y-1/2 items-center justify-center rounded-md"
                        onClick={openCalendar}
                        aria-label="Open calendar"
                    >
                        <CalendarDays className="size-4" />
                    </button>
                </div>
            )}
        />
    );
}