"use client";

import { useEffect, useState } from "react";
import { Users, CreditCard, CalendarCheck, TrendingUp } from "lucide-react";
import { StatsCard } from "@/components/ui/StatsCard";
import { UserManagement } from "@/components/users/UserManagement";
import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
import axios from "axios";

interface DashboardStats {
  totalUsers: number;
  activeClients: number;
  totalRevenue: number;
  revenueGrowth: number;
}

export default function Home() {
  const [stats, setStats] = useState<DashboardStats>({
    totalUsers: 0,
    activeClients: 0,
    totalRevenue: 0,
    revenueGrowth: 0,
  });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchStats = async () => {
      try {
        const response = await axios.get("/api/admin/stats");
        setStats(response.data);
      } catch (error) {
        console.error("Failed to fetch dashboard stats:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchStats();
  }, []);

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };

  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-3xl font-bold text-slate-900">Dashboard</h2>
        <p className="text-slate-500 mt-2">Welcome back, here's what's happening today.</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <StatsCard
          title="Total Users"
          value={loading ? "..." : stats.totalUsers}
          change="+12%" // Placeholder for now as we don't track historical growth yet
          trend="up"
          icon={Users}
          color="blue"
        />
        <StatsCard
          title="Active Clients"
          value={loading ? "..." : stats.activeClients}
          change="+5%"
          trend="up"
          icon={CalendarCheck}
          color="green"
        />
        <StatsCard
          title="Revenue"
          value={loading ? "..." : formatCurrency(stats.totalRevenue)}
          change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}%`}
          trend={stats.revenueGrowth >= 0 ? "up" : "down"}
          icon={CreditCard}
          color="purple"
        />
        <StatsCard
          title="Growth"
          value="24%" // Placeholder
          change="-2%"
          trend="down"
          icon={TrendingUp}
          color="orange"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
          <h3 className="text-xl font-bold text-slate-900 mb-6">Recent Activity</h3>
          <UserManagement />
        </div>

        <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
          <h3 className="text-xl font-bold text-slate-900 mb-6">Quick Analytics</h3>
          <AnalyticsDashboard />
        </div>
      </div>
    </div>
  );
}