'use client';

import { useSearchParams, useRouter, usePathname } from 'next/navigation';
import { BasicDataGrid } from '@/components/table/BasicDataGridTable';
import AdminForm from './AdminForm';
import { DeleteAdminDialog } from './DeleteAdminDialog';
import { adminColumns } from './adminAccountColumns';
import StatsCards from './StatsCards';
import { AdminAccount } from '@/app/generated/prisma/client';
import { Suspense, useState } from 'react';
import {
	useGetAllAdminsQuery,
	useDeleteAdminMutation,
} from '@/store/slice/adminAccountApi';
import { useSelector } from 'react-redux';
import { isAdminSelector } from '@/store/authSlice';

const AdminListTable = () => {
	const isAdmin = useSelector(isAdminSelector);
	const router = useRouter();
	const pathname = usePathname();
	const searchParams = useSearchParams();

	const [openDialog, setOpenDialog] = useState(false);
	const [selectedAdmin, setSelectedAdmin] = useState<AdminAccount | null>(
		null
	);
	const [isDeleting, setIsDeleting] = useState(false);
	const [deletingAdmin, setDeletingAdmin] = useState<AdminAccount | null>(
		null
	);

	// URL params
	const page = parseInt(searchParams.get('page') || '1', 10);
	const search = searchParams.get('search') || '';

	// ------------------------------
	// API Queries / Mutations
	// ------------------------------
	const { data: adminsResponse } = useGetAllAdminsQuery();
	const [deleteAdmin] = useDeleteAdminMutation();

	// Update URL helper
	const updateSearchParams = (updates: Record<string, string>) => {
		const params = new URLSearchParams(searchParams.toString());
		Object.entries(updates).forEach(([key, value]) => {
			if (value) params.set(key, value);
			else params.delete(key);
		});
		if (updates.search !== undefined) params.set('page', '1');
		router.push(`${pathname}?${params.toString()}`);
	};

	// ------------------------------
	// Table Data & Pagination
	// ------------------------------
	const tableData =
		adminsResponse?.data.filter(
			(a) =>
				a.fullName.toLowerCase().includes(search.toLowerCase()) ||
				a.email.toLowerCase().includes(search.toLowerCase())
		) || [];

	const totalPages =
		adminsResponse?.pagination?.totalPages || Math.ceil(tableData.length / 5);

	// ------------------------------
	// Handlers
	// ------------------------------
	const handleSearch = (query: string) =>
		updateSearchParams({ search: query });
	const handlePageChange = (newPage: number) =>
		updateSearchParams({ page: newPage.toString() });

	const handleEdit = (admin: AdminAccount) => {
		setSelectedAdmin(admin);
		setOpenDialog(true);
	};

	const handleDelete = (admin: AdminAccount) => {
		setIsDeleting(true);
		setDeletingAdmin(admin);
	};

	const handleConfirmDelete = async () => {
		if (deletingAdmin) {
			await deleteAdmin(deletingAdmin.id);
			setIsDeleting(false);
			setDeletingAdmin(null);
		}
	};

	const handleView = (admin: AdminAccount) =>
		alert(`Viewing ${admin.fullName}`);

	const handleAdd = () => {
		setSelectedAdmin(null);
		setOpenDialog(true);
	};

	// const handleToggleStatus = async (admin: AdminAccount) => {
	// 	await toggleAdminStatus(admin.id);
	// };

	return (
		<Suspense fallback={<div className="p-6">Loading admins...</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-8 lg:mb-10">
					<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
						<div className="space-y-3">
							<div className="relative">
								<h1
									className="font-playfair text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight"
									style={{ color: '#E5D9C6' }}
								>
									Admins
								</h1>
								<div className="luxury-line w-24 mt-2" />
							</div>
							<p className="mt-4 text-sm text-[#A89A72] max-w-xl leading-relaxed">
								Manage your admin accounts
							</p>
						</div>
					</div>
				</div>

				{/* Stats Cards */}
				<div className="mb-8 lg:mb-10">
					{adminsResponse && <StatsCards stats={adminsResponse?.stats} />}
				</div>

				{/* Table */}
				<div className="mt-6 lg:mt-8 space-y-4">
					<BasicDataGrid
						data={tableData}
						columns={adminColumns}
						searchPlaceholder="Search admins by name or email..."
						showSearch
						showPagination
						showAddButton
						showActions
						currentPage={page}
						totalPages={totalPages}
						onPageChange={handlePageChange}
						onItemPerPageChange={() => {}}
						onSearch={handleSearch}
						initialSearchValue={search}
						onAddClick={handleAdd}
						onEdit={handleEdit}
						onDelete={isAdmin ? handleDelete : undefined}
						onView={handleView}
						buttonTitle="Add Admin"
					/>
				</div>
			</div>

			{/* Add/Edit Modal */}
			<AdminForm
				isEditing={!!selectedAdmin}
				isDialogOpen={openDialog}
				setIsDialogOpen={setOpenDialog}
				admin={selectedAdmin}
				setEditAdmin={setSelectedAdmin}
			/>

			{/* Delete Confirmation */}
			{deletingAdmin && (
				<DeleteAdminDialog
					isOpen={isDeleting}
					admin={deletingAdmin}
					setIsOpen={setIsDeleting}
					onDelete={handleConfirmDelete}
				/>
			)}
		</Suspense>
	);
};

export default AdminListTable;