import { Check, Loader2, Pencil } from 'lucide-react';
import { KeyboardEvent, useEffect, useRef, useState } from 'react';

interface Props {
    deger: string | null | undefined;
    /** Async kaydet — basari ile resolve, hata ile reject (mesaj string). Hata throw edersen kullaniciya gosterilir. */
    onSave: (yeni: string) => Promise<void>;
    tip?: 'text' | 'email' | 'tel' | 'number';
    placeholder?: string;
    /** Sayisal/kod alanlari icin monospace font */
    mono?: boolean;
    /** "-" yerine bos gosterim */
    bosMetin?: string;
    /** Bos olabilir mi (false ise zorunlu) */
    bosaIzin?: boolean;
    /** Hucrenin disindaki ek class */
    className?: string;
    /** Salt-okunur (yetki yok vb.) */
    salt?: boolean;
    /** input maxLength */
    maxLength?: number;
}

function getCsrfToken(): string {
    const m = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
    return m ? decodeURIComponent(m[1]) : '';
}

export { getCsrfToken };

export default function EditableCell({
    deger,
    onSave,
    tip = 'text',
    placeholder = 'Değer giriniz',
    mono = false,
    bosMetin = '-',
    bosaIzin = true,
    className = '',
    salt = false,
    maxLength = 255,
}: Props) {
    const [duzenle, setDuzenle] = useState(false);
    const [taslak, setTaslak] = useState<string>(deger ?? '');
    const [kaydediliyor, setKaydediliyor] = useState(false);
    const [hata, setHata] = useState<string | null>(null);
    const [basariFlash, setBasariFlash] = useState(false);
    const inputRef = useRef<HTMLInputElement>(null);

    // deger prop disardan degisirse (refresh sonrasi) ic state'i guncelle
    useEffect(() => { setTaslak(deger ?? ''); }, [deger]);

    useEffect(() => {
        if (duzenle) {
            // bir tick sonra focus + select
            const t = setTimeout(() => {
                inputRef.current?.focus();
                inputRef.current?.select();
            }, 0);
            return () => clearTimeout(t);
        }
    }, [duzenle]);

    const ac = () => {
        if (salt || kaydediliyor) return;
        setHata(null);
        setTaslak(deger ?? '');
        setDuzenle(true);
    };

    const iptal = () => {
        setDuzenle(false);
        setHata(null);
        setTaslak(deger ?? '');
    };

    const kaydet = async () => {
        const yeni = taslak.trim();
        const eski = (deger ?? '').toString().trim();
        if (yeni === eski) { setDuzenle(false); return; }
        if (!bosaIzin && yeni === '') { setHata('Boş olamaz.'); return; }

        setKaydediliyor(true);
        setHata(null);
        try {
            await onSave(yeni);
            setDuzenle(false);
            setBasariFlash(true);
            setTimeout(() => setBasariFlash(false), 900);
        } catch (e: any) {
            setHata(e?.message || 'Kaydedilemedi.');
        } finally {
            setKaydediliyor(false);
        }
    };

    const tusBasildi = (e: KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') { e.preventDefault(); kaydet(); }
        else if (e.key === 'Escape') { e.preventDefault(); iptal(); }
    };

    if (duzenle) {
        return (
            <div className={`relative ${className}`}>
                <div className="flex items-center gap-1">
                    <input
                        ref={inputRef}
                        type={tip}
                        value={taslak}
                        onChange={(e) => setTaslak(e.target.value)}
                        onKeyDown={tusBasildi}
                        onBlur={(e) => {
                            // Tikladigi onay/iptal butonuna gitmiyorsa kaydet
                            const next = e.relatedTarget as HTMLElement | null;
                            if (next?.dataset.editableBtn) return;
                            kaydet();
                        }}
                        placeholder={placeholder}
                        maxLength={maxLength}
                        disabled={kaydediliyor}
                        className={`w-full rounded border px-2 py-1 text-sm outline-none focus:ring-1 ${
                            hata
                                ? 'border-rose-400 bg-rose-50/40 focus:border-rose-500 focus:ring-rose-200'
                                : 'border-blue-400 bg-white focus:border-blue-500 focus:ring-blue-200'
                        } ${mono ? 'font-mono text-xs' : ''}`}
                    />
                    {kaydediliyor ? (
                        <Loader2 className="h-4 w-4 flex-shrink-0 animate-spin text-blue-600" />
                    ) : (
                        <button
                            type="button"
                            data-editable-btn
                            onMouseDown={(e) => { e.preventDefault(); kaydet(); }}
                            title="Kaydet (Enter)"
                            className="rounded p-1 text-emerald-600 hover:bg-emerald-50"
                        >
                            <Check className="h-3.5 w-3.5" />
                        </button>
                    )}
                </div>
                {hata && (
                    <div className="absolute left-0 top-full mt-1 z-10 rounded-md border border-rose-300 bg-rose-50 px-2 py-1 text-[11px] text-rose-700 shadow-sm whitespace-nowrap">
                        {hata}
                    </div>
                )}
            </div>
        );
    }

    const gosterilen = (deger ?? '').toString().trim() || bosMetin;
    const bos = !((deger ?? '').toString().trim());

    return (
        <button
            type="button"
            onClick={ac}
            disabled={salt}
            title={salt ? '' : 'Düzenlemek için tıkla'}
            className={`group relative inline-flex w-[calc(100%+0.375rem)] items-center gap-1 rounded py-0.5 text-left transition ${
                salt ? 'cursor-default' : 'cursor-text hover:bg-blue-50/60'
            } ${basariFlash ? 'bg-emerald-100' : ''} ${className}`}
        >
            <span className={`flex-1 truncate ${mono ? 'font-mono text-xs' : ''} ${bos ? 'text-slate-400' : ''}`}>
                {gosterilen}
            </span>
            {!salt && (
                <Pencil className="h-3 w-3 flex-shrink-0 text-slate-300 opacity-0 transition group-hover:opacity-100" />
            )}
        </button>
    );
}