"use client"

import { DollarSign, Users, CalendarCheck, FileText } from "lucide-react"

import { OverviewCard } from "../components/overview-card"
import {getDashboard} from "@/lib/features/admin/dashboard/service";
import { useQuery } from "@tanstack/react-query"
import Loading from "@/app/(dashoard)/components/loading";
import {ErrorMessage} from "@/components/ui/error-message";
import {DashboardProps} from "@/lib/features/admin/dashboard/type";
import {DashboardHeader} from "@/app/(dashoard)/components/dashboard-header";

export default function DashboardPage() {

  //dashboard
  const { data, isLoading, error } = useQuery({
    queryKey: ["dashboard"],
    queryFn: () => getDashboard(),
  });


  if (isLoading ) {
     return <Loading />;
  }


  //error
  if(error){
    return <ErrorMessage error={error} fallback="Dashboard error" />
  }

  // dashboard
  const dashboard: DashboardProps = data?.data || null;


  return (
    <div className="flex min-h-screen w-full flex-col bg-muted/40 ">
      <DashboardHeader />
      <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
        <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
          <OverviewCard
            title="Clubs"
            value="1,234"
            description=""
            icon={<FileText className="h-4 w-4 text-muted-foreground" />}
          />
          <OverviewCard
            title="Players"
            value={""+dashboard.students}
            description=""
            icon={<Users className="h-4 w-4 text-muted-foreground" />}
          />
          <OverviewCard
              title="Fixtures"
              value="15"
              description=""
              icon={<CalendarCheck className="h-4 w-4 text-muted-foreground" />}
          />
          <OverviewCard
            title="Goals"
            value={""+dashboard?.payment}
            description=""
            icon={<DollarSign className="h-4 w-4 text-muted-foreground" />}
          />

        </div>

        <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">

        </div>
      </main>
    </div>
  )
}