'use client';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart';
import { LabelList, Pie, PieChart } from 'recharts';

const chartConfig = {
    visitors: { label: 'Queries' },
    seen: { label: 'Seen', color: '#10B981' },
    unseen: { label: 'Unseen', color: '#FF718B' },
} satisfies ChartConfig;

interface Props {
    data?: { browser: string; visitors: number; fill: string }[];
}

export function QueryActivityChart({ data = [] }: Props) {
    return (
        <Card className="flex flex-1 flex-col">
            <CardHeader className="flex flex-row items-center justify-between px-2 pb-4">
                <div>
                    <CardTitle className="text-lg font-bold text-foreground/80">Query Activity</CardTitle>
                    <p className="text-xs text-foreground/70">Customer queries this month</p>
                </div>
            </CardHeader>
            <CardContent className="flex-1 pb-0">
                <ChartContainer config={chartConfig} className="mx-auto aspect-square h-80">
                    <PieChart>
                        <ChartTooltip content={<ChartTooltipContent nameKey="visitors" hideLabel />} />
                        <Pie data={data} dataKey="visitors">
                            <LabelList
                                dataKey="browser"
                                className="fill-background"
                                stroke="none"
                                fontSize={12}
                                formatter={(value: string) => chartConfig[value as keyof typeof chartConfig]?.label ?? value}
                            />
                        </Pie>
                        <ChartLegend
                            content={<ChartLegendContent nameKey="browser" />}
                            className="*:justify-sm -translate-y-2 flex-wrap gap-2 text-base"
                        />
                    </PieChart>
                </ChartContainer>
            </CardContent>
        </Card>
    );
}