import { paraFormat } from '@/lib/format';
import {
    Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis,
} from 'recharts';
import { ArrowDownRight, ArrowRight, ArrowUpRight, CalendarDays, Sigma, TrendingUp } from 'lucide-react';

export interface Degisim {
    simdi: number;
    onceki: number;
    fark: number;
    /** Önceki dönem 0 ise null gelir — "%∞ artış" demek yanıltıcı olurdu. */
    yuzde: number | null;
    yon: 'artis' | 'azalis' | 'sabit';
}

export interface AnalizPaketi {
    donem: {
        baslangic: string; bitis: string; gun_sayisi: number;
        onceki_baslangic: string; onceki_bitis: string;
    };
    karsilastirma: { adet: Degisim; tutar: Degisim | null };
    gunluk_seri: { gun: string; adet: number; tutar: number }[];
    kumulatif: { gun: string; adet: number; tutar: number }[];
    yogunluk: {
        toplam_adet: number; gunluk_ortalama: number; dolu_gun: number; bos_gun: number;
        en_yogun_gun: { gun: string; adet: number } | null;
        toplam_tutar?: number; gunluk_ort_tutar?: number;
    };
    gun_dagilimi: { gun: string; adet: number; tutar: number }[];
    istatistik: {
        adet: number; toplam: number; ortalama: number;
        medyan: number; en_kucuk: number; en_buyuk: number;
    } | null;
}

/** Değişim rozeti — yön ve yüzde. */
function DegisimRozeti({ d, para = false }: { d: Degisim; para?: boolean }) {
    const renk = d.yon === 'artis' ? 'text-emerald-700 bg-emerald-50'
        : d.yon === 'azalis' ? 'text-rose-700 bg-rose-50'
        : 'text-slate-600 bg-slate-100';
    const Ikon = d.yon === 'artis' ? ArrowUpRight : d.yon === 'azalis' ? ArrowDownRight : ArrowRight;

    return (
        <span className={`inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-semibold ${renk}`}>
            <Ikon className="h-3 w-3" />
            {para ? paraFormat(Math.abs(d.fark)) : Math.abs(d.fark)}
            {d.yuzde !== null ? ` (%${Math.abs(d.yuzde)})` : ' (yeni)'}
        </span>
    );
}

function Kutu({ etiket, deger, alt }: { etiket: string; deger: string; alt?: React.ReactNode }) {
    return (
        <div className="rounded-lg border border-slate-200 bg-white p-3">
            <div className="text-[11px] font-medium uppercase tracking-wide text-slate-500">{etiket}</div>
            <div className="mt-0.5 text-lg font-bold text-slate-900">{deger}</div>
            {alt && <div className="mt-1">{alt}</div>}
        </div>
    );
}

/**
 * Raporlara ortak DERİNLİK paneli.
 *
 * Sunucudaki App\Support\RaporAnaliz çıktısını çizer: önceki dönemle
 * karşılaştırma, günlük ve kümülatif seri, hafta günü dağılımı, yoğunluk
 * metrikleri ve tutar istatistikleri. Tüm raporlarda aynı bileşen kullanılır ki
 * okuma alışkanlığı bozulmasın.
 */
export default function RaporAnalizPaneli({ analiz, tutarVar = false }: { analiz?: AnalizPaketi | null; tutarVar?: boolean }) {
    if (!analiz) return null;

    const { karsilastirma: k, yogunluk: y, istatistik: i, donem } = analiz;
    const tutarAktif = tutarVar && !!k.tutar;
    const donemEtiketi = `${donem.baslangic} – ${donem.bitis} · ${donem.gun_sayisi} gün`;

    return (
        /* mb-6: kardes bloklar mb-4 kullaniyor; panel daha yogun oldugu icin bir
           kademe fazlasi veriliyor ki sonraki blok yapismasin.
           Cerceve + baslik: alt bloklar (karsilastirma/yogunluk/istatistik/grafik)
           dagilmis gorunmesin, tek bir "Donem Analizi" govdesi gibi okunsun. */
        <section className="yazdirma-butun mb-6 rounded-xl border border-slate-200 bg-slate-50/60 p-4">
            <h2 className="mb-3 flex items-center gap-1.5 text-sm font-bold text-slate-900">
                <TrendingUp className="h-4 w-4 text-blue-600" />
                Dönem Analizi
                <span className="ml-1 text-[11px] font-normal text-slate-500">
                    {donemEtiketi}
                </span>
            </h2>

            <div className="space-y-5">
            {/* ── Önceki dönemle karşılaştırma ── */}
            <div>
                <h3 className="mb-2 flex items-center gap-1.5 text-sm font-semibold text-slate-800">
                    <TrendingUp className="h-4 w-4 text-blue-600" />
                    Önceki Dönemle Karşılaştırma
                    <span className="ml-1 text-[11px] font-normal text-slate-500">
                        ({donem.onceki_baslangic} – {donem.onceki_bitis}, {donem.gun_sayisi} gün)
                    </span>
                </h3>
                <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
                    <Kutu etiket="Kayıt" deger={String(k.adet.simdi)} alt={<DegisimRozeti d={k.adet} />} />
                    <Kutu etiket="Önceki dönem" deger={String(k.adet.onceki)} />
                    {tutarAktif && (
                        <>
                            <Kutu etiket="Tutar" deger={paraFormat(k.tutar!.simdi)} alt={<DegisimRozeti d={k.tutar!} para />} />
                            <Kutu etiket="Önceki tutar" deger={paraFormat(k.tutar!.onceki)} />
                        </>
                    )}
                </div>
            </div>

            {/* ── Yoğunluk ── */}
            <div>
                <h3 className="mb-2 flex items-center gap-1.5 text-sm font-semibold text-slate-800">
                    <CalendarDays className="h-4 w-4 text-amber-600" /> Yoğunluk
                </h3>
                <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
                    <Kutu etiket="Günlük ortalama" deger={String(y.gunluk_ortalama)} />
                    <Kutu etiket="Kayıt olan gün" deger={`${y.dolu_gun} / ${donem.gun_sayisi}`} />
                    <Kutu etiket="Boş gün" deger={String(y.bos_gun)} />
                    <Kutu
                        etiket="En yoğun gün"
                        deger={y.en_yogun_gun ? y.en_yogun_gun.gun : '—'}
                        alt={y.en_yogun_gun && (
                            <span className="text-[11px] text-slate-500">{y.en_yogun_gun.adet} kayıt</span>
                        )}
                    />
                </div>
            </div>

            {/* ── Tutar istatistikleri ── */}
            {i && i.adet > 0 && (
                <div>
                    <h3 className="mb-2 flex items-center gap-1.5 text-sm font-semibold text-slate-800">
                        <Sigma className="h-4 w-4 text-violet-600" /> Tutar İstatistikleri
                    </h3>
                    <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
                        <Kutu etiket="Toplam" deger={paraFormat(i.toplam)} />
                        <Kutu etiket="Ortalama" deger={paraFormat(i.ortalama)} />
                        <Kutu etiket="Medyan" deger={paraFormat(i.medyan)} />
                        <Kutu etiket="En düşük" deger={paraFormat(i.en_kucuk)} />
                        <Kutu etiket="En yüksek" deger={paraFormat(i.en_buyuk)} />
                    </div>
                </div>
            )}

            {/* ── Günlük + kümülatif seri ── */}
            <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
                <div className="rounded-lg border border-slate-200 bg-white p-3">
                    <h4 className="mb-2 text-xs font-semibold text-slate-700">Günlük Dağılım</h4>
                    <ResponsiveContainer width="100%" height={180}>
                        <BarChart data={analiz.gunluk_seri}>
                            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                            <XAxis dataKey="gun" tick={{ fontSize: 10 }} interval="preserveStartEnd" />
                            <YAxis tick={{ fontSize: 10 }} allowDecimals={false} />
                            <Tooltip />
                            <Bar dataKey="adet" name="Kayıt" fill="#3b82f6" radius={[2, 2, 0, 0]} />
                        </BarChart>
                    </ResponsiveContainer>
                </div>

                <div className="rounded-lg border border-slate-200 bg-white p-3">
                    <h4 className="mb-2 text-xs font-semibold text-slate-700">Kümülatif (dönem içi birikim)</h4>
                    <ResponsiveContainer width="100%" height={180}>
                        <AreaChart data={analiz.kumulatif}>
                            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                            <XAxis dataKey="gun" tick={{ fontSize: 10 }} interval="preserveStartEnd" />
                            <YAxis tick={{ fontSize: 10 }} allowDecimals={false} />
                            <Tooltip />
                            <Area type="monotone" dataKey={tutarAktif ? 'tutar' : 'adet'}
                                name={tutarAktif ? 'Tutar' : 'Kayıt'}
                                stroke="#10b981" fill="#10b98122" />
                        </AreaChart>
                    </ResponsiveContainer>
                </div>
            </div>

            {/* ── Hafta günü dağılımı ── */}
            <div className="rounded-lg border border-slate-200 bg-white p-3">
                <h4 className="mb-2 text-xs font-semibold text-slate-700">Hafta Günü Dağılımı</h4>
                <ResponsiveContainer width="100%" height={170}>
                    <BarChart data={analiz.gun_dagilimi}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                        <XAxis dataKey="gun" tick={{ fontSize: 10 }} />
                        <YAxis tick={{ fontSize: 10 }} allowDecimals={false} />
                        <Tooltip />
                        <Bar dataKey="adet" name="Kayıt" fill="#8b5cf6" radius={[2, 2, 0, 0]} />
                    </BarChart>
                </ResponsiveContainer>
            </div>
            </div>
        </section>
    );
}