import { useEffect, useState } from 'react';
import { ActivitySquare, ArrowRight, Loader2, Pencil, Plus, Trash2, RotateCcw, Clock, User as UserIcon } from 'lucide-react';

interface Log {
    id: number;
    user_id: number | null;
    user_ad: string | null;
    tip: 'olusturma' | 'guncelleme' | 'silme' | 'eski_haline';
    baslik: string | null;
    aciklama: string | null;
    onceki_deger: Record<string, any> | null;
    yeni_deger: Record<string, any> | null;
    degisen_alanlar: string[] | null;
    created_at: string;
}

interface Props {
    /** modul_kod — örn 'cari', 'urun', 'proje' */
    modulKod: string;
    /** Loglanan kaydın id'si */
    kayitId: number | null | undefined;
}

const TIP_TASARIM: Record<Log['tip'], { etiket: string; renk: string; bg: string; Ikon: any }> = {
    olusturma:   { etiket: 'Oluşturuldu',         renk: 'text-emerald-700', bg: 'bg-emerald-50 border-emerald-200', Ikon: Plus },
    guncelleme:  { etiket: 'Güncellendi',         renk: 'text-blue-700',    bg: 'bg-blue-50 border-blue-200',       Ikon: Pencil },
    silme:       { etiket: 'Silindi',             renk: 'text-rose-700',    bg: 'bg-rose-50 border-rose-200',       Ikon: Trash2 },
    eski_haline: { etiket: 'Eski haline getirildi', renk: 'text-amber-700', bg: 'bg-amber-50 border-amber-200',     Ikon: RotateCcw },
};

function tarihFormat(s: string): string {
    try {
        const d = new Date(s);
        return d.toLocaleDateString('tr-TR') + ' ' + d.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });
    } catch { return s; }
}

export default function KayitLoglari({ modulKod, kayitId }: Props) {
    const [loglar, setLoglar] = useState<Log[] | null>(null);
    const [yukleniyor, setYukleniyor] = useState(false);
    const [hata, setHata] = useState<string | null>(null);

    useEffect(() => {
        if (!kayitId) { setLoglar([]); return; }
        const ctrl = new AbortController();
        setYukleniyor(true); setHata(null);
        fetch(`/api/aktivite-loglari?type=${encodeURIComponent(modulKod)}&id=${kayitId}`, {
            signal: ctrl.signal,
            credentials: 'same-origin',
            headers: { Accept: 'application/json' },
        })
            .then((r) => r.json())
            .then((d: { ok: boolean; loglar?: Log[]; mesaj?: string }) => {
                if (!d.ok) throw new Error(d.mesaj ?? 'Hata');
                setLoglar(d.loglar ?? []);
            })
            .catch((e) => { if (e.name !== 'AbortError') setHata(e.message); })
            .finally(() => setYukleniyor(false));
        return () => ctrl.abort();
    }, [modulKod, kayitId]);

    if (!kayitId) {
        return (
            <div className="flex flex-col items-center justify-center py-12 text-sm text-slate-400">
                <ActivitySquare className="mb-2 h-8 w-8 text-slate-300" />
                Kayıt kaydedildiğinde loglar burada görünür.
            </div>
        );
    }

    if (yukleniyor && loglar === null) {
        return (
            <div className="flex items-center justify-center py-12 text-sm text-slate-500">
                <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loglar yükleniyor...
            </div>
        );
    }

    if (hata) {
        return <div className="rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700">{hata}</div>;
    }

    if (!loglar || loglar.length === 0) {
        return (
            <div className="flex flex-col items-center justify-center py-12 text-sm text-slate-400">
                <ActivitySquare className="mb-2 h-8 w-8 text-slate-300" />
                Henüz log kaydı yok.
            </div>
        );
    }

    return (
        <div className="space-y-2">
            {loglar.map((log) => {
                const t = TIP_TASARIM[log.tip] ?? TIP_TASARIM.guncelleme;
                const Ikon = t.Ikon;
                return (
                    <div key={log.id} className={`rounded-lg border ${t.bg} p-3`}>
                        <div className="flex flex-wrap items-center gap-2">
                            <div className={`inline-flex h-6 w-6 items-center justify-center rounded-md bg-white shadow-sm ${t.renk}`}>
                                <Ikon className="h-3.5 w-3.5" />
                            </div>
                            <span className={`text-xs font-semibold ${t.renk}`}>{t.etiket}</span>
                            <span className="text-sm font-medium text-slate-900">{log.baslik}</span>
                            <div className="ml-auto flex items-center gap-3 text-xs text-slate-600">
                                {log.user_ad && (
                                    <span className="inline-flex items-center gap-1"><UserIcon className="h-3 w-3" /> {log.user_ad}</span>
                                )}
                                <span className="inline-flex items-center gap-1"><Clock className="h-3 w-3" /> {tarihFormat(log.created_at)}</span>
                            </div>
                        </div>

                        {log.tip === 'guncelleme' && log.onceki_deger && log.yeni_deger && (
                            <div className="mt-2 space-y-1 rounded-md border border-slate-200 bg-white/70 p-2">
                                {Object.entries(log.yeni_deger).map(([etiket, yeniDeger]) => {
                                    const onceki = log.onceki_deger?.[etiket];
                                    return (
                                        <div key={etiket} className="grid grid-cols-1 gap-1 text-xs sm:grid-cols-[120px_1fr] sm:items-center">
                                            <span className="font-medium text-slate-600">{etiket}:</span>
                                            <span className="flex flex-wrap items-center gap-1.5 text-slate-800">
                                                <span className="rounded bg-rose-50 px-1.5 py-0.5 text-rose-700 line-through">{String(onceki ?? '—')}</span>
                                                <ArrowRight className="h-3 w-3 text-slate-400" />
                                                <span className="rounded bg-emerald-50 px-1.5 py-0.5 font-medium text-emerald-700">{String(yeniDeger ?? '—')}</span>
                                            </span>
                                        </div>
                                    );
                                })}
                            </div>
                        )}

                        {log.tip === 'olusturma' && log.yeni_deger && (
                            <details className="mt-2">
                                <summary className="cursor-pointer text-xs text-slate-600 hover:text-slate-900">İlk değerler (detay)</summary>
                                <div className="mt-1 space-y-1 rounded-md border border-slate-200 bg-white/70 p-2">
                                    {Object.entries(log.yeni_deger).map(([etiket, deger]) => (
                                        <div key={etiket} className="grid grid-cols-1 gap-1 text-xs sm:grid-cols-[120px_1fr]">
                                            <span className="font-medium text-slate-600">{etiket}:</span>
                                            <span className="text-slate-800">{String(deger ?? '—')}</span>
                                        </div>
                                    ))}
                                </div>
                            </details>
                        )}
                    </div>
                );
            })}
        </div>
    );
}