'use client';

import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { RefreshCw, Calendar, Clock, MapPin } from 'lucide-react';
import { format } from 'date-fns';

interface Booking {
	id: string;
	date: string;
	startTime: string;
	endTime: string;
	status: string;
	notes?: string;
	createdAt: Date;
	court: {
		id: string;
		name: string;
	};
	user: {
		id: string;
		name: string;
		surname: string;
		email: string;
	};
}

export function AdminRecentBookings() {
	const [bookings, setBookings] = useState<Booking[]>([]);
	const [loading, setLoading] = useState(true);

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

	const fetchBookings = async () => {
		try {
			setLoading(true);
			const response = await fetch('/api/admin/recent-bookings?limit=5');
			if (response.ok) {
				const data = await response.json();
				setBookings(data.bookings || []);
			} else {
				console.error('Failed to fetch bookings');
			}
		} catch (error) {
			console.error('Error fetching bookings:', error);
		} finally {
			setLoading(false);
		}
	};

	const formatDate = (dateStr: string) => {
		try {
			const date = new Date(dateStr);
			return format(date, 'MMM dd');
		} catch {
			return dateStr;
		}
	};

	const getStatusBadgeColor = (status: string) => {
		switch (status) {
			case 'active':
				return 'bg-green-100 text-green-800';
			case 'cancelled':
				return 'bg-red-100 text-red-800';
			default:
				return 'bg-gray-100 text-gray-800';
		}
	};

	if (loading) {
		return (
			<Card>
				<CardHeader className='flex flex-row items-center justify-between'>
					<CardTitle>Recent Bookings</CardTitle>
					<Button size='sm' disabled>
						<RefreshCw className='h-4 w-4 animate-spin mr-2' />
						Loading...
					</Button>
				</CardHeader>
				<CardContent>
					<div className='space-y-4'>
						{[1, 2, 3].map((i) => (
							<div key={i} className='animate-pulse border rounded-lg p-4'>
								<div className='h-4 bg-gray-200 rounded w-3/4 mb-2'></div>
								<div className='h-3 bg-gray-200 rounded w-1/2'></div>
							</div>
						))}
					</div>
				</CardContent>
			</Card>
		);
	}

	return (
		<Card>
			<CardHeader className='flex flex-row items-center justify-between'>
				<CardTitle>Recent Bookings</CardTitle>
				<Button size='sm' onClick={fetchBookings}>
					<RefreshCw className='h-4 w-4 mr-2' />
					Refresh
				</Button>
			</CardHeader>
			<CardContent>
				{bookings.length === 0 ? (
					<div className='text-center py-6 text-gray-500'>No recent bookings found.</div>
				) : (
					<div className='space-y-4'>
						{bookings.map((booking) => (
							<div key={booking.id} className='border rounded-lg p-4 space-y-3'>
								<div className='flex items-center justify-between'>
									<div className='space-y-1'>
										<p className='font-medium'>
											{booking.user.name} {booking.user.surname}
										</p>
										<p className='text-sm text-gray-500'>{booking.user.email}</p>
									</div>
									<Badge className={getStatusBadgeColor(booking.status)}>{booking.status}</Badge>
								</div>

								<div className='flex items-center gap-4 text-sm text-gray-600'>
									<div className='flex items-center gap-1'>
										<MapPin className='h-4 w-4' />
										<span>{booking.court.name}</span>
									</div>
									<div className='flex items-center gap-1'>
										<Calendar className='h-4 w-4' />
										<span>{formatDate(booking.date)}</span>
									</div>
									<div className='flex items-center gap-1'>
										<Clock className='h-4 w-4' />
										<span>
											{booking.startTime} - {booking.endTime}
										</span>
									</div>
								</div>

								{booking.notes && (
									<p className='text-sm text-gray-600 bg-gray-50 rounded p-2'>{booking.notes}</p>
								)}
							</div>
						))}
					</div>
				)}
			</CardContent>
		</Card>
	);
}