"use client";

import * as React from "react";
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";

import { useIsMobile } from "@/hooks/use-mobile";
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { AlertCircle, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";

export const description = "Grafik perkembangan data siswa dan guru";

interface ChartDataType {
  date: string;
  siswa: number;
  guru: number;
}

interface DashboardStats {
  chartData: ChartDataType[];
  totals: {
    siswa: number;
    guru: number;
    jurusan: number;
    mapel: number;
  };
}

const chartConfig = {
  siswa: {
    label: "Siswa",
    color: "hsl(var(--chart-1))",
  },
  guru: {
    label: "Guru",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig;

export function ChartAreaInteractive() {
  const isMobile = useIsMobile();
  const [timeRange, setTimeRange] = React.useState("90d");
  const [data, setData] = React.useState<DashboardStats | null>(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);

  React.useEffect(() => {
    if (isMobile) {
      setTimeRange("7d");
    }
  }, [isMobile]);

  const fetchData = React.useCallback(async () => {
    try {
      setLoading(true);
      setError(null);

      const days = timeRange === "7d" ? 7 : timeRange === "30d" ? 30 : 90;
      const response = await fetch(`/api/dashboard/stats?days=${days}`);
      const result = await response.json();

      if (!response.ok || !result.success) {
        throw new Error(result.error || "Failed to fetch data");
      }

      setData(result.data);
    } catch (err) {
      console.error("Error fetching dashboard stats:", err);
      setError(err instanceof Error ? err.message : "Something went wrong");
    } finally {
      setLoading(false);
    }
  }, [timeRange]);

  React.useEffect(() => {
    fetchData();
  }, [fetchData]);

  const chartData = data?.chartData || [];

  if (loading) {
    return (
      <Card className="@container/card">
        <CardHeader>
          <CardTitle>Perkembangan Data Sekolah</CardTitle>
          <CardDescription>
            <span className="hidden @[540px]/card:block">Data siswa dan guru dalam 3 bulan terakhir</span>
            <span className="@[540px]/card:hidden">Data 3 bulan terakhir</span>
          </CardDescription>
        </CardHeader>
        <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
          <div className="flex h-[250px] items-center justify-center">
            <div className="flex items-center space-x-2">
              <RefreshCw className="h-4 w-4 animate-spin" />
              <span>Memuat data...</span>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  if (error) {
    return (
      <Card className="@container/card">
        <CardHeader>
          <CardTitle>Perkembangan Data Sekolah</CardTitle>
          <CardDescription>
            <span className="hidden @[540px]/card:block">Data siswa dan guru dalam 3 bulan terakhir</span>
            <span className="@[540px]/card:hidden">Data 3 bulan terakhir</span>
          </CardDescription>
        </CardHeader>
        <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
          <div className="flex h-[250px] flex-col items-center justify-center space-y-4">
            <div className="text-destructive flex items-center space-x-2">
              <AlertCircle className="h-4 w-4" />
              <span>{error}</span>
            </div>
            <Button onClick={fetchData} variant="outline" size="sm">
              <RefreshCw className="mr-2 h-4 w-4" />
              Coba Lagi
            </Button>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="@container/card">
      <CardHeader>
        <CardTitle>Perkembangan Data Sekolah</CardTitle>
        <CardDescription>
          <span className="hidden @[540px]/card:block">Data siswa dan guru dalam 3 bulan terakhir</span>
          <span className="@[540px]/card:hidden">Data 3 bulan terakhir</span>
        </CardDescription>
        <CardAction>
          <ToggleGroup
            type="single"
            value={timeRange}
            onValueChange={setTimeRange}
            variant="outline"
            className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
          >
            <ToggleGroupItem value="90d">3 Bulan Terakhir</ToggleGroupItem>
            <ToggleGroupItem value="30d">30 Hari Terakhir</ToggleGroupItem>
            <ToggleGroupItem value="7d">7 Hari Terakhir</ToggleGroupItem>
          </ToggleGroup>
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger
              className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
              size="sm"
              aria-label="Select a value"
            >
              <SelectValue placeholder="3 Bulan Terakhir" />
            </SelectTrigger>
            <SelectContent className="rounded-xl">
              <SelectItem value="90d" className="rounded-lg">
                3 Bulan Terakhir
              </SelectItem>
              <SelectItem value="30d" className="rounded-lg">
                30 Hari Terakhir
              </SelectItem>
              <SelectItem value="7d" className="rounded-lg">
                7 Hari Terakhir
              </SelectItem>
            </SelectContent>
          </Select>
        </CardAction>
      </CardHeader>
      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
        <ChartContainer config={chartConfig} className="aspect-auto h-[250px] w-full">
          <AreaChart data={chartData}>
            <defs>
              <linearGradient id="fillSiswa" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="var(--color-siswa)" stopOpacity={0.8} />
                <stop offset="95%" stopColor="var(--color-siswa)" stopOpacity={0.1} />
              </linearGradient>
              <linearGradient id="fillGuru" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="var(--color-guru)" stopOpacity={0.8} />
                <stop offset="95%" stopColor="var(--color-guru)" stopOpacity={0.1} />
              </linearGradient>
            </defs>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              minTickGap={32}
              tickFormatter={(value) => {
                const date = new Date(value);
                return date.toLocaleDateString("en-US", {
                  month: "short",
                  day: "numeric",
                });
              }}
            />
            <ChartTooltip
              cursor={false}
              defaultIndex={isMobile ? -1 : 10}
              content={
                <ChartTooltipContent
                  labelFormatter={(value) => {
                    return new Date(value).toLocaleDateString("en-US", {
                      month: "short",
                      day: "numeric",
                    });
                  }}
                  indicator="dot"
                />
              }
            />
            <Area dataKey="siswa" type="natural" fill="url(#fillSiswa)" stroke="var(--color-siswa)" stackId="a" />
            <Area dataKey="guru" type="natural" fill="url(#fillGuru)" stroke="var(--color-guru)" stackId="a" />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}