import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chatrt';
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';

const chartData = [
    { date: '11 Dec', activeUsers: 1000, inactiveUsers: 0 },
    { date: '12 Dec', activeUsers: 1800, inactiveUsers: 1500 },
    { date: '13 Dec', activeUsers: 2000, inactiveUsers: 3000 },
    { date: '14 Dec', activeUsers: 3200, inactiveUsers: 2200 },
    { date: '15 Dec', activeUsers: 3800, inactiveUsers: 600 },
    { date: '16 Dec', activeUsers: 3400, inactiveUsers: 800 },
    { date: '17 Dec', activeUsers: 2200, inactiveUsers: 2000 },
    { date: '18 Dec', activeUsers: 1800, inactiveUsers: 1000 },
    { date: '19 Dec', activeUsers: 2000, inactiveUsers: 3800 },
    { date: '20 Dec', activeUsers: 3000, inactiveUsers: 1200 },
];

export function UserSummaryChart() {
    return (
        <Card className="flex h-full flex-col px-4">
            <CardHeader className="flex flex-row items-start justify-between px-0 pb-4">
                <div>
                    <CardTitle className="text-lg font-semibold">Summary</CardTitle>
                    <CardDescription className="text-text-gray">Last 9 days</CardDescription>
                </div>
                <div className="flex items-start justify-start gap-6 text-sm">
                    <div className="flex items-center gap-2">
                        <div className="h-3 w-3 rounded-full bg-[hsl(234,89%,54%)]" />
                        <span className="text-muted-foreground">Active users</span>
                    </div>
                    <div className="flex items-center gap-2">
                        <div className="h-3 w-3 rounded-full bg-[hsl(258,90%,66%)]" />
                        <span className="text-muted-foreground">Inactive users</span>
                    </div>
                </div>
            </CardHeader>
            <CardContent className="flex-grow px-0">
                <ChartContainer
                    config={{
                        activeUsers: {
                            label: 'Active users',
                            color: 'hsl(234, 89%, 54%)',
                        },
                        inactiveUsers: {
                            label: 'Inactive users',
                            color: 'hsl(258, 90%, 66%)',
                        },
                    }}
                    className="h-[370px] w-full pl-2"
                >
                    <AreaChart data={chartData} margin={{ top: 10, right: 0, left: -20, bottom: 0 }} className="">
                        <defs>
                            <linearGradient id="activeGradient" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0%" stopColor="hsl(234, 89%, 54%)" stopOpacity={0.3} />
                                <stop offset="100%" stopColor="hsl(234, 89%, 54%)" stopOpacity={0} />
                            </linearGradient>
                            <linearGradient id="inactiveGradient" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0%" stopColor="hsl(258, 90%, 66%)" stopOpacity={0.3} />
                                <stop offset="100%" stopColor="hsl(258, 90%, 66%)" stopOpacity={0} />
                            </linearGradient>
                        </defs>
                        <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
                        <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} className="text-xs" />
                        <YAxis tickLine={false} axisLine={false} tickMargin={8} tickFormatter={(value) => `${value / 1000}`} className="text-xs" />
                        <ChartTooltip
                            content={<ChartTooltipContent labelFormatter={(value) => `13 Dec, 2024`} formatter={(value) => value.toLocaleString()} />}
                        />
                        <Area type="monotone" dataKey="inactiveUsers" stroke="hsl(258, 90%, 66%)" fill="url(#inactiveGradient)" strokeWidth={2} />
                        <Area type="monotone" dataKey="activeUsers" stroke="hsl(234, 89%, 54%)" fill="url(#activeGradient)" strokeWidth={2} />
                    </AreaChart>
                </ChartContainer>
            </CardContent>
        </Card>
    );
}