'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart';
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';

const chartConfig = {
    orders: {
        label: 'Orders',
        color: '#3B82F6',
    },
} satisfies ChartConfig;

interface Props {
    data?: { month: string; orders: number }[];
}

export function TotalOrdersChart({ data = [] }: Props) {
    return (
        <Card className="w-full py-3">
            <CardHeader className="flex flex-row items-center justify-between px-2 pb-4">
                <div>
                    <CardTitle className="text-lg font-bold text-foreground/80">Total Orders</CardTitle>
                    <p className="text-xs text-foreground/70">Orders per month (last 6 months)</p>
                </div>
            </CardHeader>

            <CardContent className="px-0 pb-0">
                <ChartContainer config={chartConfig} className="h-[320px] w-full">
                    <BarChart data={data} margin={{ top: 20, right: 30, left: 10, bottom: 10 }}>
                        <CartesianGrid vertical={false} strokeDasharray="3 3" stroke="#E5E7EB" />

                        <XAxis
                            dataKey="month"
                            tickLine={false}
                            axisLine={false}
                            tickMargin={12}
                            tick={{ fill: '#6B7280', fontSize: 13 }}
                        />

                        <YAxis
                            tickLine={false}
                            axisLine={false}
                            tickMargin={12}
                            tickCount={5}
                            tickFormatter={(v) => (v >= 1000 ? `${v / 1000}k` : v)}
                            tick={{ fill: '#6B7280', fontSize: 13 }}
                        />

                        <ChartTooltip
                            cursor={{ fill: 'rgba(59, 130, 246, 0.1)' }}
                            content={<ChartTooltipContent formatter={(value: number) => [`${value.toLocaleString()}`, 'Orders']} indicator="dot" />}
                        />

                        <Bar dataKey="orders" fill="#3B82F6" radius={[6, 6, 0, 0]} />
                    </BarChart>
                </ChartContainer>
            </CardContent>
        </Card>
    );
}