'use client';

import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Calendar, Clock, Users, MapPin, TrendingUp, Activity } from 'lucide-react';

interface DashboardStats {
  totalUsers: number;
  todayBookings: number;
  activeCourts: number;
  userBookings: number;
  upcomingBookings: number;
}

export function QuickStats() {
  const [stats, setStats] = useState<DashboardStats>({
    totalUsers: 0,
    todayBookings: 0,
    activeCourts: 0,
    userBookings: 0,
    upcomingBookings: 0,
  });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchStats();
  }, []);

  const fetchStats = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/dashboard/stats');
      if (response.ok) {
        const data = await response.json();
        setStats(data.stats);
      }
    } catch (error) {
      console.error('Error fetching dashboard stats:', error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className='space-y-4'>
        <Card>
          <CardContent className='p-6'>
            <div className='animate-pulse'>
              <div className='h-4 bg-gray-200 rounded w-3/4 mb-4'></div>
              <div className='space-y-3'>
                {[1, 2, 3, 4].map((i) => (
                  <div key={i} className='flex justify-between'>
                    <div className='h-3 bg-gray-200 rounded w-1/2'></div>
                    <div className='h-3 bg-gray-200 rounded w-1/4'></div>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className='space-y-4'>
      <Card>
        <CardHeader className='pb-3'>
          <CardTitle className='text-base'>Quick Stats</CardTitle>
        </CardHeader>
        <CardContent className='space-y-4'>
          <div className='flex items-center justify-between'>
            <div className='flex items-center gap-2'>
              <Calendar className='h-4 w-4 text-blue-600' />
              <span className='text-sm'>Your Bookings</span>
            </div>
            <Badge variant='secondary'>{stats.userBookings} active</Badge>
          </div>

          <div className='flex items-center justify-between'>
            <div className='flex items-center gap-2'>
              <Clock className='h-4 w-4 text-green-600' />
              <span className='text-sm'>Upcoming</span>
            </div>
            <Badge variant='secondary'>{stats.upcomingBookings} bookings</Badge>
          </div>

          <div className='flex items-center justify-between'>
            <div className='flex items-center gap-2'>
              <MapPin className='h-4 w-4 text-purple-600' />
              <span className='text-sm'>Active Courts</span>
            </div>
            <Badge variant='secondary'>{stats.activeCourts} available</Badge>
          </div>

          <div className='flex items-center justify-between'>
            <div className='flex items-center gap-2'>
              <Activity className='h-4 w-4 text-orange-600' />
              <span className='text-sm'>Today\'s Bookings</span>
            </div>
            <Badge variant='secondary'>{stats.todayBookings} total</Badge>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className='pb-3'>
          <CardTitle className='text-base'>System Info</CardTitle>
        </CardHeader>
        <CardContent className='space-y-3'>
          <div className='flex items-center justify-between'>
            <div className='flex items-center gap-2'>
              <Users className='h-4 w-4 text-gray-600' />
              <span className='text-sm'>Total Users</span>
            </div>
            <Badge variant='outline'>{stats.totalUsers}</Badge>
          </div>

          <div className='flex items-center justify-between'>
            <div className='flex items-center gap-2'>
              <TrendingUp className='h-4 w-4 text-green-600' />
              <span className='text-sm'>System Status</span>
            </div>
            <div className='flex items-center gap-2'>
              <div className='h-2 w-2 bg-green-500 rounded-full' />
              <span className='text-xs text-green-600'>Online</span>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}