tt-booking/components/admin/AdminTimeSlotManagement.tsx

'use client';

import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Switch } from '@/components/ui/switch';
import { Plus, Edit, Trash2, Clock } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';

interface TimeSlot {
	id: string;
	dayOfWeek: number;
	startTime: string;
	endTime: string;
	isActive: boolean;
	createdAt: string;
	updatedAt: string;
}

const DAYS = [
	'Sunday',
	'Monday', 
	'Tuesday',
	'Wednesday',
	'Thursday',
	'Friday',
	'Saturday'
];

export function AdminTimeSlotManagement() {
	const [timeSlots, setTimeSlots] = useState<TimeSlot[]>([]);
	const [loading, setLoading] = useState(false);
	const [showDialog, setShowDialog] = useState(false);
	const [editingSlot, setEditingSlot] = useState<TimeSlot | null>(null);
	const [formData, setFormData] = useState({
		dayOfWeek: 0,
		startTime: '',
		endTime: '',
		isActive: true,
	});
	const { toast } = useToast();

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

	const fetchTimeSlots = async () => {
		try {
			setLoading(true);
			const response = await fetch('/api/admin/time-slots');
			if (response.ok) {
				const data = await response.json();
				setTimeSlots(data.timeSlots);
			} else {
				toast({
					title: 'Error',
					description: 'Failed to fetch time slots',
					variant: 'destructive',
				});
			}
		} catch (error) {
			console.error('Error fetching time slots:', error);
			toast({
				title: 'Error',
				description: 'Failed to fetch time slots',
				variant: 'destructive',
			});
		} finally {
			setLoading(false);
		}
	};

	const handleSubmit = async (e: React.FormEvent) => {
		e.preventDefault();
		
		try {
			setLoading(true);
			
			const url = editingSlot 
				? `/api/admin/time-slots/${editingSlot.id}`
				: '/api/admin/time-slots';
			
			const method = editingSlot ? 'PUT' : 'POST';
			
			const response = await fetch(url, {
				method,
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify(formData),
			});

			if (response.ok) {
				toast({
					title: 'Success',
					description: editingSlot 
						? 'Time slot updated successfully'
						: 'Time slot created successfully',
				});
				fetchTimeSlots();
				setShowDialog(false);
				resetForm();
			} else {
				const error = await response.json();
				toast({
					title: 'Error',
					description: error.error || 'Failed to save time slot',
					variant: 'destructive',
				});
			}
		} catch (error) {
			console.error('Error saving time slot:', error);
			toast({
				title: 'Error',
				description: 'Failed to save time slot',
				variant: 'destructive',
			});
		} finally {
			setLoading(false);
		}
	};

	const handleDelete = async (id: string) => {
		if (!confirm('Are you sure you want to delete this time slot?')) {
			return;
		}

		try {
			setLoading(true);
			const response = await fetch(`/api/admin/time-slots/${id}`, {
				method: 'DELETE',
			});

			if (response.ok) {
				toast({
					title: 'Success',
					description: 'Time slot deleted successfully',
				});
				fetchTimeSlots();
			} else {
				const error = await response.json();
				toast({
					title: 'Error',
					description: error.error || 'Failed to delete time slot',
					variant: 'destructive',
				});
			}
		} catch (error) {
			console.error('Error deleting time slot:', error);
			toast({
				title: 'Error',
				description: 'Failed to delete time slot',
				variant: 'destructive',
			});
		} finally {
			setLoading(false);
		}
	};

	const handleEdit = (slot: TimeSlot) => {
		setEditingSlot(slot);
		setFormData({
			dayOfWeek: slot.dayOfWeek,
			startTime: slot.startTime,
			endTime: slot.endTime,
			isActive: slot.isActive,
		});
		setShowDialog(true);
	};

	const resetForm = () => {
		setEditingSlot(null);
		setFormData({
			dayOfWeek: 0,
			startTime: '',
			endTime: '',
			isActive: true,
		});
	};

	const groupedTimeSlots = timeSlots.reduce((acc, slot) => {
		if (!acc[slot.dayOfWeek]) {
			acc[slot.dayOfWeek] = [];
		}
		acc[slot.dayOfWeek].push(slot);
		return acc;
	}, {} as Record<number, TimeSlot[]>);

	return (
		<Card>
			<CardHeader>
				<div className="flex justify-between items-center">
					<CardTitle className="flex items-center gap-2">
						<Clock className="h-5 w-5" />
						Time Slot Management
					</CardTitle>
					<Dialog open={showDialog} onOpenChange={setShowDialog}>
						<DialogTrigger asChild>
							<Button onClick={resetForm}>
								<Plus className="h-4 w-4 mr-2" />
								Add Time Slot
							</Button>
						</DialogTrigger>
						<DialogContent>
							<DialogHeader>
								<DialogTitle>
									{editingSlot ? 'Edit Time Slot' : 'Add New Time Slot'}
								</DialogTitle>
							</DialogHeader>
							<form onSubmit={handleSubmit} className="space-y-4">
								<div>
									<Label htmlFor="dayOfWeek">Day of Week</Label>
									<Select 
										value={formData.dayOfWeek.toString()} 
										onValueChange={(value) => 
											setFormData({ ...formData, dayOfWeek: parseInt(value) })
										}
									>
										<SelectTrigger>
											<SelectValue placeholder="Select day" />
										</SelectTrigger>
										<SelectContent>
											{DAYS.map((day, index) => (
												<SelectItem key={index} value={index.toString()}>
													{day}
												</SelectItem>
											))}
										</SelectContent>
									</Select>
								</div>
								<div>
									<Label htmlFor="startTime">Start Time</Label>
									<Input
										id="startTime"
										type="time"
										value={formData.startTime}
										onChange={(e) =>
											setFormData({ ...formData, startTime: e.target.value })
										}
										required
									/>
								</div>
								<div>
									<Label htmlFor="endTime">End Time</Label>
									<Input
										id="endTime"
										type="time"
										value={formData.endTime}
										onChange={(e) =>
											setFormData({ ...formData, endTime: e.target.value })
										}
										required
									/>
								</div>
								<div className="flex items-center space-x-2">
									<Switch
										id="isActive"
										checked={formData.isActive}
										onCheckedChange={(checked) =>
											setFormData({ ...formData, isActive: checked })
										}
									/>
									<Label htmlFor="isActive">Active</Label>
								</div>
								<div className="flex justify-end space-x-2">
									<Button
										type="button"
										variant="outline"
										onClick={() => setShowDialog(false)}
									>
										Cancel
									</Button>
									<Button type="submit" disabled={loading}>
										{loading ? 'Saving...' : editingSlot ? 'Update' : 'Create'}
									</Button>
								</div>
							</form>
						</DialogContent>
					</Dialog>
				</div>
			</CardHeader>
			<CardContent>
				{loading && timeSlots.length === 0 ? (
					<div className="text-center py-4">Loading time slots...</div>
				) : (
					<div className="space-y-6">
						{DAYS.map((day, dayIndex) => (
							<div key={dayIndex} className="space-y-2">
								<h3 className="font-semibold text-lg">{day}</h3>
								{groupedTimeSlots[dayIndex]?.length > 0 ? (
									<div className="grid gap-2">
										{groupedTimeSlots[dayIndex]
											.sort((a, b) => a.startTime.localeCompare(b.startTime))
											.map((slot) => (
												<div
													key={slot.id}
													className={`flex items-center justify-between p-3 border rounded-lg ${
														slot.isActive ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200'
													}`}
												>
													<div className="flex items-center space-x-3">
														<div className="font-medium">
															{slot.startTime} - {slot.endTime}
														</div>
														<div className={`px-2 py-1 rounded-full text-xs ${
															slot.isActive 
																? 'bg-green-100 text-green-800' 
																: 'bg-gray-100 text-gray-800'
														}`}>
															{slot.isActive ? 'Active' : 'Inactive'}
														</div>
													</div>
													<div className="flex space-x-2">
														<Button
															size="sm"
															variant="outline"
															onClick={() => handleEdit(slot)}
														>
															<Edit className="h-4 w-4" />
														</Button>
														<Button
															size="sm"
															variant="outline"
															onClick={() => handleDelete(slot.id)}
															className="text-red-600 hover:text-red-700"
														>
															<Trash2 className="h-4 w-4" />
														</Button>
													</div>
												</div>
											))}
									</div>
								) : (
									<p className="text-gray-500 italic">No time slots configured for {day}</p>
								)}
							</div>
						))}
					</div>
				)}
			</CardContent>
		</Card>
	);
}