import { useState } from 'react';
import {
    Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Legend,
    Line, LineChart, Pie, PieChart as RechartsPieChart,
    ResponsiveContainer, Tooltip, XAxis, YAxis,
} from 'recharts';
import type { ChartData } from './ReportChart';

// ─── Types ────────────────────────────────────────────────────────────────────

type PanelChartType = 'area' | 'bar' | 'line' | 'donut' | 'pie';

export interface ChartPanel {
    type: PanelChartType;
    title: string;
    data: ChartData;
}

export interface AuxChartTab {
    label: string;
    left: ChartPanel;
    right: ChartPanel;
}

interface Props {
    tabs: AuxChartTab[];
}

// ─── Colours ─────────────────────────────────────────────────────────────────

function getPrimary(): string {
    if (typeof document === 'undefined') return '#008060';
    return getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || '#008060';
}

function getPieColors(): string[] {
    return [getPrimary(), '#6366f1', '#f59e0b', '#ef4444', '#3b82f6', '#8b5cf6', '#10b981', '#f97316'];
}

function resolveColor(color: string): string {
    return color === '#008060' ? getPrimary() : color;
}

// ─── Data helpers ─────────────────────────────────────────────────────────────

function toRows(data: ChartData) {
    return data.labels.map((label, i) => {
        const row: Record<string, string | number> = { label };
        data.datasets.forEach((ds) => { row[ds.key] = ds.data[i] ?? 0; });
        return row;
    });
}

function toPie(data: ChartData) {
    if (!data.datasets.length) return [];
    const ds = data.datasets[0];
    return data.labels.map((name, i) => ({ name, value: ds.data[i] ?? 0 }));
}

// ─── Single chart renderers ───────────────────────────────────────────────────

function PanelChart({ panel }: { panel: ChartPanel }) {
    const { type, data } = panel;
    const isEmpty = !data.labels.length || !data.datasets.length;

    if (isEmpty) {
        return (
            <div className="flex h-56 items-center justify-center text-xs text-[#6d7175]">
                No data available
            </div>
        );
    }

    const rows = toRows(data);
    const axisProps = {
        tick: { fontSize: 10 },
        tickLine: false as const,
        axisLine: false as const,
    };
    const tooltipStyle = { borderRadius: 8, border: '1px solid #e3e3e3', fontSize: 11 };
    const margin = { top: 6, right: 16, left: 0, bottom: 4 };

    if (type === 'area') {
        return (
            <ResponsiveContainer width="100%" height={220}>
                <AreaChart data={rows} margin={margin}>
                    <defs>
                        {data.datasets.map((ds) => (
                            <linearGradient key={ds.key} id={`grad2-${ds.key}`} x1="0" y1="0" x2="0" y2="1">
                                <stop offset="5%"  stopColor={resolveColor(ds.color)} stopOpacity={0.25} />
                                <stop offset="95%" stopColor={resolveColor(ds.color)} stopOpacity={0} />
                            </linearGradient>
                        ))}
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                    <XAxis dataKey="label" {...axisProps} />
                    <YAxis {...axisProps} width={52} />
                    <Tooltip contentStyle={tooltipStyle} />
                    <Legend wrapperStyle={{ fontSize: 11 }} />
                    {data.datasets.map((ds) => (
                        <Area key={ds.key} type="monotone" dataKey={ds.key} name={ds.label}
                            stroke={resolveColor(ds.color)} strokeWidth={2} fill={`url(#grad2-${ds.key})`} />
                    ))}
                </AreaChart>
            </ResponsiveContainer>
        );
    }

    if (type === 'line') {
        return (
            <ResponsiveContainer width="100%" height={220}>
                <LineChart data={rows} margin={margin}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                    <XAxis dataKey="label" {...axisProps} />
                    <YAxis {...axisProps} width={52} />
                    <Tooltip contentStyle={tooltipStyle} />
                    <Legend wrapperStyle={{ fontSize: 11 }} />
                    {data.datasets.map((ds) => (
                        <Line key={ds.key} type="monotone" dataKey={ds.key} name={ds.label}
                            stroke={resolveColor(ds.color)} strokeWidth={2} dot={{ r: 2 }} />
                    ))}
                </LineChart>
            </ResponsiveContainer>
        );
    }

    if (type === 'bar') {
        return (
            <ResponsiveContainer width="100%" height={220}>
                <BarChart data={rows} margin={margin}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                    <XAxis dataKey="label" {...axisProps} />
                    <YAxis {...axisProps} width={52} />
                    <Tooltip contentStyle={tooltipStyle} />
                    <Legend wrapperStyle={{ fontSize: 11 }} />
                    {data.datasets.map((ds) => (
                        <Bar key={ds.key} dataKey={ds.key} name={ds.label}
                            fill={resolveColor(ds.color)} radius={[3, 3, 0, 0]} />
                    ))}
                </BarChart>
            </ResponsiveContainer>
        );
    }

    // donut / pie
    const pieData = toPie(data);
    const palette = getPieColors();
    return (
        <ResponsiveContainer width="100%" height={220}>
            <RechartsPieChart>
                <Pie
                    data={pieData}
                    cx="50%"
                    cy="46%"
                    innerRadius={type === 'donut' ? '48%' : 0}
                    outerRadius="68%"
                    dataKey="value"
                    label={({ cx, cy, midAngle, innerRadius, outerRadius, percent }) => {
                        if (percent < 0.07) return null;
                        const RADIAN = Math.PI / 180;
                        const r = innerRadius + (outerRadius - innerRadius) * 0.55;
                        const x = cx + r * Math.cos(-midAngle * RADIAN);
                        const y = cy + r * Math.sin(-midAngle * RADIAN);
                        return (
                            <text x={x} y={y} fill="#fff" textAnchor="middle" dominantBaseline="central" fontSize={10} fontWeight={600}>
                                {`${(percent * 100).toFixed(0)}%`}
                            </text>
                        );
                    }}
                    labelLine={false}
                >
                    {pieData.map((_, i) => (
                        <Cell key={i} fill={palette[i % palette.length]} />
                    ))}
                </Pie>
                <Tooltip contentStyle={tooltipStyle} />
                <Legend wrapperStyle={{ fontSize: 10 }} />
            </RechartsPieChart>
        </ResponsiveContainer>
    );
}

// ─── Main component ───────────────────────────────────────────────────────────

export default function ReportDualChartPanel({ tabs }: Props) {
    const [active, setActive] = useState(0);

    if (!tabs.length) return null;

    const tab = tabs[active];

    return (
        <div className="h-full rounded-xl border border-[#d8d8d8] bg-white shadow-sm">
            {/* Header — mirrors ReportChart header for aligned border-b */}
            <div className="flex items-center justify-between border-b border-[#e3e3e3] px-4 py-3">
                <div>
                    <span className="text-sm font-semibold text-[#202223]">{tab.label}</span>
                    <p className="text-xs text-[#6d7175]">Breakdown</p>
                </div>
                <div className="flex items-center gap-1">
                    {tabs.map((t, i) => (
                        <button
                            key={i}
                            type="button"
                            onClick={() => setActive(i)}
                            className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
                                i === active
                                    ? 'bg-primary text-white shadow-sm'
                                    : 'border border-[#d8d8d8] bg-white text-[#6d7175] hover:bg-[#f6f6f7]'
                            }`}
                        >
                            {t.label}
                        </button>
                    ))}
                </div>
            </div>

            {/* Dual chart area */}
            <div className="grid grid-cols-1 gap-0 md:grid-cols-2">
                {/* Left */}
                <div className="border-b border-[#efefef] p-4 md:border-b-0 md:border-r">
                    <p className="mb-8 text-xs font-semibold text-[#6d7175] uppercase tracking-wide">
                        {tab.left.title}
                    </p>
                    <PanelChart panel={tab.left} />
                </div>

                {/* Right */}
                <div className="p-4">
                    <p className="mb-8 text-xs font-semibold text-[#6d7175] uppercase tracking-wide">
                        {tab.right.title}
                    </p>
                    <PanelChart panel={tab.right} />
                </div>
            </div>
        </div>
    );
}