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

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

  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,
    },
  ];


  return (
    <div className="min-h-screen bg-gray-50">

      {/* Main Content */}
      <main className="p-4 sm:p-6 lg:p-8 space-y-6">
          {/* Welcome Section */}
          <div className="flex items-center justify-between mb-6">
            <div>
              <h1 className="text-2xl font-semibold text-gray-900 mb-1">
                Welcome Back! Hammond
              </h1>
              <p className="text-sm text-gray-500">
                Here's an overview of your practice today
              </p>
            </div>
            <Select value={timePeriod} onValueChange={setTimePeriod}>
              <SelectTrigger className="w-[180px] cursor-pointer">
                <SelectValue placeholder="Select period" />
              </SelectTrigger>
              <SelectContent className="bg-white cursor-pointer">
                <SelectItem value="last_week">Last Week</SelectItem>
                <SelectItem value="last_month">Last Month</SelectItem>
                <SelectItem 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 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="bg-white rounded-lg border border-gray-200 p-4 sm:p-5 md:p-6 hover:shadow-md transition-shadow"
                    >
                      <div className="flex items-start justify-between mb-3 sm:mb-4">
                        <div className="p-2 sm:p-2.5 rounded-lg bg-gray-50">
                          <Icon className="w-4 h-4 sm:w-5 sm:h-5 text-gray-600" />
                        </div>
                        <div className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
                          card.trendUp 
                            ? "bg-green-50 text-green-700" 
                            : "bg-red-50 text-red-700"
                        }`}>
                          {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 text-rose-600 mb-1 sm:mb-2 uppercase tracking-wider">
                          {card.title}
                        </h3>
                        <p className="text-xl sm:text-2xl font-bold text-gray-900 mb-1">
                          {card.value}
                        </p>
                        <p className="text-xs text-gray-500">
                          vs last month
                        </p>
                      </div>
                    </div>
                  );
                })}
              </div>

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