import { useConfirm } from '@/Components/ConfirmDialog';
import Modal from '@/Components/Modal';
import Select from '@/Components/Select';
import { Toaster } from '@/Components/Toaster';
import { router } from '@inertiajs/react';
import { AlertTriangle, Copy, Loader2, Plus, Save, Trash2, Users, X } from 'lucide-react';
import { FormEvent, useEffect, useState } from 'react';

const MAKS_SATIR = 50;

interface Kategori { id: number; ad: string }

interface Satir {
    cari_kodu: string;
    unvan: string;
    kategori_id: number | '';
    vergi_dairesi: string;
    vergi_no: string;
    telefon: string;
    email: string;
    adres: string;
    notlar: string;
}

const bosSatir = (kategoriIdDefault: number | '' = ''): Satir => ({
    cari_kodu: '',
    unvan: '',
    kategori_id: kategoriIdDefault,
    vergi_dairesi: '',
    vergi_no: '',
    telefon: '',
    email: '',
    adres: '',
    notlar: '',
});

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

interface Props {
    acik: boolean;
    onClose: () => void;
    kategoriler: Kategori[];
    onerilenKod?: string;
}

export default function CariTopluModal({ acik, onClose, kategoriler, onerilenKod }: Props) {
    const confirm = useConfirm();
    const [satirlar, setSatirlar] = useState<Satir[]>([]);
    const [processing, setProcessing] = useState(false);

    useEffect(() => {
        if (!acik) return;
        const varsayilanKat = kategoriler[0]?.id ?? '';
        setSatirlar([bosSatir(varsayilanKat), bosSatir(varsayilanKat), bosSatir(varsayilanKat)]);
    }, [acik, kategoriler]);

    const guncelle = (idx: number, alan: keyof Satir, deger: any) => {
        setSatirlar((s) => s.map((sa, i) => (i === idx ? { ...sa, [alan]: deger } : sa)));
    };
    const ekle = () => setSatirlar((s) => s.length >= MAKS_SATIR ? s : [...s, bosSatir(kategoriler[0]?.id ?? '')]);
    const sil = async (idx: number) => {
        const onay = await confirm({
            tip: 'tehlike', baslik: 'Satırı Sil',
            mesaj: <>Bu satırı silmek istediğine emin misin?</>,
            detay: 'Henüz kaydedilmemiş; girdiğin bilgiler kaybolacak.',
            onayMetni: 'Sil',
        });
        if (!onay) return;
        setSatirlar((s) => s.filter((_, i) => i !== idx));
    };
    const kopyala = (idx: number) => setSatirlar((s) => [
        ...s.slice(0, idx + 1),
        { ...s[idx], cari_kodu: '' },
        ...s.slice(idx + 1),
    ]);

    const dolu = satirlar.filter((s) => s.unvan.trim() && s.kategori_id);
    const limitAsildi = dolu.length > MAKS_SATIR;

    const kaydet = async (e: FormEvent) => {
        e.preventDefault();
        if (dolu.length === 0) {
            Toaster.hata('En az bir satır için unvan ve kategori girilmelidir.');
            return;
        }
        if (limitAsildi) return;

        setProcessing(true);
        try {
            const r = await fetch('/cariler/toplu/', {
                method: 'POST', credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json', Accept: 'application/json',
                    'X-XSRF-TOKEN': csrf(), 'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({ satirlar: dolu }),
            });
            if (r.status === 422) {
                const d = await r.json();
                const ilk = Object.values(d.errors ?? {})[0];
                Toaster.hata(Array.isArray(ilk) ? (ilk as string[])[0] : String(ilk ?? 'Doğrulama hatası'));
                return;
            }
            if (!r.ok) {
                // Backend Inertia redirect döndürmüş olabilir — yine de listeyi yenile
                if (r.status === 302 || r.headers.get('X-Inertia-Location')) {
                    Toaster.basari(`${dolu.length} cari kaydedildi`);
                    router.reload({ only: ['cariler'] });
                    onClose();
                    return;
                }
                Toaster.hata('Kayıt başarısız (HTTP ' + r.status + ')');
                return;
            }
            try {
                const sonuc = await r.json();
                if (sonuc?.errors) {
                    Toaster.uyari('Bazı kayıtlar geçersiz, kontrol edin.');
                    return;
                }
                Toaster.basari(sonuc.mesaj ?? `${dolu.length} cari kaydedildi`);
            } catch {
                Toaster.basari(`${dolu.length} cari kaydedildi`);
            }
            router.reload({ only: ['cariler'] });
            onClose();
        } finally {
            setProcessing(false);
        }
    };

    return (
        <Modal show={acik} onClose={onClose} maxWidth="full">
            <form onSubmit={kaydet}>
                <div className="flex flex-shrink-0 items-center justify-between border-b border-slate-200 px-4 py-2">
                    <h3 className="flex items-center gap-1.5 text-xs font-semibold text-slate-900 sm:text-sm">
                        <Users className="h-4 w-4 text-blue-600" /> Toplu Cari Girişi
                    </h3>
                    <button type="button" onClick={onClose} className="rounded-md p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-700">
                        <X className="h-4 w-4" />
                    </button>
                </div>

                <div className="max-h-[75vh] space-y-4 overflow-y-auto px-6 py-4">
                    <div className="flex items-start gap-3 rounded-xl border border-blue-200 bg-blue-50 p-3 text-xs text-blue-900">
                        <Users className="h-4 w-4 flex-shrink-0" />
                        <div>
                            Birden fazla cariyi tek seferde kaydedin. Her satır için <strong>unvan</strong> ve <strong>kategori</strong> zorunlu;
                            diğer alanlar opsiyonel. Cari kodu boş bırakılırsa otomatik üretilir
                            (örn: <code className="rounded bg-white px-1">{onerilenKod ?? '120.001'}</code>).
                            Tek transaction, maks {MAKS_SATIR} kayıt.
                        </div>
                    </div>

                    {limitAsildi && (
                        <div className="flex items-start gap-3 rounded-xl border border-rose-300 bg-rose-50 p-3 text-xs text-rose-900">
                            <AlertTriangle className="h-4 w-4 flex-shrink-0 text-rose-600" />
                            <div><strong>{dolu.length}</strong> dolu satır var; limit {MAKS_SATIR}. Kaydet devre dışı.</div>
                        </div>
                    )}

                    <div className="overflow-hidden rounded-xl border border-slate-200 bg-white">
                        <div className="overflow-x-auto">
                            <table className="w-full">
                                <thead className="bg-slate-50 text-xs uppercase text-slate-600">
                                    <tr>
                                        <th className="px-2 py-2 text-left">#</th>
                                        <th className="px-2 py-2 text-left" style={{ minWidth: 130 }}>Cari Kodu</th>
                                        <th className="px-2 py-2 text-left" style={{ minWidth: 220 }}>Unvan *</th>
                                        <th className="px-2 py-2 text-left" style={{ minWidth: 180 }}>Kategori *</th>
                                        <th className="px-2 py-2 text-left" style={{ minWidth: 150 }}>Vergi Dairesi</th>
                                        <th className="px-2 py-2 text-left" style={{ minWidth: 140 }}>Vergi No / TC</th>
                                        <th className="px-2 py-2 text-left" style={{ minWidth: 140 }}>Telefon</th>
                                        <th className="px-2 py-2 text-left" style={{ minWidth: 180 }}>E-posta</th>
                                        <th className="px-2 py-2 text-left" style={{ minWidth: 200 }}>Adres</th>
                                        <th className="px-2 py-2 text-left" style={{ minWidth: 180 }}>Notlar</th>
                                        <th className="px-2 py-2 text-center" style={{ width: 70 }}>İşlem</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-slate-200 text-sm">
                                    {satirlar.map((s, i) => (
                                        <tr key={i} className="hover:bg-slate-50">
                                            <td className="px-2 py-2 text-xs text-slate-500">{i + 1}</td>
                                            <td className="px-2 py-2">
                                                <input type="text" value={s.cari_kodu}
                                                    onChange={(e) => guncelle(i, 'cari_kodu', e.target.value)}
                                                    placeholder="(Otomatik)"
                                                    className="w-full rounded-lg border-slate-300 font-mono text-sm" />
                                            </td>
                                            <td className="px-2 py-2">
                                                <input type="text" value={s.unvan}
                                                    onChange={(e) => guncelle(i, 'unvan', e.target.value)}
                                                    placeholder="Cari unvanı..."
                                                    className="w-full rounded-lg border-slate-300 text-sm" />
                                            </td>
                                            <td className="px-2 py-2">
                                                <Select
                                                    value={s.kategori_id}
                                                    onChange={(v) => guncelle(i, 'kategori_id', v ? Number(v) : '')}
                                                    options={kategoriler.map((k) => ({ value: k.id, label: k.ad }))}
                                                    placeholder="Kategori seçiniz..."
                                                    hizliEkleUrl="/tanimlamalar/tip/cari-kategori"
                                                    hizliEkleBaslik="Yeni Cari Kategorisi"
                                                />
                                            </td>
                                            <td className="px-2 py-2">
                                                <input type="text" value={s.vergi_dairesi}
                                                    onChange={(e) => guncelle(i, 'vergi_dairesi', e.target.value)}
                                                    placeholder="Örn: Beşiktaş VD"
                                                    className="w-full rounded-lg border-slate-300 text-sm" />
                                            </td>
                                            <td className="px-2 py-2">
                                                <input type="text" value={s.vergi_no}
                                                    onChange={(e) => guncelle(i, 'vergi_no', e.target.value)}
                                                    placeholder="10 hane VN / 11 hane TC"
                                                    className="w-full rounded-lg border-slate-300 font-mono text-sm" />
                                            </td>
                                            <td className="px-2 py-2">
                                                <input type="text" value={s.telefon}
                                                    onChange={(e) => guncelle(i, 'telefon', e.target.value)}
                                                    placeholder="0532 123 45 67"
                                                    className="w-full rounded-lg border-slate-300 text-sm" />
                                            </td>
                                            <td className="px-2 py-2">
                                                <input type="email" value={s.email}
                                                    onChange={(e) => guncelle(i, 'email', e.target.value)}
                                                    placeholder="ornek@firma.com"
                                                    className="w-full rounded-lg border-slate-300 text-sm" />
                                            </td>
                                            <td className="px-2 py-2">
                                                <input type="text" value={s.adres}
                                                    onChange={(e) => guncelle(i, 'adres', e.target.value)}
                                                    placeholder="Mahalle, sokak, ilçe, il..."
                                                    className="w-full rounded-lg border-slate-300 text-sm" />
                                            </td>
                                            <td className="px-2 py-2">
                                                <input type="text" value={s.notlar}
                                                    onChange={(e) => guncelle(i, 'notlar', e.target.value)}
                                                    placeholder="Not, açıklama..."
                                                    className="w-full rounded-lg border-slate-300 text-sm" />
                                            </td>
                                            <td className="px-2 py-2">
                                                <div className="flex items-center justify-center gap-1">
                                                    <button type="button" onClick={() => kopyala(i)} title="Kopyala"
                                                        className="rounded-md p-1 text-slate-500 hover:bg-blue-50 hover:text-blue-700">
                                                        <Copy className="h-4 w-4" />
                                                    </button>
                                                    <button type="button" onClick={() => sil(i)} disabled={satirlar.length === 1} title="Satır Sil"
                                                        className="rounded-md p-1 text-slate-500 hover:bg-rose-50 hover:text-rose-700 disabled:opacity-30">
                                                        <Trash2 className="h-4 w-4" />
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>

                        <div className="flex items-center justify-between border-t border-slate-200 bg-slate-50 px-5 py-3">
                            <button type="button" onClick={ekle} disabled={satirlar.length >= MAKS_SATIR}
                                className="inline-flex items-center gap-2 rounded-lg border border-blue-300 bg-white px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50 disabled:opacity-50">
                                <Plus className="h-4 w-4" /> Satır Ekle
                            </button>
                            <div className="flex items-center gap-4 text-sm">
                                <div className="text-slate-600"><span className="font-medium">{satirlar.length}</span> satır</div>
                                <div className="font-bold text-emerald-700">{dolu.length} kayıt edilecek</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="flex items-center justify-end gap-2 border-t border-slate-200 bg-slate-50/60 px-6 py-3">
                    <button type="button" onClick={onClose}
                        className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                        İptal
                    </button>
                    <button type="submit" disabled={processing || dolu.length === 0 || limitAsildi}
                        className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50">
                        {processing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                        {processing ? 'Kaydediliyor...' : `${dolu.length} Cariyi Kaydet`}
                    </button>
                </div>
            </form>
        </Modal>
    );
}