tt-booking/components/dashboard/BookingCalendar.tsx

'use client';

import { useState } from 'react';
import { Calendar } from '@/components/ui/calendar';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { CalendarIcon, Clock, MapPin } from 'lucide-react';

const timeSlots = [
	'09:00',
	'10:00',
	'11:00',
	'12:00',
	'13:00',
	'14:00',
	'15:00',
	'16:00',
	'17:00',
	'18:00',
	'19:00',
	'20:00',
];

const courts = [
	{ id: 'court-1', name: 'Court 1', isActive: true },
	{ id: 'court-2', name: 'Court 2', isActive: true },
];

export function BookingCalendar() {
	const [selectedDate, setSelectedDate] = useState<Date>(new Date());
	const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
	const [selectedCourt, setSelectedCourt] = useState<string | null>(null);

	const formatDate = (date: Date) => {
		return date.toLocaleDateString('en-US', {
			weekday: 'long',
			year: 'numeric',
			month: 'long',
			day: 'numeric',
		});
	};

	const handleBooking = async () => {
		if (!selectedDate || !selectedSlot || !selectedCourt) {
			return;
		}

		try {
			const response = await fetch('/api/bookings', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify({
					courtId: selectedCourt,
					date: selectedDate.toISOString().split('T')[0],
					timeSlot: selectedSlot,
				}),
			});

			const result = await response.json();

			if (response.ok) {
				// Reset selections and show success
				setSelectedSlot(null);
				setSelectedCourt(null);
				// Show success message
				alert('Booking created successfully!');
			} else {
				alert(result.error || 'Booking failed');
			}
		} catch (error) {
			console.error('Booking error:', error);
			alert('An error occurred while creating the booking');
		}
	};

	return (
		<div className='grid gap-6 lg:grid-cols-2'>
			{/* Calendar */}
			<Card>
				<CardHeader>
					<CardTitle className='flex items-center gap-2'>
						<CalendarIcon className='h-5 w-5' />
						Select Date
					</CardTitle>
					<CardDescription>Choose the date for your table tennis session</CardDescription>
				</CardHeader>
				<CardContent>
					<Calendar
						mode='single'
						selected={selectedDate}
						onSelect={(date) => date && setSelectedDate(date)}
						disabled={(date) => date < new Date() || date.getDay() === 0} // Disable past dates and Sundays
						className='rounded-md border'
					/>
				</CardContent>
			</Card>

			{/* Time Slots and Courts */}
			<Card>
				<CardHeader>
					<CardTitle className='flex items-center gap-2'>
						<Clock className='h-5 w-5' />
						Available Slots
					</CardTitle>
					<CardDescription>{selectedDate ? formatDate(selectedDate) : 'Select a date first'}</CardDescription>
				</CardHeader>
				<CardContent className='space-y-6'>
					{/* Court Selection */}
					<div>
						<h4 className='font-medium mb-3 flex items-center gap-2'>
							<MapPin className='h-4 w-4' />
							Select Court
						</h4>
						<div className='grid grid-cols-2 gap-2'>
							{courts.map((court) => (
								<Button
									key={court.id}
									variant={selectedCourt === court.id ? 'default' : 'outline'}
									size='sm'
									onClick={() => setSelectedCourt(court.id)}
									disabled={!court.isActive}
								>
									{court.name}
								</Button>
							))}
						</div>
					</div>

					{/* Time Slot Selection */}
					<div>
						<h4 className='font-medium mb-3 flex items-center gap-2'>
							<Clock className='h-4 w-4' />
							Select Time
						</h4>
						<div className='grid grid-cols-3 gap-2'>
							{timeSlots.map((time) => {
								const isBooked = Math.random() > 0.7; // Simulate some bookings
								return (
									<Button
										key={time}
										variant={selectedSlot === time ? 'default' : 'outline'}
										size='sm'
										onClick={() => !isBooked && setSelectedSlot(time)}
										disabled={isBooked}
										className='relative'
									>
										{time}
										{isBooked && (
											<Badge
												variant='destructive'
												className='absolute -top-1 -right-1 h-2 w-2 p-0'
											/>
										)}
									</Button>
								);
							})}
						</div>
					</div>

					{/* Booking Summary */}
					{selectedDate && selectedSlot && selectedCourt && (
						<div className='bg-blue-50 border border-blue-200 rounded-lg p-4 space-y-2'>
							<h4 className='font-medium text-blue-900'>Booking Summary</h4>
							<div className='text-sm text-blue-700 space-y-1'>
								<div className='flex items-center gap-2'>
									<CalendarIcon className='h-3 w-3' />
									{formatDate(selectedDate)}
								</div>
								<div className='flex items-center gap-2'>
									<Clock className='h-3 w-3' />
									{selectedSlot} - {String(parseInt(selectedSlot.split(':')[0]) + 1).padStart(2, '0')}
									:00
								</div>
								<div className='flex items-center gap-2'>
									<MapPin className='h-3 w-3' />
									{courts.find((c) => c.id === selectedCourt)?.name}
								</div>
							</div>
							<Button onClick={handleBooking} className='w-full mt-3'>
								Confirm Booking
							</Button>
						</div>
					)}
				</CardContent>
			</Card>
		</div>
	);
}