import { getChartTheme } from '@/components/admin/chart-theme';
import { useCurrency } from '@/hooks/useCurrency';
import { useIsDark } from '@/hooks/useIsDark';
import type { MonthlyData, TrendBadge } from '@/types/admin';
import {
    Area,
    AreaChart,
    CartesianGrid,
    ResponsiveContainer,
    Tooltip,
    XAxis,
    YAxis,
} from 'recharts';

const compactNumber = (v: number) =>
    Intl.NumberFormat('en', {
        notation: 'compact',
        maximumFractionDigits: 1,
    }).format(v);

export default function MrrChart({
    monthly,
    mrrYoy,
}: {
    monthly: MonthlyData[];
    mrrYoy: TrendBadge | null;
}) {
    const isDark = useIsDark();
    const chartTheme = getChartTheme(isDark);
    const { base } = useCurrency();

    return (
        <div className="pf-glass p-5 lg:col-span-3">
            <div className="mb-5 flex items-center justify-between">
                <div>
                    <p className="text-foreground text-sm font-semibold">
                        MRR Growth
                    </p>
                    <p className="text-muted-foreground text-xs">
                        Monthly recurring revenue — last 12 months
                    </p>
                </div>
                {mrrYoy && (
                    <span
                        className={
                            mrrYoy.positive
                                ? 'rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-[11px] font-semibold text-emerald-700 dark:border-emerald-700/30 dark:bg-emerald-900/20 dark:text-emerald-400'
                                : 'rounded-full border border-red-200 bg-red-50 px-2.5 py-1 text-[11px] font-semibold text-red-700 dark:border-red-700/30 dark:bg-red-900/20 dark:text-red-400'
                        }
                    >
                        {mrrYoy.positive ? '+' : '−'}
                        {mrrYoy.value} YoY
                    </span>
                )}
            </div>
            <ResponsiveContainer width="100%" height={200}>
                <AreaChart
                    data={monthly}
                    margin={{ top: 4, right: 4, bottom: 0, left: -12 }}
                >
                    <defs>
                        <linearGradient
                            id="mrrGradient"
                            x1="0"
                            y1="0"
                            x2="0"
                            y2="1"
                        >
                            <stop
                                offset="5%"
                                stopColor="hsl(17 92% 58%)"
                                stopOpacity={isDark ? 0.38 : 0.52}
                            />
                            <stop
                                offset="95%"
                                stopColor="hsl(17 92% 58%)"
                                stopOpacity={0.01}
                            />
                        </linearGradient>
                    </defs>
                    <CartesianGrid
                        strokeDasharray="3 3"
                        stroke={chartTheme.grid}
                        vertical={false}
                    />
                    <XAxis
                        dataKey="month"
                        tick={chartTheme.tick}
                        axisLine={false}
                        tickLine={false}
                    />
                    <YAxis
                        tick={chartTheme.tick}
                        axisLine={false}
                        tickLine={false}
                        tickFormatter={(v) => compactNumber(Number(v))}
                    />
                    <Tooltip
                        contentStyle={chartTheme.tooltip.contentStyle}
                        cursor={chartTheme.tooltip.cursor}
                        formatter={(v) => [
                            `${base.code} ${compactNumber(Number(v))}`,
                            'MRR',
                        ]}
                    />
                    <Area
                        type="monotone"
                        dataKey="mrr"
                        stroke="hsl(17 92% 58%)"
                        strokeWidth={2}
                        fill="url(#mrrGradient)"
                        dot={false}
                        activeDot={{
                            r: 5,
                            fill: 'hsl(17 92% 58%)',
                            stroke: isDark ? 'hsl(218 20% 9%)' : '#fff',
                            strokeWidth: 2,
                        }}
                    />
                </AreaChart>
            </ResponsiveContainer>
        </div>
    );
}