import { useState, useEffect } from 'react';
import { useState as useAdminState } from 'react';
import { Users, ShoppingBag, Tag, DollarSign, Activity, Home, CalendarCheck } from 'lucide-react';
import { StatCard } from '../../components/ui/StatCard';
import { api } from '../../api/client';
import type { AdminStats } from '../../types';

export function AdminDashboardPage() {
  const [stats, setStats] = useState<AdminStats | null>(null);
  const [rentalStats, setRentalStats] = useAdminState<any>(null);

  useEffect(() => {
    api.get<AdminStats>('/admin/stats').then(setStats).catch(() => {});
    api.get('/admin/rentals/stats').then(setRentalStats).catch(() => {});
  }, []);

  if (!stats) return <div className="text-center text-gray-400 py-12">Loading dashboard...</div>;

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Dashboard</h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
        <StatCard icon={Users} label="Total Users" value={stats.totalUsers} color="blue" />
        <StatCard icon={ShoppingBag} label="Active Listings" value={stats.activeListings} color="green" />
        <StatCard icon={Tag} label="Total Offers" value={stats.totalOffers} color="yellow" />
        <StatCard icon={DollarSign} label="Total Revenue" value={`$${stats.totalRevenue.toFixed(2)}`} color="pink" />
        <StatCard icon={Activity} label="Active Today" value={stats.activeToday} color="primary" />
      </div>

      {rentalStats && (
        <>
          <h2 className="text-lg font-semibold text-gray-900 mb-4 mt-6">Rental Stats</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            <StatCard icon={Home} label="Active Rentals" value={rentalStats.activeRentals} color="blue" />
            <StatCard icon={CalendarCheck} label="Active Bookings" value={rentalStats.activeBookings} color="green" />
            <StatCard icon={DollarSign} label="Rental Revenue" value={`$${(rentalStats.totalRentalRevenue || 0).toFixed(2)}`} color="pink" />
            <StatCard icon={Tag} label="Pending Rentals" value={rentalStats.pendingRentals} color="yellow" />
          </div>
        </>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white rounded-xl border border-gray-200 p-5">
          <h3 className="font-semibold text-gray-900 mb-2">Quick Stats</h3>
          <div className="space-y-3">
            <div className="flex justify-between text-sm">
              <span className="text-gray-500">Pending Reviews</span>
              <span className="font-medium text-yellow-600">{stats.pendingListings}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-500">Total Listings</span>
              <span className="font-medium">{stats.totalListings}</span>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-xl border border-gray-200 p-5">
          <h3 className="font-semibold text-gray-900 mb-2">Platform Health</h3>
          <div className="space-y-3">
            <div className="flex justify-between text-sm">
              <span className="text-gray-500">Active Listing Rate</span>
              <span className="font-medium">{stats.totalListings > 0 ? ((stats.activeListings / stats.totalListings) * 100).toFixed(0) : 0}%</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-500">Avg Revenue/User</span>
              <span className="font-medium">${stats.totalUsers > 0 ? (stats.totalRevenue / stats.totalUsers).toFixed(2) : '0.00'}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
