import AppLayout from '@/Layouts/AppLayout';
import ModulBilgi from '@/Components/ModulBilgi';
import DateTimeRangePicker from '@/Components/DateTimeRangePicker';
import FilterDrawer, { FilterSection } from '@/Components/FilterDrawer';
import Pagination from '@/Components/Pagination';
import Link from '@/Components/Link';
import { Head, router } from '@inertiajs/react';
import {
    AlertCircle, ArrowLeft, Calendar, CheckCircle2, ChevronDown, ChevronRight, Edit3, Filter, History, Loader2,
    Mail, MessageSquareText, Phone, PlusCircle, Search, Tag, Trash2, X, XCircle,
} from 'lucide-react';
import { useState } from 'react';

interface Log {
    id: number;
    tip: string;
    baslik?: string | null;
    aciklama?: string | null;
    yetkili_ad?: string | null;
    yetkili_email?: string | null;
    yetkili_telefon?: string | null;
    mail_konu?: string | null;
    mail_govde?: string | null;
    mail_durum?: string | null;
    sms_mesaj?: string | null;
    sms_durum?: string | null;
    onceki_deger?: Record<string, any> | null;
    yeni_deger?: Record<string, any> | null;
    degisen_alanlar?: string[] | null;
    onay_durumu?: string | null;
    onay_veren_ad?: string | null;
    onay_veren_email?: string | null;
    onay_veren_telefon?: string | null;
    onay_tarihi?: string | null;
    onay_ip?: string | null;
    user_ad?: string | null;
    created_at: string;
}

interface Paginator<T> {
    data: T[];
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
    from: number | null;
    to: number | null;
    links: Array<{ url: string | null; label: string; active: boolean }>;
}

interface Props {
    kayit: {
        id: number;
        baslik?: string | null;
        musteri?: { unvan: string } | null;
        durum?: { ad: string; renk: string } | null;
    };
    loglar: Paginator<Log>;
    filtreler: { tip: string[]; arama: string; tarih_dan: string; tarih_a: string };
}

const TIP_META: Record<string, { ad: string; renk: string; bg: string; ikon: any }> = {
    olusturma:       { ad: 'Kayıt Oluşturuldu', renk: 'text-emerald-700', bg: 'bg-emerald-100',  ikon: PlusCircle },
    guncelleme:      { ad: 'Güncelleme',         renk: 'text-amber-700',  bg: 'bg-amber-100',    ikon: Edit3 },
    silme:           { ad: 'Silindi',            renk: 'text-rose-700',   bg: 'bg-rose-100',     ikon: Trash2 },
    bildirim:        { ad: 'Bildirim Gönderimi', renk: 'text-blue-700',   bg: 'bg-blue-100',     ikon: Mail },
    mail_gonderim:   { ad: 'E-Posta Gönderildi', renk: 'text-blue-700',   bg: 'bg-blue-100',     ikon: Mail },
    sms_gonderim:    { ad: 'SMS Gönderildi',     renk: 'text-emerald-700',bg: 'bg-emerald-100',  ikon: MessageSquareText },
    onay_verildi:    { ad: 'Onay Verildi',       renk: 'text-emerald-700',bg: 'bg-emerald-100',  ikon: CheckCircle2 },
    onay_reddedildi: { ad: 'Onay Reddedildi',    renk: 'text-rose-700',   bg: 'bg-rose-100',     ikon: XCircle },
    bildirim_acildi: { ad: 'Bildirim Açıldı',    renk: 'text-slate-700',  bg: 'bg-slate-100',    ikon: AlertCircle },
};

const DURUM_META: Record<string, { ad: string; renk: string }> = {
    gonderildi:  { ad: '✓ Gönderildi',  renk: 'bg-emerald-100 text-emerald-700' },
    eposta_yok:  { ad: '· E-posta Yok', renk: 'bg-slate-100 text-slate-600' },
    telefon_yok: { ad: '· Telefon Yok', renk: 'bg-slate-100 text-slate-600' },
    hata:        { ad: '✗ Hata',         renk: 'bg-rose-100 text-rose-700' },
};

const TIP_FILTRELERI = [
    { kod: 'olusturma',       ad: 'Oluşturma' },
    { kod: 'guncelleme',      ad: 'Güncelleme' },
    { kod: 'silme',           ad: 'Silme' },
    { kod: 'bildirim',        ad: 'Bildirim' },
    { kod: 'mail_gonderim',   ad: 'E-Posta (eski)' },
    { kod: 'sms_gonderim',    ad: 'SMS (eski)' },
    { kod: 'onay_verildi',    ad: 'Onay Verildi' },
    { kod: 'onay_reddedildi', ad: 'Onay Reddedildi' },
    { kod: 'bildirim_acildi', ad: 'Sayfa Açıldı' },
];

function tarihFormat(iso: string): string {
    try { return new Date(iso).toLocaleString('tr-TR'); } catch { return iso; }
}

export default function YenilemeLoglar({ kayit, loglar, filtreler }: Props) {
    const [arama, setArama] = useState(filtreler.arama || '');
    const [tipler, setTipler] = useState<string[]>(filtreler.tip || []);
    const [tarihDan, setTarihDan] = useState(filtreler.tarih_dan || '');
    const [tarihA, setTarihA] = useState(filtreler.tarih_a || '');
    const [acik, setAcik] = useState<Set<number>>(new Set());
    const [drawerAcik, setDrawerAcik] = useState(false);

    const filtreUygula = () => {
        router.get(`/yenilemeler/${kayit.id}/loglar/`, {
            arama: arama || undefined,
            tip: tipler.length ? tipler : undefined,
            tarih_dan: tarihDan || undefined,
            tarih_a: tarihA || undefined,
        }, { preserveState: true, replace: true });
        setDrawerAcik(false);
    };

    const temizle = () => {
        setArama(''); setTipler([]); setTarihDan(''); setTarihA('');
        router.get(`/yenilemeler/${kayit.id}/loglar/`);
        setDrawerAcik(false);
    };

    const tipToggle = (kod: string) => {
        setTipler((p) => p.includes(kod) ? p.filter((x) => x !== kod) : [...p, kod]);
    };

    const toggle = (id: number) => {
        setAcik((p) => {
            const yeni = new Set(p);
            if (yeni.has(id)) yeni.delete(id); else yeni.add(id);
            return yeni;
        });
    };

    const aktifFiltreSayisi =
        (arama ? 1 : 0) +
        (tipler.length ? 1 : 0) +
        (tarihDan || tarihA ? 1 : 0);

    return (
        <AppLayout title={`Yenileme Logları — ${kayit.baslik ?? '#' + kayit.id}`} 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_log" />
                <Link href="/yenilemeler/tablo/"
                    className="inline-flex h-10 items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-3 text-sm font-medium text-slate-700 hover:bg-slate-50">
                    <ArrowLeft className="h-4 w-4" /> <span className="hidden md:inline">Tabloya Dön</span>
                </Link>
            </>
        }>
            <Head title={`Loglar — ${kayit.baslik ?? kayit.id}`} />

            <FilterDrawer open={drawerAcik} onClose={() => setDrawerAcik(false)}
                onApply={filtreUygula} onClear={temizle} aktifFiltreSayisi={aktifFiltreSayisi}
                mobilArama={{ value: arama, onChange: setArama, placeholder: 'Başlık / açıklama / yetkili / e-posta / telefon...' }}>
                <FilterSection baslik="Log Tipi" ikon={Tag}>
                    <div className="flex flex-wrap gap-1.5">
                        {TIP_FILTRELERI.map((t) => {
                            const aktifMi = tipler.includes(t.kod);
                            const meta = TIP_META[t.kod];
                            return (
                                <button key={t.kod} type="button" onClick={() => tipToggle(t.kod)}
                                    className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium transition ${
                                        aktifMi
                                            ? `${meta?.bg ?? 'bg-blue-100'} ${meta?.renk ?? 'text-blue-700'} ring-2 ring-offset-1 ring-current`
                                            : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                                    }`}>
                                    {t.ad}
                                </button>
                            );
                        })}
                    </div>
                </FilterSection>
                <FilterSection baslik="Tarih Aralığı" ikon={Calendar}>
                    <DateTimeRangePicker
                        baslangic={tarihDan}
                        onBaslangicChange={setTarihDan}
                        bitis={tarihA}
                        onBitisChange={setTarihA}
                        placeholder="Tarih aralığı seçin..."
                    />
                </FilterSection>
            </FilterDrawer>

            {/* LOG LİSTESİ — Sticky layout: pagination sabit, akordiyonlar scroll */}
            <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-y-auto">
                {loglar.data.length === 0 ? (
                    <div className="py-16 text-center">
                        <History className="mx-auto mb-2 h-12 w-12 text-slate-300" />
                        <p className="text-sm text-slate-500">Bu filtre için log kaydı yok.</p>
                    </div>
                ) : (
                    <div className="divide-y divide-slate-100">
                        {loglar.data.map((l) => {
                            const meta = TIP_META[l.tip] ?? { ad: l.tip, renk: 'text-slate-700', bg: 'bg-slate-100', ikon: History };
                            const Ikon = meta.ikon;
                            const acikMi = acik.has(l.id);
                            return (
                                <div key={l.id}>
                                    <button type="button" onClick={() => toggle(l.id)}
                                        className="flex w-full items-start gap-3 px-4 py-3 text-left transition hover:bg-slate-50">
                                        <div className={`flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full ${meta.bg}`}>
                                            <Ikon className={`h-4 w-4 ${meta.renk}`} />
                                        </div>
                                        <div className="min-w-0 flex-1">
                                            <div className="flex flex-wrap items-center gap-2">
                                                <span className={`text-xs font-semibold uppercase tracking-wider ${meta.renk}`}>{meta.ad}</span>
                                                <span className="text-[10px] text-slate-400">·</span>
                                                <span className="font-mono text-[10px] text-slate-500">{tarihFormat(l.created_at)}</span>
                                                {l.user_ad && (
                                                    <>
                                                        <span className="text-[10px] text-slate-400">·</span>
                                                        <span className="text-[10px] text-slate-500">İşlem: <strong>{l.user_ad}</strong></span>
                                                    </>
                                                )}
                                            </div>
                                            <div className="mt-0.5 text-sm font-medium text-slate-900">{l.baslik ?? '-'}</div>
                                            {l.yetkili_ad && (
                                                <div className="mt-0.5 text-xs text-slate-600">
                                                    Yetkili: <span className="font-medium">{l.yetkili_ad}</span>
                                                    {l.yetkili_email && <span className="ml-2 text-slate-500">· {l.yetkili_email}</span>}
                                                    {l.yetkili_telefon && <span className="ml-2 text-slate-500">· {l.yetkili_telefon}</span>}
                                                </div>
                                            )}
                                            {l.aciklama && !l.mail_konu && !l.sms_mesaj && (
                                                <div className="mt-0.5 text-xs text-slate-600">{l.aciklama}</div>
                                            )}
                                        </div>
                                        {acikMi ? <ChevronDown className="h-5 w-5 flex-shrink-0 text-slate-400" /> : <ChevronRight className="h-5 w-5 flex-shrink-0 text-slate-400" />}
                                    </button>

                                    {acikMi && (
                                        <div className="space-y-3 border-t border-slate-100 bg-slate-50 px-5 py-4 text-xs">
                                            {/* Yetkili iletişim snapshot */}
                                            {(l.yetkili_email || l.yetkili_telefon) && (
                                                <div className="rounded-lg border border-slate-200 bg-white p-3">
                                                    <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-slate-500">İletişim Bilgileri (gönderim anındaki snapshot)</div>
                                                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
                                                        <div className="flex items-center gap-1.5">
                                                            <span className="text-slate-500">Ad:</span>
                                                            <span className="font-medium text-slate-900">{l.yetkili_ad ?? '-'}</span>
                                                        </div>
                                                        {l.yetkili_email && (
                                                            <div className="flex items-center gap-1.5 text-slate-700">
                                                                <Mail className="h-3 w-3 text-slate-400" /> <span className="font-mono">{l.yetkili_email}</span>
                                                            </div>
                                                        )}
                                                        {l.yetkili_telefon && (
                                                            <div className="flex items-center gap-1.5 text-slate-700">
                                                                <Phone className="h-3 w-3 text-slate-400" /> <span className="font-mono">{l.yetkili_telefon}</span>
                                                            </div>
                                                        )}
                                                    </div>
                                                </div>
                                            )}

                                            {/* Mail içeriği */}
                                            {l.mail_konu && (
                                                <div className="rounded-lg border border-blue-200 bg-blue-50/50 p-3">
                                                    <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-blue-700">Gönderilen E-Posta</div>
                                                    <div className="mb-2 text-slate-700"><strong>Konu:</strong> {l.mail_konu}</div>
                                                    {l.mail_govde && (
                                                        <div className="prose prose-sm max-w-none rounded border border-slate-200 bg-white p-3"
                                                             dangerouslySetInnerHTML={{ __html: l.mail_govde }} />
                                                    )}
                                                </div>
                                            )}

                                            {/* SMS içeriği */}
                                            {l.sms_mesaj && (
                                                <div className="rounded-lg border border-emerald-200 bg-emerald-50/50 p-3">
                                                    <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-emerald-700">Gönderilen SMS</div>
                                                    <div className="whitespace-pre-wrap rounded border border-slate-200 bg-white p-3 font-mono text-slate-700">{l.sms_mesaj}</div>
                                                </div>
                                            )}

                                            {/* Onay/Red bilgisi */}
                                            {(l.onay_durumu === 'onaylandi' || l.onay_durumu === 'reddedildi') && l.tip !== 'mail_gonderim' && l.tip !== 'sms_gonderim' && (
                                                <div className={`rounded-lg border p-3 ${l.onay_durumu === 'onaylandi' ? 'border-emerald-200 bg-emerald-50/50' : 'border-rose-200 bg-rose-50/50'}`}>
                                                    <div className={`mb-2 text-[10px] font-semibold uppercase tracking-wider ${l.onay_durumu === 'onaylandi' ? 'text-emerald-700' : 'text-rose-700'}`}>
                                                        Karar Detayı
                                                    </div>
                                                    <div className="grid grid-cols-1 gap-1 text-slate-700 sm:grid-cols-2">
                                                        {l.onay_veren_ad     && <div>Karar Veren: <strong>{l.onay_veren_ad}</strong></div>}
                                                        {l.onay_veren_email  && <div>E-Posta: <span className="font-mono">{l.onay_veren_email}</span></div>}
                                                        {l.onay_veren_telefon&& <div>Telefon: <span className="font-mono">{l.onay_veren_telefon}</span></div>}
                                                        {l.onay_tarihi       && <div>Karar Tarihi: <span className="font-mono">{tarihFormat(l.onay_tarihi)}</span></div>}
                                                        {l.onay_ip           && <div>IP Adresi: <span className="font-mono">{l.onay_ip}</span></div>}
                                                    </div>
                                                </div>
                                            )}

                                            {/* Before/After */}
                                            {(l.onceki_deger || l.yeni_deger) && (
                                                <div className="rounded-lg border border-amber-200 bg-amber-50/50 p-3">
                                                    <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-amber-700">Değişiklik Detayı (önce/sonra)</div>
                                                    <div className="space-y-1.5">
                                                        {(l.degisen_alanlar ?? Object.keys({ ...(l.yeni_deger ?? {}), ...(l.onceki_deger ?? {}) })).map((alan) => (
                                                            <div key={alan} className="rounded border border-slate-200 bg-white p-2">
                                                                <div className="mb-1 text-[10px] font-bold uppercase tracking-wider text-slate-600">{alan}</div>
                                                                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                                                                    <div>
                                                                        <span className="text-[10px] font-semibold text-rose-700">ÖNCE:</span>
                                                                        <div className="font-mono text-[11px] text-slate-700">{JSON.stringify(l.onceki_deger?.[alan] ?? null)}</div>
                                                                    </div>
                                                                    <div>
                                                                        <span className="text-[10px] font-semibold text-emerald-700">SONRA:</span>
                                                                        <div className="font-mono text-[11px] text-slate-700">{JSON.stringify(l.yeni_deger?.[alan] ?? null)}</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        ))}
                                                    </div>
                                                </div>
                                            )}

                                            {/* Mail / SMS gönderim durumu (BİRLEŞİK bildirim tipi için) */}
                                            {(l.tip === 'bildirim' || l.tip === 'mail_gonderim' || l.tip === 'sms_gonderim') && (
                                                <div className="rounded-lg border border-slate-200 bg-white p-3">
                                                    <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-slate-500">Gönderim Durumu</div>
                                                    <div className="flex flex-wrap items-center gap-2">
                                                        {l.mail_durum && DURUM_META[l.mail_durum] && (
                                                            <span className={`inline-flex items-center gap-1 rounded px-2 py-0.5 text-[10px] font-bold ${DURUM_META[l.mail_durum].renk}`}>
                                                                <Mail className="h-3 w-3" /> {DURUM_META[l.mail_durum].ad}
                                                            </span>
                                                        )}
                                                        {l.sms_durum && DURUM_META[l.sms_durum] && (
                                                            <span className={`inline-flex items-center gap-1 rounded px-2 py-0.5 text-[10px] font-bold ${DURUM_META[l.sms_durum].renk}`}>
                                                                <MessageSquareText className="h-3 w-3" /> {DURUM_META[l.sms_durum].ad}
                                                            </span>
                                                        )}
                                                        {l.onay_durumu === 'beklemede' && <span className="rounded bg-amber-100 px-2 py-0.5 text-[10px] font-bold text-amber-700">⏳ KARAR BEKLİYOR</span>}
                                                        {l.onay_durumu === 'onaylandi' && <span className="rounded bg-emerald-100 px-2 py-0.5 text-[10px] font-bold text-emerald-700">✓ ONAYLANDI</span>}
                                                        {l.onay_durumu === 'reddedildi' && <span className="rounded bg-rose-100 px-2 py-0.5 text-[10px] font-bold text-rose-700">✗ REDDEDİLDİ</span>}
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    )}
                                </div>
                            );
                        })}
                    </div>
                )}
                </div>

                {/* PAGINATION — sticky alt */}
                {loglar.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">{loglar.from}-{loglar.to}</span> / {loglar.total}
                        </div>
                        <Pagination paginator={loglar} />
                    </div>
                )}
            </div>
        </AppLayout>
    );
}