'use client';

import * as React from 'react';
import { useSearchParams, useRouter, usePathname } from 'next/navigation';
import { Reservation } from '@/types/reservation';
import { BasicDataGrid } from '@/components/table/BasicDataGridTable';
import {
	useGetReservationsQuery,
} from '@/store/slice/reservationApi';
import { reservationColumns } from './ReservationTableColumns';
import ReservationStatsCards from './ReservationStatsCards';
import ReservationDetail from './ReservationDetail';
import ReservationForm from './ReservationForm';

function ReservationTable() {
	const router = useRouter();
	const pathname = usePathname();
	const searchParams = useSearchParams();

	const [editReservation, setEditReservation] = React.useState<
		Reservation | undefined
	>();

	const [isOpen, setIsOpen] = React.useState(false);

	const [reservation, setReservations] = React.useState<
		Reservation | undefined
	>();

	// -----------------------------
	// URL PARAMS
	// -----------------------------
	const page = Number(searchParams.get('page') ?? 1);
	const search = searchParams.get('search') ?? '';
	const limit = Number(searchParams.get('limit') ?? 10);

	// -----------------------------
	// UPDATE URL PARAMS (NO SCROLL)
	// -----------------------------
	const updateSearchParams = React.useCallback(
		(updates: Record<string, string | undefined>) => {
			const params = new URLSearchParams(searchParams.toString());

			Object.entries(updates).forEach(([key, value]) => {
				if (!value) params.delete(key);
				else params.set(key, value);
			});

			if (updates.search !== undefined) {
				params.set('page', '1');
			}

			router.push(`${pathname}?${params.toString()}`, {
				scroll: false, // ⭐ Prevent page jump
			});
		},
		[router, pathname, searchParams]
	);

	// -----------------------------
	// FETCH DATA
	// -----------------------------
	const { data } = useGetReservationsQuery({
		page,
		search,
		limit,
	});

	const reservations = data?.data ?? [];
	const pagination = data?.pagination;

	// -----------------------------
	// HANDLERS
	// -----------------------------
	const handleSearch = (query: string) => {
		updateSearchParams({ search: query });
	};

	const handlePageChange = (newPage: number) => {
		updateSearchParams({ page: String(newPage) });
	};

	const handleItemsPerPageChange = (newLimit: number) => {
		updateSearchParams({
			limit: String(newLimit),
			page: '1',
		});
	};

	const handleView = (reservation: Reservation) => {
		setReservations(reservation);
		setIsOpen(true);
	};
	const handleEdit = (reservation: Reservation) => {
		setEditReservation(reservation);
		setIsOpen(true);
	};

	return (
		<div>
			<div className="px-4 sm:px-6 lg:px-8 py-6 sm:py-8 lg:py-10 max-w-[1600px] mx-auto">
				{/* Header */}
				<div className="mb-10">
					<div className="space-y-3">
						<h1
							className="text-3xl sm:text-4xl font-bold tracking-tight"
							style={{ color: '#E5D9C6' }}
						>
							Reservations
						</h1>

						<div className="w-24 h-[2px] bg-primary rounded-full" />

						<p
							className="text-sm sm:text-base max-w-xl"
							style={{ color: '#B8B2A8' }}
						>
							Monitor and manage all transport reservations, customer
							requests, and booking activity.
						</p>
					</div>
				</div>

				{/* Stats */}
				{data && (
					<div className="mb-10">
						<ReservationStatsCards
							stats={{
								totalReservations: 0,
								pendingReservations: 0,
								confirmedReservations: 0,
								todayTrips: 0,
							}}
						/>
					</div>
				)}
				{reservation && (
					<ReservationDetail
						reservation={reservation}
						isOpen={isOpen && reservation !== undefined}
						handleClose={() => {
							setReservations(undefined);
							setIsOpen(false);
						}}
					/>
				)}

				{editReservation && (
					<ReservationForm
						reservation={editReservation}
						isOpen={isOpen && editReservation !== undefined}
						onClose={() => {
							setEditReservation(undefined);
							setIsOpen(false);
						}}
					/>
				)}

				{/* Table */}
				<BasicDataGrid
					data={reservations}
					columns={reservationColumns}
					searchPlaceholder="Search reservations..."
					showSearch
					showPagination
					showActions
					currentPage={page}
					totalPages={pagination?.totalPages ?? 1}
					onPageChange={handlePageChange}
					onItemPerPageChange={handleItemsPerPageChange}
					onSearch={handleSearch}
					initialSearchValue={search}
					onView={handleView}
					onEdit={handleEdit}
				/>
			</div>
		</div>
	);
}

export default ReservationTable;