import BulkActionBar from '@/Components/BulkActionBar';
import ModulBilgi from '@/Components/ModulBilgi';
import { useSilVeyaPasif } from '@/Components/ConfirmDialog';
import DateTimeRangePicker from '@/Components/DateTimeRangePicker';
import FilterDrawer, { FilterSection } from '@/Components/FilterDrawer';
import IndeterminateCheckbox from '@/Components/IndeterminateCheckbox';
import Pagination from '@/Components/Pagination';
import Select from '@/Components/Select';
import SortableTh, { useTableSort } from '@/Components/SortableTh';
import { Toaster } from '@/Components/Toaster';
import Toggle from '@/Components/Toggle';
import AppLayout from '@/Layouts/AppLayout';
import { useBulkSelection } from '@/lib/bulkSelection';
import { useYetki } from '@/lib/yetki';
import KayitLogButonu from '@/Components/KayitLogButonu';
import SozlesmeDavetModal from '@/Pages/MusteriSozlesme/_DavetModal';
import SozlesmeImzaGonderModal from '@/Pages/MusteriSozlesme/_ImzaGonderModal';
import SozlesmeGosterModal from '@/Pages/MusteriSozlesme/_GosterModal';
import SozlesmeIletModal from '@/Pages/MusteriSozlesme/_IletModal';
import SozlesmeOnayModal from '@/Pages/MusteriSozlesme/_OnayModal';
import Link from '@/Components/Link';
import { Head, router } from '@inertiajs/react';
import {
    ArrowLeft, CalendarDays, Clock, Eye, FileSignature, Filter, Link2, PenLine,
    Plus, Send, ToggleLeft, Trash2,
} from 'lucide-react';
import { useEffect, useRef, useState } from 'react';

interface Kayit {
    id: number;
    sozlesme_kod: string;
    sozlesme_ad: string;
    imza_ad_soyad: string | null;
    onay_tarihi?: string | null;
    aktif?: boolean;
    /** taslak = imza bekliyor · imzalandi = metin dondu */
    durum?: string;
}

interface Paginated {
    data: Kayit[];
    links: { url: string | null; label: string; active: boolean }[];
    from: number; to: number; total: number;
}

interface Props {
    musteri: { id: number; unvan: string; aktif: boolean };
    sozlesmeler?: Paginated;
    filtreler: {
        arama?: string; kod?: string; ad?: string; imza_ad_soyad?: string;
        pasif?: boolean; onay_dan?: string; onay_a?: string; durum?: string;
        sort?: string; dir?: 'asc' | 'desc';
    };
}

export default function MusteriSozlesmeIndex({ musteri, sozlesmeler, filtreler }: Props) {
    const { can } = useYetki();
    const silVeyaPasif = useSilVeyaPasif();
    const bulkAktif = can('musteri_sozlesme.sil');
    const bulk = useBulkSelection(sozlesmeler?.data ?? [], (s) => s.id);

    const [arama, setArama] = useState(filtreler.arama || '');
    const [kodTxt, setKodTxt] = useState(filtreler.kod || '');
    const [adTxt, setAdTxt] = useState(filtreler.ad || '');
    const [imzaTxt, setImzaTxt] = useState(filtreler.imza_ad_soyad || '');
    const [pasifGoster, setPasifGoster] = useState(!!filtreler.pasif);
    const [onayDan, setOnayDan] = useState(filtreler.onay_dan || '');
    const [onayA, setOnayA] = useState(filtreler.onay_a || '');
    const [drawerAcik, setDrawerAcik] = useState(false);
    const [onayModal, setOnayModal] = useState(false);
    const [iletKayit, setIletKayit] = useState<Kayit | null>(null);
    const [gosterId, setGosterId] = useState<number | null>(null);
    const [davetModal, setDavetModal] = useState(false);
    const [imzaGonderKayit, setImzaGonderKayit] = useState<Kayit | null>(null);
    const [durumFiltre, setDurumFiltre] = useState(filtreler.durum || '');
    const yukleniyor = !sozlesmeler;

    const temel = `/musteriler/${musteri.id}/sozlesmeler`;

    const filtreParam = () => ({
        arama: arama || undefined,
        kod: kodTxt || undefined,
        ad: adTxt || undefined,
        imza_ad_soyad: imzaTxt || undefined,
        pasif: pasifGoster ? 1 : undefined,
        onay_dan: onayDan || undefined,
        onay_a: onayA || undefined,
        durum: durumFiltre || undefined,
    });

    const aktifFiltreSayisi =
        (arama ? 1 : 0) + (kodTxt ? 1 : 0) + (adTxt ? 1 : 0) + (imzaTxt ? 1 : 0) +
        (pasifGoster ? 1 : 0) + (onayDan || onayA ? 1 : 0) + (durumFiltre ? 1 : 0);

    const uygula = () => {
        router.get(temel, filtreParam(), { preserveState: true, replace: true });
        setDrawerAcik(false);
    };
    const temizle = () => {
        setArama(''); setKodTxt(''); setAdTxt(''); setImzaTxt('');
        setPasifGoster(false); setOnayDan(''); setOnayA(''); setDurumFiltre('');
        router.get(temel);
        setDrawerAcik(false);
    };

    const aktifSort = filtreler.sort ?? '';
    const aktifDir = filtreler.dir ?? 'asc';
    const sirala = useTableSort(temel, aktifSort, aktifDir, filtreParam());

    const ilkRender = useRef(true);
    useEffect(() => {
        if (ilkRender.current) { ilkRender.current = false; return; }
        const t = setTimeout(() => uygula(), 350);
        return () => clearTimeout(t);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [arama]);

    const sil = async (k: Kayit) => {
        const secim = await silVeyaPasif({
            baslik: 'Onaylı Sözleşmeyi Sil',
            mesaj: <>'<strong>{k.sozlesme_ad}</strong>' ({k.sozlesme_kod}) sözleşmesi için ne yapmak istersin?</>,
            bagliVeri: 'Bu kayıt müşterinin imzasını taşıyan hukuki bir belgedir. "Tamamen Sil" seçilirse sözleşme metni ve imza görüntüsü geri alınamaz biçimde silinir. "Pasife Al" listeden gizler ama belgeyi korur.',
            pasifMetni: 'Pasife Al (belge korunur)',
            silMetni: 'Tamamen Sil',
            pasifEdilebilir: can('musteri_sozlesme.duzenle'),
            silEdilebilir: can('musteri_sozlesme.sil'),
        });
        if (secim === 'iptal') return;
        router.delete(`${temel}/${k.id}?mod=${secim}`, {
            preserveScroll: true,
            onSuccess: () => Toaster.basari('İşlem tamamlandı'),
        });
    };

    const topluSil = async () => {
        const secim = await silVeyaPasif({
            baslik: 'Toplu Onaylı Sözleşme Silme',
            mesaj: <>Seçili <strong>{bulk.count}</strong> onaylı sözleşme için ne yapılsın?</>,
            bagliVeri: 'Bu kayıtlar müşteri imzası taşıyan hukuki belgelerdir. "Tamamen Sil" metin ve imzayı kalıcı olarak siler.',
            pasifMetni: 'Pasife Al (belge korunur)',
            silMetni: 'Tamamen Sil',
            pasifEdilebilir: can('musteri_sozlesme.duzenle'),
            silEdilebilir: can('musteri_sozlesme.sil'),
        });
        if (secim === 'iptal') return;
        router.post(`${temel}/toplu-sil`, { ids: bulk.ids, mod: secim } as any, {
            preserveScroll: true,
            onSuccess: () => { bulk.clear(); Toaster.basari('İşlem tamamlandı'); },
        });
    };

    return (
        <AppLayout
            title={`Sözleşmeler — ${musteri.unvan}`}
            actions={
                <>
                    {/* Geri — müşteriler listesine dönüş (üstteki başlık barının yerine) */}
                    <Link href="/musteriler/"
                        title="Müşteriler listesine dön"
                        className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-700 shadow-sm transition hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700">
                        <ArrowLeft className="h-4 w-4" />
                    </Link>
                    <button type="button" onClick={() => setDrawerAcik(true)}
                        title={`Filtrele${aktifFiltreSayisi > 0 ? ` (${aktifFiltreSayisi} aktif)` : ''}`}
                        className="relative inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-700 shadow-sm transition hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700">
                        <Filter className="h-4 w-4" />
                        {aktifFiltreSayisi > 0 && (
                            <span className="absolute -right-1.5 -top-1.5 flex h-5 min-w-[20px] items-center justify-center rounded-full bg-blue-600 px-1.5 text-[11px] font-bold text-white ring-2 ring-white">
                                {aktifFiltreSayisi}
                            </span>
                        )}
                    </button>
                    <ModulBilgi konu="musteri_sozlesme" />
                    <div className="flex-1" />
                    {can('musteri_sozlesme.ekle') && (
                        <button type="button" onClick={() => setDavetModal(true)}
                            title="İmza davetleri — müşteriye imza bağlantısı gönder"
                            className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-700 shadow-sm transition hover:border-indigo-400 hover:bg-indigo-50 hover:text-indigo-700">
                            <Link2 className="h-4 w-4" />
                        </button>
                    )}
                    {can('musteri_sozlesme.ekle') && (
                        <button type="button" onClick={() => setOnayModal(true)} title="Sözleşme Ekle"
                            className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-600 text-white shadow-sm transition hover:bg-blue-700">
                            <Plus className="h-4 w-4" />
                        </button>
                    )}
                </>
            }
        >
            <Head title={`Sözleşmeler — ${musteri.unvan}`} />

            <FilterDrawer
                open={drawerAcik}
                onClose={() => setDrawerAcik(false)}
                onApply={uygula}
                onClear={temizle}
                aktifFiltreSayisi={aktifFiltreSayisi}
                mobilArama={{ value: arama, onChange: setArama, placeholder: 'Sözleşme adı, kodu veya imza sahibi...' }}
            >
                <FilterSection baslik="Alan İçinde Arama" ikon={FileSignature}>
                    <input type="text" value={adTxt} onChange={(e) => setAdTxt(e.target.value)}
                        placeholder="Sözleşme Adı"
                        className="w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm" />
                    <input type="text" value={kodTxt} onChange={(e) => setKodTxt(e.target.value)}
                        placeholder="Sözleşme Kodu (örn. SZL-0001)"
                        className="w-full rounded-md border border-slate-300 px-2 py-1.5 font-mono text-sm" />
                </FilterSection>

                <FilterSection baslik="İmza" ikon={PenLine}>
                    <Select
                        options={[
                            { value: '', label: 'Tüm sözleşmeler' },
                            { value: 'taslak', label: 'İmza Bekliyor' },
                            { value: 'imzalandi', label: 'İmzalandı' },
                        ]}
                        value={durumFiltre}
                        onChange={(v) => setDurumFiltre(String(v))}
                        placeholder="Durum seçin"
                    />
                    <input type="text" value={imzaTxt} onChange={(e) => setImzaTxt(e.target.value)}
                        placeholder="İmza Sahibi Ad Soyad"
                        className="w-full rounded-md border border-slate-300 px-2 py-1.5 text-sm" />
                </FilterSection>

                <FilterSection baslik="Onay Tarihi" ikon={CalendarDays}>
                    <DateTimeRangePicker
                        baslangic={onayDan}
                        onBaslangicChange={setOnayDan}
                        bitis={onayA}
                        onBitisChange={setOnayA}
                    />
                </FilterSection>

                <FilterSection baslik="Durum" ikon={ToggleLeft}>
                    <Toggle
                        checked={pasifGoster}
                        onChange={setPasifGoster}
                        label="Pasife alınmış sözleşmeleri de göster"
                    />
                </FilterSection>
            </FilterDrawer>

            <div className="-m-4 flex h-[calc(100dvh-130px)] flex-col overflow-hidden bg-white sm:-m-6">
                <div className="min-h-0 flex-1 overflow-auto">
                    <table className="liste-tablosu w-full min-w-[820px]">
                        <thead className="sticky top-0 z-10 bg-slate-50 text-xs uppercase text-slate-600 shadow-[0_1px_0_0_rgb(226_232_240)]">
                            <tr>
                                {bulkAktif && (
                                    <th className="w-10 px-3 py-3 text-left">
                                        <IndeterminateCheckbox
                                            checked={bulk.allSelected}
                                            indeterminate={bulk.someSelected}
                                            onChange={() => bulk.toggleAll()}
                                        />
                                    </th>
                                )}
                                <SortableTh kolon="sozlesme_kod" aktif={aktifSort} dir={aktifDir} onSort={sirala}>Kod</SortableTh>
                                <SortableTh kolon="sozlesme_ad" aktif={aktifSort} dir={aktifDir} onSort={sirala}>Sözleşme Adı</SortableTh>
                                <th className="px-4 py-3 text-left">Durum</th>
                                <SortableTh kolon="imza_ad_soyad" aktif={aktifSort} dir={aktifDir} onSort={sirala}>İmza Sahibi</SortableTh>
                                <SortableTh kolon="onay_tarihi" aktif={aktifSort} dir={aktifDir} onSort={sirala}>Onay Tarihi</SortableTh>
                                <th className="px-4 py-3 text-right">İşlem</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-200 text-sm">
                            {yukleniyor ? (
                                Array.from({ length: 8 }).map((_, i) => (
                                    <tr key={`skl-${i}`}><td colSpan={bulkAktif ? 7 : 6} className="px-5 py-3">
                                        <div className="h-4 w-full animate-pulse rounded bg-slate-100" />
                                    </td></tr>
                                ))
                            ) : sozlesmeler!.data.length === 0 ? (
                                <tr><td colSpan={bulkAktif ? 7 : 6} className="px-5 py-12 text-center text-slate-500">
                                    <FileSignature className="mx-auto mb-2 h-8 w-8 text-slate-400" />
                                    Bu müşteriye henüz sözleşme onaylatılmamış.
                                </td></tr>
                            ) : sozlesmeler!.data.map((k) => (
                                <tr key={k.id} className={`hover:bg-slate-50 ${k.aktif === false ? 'opacity-60' : ''} ${bulk.isSelected(k.id) ? 'bg-blue-50/50' : ''}`}>
                                    {bulkAktif && (
                                        <td className="px-3 py-2">
                                            <IndeterminateCheckbox
                                                checked={bulk.isSelected(k.id)}
                                                onChange={() => bulk.toggle(k.id)}
                                            />
                                        </td>
                                    )}
                                    <td className="whitespace-nowrap px-4 py-3">
                                        <span className="rounded bg-slate-100 px-2 py-0.5 font-mono text-xs font-medium text-slate-700">
                                            {k.sozlesme_kod}
                                        </span>
                                    </td>
                                    <td className="max-w-[340px] px-4 py-3">
                                        <div className="truncate font-medium text-slate-900" title={k.sozlesme_ad}>{k.sozlesme_ad}</div>
                                        {k.aktif === false && (
                                            <span className="mt-0.5 inline-flex rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-600">Pasif</span>
                                        )}
                                    </td>
                                    <td className="px-4 py-3">
                                        {k.durum === 'imzalandi' ? (
                                            <span className="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-semibold text-emerald-800">
                                                <PenLine className="h-3 w-3" /> İmzalandı
                                            </span>
                                        ) : (
                                            <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-800">
                                                <Clock className="h-3 w-3" /> İmza Bekliyor
                                            </span>
                                        )}
                                    </td>
                                    <td className="px-4 py-3 text-slate-700">{k.imza_ad_soyad || '—'}</td>
                                    <td className="whitespace-nowrap px-4 py-3 text-slate-600">
                                        {k.onay_tarihi ? new Date(k.onay_tarihi).toLocaleString('tr-TR', {
                                            day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
                                        }) : '—'}
                                    </td>
                                    <td className="px-5 py-3 text-right">
                                        <div className="inline-flex items-center gap-1">
                                            <button type="button" onClick={() => setGosterId(k.id)}
                                                className="rounded-md p-1.5 text-slate-600 hover:bg-blue-50 hover:text-blue-700"
                                                title={k.durum === 'imzalandi' ? 'İmzalı sözleşmeyi görüntüle' : 'Sözleşmeyi görüntüle / metni düzenle'}>
                                                <Eye className="h-4 w-4" />
                                            </button>
                                            {/*
                                              * TASLAK  → imza için gönder (bu kaydın metni gider, yeni kayıt açılmaz)
                                              * İMZALI  → onaylı PDF'i müşteriye ilet
                                              */}
                                            {can('musteri_sozlesme.ekle') && k.durum !== 'imzalandi' && (
                                                <button type="button" onClick={() => setImzaGonderKayit(k)}
                                                    className="rounded-md p-1.5 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
                                                    title="İmza için müşteriye gönder">
                                                    <Link2 className="h-4 w-4" />
                                                </button>
                                            )}
                                            {can('musteri_sozlesme.ekle') && k.durum === 'imzalandi' && (
                                                <button type="button" onClick={() => setIletKayit(k)}
                                                    className="rounded-md p-1.5 text-slate-600 hover:bg-indigo-50 hover:text-indigo-700"
                                                    title="Sözleşmeyi müşteriye ilet (PDF e-posta)">
                                                    <Send className="h-4 w-4" />
                                                </button>
                                            )}
                                            <KayitLogButonu modulKod="musterisozlesme" kayitId={k.id} />
                                            {can('musteri_sozlesme.sil') && (
                                                <button type="button" onClick={() => sil(k)}
                                                    className="rounded-md p-1.5 text-slate-600 hover:bg-rose-50 hover:text-rose-700" title="Sil">
                                                    <Trash2 className="h-4 w-4" />
                                                </button>
                                            )}
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>

                {!yukleniyor && sozlesmeler!.total > 0 && (
                    <div className="flex flex-shrink-0 items-center justify-between border-t border-slate-200 bg-white px-5 py-3">
                        <div className="text-sm text-slate-600">
                            <span className="font-medium">{sozlesmeler!.from}-{sozlesmeler!.to}</span> / {sozlesmeler!.total}
                        </div>
                        <Pagination paginator={sozlesmeler!} />
                    </div>
                )}
            </div>

            {bulkAktif && bulk.count > 0 && (
                <BulkActionBar count={bulk.count} onClear={bulk.clear}>
                    <button
                        onClick={topluSil}
                        className="inline-flex items-center gap-2 rounded-lg bg-rose-600 px-4 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-rose-700"
                    >
                        <Trash2 className="h-4 w-4" /> <span className="hidden md:inline">Seçilenleri Sil</span>
                    </button>
                </BulkActionBar>
            )}

            <SozlesmeOnayModal
                acik={onayModal}
                musteri={musteri}
                onClose={() => setOnayModal(false)}
            />

            <SozlesmeGosterModal
                kayitId={gosterId}
                musteri={musteri}
                onClose={() => setGosterId(null)}
                onIlet={(d) => {
                    // Görüntüleyiciden doğrudan iletme — görüntüleyici kapanır, iletme modalı açılır.
                    setGosterId(null);
                    setIletKayit({
                        id: d.id,
                        sozlesme_kod: d.sozlesme_kod,
                        sozlesme_ad: d.sozlesme_ad,
                        imza_ad_soyad: d.imza_ad_soyad,
                    });
                }}
            />

            <SozlesmeIletModal
                kayit={iletKayit}
                musteri={musteri}
                onClose={() => setIletKayit(null)}
            />

            <SozlesmeImzaGonderModal
                kayit={imzaGonderKayit}
                musteri={musteri}
                onClose={() => setImzaGonderKayit(null)}
            />

            <SozlesmeDavetModal
                acik={davetModal}
                musteri={musteri}
                onClose={() => {
                    setDavetModal(false);
                    // Davet üzerinden imzalanan sözleşme listeye düşsün.
                    router.reload({ only: ['sozlesmeler'] });
                }}
            />
        </AppLayout>
    );
}