import { useQuery } from "@tanstack/react-query";
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { PendingRequests } from "./PendingRequests";
import { AssignmentTool } from "./AssignmentTool";

export function AdminDashboard() {
  const { data: stats, isLoading } = useQuery({
    queryKey: ["/api/stats/admin"],
  });

  if (isLoading) {
    return (
      <div className="space-y-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {[...Array(4)].map((_, i) => (
            <Card key={i}>
              <CardContent className="p-6">
                <Skeleton className="h-20 w-full" />
              </CardContent>
            </Card>
          ))}
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <Skeleton className="h-96" />
          <Skeleton className="h-96" />
        </div>
      </div>
    );
  }

  const statCards = [
    {
      title: "Total DJs",
      value: stats?.totalDJs || 0,
      icon: "fas fa-users",
      color: "blue",
    },
    {
      title: "Active Events",
      value: stats?.activeEvents || 0,
      icon: "fas fa-calendar-check",
      color: "green",
    },
    {
      title: "Pending Requests",
      value: stats?.pendingRequests || 0,
      icon: "fas fa-exclamation-triangle",
      color: "yellow",
    },
    {
      title: "This Month",
      value: stats?.thisMonth || 0,
      icon: "fas fa-chart-bar",
      color: "purple",
    },
  ];

  return (
    <div className="space-y-8">
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-slate-800 mb-2">Admin Dashboard</h2>
        <p className="text-slate-600">Manage DJs, events, and system settings</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {statCards.map((stat) => (
          <Card key={stat.title}>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-slate-600">{stat.title}</p>
                  <p className="text-2xl font-bold text-slate-800">{stat.value}</p>
                </div>
                <div className={`w-12 h-12 bg-${stat.color}-100 rounded-lg flex items-center justify-center`}>
                  <i className={`${stat.icon} text-${stat.color}-600 w-6 h-6`}></i>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <PendingRequests />
        <AssignmentTool />
      </div>
    </div>
  );
}