'use client';

import { Activity, CheckCircle, XCircle, Clock3 } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { Progress } from '@/components/ui/progress';
import { TabsContent } from '@/components/ui/tabs';
import type { DashboardStats, ReservationStatus } from '../_type/type';
import { JSX } from 'react';
import PeakBookingCard from './PeakBookingCard';

interface ReservationsTabProps {
	stats: DashboardStats | null;
	isLoading: boolean;
	count?: number; // optional fallback if needed
}

const statusIcons: Record<ReservationStatus, JSX.Element> = {
	PENDING: <Clock3 className="h-4 w-4 text-yellow-500" />,
	CONFIRMED: <CheckCircle className="h-4 w-4 text-green-500" />,
	COMPLETED: <Activity className="h-4 w-4 text-blue-500" />,
	CANCELLED: <XCircle className="h-4 w-4 text-red-500" />,
};

const ReservationsTab: React.FC<ReservationsTabProps> = ({
	stats,
	isLoading,
}) => {
	const totalReservations = stats?.reservations.total || 1; // prevent division by zero
	return (
		<TabsContent value="reservations" className="space-y-4">
			<div className="grid gap-4 md:grid-cols-2">
				{/* Status Distribution */}
				<Card>
					<CardHeader>
						<CardTitle>Reservation Status</CardTitle>
					</CardHeader>
					<CardContent>
						{isLoading || !stats ? (
							<Skeleton className="h-40 w-full" />
						) : (
							<div className="space-y-4">
								{(
									Object.entries(stats.reservations.byStatus) as [
										ReservationStatus,
										number,
									][]
								).map(([status, count]) => (
									<div
										key={status}
										className="flex items-center justify-between"
									>
										<div className="flex items-center gap-2">
											{statusIcons[status]}
											<span className="text-sm">{status}</span>
										</div>
										<div className="flex items-center gap-4">
											<span className="text-sm font-medium">
												{count}
											</span>
											<span className="text-xs text-muted-foreground w-12">
												{Math.round(
													(count / totalReservations) * 100
												)}
												%
											</span>
										</div>
									</div>
								))}
							</div>
						)}
					</CardContent>
				</Card>

				{/* Popular Locations */}
				<Card>
					<CardHeader>
						<CardTitle>Popular Pickup Locations</CardTitle>
					</CardHeader>
					<CardContent>
						{isLoading || !stats ? (
							<Skeleton className="h-40 w-full" />
						) : (
							<div className="space-y-4">
								{stats.reservations.popularLocations.map((loc, i) => (
									<div key={i} className="space-y-1">
										<div className="flex items-center justify-between text-sm">
											<span>{loc.location}</span>
											<span className="font-medium">
												{loc.count}
											</span>
										</div>
										<Progress
											value={
												(loc.count /
													(stats.reservations.popularLocations[0]
														?.count || 1)) *
												100
											}
											className="h-2"
										/>
									</div>
								))}
							</div>
						)}
					</CardContent>
				</Card>
			</div>

			{/* Peak Hours Heatmap */}
			<PeakBookingCard stats={stats} isLoading={isLoading} />
		</TabsContent>
	);
};

export default ReservationsTab;