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

"use client";

import { useState, useEffect } from "react";
import SideNav from "@/app/(admin)/_components/side-nav";
import {
  Users,
  UserCheck,
  Calendar,
  CalendarCheck,
  CalendarX,
  DollarSign,
  TrendingUp,
  Search,
  Bell,
} from "lucide-react";

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);

  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,
      bgColor: "bg-gray-50",
      iconColor: "text-gray-600",
    },
    {
      title: "Active Users",
      value: stats?.active_users ?? 0,
      icon: UserCheck,
      bgColor: "bg-gray-50",
      iconColor: "text-gray-600",
    },
    {
      title: "Total Bookings",
      value: stats?.total_bookings ?? 0,
      icon: Calendar,
      bgColor: "bg-gray-50",
      iconColor: "text-gray-600",
    },
    {
      title: "Upcoming Bookings",
      value: stats?.upcoming_bookings ?? 0,
      icon: CalendarCheck,
      bgColor: "bg-gray-50",
      iconColor: "text-gray-600",
    },
    {
      title: "Completed Bookings",
      value: stats?.completed_bookings ?? 0,
      icon: CalendarCheck,
      bgColor: "bg-gray-50",
      iconColor: "text-green-600",
    },
    {
      title: "Cancelled Bookings",
      value: stats?.cancelled_bookings ?? 0,
      icon: CalendarX,
      bgColor: "bg-gray-50",
      iconColor: "text-red-600",
    },
    {
      title: "Total Revenue",
      value: `$${stats?.total_revenue.toLocaleString() ?? 0}`,
      icon: DollarSign,
      bgColor: "bg-gray-50",
      iconColor: "text-gray-600",
    },
    {
      title: "Monthly Revenue",
      value: `$${stats?.monthly_revenue.toLocaleString() ?? 0}`,
      icon: TrendingUp,
      bgColor: "bg-gray-50",
      iconColor: "text-gray-600",
    },
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Side Navigation */}
      <SideNav />

      <div className="md:ml-[200px]">
        {/* Top Header Bar */}
        <div className="bg-white border-b border-gray-200 px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <div className="flex-1 max-w-md">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                <input
                  type="text"
                  placeholder="Search something..."
                  className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
                />
              </div>
            </div>
            <div className="flex items-center gap-4 ml-4">
              <button className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors">
                <Bell className="w-5 h-5 text-gray-600" />
                <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
              </button>
            </div>
          </div>
        </div>

        {/* Main Content */}
        <main className="p-4 sm:p-6 lg:p-8">
          {/* Page Header */}
          <div className="mb-6">
            <h1 className="text-2xl font-semibold text-gray-900 mb-1">Dashboard</h1>
            <p className="text-sm text-gray-500">Overview of your practice statistics</p>
          </div>

          {loading ? (
            <div className="flex items-center justify-center py-12">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-400"></div>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {statCards.map((card, index) => {
                const Icon = card.icon;
                return (
                  <div
                    key={index}
                    className="bg-white rounded-lg border border-gray-200 p-5 hover:shadow-md transition-shadow"
                  >
                    <div className="flex items-center justify-between mb-3">
                      <div className={`p-2.5 rounded-lg ${card.bgColor}`}>
                        <Icon className={`w-5 h-5 ${card.iconColor}`} />
                      </div>
                    </div>
                    <h3 className="text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">
                      {card.title}
                    </h3>
                    <p className="text-2xl font-semibold text-gray-900">
                      {card.value}
                    </p>
                  </div>
                );
              })}
            </div>
          )}
        </main>
      </div>
    </div>
  );
}