import { useState } from "react";
import { TrendingUp, BarChart2 } from "lucide-react";
import {
    Bar,
    BarChart,
    CartesianGrid,
    XAxis,
    YAxis,
    ResponsiveContainer,
} from "recharts";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import {
    ChartConfig,
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
} from "@/components/ui/chart";

const chartData = [
    { month: "Genset", desktop: 186, color: "#22c55e" },
    { month: "Boiler", desktop: 305, color: "#16a34a" },
    { month: "Proses", desktop: 237, color: "#15803d" },
];

const chartConfig = {
    desktop: {
        label: "Value",
        color: "hsl(var(--chart-1))",
    },
} satisfies ChartConfig;

export function ChartCard() {
    const [activeIndex, setActiveIndex] = useState<number | null>(null);

    const handleMouseEnter = (index: number) => {
        setActiveIndex(index);
    };

    const handleMouseLeave = () => {
        setActiveIndex(null);
    };

    return (
        <Card className="relative overflow-hidden transition-all duration-300 hover:shadow-lg">
            <div className="absolute inset-0 bg-gradient-to-br from-green-50/30 to-transparent dark:from-green-950/30" />

            <CardHeader className="relative">
                <div className="flex items-center gap-2">
                    <BarChart2 className="h-6 w-6 text-green-600" />
                    <CardTitle className="text-xl font-bold">
                        Sumber Emisi
                    </CardTitle>
                </div>
                <CardDescription className="text-sm text-green-600 font-medium">
                    Total Emisi per Sumber
                </CardDescription>
            </CardHeader>

            <CardContent className="relative pb-6">
                <div className="h-[300px] w-full">
                    <ResponsiveContainer width="100%" height="100%">
                        <BarChart data={chartData}>
                            <defs>
                                {chartData.map((entry, index) => (
                                    <linearGradient
                                        key={`gradient-${index}`}
                                        id={`barGradient-${index}`}
                                        x1="0"
                                        y1="0"
                                        x2="0"
                                        y2="1"
                                    >
                                        <stop
                                            offset="0%"
                                            stopColor={entry.color}
                                            stopOpacity={0.8}
                                        />
                                        <stop
                                            offset="100%"
                                            stopColor={entry.color}
                                            stopOpacity={0.3}
                                        />
                                    </linearGradient>
                                ))}
                            </defs>

                            <CartesianGrid
                                vertical={false}
                                stroke="#e5e7eb"
                                strokeDasharray="4 4"
                            />

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

                            <YAxis
                                axisLine={false}
                                tickLine={false}
                                tick={{ fill: "#6b7280", fontSize: 12 }}
                                tickMargin={8}
                            />

                            <ChartTooltip
                                cursor={false}
                                content={({ active, payload }) => {
                                    if (active && payload && payload.length) {
                                        return (
                                            <div className="rounded-lg bg-white p-3 shadow-lg border border-green-100 backdrop-blur-sm">
                                                <p className="font-medium text-green-800">
                                                    {payload[0].payload.month}
                                                </p>
                                                <p className="text-sm text-green-600">
                                                    {payload[0].value} ton CO₂
                                                </p>
                                            </div>
                                        );
                                    }
                                    return null;
                                }}
                            />

                            <Bar
                                dataKey="desktop"
                                radius={[8, 8, 0, 0]}
                                onMouseEnter={(data, index) =>
                                    handleMouseEnter(index)
                                }
                                onMouseLeave={handleMouseLeave}
                            >
                                {chartData.map((entry, index) => (
                                    <rect
                                        key={`bar-${index}`}
                                        fill={`url(#barGradient-${index})`}
                                        className={`transition-all duration-300 ${
                                            activeIndex === index
                                                ? "opacity-100 scale-y-105"
                                                : activeIndex === null
                                                ? "opacity-90"
                                                : "opacity-50"
                                        }`}
                                    />
                                ))}
                            </Bar>
                        </BarChart>
                    </ResponsiveContainer>
                </div>

                <div className="mt-6 flex justify-between items-center px-4">
                    {chartData.map((item, index) => (
                        <div
                            key={item.month}
                            className="flex flex-col items-center gap-2"
                            onMouseEnter={() => handleMouseEnter(index)}
                            onMouseLeave={handleMouseLeave}
                        >
                            <div
                                className={`h-3 w-3 rounded-full transition-all duration-300 ${
                                    activeIndex === index
                                        ? "scale-150"
                                        : activeIndex === null
                                        ? "scale-100"
                                        : "scale-75 opacity-50"
                                }`}
                                style={{ backgroundColor: item.color }}
                            />
                            <span className="text-sm font-medium text-gray-600">
                                {item.month}
                            </span>
                        </div>
                    ))}
                </div>
            </CardContent>
        </Card>
    );
}