import { LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';
import {
    Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Legend, Line, LineChart,
    Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis,
} from 'recharts';

/** Tema paleti — grafiklerde renk verilmemiş serilerde sırayla kullanılır. */
export const GRAFIK_RENK = [
    '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#a855f7',
    '#06b6d4', '#84cc16', '#ec4899', '#6366f1', '#f97316',
];

const eksenStil = { fontSize: 11, fill: '#64748b' };

/** Türkçe sayı biçimi — grafik eksenlerinde ve ipuçlarında. */
export function sayiKisa(n: number): string {
    const mutlak = Math.abs(n);
    if (mutlak >= 1_000_000) return (n / 1_000_000).toLocaleString('tr-TR', { maximumFractionDigits: 1 }) + 'M';
    if (mutlak >= 1_000) return (n / 1_000).toLocaleString('tr-TR', { maximumFractionDigits: 1 }) + 'B';
    return n.toLocaleString('tr-TR', { maximumFractionDigits: 2 });
}

function sayiTam(n: number): string {
    return n.toLocaleString('tr-TR', { maximumFractionDigits: 2 });
}

// ======================================================================
// KAPSAYICI
// ======================================================================

interface KutuProps {
    baslik: string;
    ikon?: LucideIcon;
    /** Sağ üstte gösterilecek ek bilgi/aksiyon */
    sag?: ReactNode;
    children: ReactNode;
    className?: string;
}

/** Grafik kartı — başlık + çerçeve. Tüm raporlarda aynı görünüm. */
export function GrafikKutu({ baslik, ikon: Icon, sag, children, className = '' }: KutuProps) {
    return (
        <div className={`rounded-xl border border-slate-200 bg-white p-4 shadow-sm sm:p-5 ${className}`}>
            <div className="mb-3 flex items-center justify-between gap-2">
                <div className="flex min-w-0 items-center gap-2">
                    {Icon && <Icon className="h-4 w-4 flex-shrink-0 text-slate-700" />}
                    <h3 className="truncate text-sm font-semibold text-slate-900">{baslik}</h3>
                </div>
                {sag && <div className="flex-shrink-0 text-xs text-slate-500">{sag}</div>}
            </div>
            {children}
        </div>
    );
}

function Bos({ mesaj = 'Bu aralıkta veri yok' }: { mesaj?: string }) {
    return (
        <div className="flex h-[220px] items-center justify-center rounded-lg border border-dashed border-slate-200 text-xs text-slate-500">
            {mesaj}
        </div>
    );
}

/** Recharts ipucu kutusu — Türkçe biçimli, tema uyumlu. */
function Ipucu({ active, payload, label, birim }: any) {
    if (!active || !payload?.length) return null;
    return (
        <div className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs shadow-lg">
            {label !== undefined && <div className="mb-1 font-semibold text-slate-900">{label}</div>}
            {payload.map((p: any, i: number) => (
                <div key={i} className="flex items-center gap-2 whitespace-nowrap">
                    <span className="h-2 w-2 rounded-full" style={{ backgroundColor: p.color ?? p.payload?.renk }} />
                    <span className="text-slate-600">{p.name}:</span>
                    <span className="font-semibold text-slate-900">
                        {sayiTam(Number(p.value) || 0)}{birim ? ` ${birim}` : ''}
                    </span>
                </div>
            ))}
        </div>
    );
}

// ======================================================================
// SÜTUN GRAFİK
// ======================================================================

export interface SeriTanim {
    /** Veri nesnesindeki alan adı */
    alan: string;
    /** Açıklamada görünecek etiket */
    ad: string;
    renk?: string;
    /** Aynı yığında toplansın mı (stacked bar) */
    yigin?: string;
}

interface SutunProps {
    veri: Record<string, any>[];
    /** X ekseninde gösterilecek alan */
    etiketAlan: string;
    seriler: SeriTanim[];
    yukseklik?: number;
    birim?: string;
    /** Yatay sütun (kategori adları uzunsa okunaklı olur) */
    yatay?: boolean;
    bosMesaj?: string;
}

export function SutunGrafik({
    veri, etiketAlan, seriler, yukseklik = 260, birim, yatay = false, bosMesaj,
}: SutunProps) {
    if (!veri || veri.length === 0) return <Bos mesaj={bosMesaj} />;

    return (
        <ResponsiveContainer width="100%" height={yukseklik}>
            <BarChart data={veri} layout={yatay ? 'vertical' : 'horizontal'}
                margin={{ top: 4, right: 8, bottom: 4, left: yatay ? 8 : 0 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" vertical={!yatay} horizontal={yatay ? false : true} />
                {yatay ? (
                    <>
                        <XAxis type="number" tick={eksenStil} tickFormatter={sayiKisa} axisLine={false} tickLine={false} />
                        <YAxis type="category" dataKey={etiketAlan} tick={eksenStil} width={110}
                            axisLine={false} tickLine={false} />
                    </>
                ) : (
                    <>
                        <XAxis dataKey={etiketAlan} tick={eksenStil} axisLine={false} tickLine={false} />
                        <YAxis tick={eksenStil} tickFormatter={sayiKisa} axisLine={false} tickLine={false} width={52} />
                    </>
                )}
                <Tooltip content={<Ipucu birim={birim} />} cursor={{ fill: 'rgba(148,163,184,0.12)' }} />
                {seriler.length > 1 && <Legend wrapperStyle={{ fontSize: 11 }} iconType="circle" iconSize={8} />}
                {seriler.map((s, i) => (
                    <Bar key={s.alan} dataKey={s.alan} name={s.ad} stackId={s.yigin}
                        fill={s.renk ?? GRAFIK_RENK[i % GRAFIK_RENK.length]}
                        radius={yatay ? [0, 4, 4, 0] : [4, 4, 0, 0]} maxBarSize={44} />
                ))}
            </BarChart>
        </ResponsiveContainer>
    );
}

// ======================================================================
// PASTA / HALKA GRAFİK
// ======================================================================

export interface PastaSatir {
    ad: string;
    sayi: number;
    renk?: string;
}

interface PastaProps {
    veri: PastaSatir[];
    yukseklik?: number;
    birim?: string;
    /** Ortası boş halka mı */
    halka?: boolean;
    bosMesaj?: string;
}

export function PastaGrafik({ veri, yukseklik = 260, birim, halka = true, bosMesaj }: PastaProps) {
    const dolu = (veri ?? []).filter((v) => Number(v.sayi) > 0);
    if (dolu.length === 0) return <Bos mesaj={bosMesaj} />;

    const toplam = dolu.reduce((t, v) => t + Number(v.sayi), 0);

    return (
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <div className="min-w-0 flex-1">
                <ResponsiveContainer width="100%" height={yukseklik}>
                    <PieChart>
                        <Pie data={dolu} dataKey="sayi" nameKey="ad" cx="50%" cy="50%"
                            innerRadius={halka ? '55%' : 0} outerRadius="82%" paddingAngle={dolu.length > 1 ? 2 : 0}>
                            {dolu.map((d, i) => (
                                <Cell key={i} fill={d.renk ?? GRAFIK_RENK[i % GRAFIK_RENK.length]} />
                            ))}
                        </Pie>
                        <Tooltip content={<Ipucu birim={birim} />} />
                    </PieChart>
                </ResponsiveContainer>
            </div>

            {/* Açıklama listesi — pasta dilimi çok olduğunda kaydırılır */}
            <ul className="max-h-[220px] space-y-1 overflow-y-auto sm:w-[46%]">
                {dolu.map((d, i) => {
                    const yuzde = toplam > 0 ? (Number(d.sayi) / toplam) * 100 : 0;
                    return (
                        <li key={i} className="flex items-center gap-2 text-xs">
                            <span className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
                                style={{ backgroundColor: d.renk ?? GRAFIK_RENK[i % GRAFIK_RENK.length] }} />
                            <span className="min-w-0 flex-1 truncate text-slate-700" title={d.ad}>{d.ad}</span>
                            <span className="flex-shrink-0 font-semibold text-slate-900">{sayiTam(Number(d.sayi))}</span>
                            <span className="w-11 flex-shrink-0 text-right text-slate-400">
                                %{yuzde.toLocaleString('tr-TR', { maximumFractionDigits: 1 })}
                            </span>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
}

// ======================================================================
// ÇİZGİ / ALAN GRAFİK — zaman serisi
// ======================================================================

interface CizgiProps {
    veri: Record<string, any>[];
    etiketAlan: string;
    seriler: SeriTanim[];
    yukseklik?: number;
    birim?: string;
    /** Çizgi altını doldur */
    alan?: boolean;
    bosMesaj?: string;
}

export function CizgiGrafik({
    veri, etiketAlan, seriler, yukseklik = 260, birim, alan = true, bosMesaj,
}: CizgiProps) {
    if (!veri || veri.length === 0) return <Bos mesaj={bosMesaj} />;

    const Kap: any = alan ? AreaChart : LineChart;

    return (
        <ResponsiveContainer width="100%" height={yukseklik}>
            <Kap data={veri} margin={{ top: 4, right: 8, bottom: 4, left: 0 }}>
                <defs>
                    {alan && seriler.map((s, i) => {
                        const renk = s.renk ?? GRAFIK_RENK[i % GRAFIK_RENK.length];
                        return (
                            <linearGradient key={s.alan} id={`gr-${s.alan}`} x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0%" stopColor={renk} stopOpacity={0.28} />
                                <stop offset="100%" stopColor={renk} stopOpacity={0.02} />
                            </linearGradient>
                        );
                    })}
                </defs>
                <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" vertical={false} />
                <XAxis dataKey={etiketAlan} tick={eksenStil} axisLine={false} tickLine={false} />
                <YAxis tick={eksenStil} tickFormatter={sayiKisa} axisLine={false} tickLine={false} width={52} />
                <Tooltip content={<Ipucu birim={birim} />} />
                {seriler.length > 1 && <Legend wrapperStyle={{ fontSize: 11 }} iconType="circle" iconSize={8} />}
                {seriler.map((s, i) => {
                    const renk = s.renk ?? GRAFIK_RENK[i % GRAFIK_RENK.length];
                    return alan ? (
                        <Area key={s.alan} type="monotone" dataKey={s.alan} name={s.ad}
                            stroke={renk} strokeWidth={2} fill={`url(#gr-${s.alan})`}
                            dot={veri.length <= 20 ? { r: 2.5, strokeWidth: 0, fill: renk } : false}
                            activeDot={{ r: 4 }} />
                    ) : (
                        <Line key={s.alan} type="monotone" dataKey={s.alan} name={s.ad}
                            stroke={renk} strokeWidth={2}
                            dot={veri.length <= 20 ? { r: 2.5, strokeWidth: 0, fill: renk } : false}
                            activeDot={{ r: 4 }} />
                    );
                })}
            </Kap>
        </ResponsiveContainer>
    );
}

// ======================================================================
// YATAY ORAN ÇUBUKLARI — küçük listeler için grafik yerine daha okunaklı
// ======================================================================

export function OranListesi({ satirlar, birim, bosMesaj = 'Veri yok' }: {
    satirlar: PastaSatir[]; birim?: string; bosMesaj?: string;
}) {
    const toplam = (satirlar ?? []).reduce((t, s) => t + Number(s.sayi), 0) || 1;
    if (!satirlar || satirlar.length === 0) {
        return (
            <div className="rounded-md border border-dashed border-slate-200 px-3 py-6 text-center text-xs text-slate-500">
                {bosMesaj}
            </div>
        );
    }
    return (
        <div className="space-y-2">
            {satirlar.map((s, i) => {
                const renk = s.renk ?? GRAFIK_RENK[i % GRAFIK_RENK.length];
                return (
                    <div key={`${s.ad}-${i}`}>
                        <div className="mb-1 flex items-center justify-between gap-2 text-xs">
                            <span className="inline-flex min-w-0 items-center gap-1.5 font-medium text-slate-700">
                                <span className="h-2 w-2 flex-shrink-0 rounded-full" style={{ backgroundColor: renk }} />
                                <span className="truncate" title={s.ad}>{s.ad}</span>
                            </span>
                            <span className="flex-shrink-0 font-semibold text-slate-900">
                                {sayiTam(Number(s.sayi))}{birim ? ` ${birim}` : ''}
                            </span>
                        </div>
                        <div className="h-2 overflow-hidden rounded-full bg-slate-100">
                            <div className="h-full rounded-full transition-all"
                                style={{ width: `${(Number(s.sayi) / toplam) * 100}%`, backgroundColor: renk }} />
                        </div>
                    </div>
                );
            })}
        </div>
    );
}