import { getChartTheme } from '@/components/admin/chart-theme';
import { useIsDark } from '@/hooks/useIsDark';
import type { MonthlyData } from '@/types/admin';
import {
    Bar,
    BarChart,
    CartesianGrid,
    Cell,
    ResponsiveContainer,
    Tooltip,
    XAxis,
    YAxis,
} from 'recharts';

export default function SignupsChart({ monthly }: { monthly: MonthlyData[] }) {
    const isDark = useIsDark();
    const chartTheme = getChartTheme(isDark);

    return (
        <div className="pf-glass p-5 lg:col-span-2">
            <div className="mb-5">
                <p className="text-foreground text-sm font-semibold">
                    New Tenant Signups
                </p>
                <p className="text-muted-foreground text-xs">
                    Monthly registrations
                </p>
            </div>
            <ResponsiveContainer width="100%" height={200}>
                <BarChart
                    data={monthly}
                    margin={{ top: 4, right: 4, bottom: 0, left: -20 }}
                >
                    <CartesianGrid
                        strokeDasharray="3 3"
                        stroke={chartTheme.grid}
                        vertical={false}
                    />
                    <XAxis
                        dataKey="month"
                        tick={{ ...chartTheme.tick, fontSize: 10 }}
                        axisLine={false}
                        tickLine={false}
                    />
                    <YAxis
                        tick={chartTheme.tick}
                        axisLine={false}
                        tickLine={false}
                    />
                    <Tooltip
                        contentStyle={chartTheme.tooltip.contentStyle}
                        cursor={chartTheme.tooltip.cursor}
                        formatter={(v) => [v, 'Signups']}
                    />
                    <Bar dataKey="signups" radius={[4, 4, 0, 0]}>
                        {monthly.map((_, i) => (
                            <Cell
                                key={i}
                                fill={
                                    i === monthly.length - 1
                                        ? 'hsl(17 92% 58%)'
                                        : `hsl(17 92% 58% / ${(isDark ? 0.15 : 0.3) + (i / monthly.length) * 0.45})`
                                }
                            />
                        ))}
                    </Bar>
                </BarChart>
            </ResponsiveContainer>
        </div>
    );
}