'use client';

import * as React from 'react';
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import {
	ChartContainer,
	ChartTooltip,
	ChartTooltipContent,
	type ChartConfig,
} from '@/components/ui/chart';
import { BarChart, Bar, CartesianGrid, XAxis } from 'recharts';

export default function PeakBookingCard({
	stats,
	isLoading,
}: {
	stats: any;
	isLoading: boolean;
}) {
	const [activeChart, setActiveChart] =
		React.useState<keyof ChartConfig>('reservations');

	if (isLoading || !stats) {
		return (
			<Card>
				<CardHeader>
					<CardTitle>Peak Booking Hours</CardTitle>
					<CardDescription>
						Hourly distribution of reservations
					</CardDescription>
				</CardHeader>
				<CardContent>
					<Skeleton className="h-64 w-full" />
				</CardContent>
			</Card>
		);
	}

	// Transform your stats into chartData format
	const chartData = stats.reservations.peakHours.map((h: any) => ({
		hour: `${h.hour}:00`,
		reservations: h.count,
	}));

	const chartConfig = {
		reservations: {
			label: 'Bookings',
			color: 'var(--chart-1)',
		},
	} satisfies ChartConfig;

	const total = React.useMemo(
		() => ({
			reservations: chartData.reduce(
				(acc: any, curr: any) => acc + curr.reservations,
				0
			),
		}),
		[chartData]
	);

	return (
		<Card className="py-0">
			<CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
				<div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:py-0!">
					<CardTitle>Peak Booking Hours</CardTitle>
					<CardDescription>
						Hourly distribution of reservations
					</CardDescription>
				</div>
				<div className="flex">
					<button
						key="reservations"
						data-active={activeChart === 'reservations'}
						className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
						onClick={() => setActiveChart('reservations')}
					>
						<span className="text-xs text-muted-foreground">
							Total Bookings
						</span>
						<span className="text-lg leading-none font-bold sm:text-3xl">
							{total.reservations.toLocaleString()}
						</span>
					</button>
				</div>
			</CardHeader>
			<CardContent className="px-2 sm:p-6">
				<ChartContainer
					config={chartConfig}
					className="aspect-auto h-[250px] w-full"
				>
					<BarChart
						accessibilityLayer
						data={chartData}
						margin={{ left: 12, right: 12 }}
					>
						<CartesianGrid vertical={false} />
						<XAxis
							dataKey="hour"
							tickLine={false}
							axisLine={false}
							tickMargin={8}
							minTickGap={4}
						/>
						<ChartTooltip
							content={
								<ChartTooltipContent
									className="w-[150px]"
									nameKey={activeChart}
									labelFormatter={(value) => value}
								/>
							}
						/>
						<Bar
							dataKey={activeChart}
							fill={`var(--color-reservations)`}
						/>
					</BarChart>
				</ChartContainer>
			</CardContent>
		</Card>
	);
}