"use client"

import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"
import {
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent
    
} from "@/components/ui/chart"
import type { ChartConfig } from "@/components/ui/chart";

const defaultChartConfig = {
    today: {
        label: "Hari Ini",
        color: "var(--chart-1)",
    },
    yesterday: {
        label: "Kemarin",
        color: "var(--chart-2)",
    },
} satisfies ChartConfig

interface SalesByHourChartProps {
    data: any[];
    config?: ChartConfig;
    title?: string;
    description?: string;
}

export function SalesByHourChart({ 
    data, 
    config = defaultChartConfig,
    title = "Jam Sibuk",
    description = "Menampilkan aktivitas toko berdasarkan pesanan yang masuk per jam."
}: SalesByHourChartProps) {
    const keys = Object.keys(config);

    return (
        <Card className="pt-0">
            <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
                <div className="grid flex-1 gap-1">
                    <CardTitle>{title}</CardTitle>
                    <CardDescription>{description}</CardDescription>
                </div>
            </CardHeader>
            <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
                <ChartContainer
                    config={config}
                    className="aspect-auto h-[250px] w-full"
                >
                    <AreaChart data={data}>
                        <defs>
                            {keys.map((key) => (
                                <linearGradient key={key} id={`fill${key}`} x1="0" y1="0" x2="0" y2="1">
                                    <stop
                                        offset="5%"
                                        stopColor={`var(--color-${key})`}
                                        stopOpacity={0.8}
                                    />
                                    <stop
                                        offset="95%"
                                        stopColor={`var(--color-${key})`}
                                        stopOpacity={0.1}
                                    />
                                </linearGradient>
                            ))}
                        </defs>
                        <CartesianGrid vertical={false} />
                        <XAxis
                            dataKey="hour"
                            tickLine={false}
                            axisLine={false}
                            tickMargin={8}
                        />
                        <ChartTooltip
                            cursor={false}
                            content={<ChartTooltipContent indicator="dot" />}
                        />
                        {/* Render Areas in reverse order so first key in config is on top */}
                        {[...keys].reverse().map((key) => (
                            <Area
                                key={key}
                                dataKey={key}
                                type="natural"
                                fill={`url(#fill${key})`}
                                stroke={`var(--color-${key})`}
                                isAnimationActive={true}
                            />
                        ))}
                        <ChartLegend content={<ChartLegendContent />} />
                    </AreaChart>
                </ChartContainer>
            </CardContent>
        </Card>
    )
}