tt-booking/components/dashboard/QuickStats-new.tsx

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