import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react';
import { format, parse, isValid } from 'date-fns';
import { tr } from 'date-fns/locale';
import { Calendar as CalendarIcon, X } from 'lucide-react';
import { Fragment, useEffect, useState } from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';

interface Props {
    value: string | null | undefined;
    onChange: (value: string) => void;
    placeholder?: string;
    disabled?: boolean;
    error?: boolean;
    clearable?: boolean;
    className?: string;
}

const FORMAT_DISPLAY = 'dd.MM.yyyy';
const FORMAT_ISO = 'yyyy-MM-dd';

/** ISO (yyyy-MM-dd) -> display (dd.MM.yyyy). Bozuk degerlerde bos string. */
function isoToDisplay(iso: string | null | undefined): string {
    if (!iso) return '';
    const parsed = parse(iso, FORMAT_ISO, new Date());
    return isValid(parsed) ? format(parsed, FORMAT_DISPLAY) : '';
}

/** Yazilan ham metni dd.MM.yyyy maskine donustur (kullanici yazarken). */
function maskInput(raw: string): string {
    const digits = raw.replace(/\D/g, '').slice(0, 8);
    let out = digits.slice(0, 2);
    if (digits.length > 2) out += '.' + digits.slice(2, 4);
    if (digits.length > 4) out += '.' + digits.slice(4, 8);
    return out;
}

export default function DatePicker({
    value,
    onChange,
    placeholder = 'Tarih',
    disabled = false,
    error = false,
    clearable = false,
    className = '',
}: Props) {
    const seciliTarih = value ? parse(value, FORMAT_ISO, new Date()) : undefined;
    const [metin, setMetin] = useState<string>(() => isoToDisplay(value));

    // Disaridan value degisirse input'u senkronize et
    useEffect(() => {
        const yeni = isoToDisplay(value);
        setMetin((onceki) => (onceki === yeni ? onceki : yeni));
    }, [value]);

    const handleChange = (raw: string) => {
        const m = maskInput(raw);
        setMetin(m);
        if (m === '') {
            onChange('');
            return;
        }
        if (m.length === 10) {
            const parsed = parse(m, FORMAT_DISPLAY, new Date());
            if (isValid(parsed)) onChange(format(parsed, FORMAT_ISO));
        }
    };

    const handleBlur = () => {
        // Eksik kalan input'u temizle (kullanici kismi yazip cikarsa)
        if (metin !== '' && metin.length !== 10) {
            setMetin(isoToDisplay(value));
        }
    };

    return (
        <Popover className={`relative ${className}`}>
            {({ close }) => (
                <>
                    <div
                        className={`flex w-full items-center rounded-lg border bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-1 ${
                            disabled ? 'cursor-not-allowed bg-slate-50' : ''
                        } ${error ? 'border-rose-300' : 'border-slate-300'}`}
                    >
                        <input
                            type="text"
                            inputMode="numeric"
                            value={metin}
                            onChange={(e) => handleChange(e.target.value)}
                            onBlur={handleBlur}
                            placeholder={placeholder}
                            disabled={disabled}
                            maxLength={10}
                            className={`min-w-0 flex-1 rounded-l-lg border-0 bg-transparent px-3 py-2 text-sm text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:text-slate-500`}
                        />
                        {/* Silme X ikonu kaldırıldı — kullanıcı direktifi */}
                        <PopoverButton
                            type="button"
                            disabled={disabled}
                            className="flex items-center justify-center px-2.5 py-2 text-slate-500 hover:text-slate-700 disabled:cursor-not-allowed disabled:text-slate-300"
                            title="Takvimden seç"
                        >
                            <CalendarIcon className="h-4 w-4" />
                        </PopoverButton>
                    </div>

                    <Transition
                        as={Fragment}
                        enter="transition ease-out duration-100"
                        enterFrom="opacity-0 translate-y-1"
                        enterTo="opacity-100 translate-y-0"
                        leave="transition ease-in duration-75"
                        leaveFrom="opacity-100 translate-y-0"
                        leaveTo="opacity-0 translate-y-1"
                    >
                        <PopoverPanel
                            anchor="bottom end"
                            className="z-50 mt-1 rounded-xl border border-slate-200 bg-white p-3 shadow-xl ring-1 ring-black/5 focus:outline-none [--rdp-accent-color:#2563eb] [--rdp-accent-background-color:#dbeafe] [--rdp-day-height:2.25rem] [--rdp-day-width:2.25rem]"
                        >
                            <style>{`
                                .rdp-cari .rdp-month_caption { display: flex; align-items: center; justify-content: center; padding: 0.25rem 0; font-weight: 600; color: #0f172a; gap: 0.5rem; }
                                .rdp-cari .rdp-dropdowns { display: flex; gap: 0.5rem; align-items: center; }
                                .rdp-cari .rdp-dropdown_root { position: relative; display: inline-flex; }
                                .rdp-cari .rdp-dropdown { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
                                .rdp-cari .rdp-caption_label { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; background: #ffffff; font-size: 0.875rem; font-weight: 500; color: #0f172a; pointer-events: none; }
                                .rdp-cari .rdp-nav { display: flex; gap: 0.25rem; justify-content: space-between; left: 0; right: 0; }
                                .rdp-cari .rdp-button_previous, .rdp-cari .rdp-button_next { padding: 0.25rem; border-radius: 0.375rem; color: #64748b; }
                                .rdp-cari .rdp-button_previous:hover, .rdp-cari .rdp-button_next:hover { background: #f1f5f9; color: #0f172a; }
                                .rdp-cari .rdp-month_grid { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
                                .rdp-cari .rdp-weekdays { display: flex; }
                                .rdp-cari .rdp-weekday { width: 2.25rem; height: 2rem; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; color: #64748b; text-transform: uppercase; }
                                .rdp-cari .rdp-week { display: flex; }
                                .rdp-cari .rdp-day { width: 2.25rem; height: 2.25rem; padding: 0; }
                                .rdp-cari .rdp-day_button { width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; font-size: 0.875rem; color: #1e293b; transition: all 0.15s; cursor: pointer; background: transparent; border: 0; }
                                .rdp-cari .rdp-day_button:hover { background: #dbeafe; color: #1e3a8a; }
                                .rdp-cari .rdp-selected .rdp-day_button { background: #2563eb !important; color: #ffffff !important; font-weight: 600; }
                                .rdp-cari .rdp-today:not(.rdp-selected) .rdp-day_button { color: #2563eb; font-weight: 700; box-shadow: inset 0 0 0 1px #93c5fd; }
                                .rdp-cari .rdp-outside .rdp-day_button { color: #cbd5e1; }
                                .rdp-cari .rdp-disabled .rdp-day_button { color: #cbd5e1; cursor: not-allowed; }
                                .rdp-cari .rdp-disabled .rdp-day_button:hover { background: transparent; }
                            `}</style>
                            <DayPicker
                                mode="single"
                                selected={seciliTarih}
                                onSelect={(d) => {
                                    if (d) {
                                        const iso = format(d, FORMAT_ISO);
                                        onChange(iso);
                                        setMetin(format(d, FORMAT_DISPLAY));
                                        close();
                                    }
                                }}
                                locale={tr}
                                weekStartsOn={1}
                                captionLayout="dropdown"
                                startMonth={new Date(2000, 0)}
                                endMonth={new Date(2050, 11)}
                                className="rdp-cari"
                            />
                            <div className="mt-2 flex items-center justify-between border-t border-slate-100 pt-2">
                                <button
                                    type="button"
                                    onClick={() => {
                                        const bugun = new Date();
                                        onChange(format(bugun, FORMAT_ISO));
                                        setMetin(format(bugun, FORMAT_DISPLAY));
                                        close();
                                    }}
                                    className="rounded-md px-3 py-1 text-xs font-medium text-blue-600 hover:bg-blue-50"
                                >
                                    Bugün
                                </button>
                                {/* Temizle butonu kaldırıldı — silme yasak */}
                            </div>
                        </PopoverPanel>
                    </Transition>
                </>
            )}
        </Popover>
    );
}