'use client';

import { MessageSquare, BarChart, Calendar, TrendingUp } from 'lucide-react';
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
	CardFooter,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { Progress } from '@/components/ui/progress';
import { TabsContent } from '@/components/ui/tabs';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { ServiceTypeBadge, StatusBadge } from './StatusBadge';
import type { DashboardStats, TimeRange, ServiceType } from '../_type/type';
import { useRouter } from 'next/navigation';

interface OverviewTabProps {
	isLoading: boolean;
	stats: DashboardStats | null;
	range: TimeRange;
}

const OverviewTab: React.FC<OverviewTabProps> = ({
	isLoading,
	stats,
	range,
}) => {
	const router = useRouter();
	const maxTrendCount =
		stats?.reservations.trend.reduce((max, d) => Math.max(max, d.count), 1) ||
		1;

	return (
		<TabsContent value="overview" className="space-y-4">
			{/* Charts Row */}
			<div className="grid gap-4 md:grid-cols-2">
				{/* Reservation Trend */}
				<Card>
					<CardHeader>
						<CardTitle className="text-lg flex items-center">
							<TrendingUp className="h-5 w-5 mr-2" />
							Reservation Trend
						</CardTitle>
						<CardDescription>
							Daily reservation count for {range} period
						</CardDescription>
					</CardHeader>
					<CardContent>
						{isLoading || !stats ? (
							<Skeleton className="h-48 w-full" />
						) : (
							<div className="h-48 flex items-end justify-between gap-1">
								{stats.reservations.trend.slice(-14).map((day, i) => (
									<div
										key={i}
										className="relative flex-1 flex items-end group"
									>
										<div
											className="absolute inset-x-1 bottom-0 bg-primary/80 rounded-t hover:bg-primary transition-all cursor-pointer"
											style={{
												height: `${(day.count / maxTrendCount) * 100}%`,
												minHeight: '4px',
											}}
										>
											<div className="opacity-0 group-hover:opacity-100 absolute -top-8 left-1/2 transform -translate-x-1/2 bg-popover text-popover-foreground text-xs px-2 py-1 rounded shadow-lg whitespace-nowrap">
												{day.date}: {day.count} reservations
											</div>
										</div>
									</div>
								))}
							</div>
						)}
					</CardContent>
				</Card>

				{/* Service Type Distribution */}
				<Card>
					<CardHeader>
						<CardTitle className="text-lg flex items-center">
							<BarChart className="h-5 w-5 mr-2" />
							Service Type Distribution
						</CardTitle>
						<CardDescription>
							Breakdown by service category
						</CardDescription>
					</CardHeader>
					<CardContent>
						{isLoading || !stats ? (
							<Skeleton className="h-48 w-full" />
						) : (
							<div className="space-y-4">
								{(
									Object.entries(stats.reservations.byServiceType) as [
										ServiceType,
										number,
									][]
								).map(([type, count]) => (
									<div key={type} className="space-y-1">
										<div className="flex items-center justify-between text-sm">
											<ServiceTypeBadge type={type} />
											<span className="font-medium">{count}</span>
										</div>
										<Progress
											value={
												(count / stats.reservations.total) * 100
											}
											className="h-2"
										/>
									</div>
								))}
							</div>
						)}
					</CardContent>
				</Card>
			</div>

			{/* Upcoming & Recent */}
			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
				{/* Upcoming Reservations */}
				<Card className="lg:col-span-2">
					<CardHeader>
						<CardTitle className="text-lg flex items-center">
							<Calendar className="h-5 w-5 mr-2" />
							Upcoming Reservations
						</CardTitle>
						<CardDescription>Next 5 scheduled rides</CardDescription>
					</CardHeader>
					<CardContent>
						{isLoading || !stats ? (
							<Skeleton className="h-48 w-full" />
						) : (
							<div className="space-y-4">
								{stats.reservations.upcoming.map((res) => (
									<div
										key={res.id}
										className="flex items-center justify-between p-2 rounded-lg hover:bg-muted/50 transition-colors"
									>
										<div className="flex items-center gap-3">
											<Avatar className="h-9 w-9">
												<AvatarFallback>
													{res.customer
														.split(' ')
														.map((n) => n[0])
														.join('')}
												</AvatarFallback>
											</Avatar>
											<div>
												<p className="text-sm font-medium">
													{res.customer}
												</p>
												<div className="flex items-center gap-2 text-xs text-muted-foreground">
													<span>{res.pickupDate}</span>
													<span>{res.pickupTime}</span>
													<ServiceTypeBadge
														type={res.serviceType}
													/>
												</div>
											</div>
										</div>
										<StatusBadge status={res.status} />
									</div>
								))}
							</div>
						)}
					</CardContent>
					<CardFooter className="border-t pt-4">
						<Button
							onClick={(e) => {
								e.preventDefault();
								router.push('/admin/reservations');
							}}
							variant="outline"
							size="sm"
							className="w-full cursor-pointer"
						>
							View All Reservations
						</Button>
					</CardFooter>
				</Card>

				{/* Recent Messages */}
				<Card>
					<CardHeader>
						<CardTitle className="text-lg flex items-center">
							<MessageSquare className="h-5 w-5 mr-2" />
							Recent Messages
						</CardTitle>
						<CardDescription>
							Latest contact form submissions
						</CardDescription>
					</CardHeader>
					<CardContent>
						{isLoading || !stats ? (
							<Skeleton className="h-48 w-full" />
						) : (
							<div className="space-y-4">
								{stats.messages.recent.slice(0, 4).map((msg) => (
									<div
										key={msg.id}
										className="flex items-start justify-between"
									>
										<div className="space-y-1">
											<p className="text-sm font-medium">
												{msg.name}
											</p>
											<p className="text-xs text-muted-foreground">
												{msg.email}
											</p>
											<p className="text-xs text-muted-foreground">
												{new Date(
													msg.createdAt
												).toLocaleTimeString()}
											</p>
										</div>
										<StatusBadge status={msg.status} />
									</div>
								))}
							</div>
						)}
					</CardContent>
					<CardFooter className="border-t pt-4">
						<Button
							onClick={(e) => {
								e.preventDefault();
								router.push('/admin/contact');
							}}
							variant="outline"
							size="sm"
							className="w-full cursor-pointer"
						>
							View All Messages
						</Button>
					</CardFooter>
				</Card>
			</div>
		</TabsContent>
	);
};

export default OverviewTab;