import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@ui/components/ui/card';
import React from 'react';
import {
    ComposedChart,
    Bar,
    Line,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    ResponsiveContainer,
    LabelList,
} from 'recharts';

interface ChartDataItem {
    month: string;
    target: number;
    nominal: number;
    percentage: number;
}

interface CashOutChartProps {
    data: ChartDataItem[];
}

const formatCurrency = (value: unknown) => {
    const numeric = Number(value ?? 0);

    return new Intl.NumberFormat('id-ID', {
        notation: 'compact',
        maximumFractionDigits: 1,
    }).format(Number.isFinite(numeric) ? numeric : 0);
};

const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
        return (
            <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-3 rounded-lg shadow-lg">
                <p className="font-bold text-slate-900 dark:text-slate-100 mb-2">{label}</p>
                <div className="space-y-1 text-sm">
                    <div className="flex justify-between gap-8">
                        <span className="text-slate-500">Target:</span>
                        <span className="font-mono font-bold text-blue-600">
                            Rp {new Intl.NumberFormat('id-ID').format(payload[0].value)}
                        </span>
                    </div>
                    <div className="flex justify-between gap-8">
                        <span className="text-slate-500">Scheduling:</span>
                        <span className="font-mono font-bold text-orange-600">
                            Rp {new Intl.NumberFormat('id-ID').format(payload[1].value)}
                        </span>
                    </div>
                    <div className="flex justify-between gap-8 border-t pt-1 mt-1">
                        <span className="text-slate-500">Ratio:</span>
                        <span className="font-mono font-bold text-red-600">
                            {payload[2].value}%
                        </span>
                    </div>
                </div>
            </div>
        );
    }

    return null;
};

export function CashOutChart({ data }: CashOutChartProps) {
    return (
        <Card className="col-span-full xl:col-span-2 border-none shadow-xl rounded-2xl overflow-hidden bg-white dark:bg-slate-900/50">
            <CardHeader className="border-b dark:border-slate-800 bg-white/50 dark:bg-slate-950/20 py-6">
                <div className="flex items-center justify-between">
                    <div>
                        <CardTitle className="text-xl font-black tracking-tight text-slate-900 dark:text-slate-50 uppercase">
                            Target Cash Out VS Scheduling Cash Out
                        </CardTitle>
                        <CardDescription className="text-slate-500 dark:text-slate-400 font-medium">
                            PT Graha Mutu Persada - Divisional Performance Data
                        </CardDescription>
                    </div>
                    <div className="flex items-center gap-6 text-xs font-bold uppercase tracking-widest">
                        <div className="flex items-center gap-2">
                            <div className="w-3 h-3 bg-blue-900 rounded-sm" />
                            <span className="text-slate-500">Target</span>
                        </div>
                        <div className="flex items-center gap-2">
                            <div className="w-3 h-3 bg-orange-500 rounded-sm" />
                            <span className="text-slate-500">Nominal</span>
                        </div>
                        <div className="flex items-center gap-2">
                            <div className="w-3 h-0.5 bg-red-500" />
                            <span className="text-slate-500">Ratio (%)</span>
                        </div>
                    </div>
                </div>
            </CardHeader>
            <CardContent className="pt-8 px-2">
                <div className="h-[450px] w-full">
                    <ResponsiveContainer width="100%" height="100%">
                        <ComposedChart
                            data={data}
                            margin={{
                                top: 20,
                                right: 30,
                                left: 20,
                                bottom: 20,
                            }}
                        >
                            <CartesianGrid
                                strokeDasharray="3 3"
                                vertical={false}
                                stroke="#e2e8f0"
                                opacity={0.5}
                            />
                            <XAxis
                                dataKey="month"
                                axisLine={false}
                                tickLine={false}
                                tick={{ fill: '#64748b', fontSize: 12, fontWeight: 600 }}
                                dy={10}
                            />
                            <YAxis
                                yAxisId="left"
                                axisLine={false}
                                tickLine={false}
                                tick={{ fill: '#64748b', fontSize: 11 }}
                                tickFormatter={formatCurrency}
                                width={80}
                            />
                            <YAxis
                                yAxisId="right"
                                orientation="right"
                                axisLine={false}
                                tickLine={false}
                                tick={{ fill: '#94a3b8', fontSize: 11 }}
                                tickFormatter={(val) => `${val}%`}
                                domain={[0, 100]}
                            />
                            <Tooltip content={<CustomTooltip />} />

                            {/* Target Bar */}
                            <Bar
                                yAxisId="left"
                                dataKey="target"
                                fill="#1e3a8a"
                                radius={[4, 4, 0, 0]}
                                barSize={40}
                            >
                                <LabelList
                                    dataKey="target"
                                    position="top"
                                    formatter={formatCurrency}
                                    style={{ fill: '#1e3a8a', fontSize: 10, fontWeight: 700 }}
                                />
                            </Bar>

                            {/* Nominal Bar */}
                            <Bar
                                yAxisId="left"
                                dataKey="nominal"
                                fill="#f97316"
                                radius={[4, 4, 0, 0]}
                                barSize={40}
                            >
                                <LabelList
                                    dataKey="nominal"
                                    position="top"
                                    formatter={formatCurrency}
                                    style={{ fill: '#f97316', fontSize: 10, fontWeight: 700 }}
                                />
                            </Bar>

                            {/* Ratio Line */}
                            <Line
                                yAxisId="right"
                                type="monotone"
                                dataKey="percentage"
                                stroke="#ef4444"
                                strokeWidth={3}
                                dot={{ r: 4, fill: '#ef4444', strokeWidth: 2, stroke: '#fff' }}
                                activeDot={{ r: 6, strokeWidth: 0 }}
                            >
                                <LabelList
                                    dataKey="percentage"
                                    position="top"
                                    formatter={(v: unknown) => `${v ?? 0}%`}
                                    style={{ fill: '#ef4444', fontSize: 11, fontWeight: 800 }}
                                    offset={10}
                                />
                            </Line>
                        </ComposedChart>
                    </ResponsiveContainer>
                </div>
            </CardContent>
        </Card>
    );
}