'use client';

import { useState } from 'react';
import { Eye, FileText, MessageSquare, Clock, Car } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from '@/components/ui/select';
import { useToast } from '@/hooks/use-toast';
import { TimeRange } from '../_type/type';
import StatCard from './StatCard';
import OverviewTab from './OverviewTab';
import ReservationsTab from './ReservationsTab';
import FleetTab from './FleetTab';
import MessagesTab from './MessagesTab';
import ContentTab from './ContentTab';
import AnalyticsTab from './AnalyticsTab';
import { useGetDashboardStatsQuery } from '@/store/slice/dashboardApi';

const Dashboard = () => {
	const [range, setRange] = useState<TimeRange>('month');
	const { toast } = useToast();

	// 🔥 REAL API CALL
	const {
		data: stats,
		isLoading,
		isError,
	} = useGetDashboardStatsQuery({ range });

	// Handle error once
	if (isError) {
		toast({
			title: 'Error loading dashboard',
			description: 'Could not fetch dashboard statistics.',
			variant: 'destructive',
		});
	}

	const getReservationCount = () => {
		return stats?.reservations.total ?? 0;
	};

	return (
		<div className="space-y-6 p-6">
			{/* Header */}
			<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
				<div>
					<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
					<p className="mt-4 text-sm text-[#A89A72] max-w-xl leading-relaxed">
						Comprehensive overview of your limousine service operations
					</p>
				</div>

				<div className="mt-4 sm:mt-0 flex flex-wrap gap-2">
					<Select
						value={range}
						onValueChange={(v: TimeRange) => setRange(v)}
					>
						<SelectTrigger className="w-[150px]">
							<SelectValue placeholder="Select range" />
						</SelectTrigger>
						<SelectContent>
							<SelectItem value="today">Today</SelectItem>
							<SelectItem value="week">This Week</SelectItem>
							<SelectItem value="month">This Month</SelectItem>
							<SelectItem value="year">This Year</SelectItem>
						</SelectContent>
					</Select>

					<Button variant="outline" size="sm">
						<Eye className="mr-2 h-4 w-4" />
						View Live Site
					</Button>
				</div>
			</div>

			{/* Stat Cards */}
			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
				<StatCard
					title={`Total Reservations (${range})`}
					value={getReservationCount()}
					icon={FileText}
					isLoading={isLoading}
					description="All reservations in selected period"
				/>

				<StatCard
					title="Pending Reservations"
					value={stats?.reservations.byStatus.PENDING ?? 0}
					icon={Clock}
					isLoading={isLoading}
					description="Awaiting confirmation"
				/>

				<StatCard
					title="Active Vehicles"
					value={stats?.vehicles.active ?? 0}
					subtext={`of ${stats?.vehicles.total ?? 0} total`}
					icon={Car}
					isLoading={isLoading}
					description="Currently operational"
				/>

				<StatCard
					title="Unread Messages"
					value={stats?.messages.unread ?? 0}
					icon={MessageSquare}
					isLoading={isLoading}
					description="Awaiting response"
					alert={(stats?.messages.unread ?? 0) > 0}
				/>
			</div>

			{/* Tabs */}
			<Tabs defaultValue="overview" className="space-y-4">
				<TabsList>
					<TabsTrigger value="overview">Overview</TabsTrigger>
					<TabsTrigger value="reservations">Reservations</TabsTrigger>
					<TabsTrigger value="fleet">Fleet</TabsTrigger>
					<TabsTrigger value="messages">Messages</TabsTrigger>
					<TabsTrigger value="content">Content</TabsTrigger>
					<TabsTrigger value="analytics">Analytics</TabsTrigger>
				</TabsList>

				{stats && (
					<>
						<OverviewTab
							isLoading={isLoading}
							stats={stats}
							range={range}
						/>
						<ReservationsTab
							stats={stats}
							isLoading={isLoading}
							count={stats?.reservations.total ?? 0}
						/>
						<FleetTab stats={stats} isLoading={isLoading} />
						<MessagesTab stats={stats} isLoading={isLoading} />
						<ContentTab isLoading={isLoading} stats={stats} />
						<AnalyticsTab isLoading={isLoading} stats={stats} />
					</>
				)}
			</Tabs>
		</div>
	);
};

export default Dashboard;