import AppLayout from '@/Layouts/AppLayout';
import ModulBilgi from '@/Components/ModulBilgi';
import AsyncSelect from '@/Components/AsyncSelect';
import BulkActionBar from '@/Components/BulkActionBar';
import CariyeEkleButonu from '@/Components/CariyeEkleButonu';
import { useSilVeyaPasif } from '@/Components/ConfirmDialog';
import DateTimeRangePicker from '@/Components/DateTimeRangePicker';
import FilterDrawer, { FilterSection } from '@/Components/FilterDrawer';
import GorunumToggle from './_GorunumToggle';
import IndeterminateCheckbox from '@/Components/IndeterminateCheckbox';
import Select from '@/Components/Select';
import SortableTh, { useTableSort } from '@/Components/SortableTh';
import { Toaster } from '@/Components/Toaster';
import YenilemeFormModal from './_FormModal';
import { useBulkSelection } from '@/lib/bulkSelection';
import { tarihFormat } from '@/lib/format';
import { useYetki } from '@/lib/yetki';
import Link from '@/Components/Link';
import { Head, router } from '@inertiajs/react';
import Pagination from '@/Components/Pagination';
import { Bell, Briefcase, Calendar, CircleDot, Contact, Edit2, Filter, History, Plus, RefreshCw, Search, Trash2, X } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';

interface Durum { id: number; ad: string; renk: string; tamamlandi_mi?: boolean }
interface Tur { id: number; ad: string; renk: string }
interface KdvOraniOpt { id: number; oran: number; ad: string; varsayilan: boolean }
interface ParaBirimiOzet { kod: string; ad: string; sembol: string }

interface Kayit {
    id: number; baslik?: string | null;
    musteri?: { id: number; unvan: string } | null;
    durum?: { id: number; ad: string; renk: string } | null;
    turler: { id: number; ad: string; renk: string }[];
    kayit_tarihi?: string; yenileme_tarihi?: string;
    takip_ay: number;
    // Tutar kayıtta tutulmuyor — satırlardan hesaplanır (varsayılan para birimine çevrilmiş)
    satir_toplam?: number;
    sonraki_hatirlatma_tarihi?: string | null;
    aktif: boolean;
}

interface Paginated {
    data: Kayit[];
    links: any[];
    current_page: number; last_page: number; total: number; per_page: number;
    from: number | null; to: number | null;
}

interface Props {
    kayitlar: Paginated;
    durumlar: Durum[];
    turler: Tur[];
    kdvOranlari: KdvOraniOpt[];
    paraBirimi: ParaBirimiOzet;
    // Para birimi filtresi sabit liste değil — Para Birimleri ekranından yönetilir
    paraBirimleri?: ParaBirimiOzet[];
    filtreler: any;
}

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

export default function YenilemeTablo({ kayitlar, durumlar, turler, kdvOranlari, paraBirimi, paraBirimleri, filtreler }: Props) {
    const { can } = useYetki();
    const silVeyaPasif = useSilVeyaPasif();

    // Satır toplamları varsayılan para birimine çevrilmiş gelir — sembol tek kaynaktan
    const paraSembol = paraBirimi?.sembol || paraBirimi?.kod || '₺';

    // Filtre seçenekleri DB'den (aktif para birimleri) — boşsa bölüm hiç gösterilmez
    const pbSecenekleri = (paraBirimleri ?? []).map((pb) => ({
        value: pb.kod,
        label: pb.sembol ? `${pb.kod} (${pb.sembol})` : pb.kod,
        description: pb.ad || undefined,
    }));

    const [arama, setArama] = useState(filtreler.arama || '');
    const [drawerAcik, setDrawerAcik] = useState(false);
    const [kayitModal, setKayitModal] = useState<number | 'yeni' | null>(null);
    const [silinenIds, setSilinenIds] = useState<Set<number>>(new Set());

    const arr = (v: any) => Array.isArray(v) ? v.map(Number) : (v ? [Number(v)] : []);
    const arrS = (v: any) => Array.isArray(v) ? v.map(String) : (v ? [String(v)] : []);

    const [durumId, setDurumId] = useState<number[]>(arr(filtreler.durum_id));
    const [turId, setTurId] = useState<number[]>(arr(filtreler.tur_id));
    const [musteriId, setMusteriId] = useState<number[]>(arr(filtreler.musteri_id));
    const [kdvOraniId, setKdvOraniId] = useState<number[]>(arr(filtreler.kdv_orani_id));
    const [paraBirimiFiltre, setParaBirimiFiltre] = useState<string[]>(arrS(filtreler.para_birimi));
    const [kayitDan, setKayitDan] = useState(filtreler.kayit_dan || '');
    const [kayitA, setKayitA] = useState(filtreler.kayit_a || '');
    const [yenilemeDan, setYenilemeDan] = useState(filtreler.yenileme_dan || '');
    const [yenilemeA, setYenilemeA] = useState(filtreler.yenileme_a || '');

    const filtreParam = () => ({
        arama: arama || undefined,
        durum_id: durumId.length ? durumId : undefined,
        tur_id: turId.length ? turId : undefined,
        musteri_id: musteriId.length ? musteriId : undefined,
        kdv_orani_id: kdvOraniId.length ? kdvOraniId : undefined,
        para_birimi: paraBirimiFiltre.length ? paraBirimiFiltre : undefined,
        kayit_dan: kayitDan || undefined,
        kayit_a: kayitA || undefined,
        yenileme_dan: yenilemeDan || undefined,
        yenileme_a: yenilemeA || undefined,
    });

    const aktifFiltreSayisi =
        (arama ? 1 : 0) +
        (durumId.length > 0 ? 1 : 0) + (turId.length > 0 ? 1 : 0) +
        (musteriId.length > 0 ? 1 : 0) + (kdvOraniId.length > 0 ? 1 : 0) +
        (paraBirimiFiltre.length > 0 ? 1 : 0) +
        (kayitDan || kayitA ? 1 : 0) + (yenilemeDan || yenilemeA ? 1 : 0);

    const uygula = () => { router.get('/yenilemeler/tablo/', filtreParam(), { preserveState: true, replace: true }); setDrawerAcik(false); };

    const aktifSort = (filtreler.sort || 'yenileme_tarihi') as string;
    const aktifDir = (filtreler.dir || 'asc') as 'asc' | 'desc';
    const onSort = useTableSort('/yenilemeler/tablo', aktifSort, aktifDir, filtreParam());
    const temizle = () => {
        setArama(''); setDurumId([]); setTurId([]); setMusteriId([]); setKdvOraniId([]); setParaBirimiFiltre([]);
        setKayitDan(''); setKayitA(''); setYenilemeDan(''); setYenilemeA('');
        router.get('/yenilemeler/tablo/'); setDrawerAcik(false);
    };

    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 yukleniyor = !kayitlar;
    const gosterilen = (kayitlar?.data ?? []).filter((k) => !silinenIds.has(k.id));
    const bulk = useBulkSelection(gosterilen, (k) => k.id);

    const ac = (id: number) => setKayitModal(id);

    const sil = async (k: Kayit) => {
        const secim = await silVeyaPasif({
            baslik: 'Yenileme Kaydını Sil',
            mesaj: <>'<strong>{k.baslik ?? k.musteri?.unvan ?? 'Kayıt'}</strong>' için ne yapmak istersin?</>,
            pasifEdilebilir: can('yenileme.sil'),
            silEdilebilir: can('yenileme.sil'),
        });
        if (secim === 'iptal') return;
        setSilinenIds((p) => { const y = new Set(p); y.add(k.id); return y; });
        fetch(`/yenilemeler/${k.id}/?mod=${secim}`, {
            method: 'DELETE', credentials: 'same-origin',
            headers: { Accept: 'application/json', 'X-XSRF-TOKEN': csrfTok(), 'X-Requested-With': 'XMLHttpRequest' },
        }).catch(() => setSilinenIds((p) => { const y = new Set(p); y.delete(k.id); return y; }));
    };

    const topluSil = async () => {
        const secim = await silVeyaPasif({
            baslik: 'Toplu Yenileme Silme',
            mesaj: <>Seçili <strong>{bulk.count}</strong> kayıt için ne yapılsın?</>,
            pasifEdilebilir: can('yenileme.sil'),
            silEdilebilir: can('yenileme.toplu_sil') || can('yenileme.sil'),
        });
        if (secim === 'iptal') return;
        const ids = bulk.ids as number[];
        setSilinenIds((p) => { const y = new Set(p); ids.forEach((i) => y.add(i)); return y; });
        bulk.clear();
        fetch('/yenilemeler/toplu-sil/', {
            method: 'POST', credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-XSRF-TOKEN': csrfTok(), 'X-Requested-With': 'XMLHttpRequest' },
            body: JSON.stringify({ ids, mod: secim }),
        }).catch(() => setSilinenIds((p) => { const y = new Set(p); ids.forEach((i) => y.delete(i)); return y; }));
    };

    const topluBildir = () => {
        if (bulk.count === 0) { Toaster.hata('Lütfen önce kayıt seçin'); return; }
        const qs = bulk.ids.map((i) => `ids[]=${i}`).join('&');
        router.visit(`/yenilemeler/bildirim/?${qs}`);
    };

    useEffect(() => {
        if (typeof window === 'undefined') return;
        const sp = new URLSearchParams(window.location.search);
        if (sp.get('yeni') === '1') {
            setKayitModal('yeni');
            sp.delete('yeni');
            window.history.replaceState({}, '', window.location.pathname + (sp.toString() ? `?${sp}` : ''));
        }
    }, []);

    return (
        <AppLayout title="Yenileme Takibi — Tablo" actions={
            <>
                <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="yenileme" />
                <div className="flex-1" />
                <GorunumToggle aktif="tablo" />
                {can('yenileme.ekle') && (
                    <button type="button" title="Yeni Yenileme" onClick={() => setKayitModal('yeni')}
                        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="Yenileme Takibi — Tablo" />

            <FilterDrawer open={drawerAcik} onClose={() => setDrawerAcik(false)}
                onApply={uygula} onClear={temizle} aktifFiltreSayisi={aktifFiltreSayisi}
                mobilArama={{ value: arama, onChange: setArama, placeholder: 'Ara — kod/müşteri/başlık...' }}>
                <FilterSection baslik="Durum" ikon={CircleDot}>
                    <Select multiple value={durumId} onChange={(v) => setDurumId((v as (string|number)[]).map(Number))}
                        options={durumlar.map((d) => ({ value: d.id, label: d.ad, icon: <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: d.renk }} /> }))}
                        placeholder="Durum seçiniz..." />
                </FilterSection>
                <FilterSection baslik="Yenileme Türü" ikon={RefreshCw}>
                    <Select multiple value={turId} onChange={(v) => setTurId((v as (string|number)[]).map(Number))}
                        options={turler.map((t) => ({ value: t.id, label: t.ad, icon: <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: t.renk }} /> }))}
                        placeholder="Tür seçiniz..." searchable />
                </FilterSection>
                <FilterSection baslik="KDV Oranı" ikon={CircleDot}>
                    <Select multiple value={kdvOraniId} onChange={(v) => setKdvOraniId((v as (string|number)[]).map(Number))}
                        options={kdvOranlari.map((k) => ({ value: k.id, label: k.ad, description: k.varsayilan ? 'Varsayılan' : undefined }))}
                        placeholder="KDV oranı..." searchable />
                </FilterSection>
                <FilterSection baslik="Müşteri" ikon={Contact}>
                    <AsyncSelect multiple endpoint="/api/ara/musteriler" value={musteriId}
                        onChange={(v) => setMusteriId((v as (string|number)[]).map(Number))}
                        cozumleEndpoint="/api/ara/cozumle" cozumleTip="musteri"
                        placeholder="Müşteri ara..." />
                </FilterSection>
                <FilterSection baslik="Kayıt Tarihi" ikon={Calendar}>
                    <DateTimeRangePicker baslangic={kayitDan} onBaslangicChange={setKayitDan}
                        bitis={kayitA} onBitisChange={setKayitA} placeholder="Kayıt Tarihi Aralığı" />
                </FilterSection>
                <FilterSection baslik="Yenileme Tarihi" ikon={Calendar}>
                    <DateTimeRangePicker baslangic={yenilemeDan} onBaslangicChange={setYenilemeDan}
                        bitis={yenilemeA} onBitisChange={setYenilemeA} placeholder="Yenileme Tarihi Aralığı" />
                </FilterSection>
                {/* Para birimi artık satır bazlı — filtre satırlar üzerinden çalışır */}
                {pbSecenekleri.length > 0 && (
                    <FilterSection baslik="Para Birimi" ikon={Briefcase}>
                        <Select multiple value={paraBirimiFiltre}
                            onChange={(v) => setParaBirimiFiltre((v as (string|number)[]).map(String))}
                            options={pbSecenekleri}
                            placeholder="Para birimi seçiniz..." searchable />
                    </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-[1000px]">
                        <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>
                                <th className="w-10 px-3 py-3">
                                    <IndeterminateCheckbox checked={bulk.allSelected} indeterminate={bulk.someSelected} onChange={bulk.toggleAll} />
                                </th>
                                <SortableTh kolon="baslik" aktif={aktifSort} dir={aktifDir} onSort={onSort}>Başlık</SortableTh>
                                <th className="px-4 py-3 text-left">Müşteri</th>
                                <th className="px-4 py-3 text-left">Türler</th>
                                <th className="px-4 py-3 text-left">Durum</th>
                                <SortableTh kolon="yenileme_tarihi" aktif={aktifSort} dir={aktifDir} onSort={onSort}>Yenileme</SortableTh>
                                <th className="px-4 py-3 text-center">Takip</th>
                                <th className="px-4 py-3 text-right">Toplam</th>
                                <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={9} className="px-4 py-3"><div className="h-4 w-full animate-pulse rounded bg-slate-100" /></td></tr>
                                ))
                            ) : gosterilen.length === 0 ? (
                                <tr><td colSpan={9} className="px-4 py-12 text-center text-slate-500">Kayıt bulunamadı.</td></tr>
                            ) : gosterilen.map((k) => (
                                <tr key={k.id} className={`hover:bg-slate-50 ${bulk.isSelected(k.id) ? 'bg-blue-50/40' : ''}`}>
                                    <td className="px-3 py-3">
                                        <IndeterminateCheckbox checked={bulk.isSelected(k.id)} onChange={() => bulk.toggle(k.id)} />
                                    </td>
                                    <td className="px-4 py-3">
                                        <button type="button" onClick={() => ac(k.id)}
                                            className="text-left font-medium text-slate-900 hover:text-blue-700">
                                            {k.baslik ?? '—'}
                                        </button>
                                    </td>
                                    <td className="px-4 py-3 text-slate-700">
                                        {k.musteri?.unvan ?? '-'}
                                    </td>
                                    <td className="px-4 py-3">
                                        <div className="flex flex-wrap gap-1">
                                            {k.turler.slice(0, 3).map((t) => (
                                                <span key={t.id} className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium"
                                                    style={{ backgroundColor: `${t.renk}15`, color: t.renk }}>
                                                    <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: t.renk }} />
                                                    {t.ad}
                                                </span>
                                            ))}
                                            {k.turler.length > 3 && <span className="text-[10px] text-slate-400">+{k.turler.length - 3}</span>}
                                        </div>
                                    </td>
                                    <td className="px-4 py-3">
                                        {k.durum ? (
                                            <span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold"
                                                style={{ backgroundColor: `${k.durum.renk}20`, color: k.durum.renk }}>
                                                <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: k.durum.renk }} />
                                                {k.durum.ad}
                                            </span>
                                        ) : <span className="text-slate-400">-</span>}
                                    </td>
                                    <td className="px-4 py-3 font-mono text-xs text-slate-700">{k.yenileme_tarihi ? tarihFormat(k.yenileme_tarihi) : '-'}</td>
                                    <td className="px-4 py-3 text-center text-xs text-slate-600">{k.takip_ay} ay</td>
                                    <td className="px-4 py-3 text-right font-mono text-sm font-semibold text-emerald-700">
                                        {typeof k.satir_toplam === 'number' && k.satir_toplam > 0
                                            ? `${k.satir_toplam.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${paraSembol}`
                                            : '-'}
                                    </td>
                                    <td className="px-4 py-3 text-right">
                                        <div className="inline-flex items-center gap-1">
                                            {can('yenileme.duzenle') && (
                                                <button type="button" onClick={() => ac(k.id)}
                                                    title="Düzenle"
                                                    className="inline-flex rounded-md p-1.5 text-slate-600 hover:bg-blue-50 hover:text-blue-700">
                                                    <Edit2 className="h-4 w-4" />
                                                </button>
                                            )}
                                            <Link href={`/yenilemeler/${k.id}/loglar/`}
                                                title="Bilgilendirme & Değişiklik Logları"
                                                className="inline-flex rounded-md p-1.5 text-slate-600 hover:bg-indigo-50 hover:text-indigo-700">
                                                <History className="h-4 w-4" />
                                            </Link>
                                            {can('yenileme.sil') && (
                                                <button type="button" onClick={() => sil(k)}
                                                    title="Sil"
                                                    className="inline-flex rounded-md p-1.5 text-slate-600 hover:bg-rose-50 hover:text-rose-700">
                                                    <Trash2 className="h-4 w-4" />
                                                </button>
                                            )}
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>

                {!yukleniyor && kayitlar.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">{kayitlar.from}-{kayitlar.to}</span> / {kayitlar.total}
                        </div>
                        <Pagination paginator={kayitlar} />
                    </div>
                )}
            </div>

            <YenilemeFormModal mod={kayitModal} onClose={() => setKayitModal(null)}
                onSuccess={() => router.reload({ only: ['kayitlar'] })} />

            <BulkActionBar count={bulk.count} onClear={bulk.clear}>
                    <CariyeEkleButonu
                        tip="yenileme"
                        ids={bulk.ids}
                        onBitti={() => bulk.clear()}
                    />
                {can('yenileme.bildirim') && (
                    <button type="button" onClick={topluBildir}
                        className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
                        <Bell className="h-4 w-4" /> Bilgilendir
                    </button>
                )}
                {(can('yenileme.toplu_sil') || can('yenileme.sil')) && (
                    <button type="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" /> Seçilenleri Sil
                    </button>
                )}
            </BulkActionBar>
        </AppLayout>
    );
}