website/app/(admin)/admin/dashboard/page.tsx

"use client";

import { useState, useEffect } from "react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Users,
  UserCheck,
  Calendar,
  CalendarCheck,
  CalendarX,
  DollarSign,
  TrendingUp,
  ArrowUpRight,
  ArrowDownRight,
} from "lucide-react";
import { useAppTheme } from "@/components/ThemeProvider";

interface DashboardStats {
  total_users: number;
  active_users: number;
  total_bookings: number;
  upcoming_bookings: number;
  completed_bookings: number;
  cancelled_bookings: number;
  total_revenue: number;
  monthly_revenue: number;
}

export default function Dashboard() {
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [timePeriod, setTimePeriod] = useState<string>("last_month");
  const { theme } = useAppTheme();
  const isDark = theme === "dark";

  useEffect(() => {
    // Simulate API call
    const fetchStats = async () => {
      setLoading(true);
      // Simulate network delay
      await new Promise((resolve) => setTimeout(resolve, 500));
      
      // Mock API response
      const mockData: DashboardStats = {
        total_users: 3,
        active_users: 3,
        total_bookings: 6,
        upcoming_bookings: 6,
        completed_bookings: 0,
        cancelled_bookings: 0,
        total_revenue: 0,
        monthly_revenue: 0,
      };
      
      setStats(mockData);
      setLoading(false);
    };

    fetchStats();
  }, []);

  const statCards = [
    {
      title: "Total Users",
      value: stats?.total_users ?? 0,
      icon: Users,
      trend: "+12%",
      trendUp: true,
    },
    {
      title: "Active Users",
      value: stats?.active_users ?? 0,
      icon: UserCheck,
      trend: "+8%",
      trendUp: true,
    },
    {
      title: "Total Bookings",
      value: stats?.total_bookings ?? 0,
      icon: Calendar,
      trend: "+24%",
      trendUp: true,
    },
    {
      title: "Upcoming Bookings",
      value: stats?.upcoming_bookings ?? 0,
      icon: CalendarCheck,
      trend: "+6",
      trendUp: true,
    },
    {
      title: "Completed Bookings",
      value: stats?.completed_bookings ?? 0,
      icon: CalendarCheck,
      trend: "0%",
      trendUp: true,
    },
    {
      title: "Cancelled Bookings",
      value: stats?.cancelled_bookings ?? 0,
      icon: CalendarX,
      trend: "0%",
      trendUp: false,
    },
    {
      title: "Total Revenue",
      value: `$${stats?.total_revenue.toLocaleString() ?? 0}`,
      icon: DollarSign,
      trend: "+18%",
      trendUp: true,
    },
    {
      title: "Monthly Revenue",
      value: `$${stats?.monthly_revenue.toLocaleString() ?? 0}`,
      icon: TrendingUp,
      trend: "+32%",
      trendUp: true,
    },
  ];


  const getTrendClasses = (trendUp: boolean) => {
    if (isDark) {
      return trendUp ? "bg-green-500/20 text-green-200" : "bg-red-500/20 text-red-200";
    }
    return trendUp ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700";
  };

  return (
    <div className={`min-h-screen ${isDark ? "bg-gray-900" : "bg-gray-50"}`}>

      {/* Main Content */}
      <main className="p-4 sm:p-6 lg:p-8 space-y-6">
          {/* Welcome Section */}
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
            <div>
              <h1 className={`text-2xl font-semibold mb-1 ${isDark ? "text-white" : "text-gray-900"}`}>
                Welcome Back! Hammond
              </h1>
              <p className={`text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                Here's an overview of your practice today
              </p>
            </div>
            <Select value={timePeriod} onValueChange={setTimePeriod}>
              <SelectTrigger className={`w-full sm:w-[200px] cursor-pointer ${isDark ? "bg-gray-800 border-gray-700 text-gray-100" : "bg-white border-gray-200 text-gray-900"}`}>
                <SelectValue placeholder="Select period" />
              </SelectTrigger>
              <SelectContent className={`${isDark ? "bg-gray-800 border-gray-700 text-gray-100" : "bg-white border-gray-200 text-gray-900"} cursor-pointer`}>
                <SelectItem className={isDark ? "focus:bg-gray-700" : ""} value="last_week">Last Week</SelectItem>
                <SelectItem className={isDark ? "focus:bg-gray-700" : ""} value="last_month">Last Month</SelectItem>
                <SelectItem className={isDark ? "focus:bg-gray-700" : ""} value="last_year">Last Year</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {loading ? (
            <div className="flex items-center justify-center py-12">
              <div className={`animate-spin rounded-full h-8 w-8 border-b-2 ${isDark ? "border-gray-600" : "border-gray-400"}`}></div>
            </div>
          ) : (
            <>
              {/* Stats Grid */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4">
                {statCards.map((card, index) => {
                  const Icon = card.icon;
                  return (
                    <div
                      key={index}
                      className={`rounded-lg border p-4 sm:p-5 md:p-6 hover:shadow-md transition-shadow ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}
                    >
                      <div className="flex items-start justify-between mb-3 sm:mb-4">
                        <div className={`p-2 sm:p-2.5 rounded-lg ${isDark ? "bg-gray-700" : "bg-gray-50"}`}>
                          <Icon className={`w-4 h-4 sm:w-5 sm:h-5 ${isDark ? "text-gray-200" : "text-gray-600"}`} />
                        </div>
                        <div className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${getTrendClasses(card.trendUp)}`}>
                          {card.trendUp ? (
                            <ArrowUpRight className="w-3 h-3" />
                          ) : (
                            <ArrowDownRight className="w-3 h-3" />
                          )}
                          <span className="hidden sm:inline">{card.trend}</span>
                        </div>
                      </div>
                      
                      <div>
                        <h3 className={`text-xs font-medium mb-1 sm:mb-2 uppercase tracking-wider ${isDark ? "text-rose-300" : "text-rose-600"}`}>
                          {card.title}
                        </h3>
                        <p className={`text-xl sm:text-2xl font-bold mb-1 ${isDark ? "text-white" : "text-gray-900"}`}>
                          {card.value}
                        </p>
                        <p className={`text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                          vs last month
                        </p>
                      </div>
                    </div>
                  );
                })}
              </div>

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