import { getChartTheme } from '@/components/admin/chart-theme';
import { useIsDark } from '@/hooks/useIsDark';
import type { PlanDistribution } from '@/types/admin';
import { Cell, Pie, PieChart, Tooltip } from 'recharts';

export default function PlanDistributionCard({
    planDistribution,
}: {
    planDistribution: PlanDistribution[];
}) {
    const isDark = useIsDark();
    const chartTheme = getChartTheme(isDark);
    const totalPlanValue = planDistribution.reduce((s, d) => s + d.value, 0);

    return (
        <div className="pf-glass p-5">
            <p className="text-foreground mb-4 text-sm font-semibold">
                Plan Distribution
            </p>
            <div className="flex items-center gap-4">
                <div className="shrink-0">
                    <PieChart width={100} height={100}>
                        <Pie
                            data={planDistribution}
                            cx={46}
                            cy={46}
                            innerRadius={30}
                            outerRadius={46}
                            paddingAngle={2}
                            dataKey="value"
                            strokeWidth={0}
                        >
                            {planDistribution.map((entry) => (
                                <Cell key={entry.name} fill={entry.color} />
                            ))}
                        </Pie>
                        <Tooltip
                            contentStyle={chartTheme.tooltip.contentStyle}
                            formatter={(v, name) => [
                                `${v} (${((Number(v) / totalPlanValue) * 100).toFixed(1)}%)`,
                                name,
                            ]}
                        />
                    </PieChart>
                </div>
                <div className="space-y-2">
                    {planDistribution.map((p) => (
                        <div key={p.name} className="flex items-center gap-2">
                            <span
                                className="h-2 w-2 shrink-0 rounded-full"
                                style={{ background: p.color }}
                            />
                            <span className="text-muted-foreground text-xs">
                                {p.name}
                            </span>
                            <span className="text-foreground/70 ml-auto pl-2 font-mono text-xs">
                                {p.value}
                            </span>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}