"use client";

import * as React from "react";
import { ChartAreaInteractive } from "@/app/(main)/dashboard/_components/sidebar/chart-area-interactive";
import { DashboardStatsCards } from "@/app/(main)/dashboard/_components/sidebar/stats-cards";
import { RecentUsersTable } from "@/app/(main)/dashboard/_components/sidebar/recent-users-table";

interface DashboardStats {
  chartData: Array<{
    date: string;
    siswa: number;
    guru: number;
  }>;
  totals: {
    siswa: number;
    guru: number;
    jurusan: number;
    mapel: number;
  };
  recentUsers: Array<{
    id: string;
    name: string;
    email: string;
    role: string;
    createdAt: string;
    image?: string;
  }>;
}

export function AdminDashboard() {
  const [dashboardData, setDashboardData] = React.useState<DashboardStats | null>(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);

  React.useEffect(() => {
    const fetchDashboardData = async () => {
      try {
        setLoading(true);
        setError(null);

        const response = await fetch("/api/dashboard/stats?days=90");
        const result = await response.json();

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

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

    fetchDashboardData();
  }, []);

  if (error) {
    return (
      <div className="flex flex-1 flex-col">
        <div className="@container/main flex flex-1 flex-col gap-2">
          <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
            <div className="px-4 lg:px-6">
              <div className="py-8 text-center">
                <p className="text-destructive">Error: {error}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-1 flex-col">
      <div className="@container/main flex flex-1 flex-col gap-2">
        <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
          <div className="px-4 lg:px-6">
            <DashboardStatsCards totals={dashboardData?.totals} loading={loading} />
          </div>
          <div className="px-4 lg:px-6">
            <ChartAreaInteractive />
          </div>
          <div className="px-4 lg:px-6">
            <RecentUsersTable users={dashboardData?.recentUsers || []} />
          </div>
        </div>
      </div>
    </div>
  );
}