import React, { useMemo } from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.min.css';
import { Spanish } from 'flatpickr/dist/l10n/es.js';
import { calendarYmdFromServer } from '../../utils/serverCalendarDate';

export interface FormDateInputEsProps {
    /** Valor en formato ISO `YYYY-MM-DD` (compatible con inputs nativos y backend). */
    value: string;
    onChange: (isoYmd: string) => void;
    className?: string;
    style?: React.CSSProperties;
    disabled?: boolean;
    id?: string;
    name?: string;
    /** Clases Bootstrap: `sm` → `form-control-sm` */
    bsSize?: 'sm' | 'lg';
    placeholder?: string;
    isInvalid?: boolean;
    /** Se reenvía al input (p. ej. validación HTML5 cuando el padre lo exige). */
    required?: boolean;
}

/** Respaldo si flatpickr no entrega `dateStr` (segundo arg. del hook onChange). */
function toIsoYmdFromDate(d: Date): string {
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${y}-${m}-${day}`;
}

const ISO_YMD = /^\d{4}-\d{2}-\d{2}$/;

/**
 * Fecha en español (flatpickr) con visualización **dd/mm/yyyy**;
 * el estado sigue siendo **YYYY-MM-DD** como con `type="date"`.
 */
const FormDateInputEs: React.FC<FormDateInputEsProps> = ({
    value,
    onChange,
    className = '',
    style,
    disabled = false,
    id,
    name,
    bsSize,
    placeholder = 'dd/mm/yyyy',
    isInvalid = false,
    required = false,
}) => {
    const sizeClass = bsSize ? `form-control-${bsSize}` : '';
    const controlClass = ['form-control', sizeClass, isInvalid ? 'is-invalid' : '', className]
        .filter(Boolean)
        .join(' ')
        .trim();

    /** `Date` en zona local (mediodía) para que flatpickr no interprete `YYYY-MM-DD` como UTC. */
    const flatpickrValue = useMemo((): Date | undefined => {
        const ymd = calendarYmdFromServer(value);
        if (!ymd) return undefined;
        const [y, mo, d] = ymd.split('-').map(Number);
        return new Date(y, mo - 1, d, 12, 0, 0, 0);
    }, [value]);

    const flatpickrOptions = useMemo(
        () => ({
            locale: Spanish,
            dateFormat: 'Y-m-d',
            altInput: true,
            altFormat: 'd/m/Y',
            altInputClass: controlClass,
            allowInput: true,
            disableMobile: true,
            altInputPlaceholder: placeholder,
        }),
        [controlClass, placeholder]
    );

    return (
        <Flatpickr
            id={id}
            name={name}
            className={controlClass}
            style={style}
            required={required}
            value={flatpickrValue}
            disabled={disabled}
            options={flatpickrOptions}
            onChange={(selectedDates: Date[], dateStr: string) => {
                if (!selectedDates?.length) {
                    onChange('');
                    return;
                }
                const trimmed = typeof dateStr === 'string' ? dateStr.trim() : '';
                if (ISO_YMD.test(trimmed)) {
                    onChange(trimmed);
                    return;
                }
                onChange(toIsoYmdFromDate(selectedDates[0]));
            }}
        />
    );
};

export default FormDateInputEs;