// app/(private)/admin/gallery/page.tsx
'use client';

import * as React from 'react';
import { useSearchParams, useRouter, usePathname } from 'next/navigation';
import { motion } from 'framer-motion';
import { Plus, Filter, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuCheckboxItem,
	DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

import {
	GalleryImage,
	GallerySection,
	GalleryPriority,
} from '@/lib/modules/gallery/gallery.types';
import { toast } from 'sonner';
import {
	useDeleteGalleryImageMutation,
	useGetGalleryImagesQuery,
	useToggleGalleryImageStatusMutation,
} from '@/store/slice/galleryApi';
import { GALLERY_SECTIONS } from '../_const/gallery';
import { GalleryStats } from './GalleryStats';
import { GalleryGrid } from './GalleryGrid';
import { GalleryForm } from './GalleryForm';
import  PageSkeletonLoader  from '@/components/loader/PageSkeletonLoader';
import { Suspense } from 'react';

export default function Gallery() {
	const router = useRouter();
	const pathname = usePathname();
	const searchParams = useSearchParams();

	// Get params from URL
	const page = parseInt(searchParams.get('page') || '1');
	const limit = parseInt(searchParams.get('limit') || '12');
	const section = searchParams.get('section') as GallerySection | undefined;
	const priority = searchParams.get('priority') as GalleryPriority | undefined;
	const isActive = searchParams.has('isActive')
		? searchParams.get('isActive') === 'true'
		: undefined;
	const sortBy = searchParams.get('sortBy') || 'createdAt';
	const sortOrder =
		(searchParams.get('sortOrder') as 'asc' | 'desc') || 'desc';

	// State
	const [formOpen, setFormOpen] = React.useState(false);
	const [selectedImage, setSelectedImage] =
		React.useState<GalleryImage | null>(null);
	const [deleteConfirm, setDeleteConfirm] = React.useState<string | null>(
		null
	);

	// Queries
	const { data, refetch } = useGetGalleryImagesQuery({
		page,
		limit,
		section,
		priority,
		isActive,
		sortBy,
		sortOrder,
	});

	// Mutations
	const [deleteImage] = useDeleteGalleryImageMutation();
	const [toggleStatus] = useToggleGalleryImageStatusMutation();

	const images = data?.data || [];
	const meta = data?.meta;

	// Calculate stats
	const stats = React.useMemo(() => {
		const total = images.length;
		const active = images?.filter((img) => img.isActive).length;
		const inactive = total - active;

		const sectionCounts: Record<string, number> = {};
		const priorityCounts: Record<string, number> = {};

		images.forEach((img) => {
			sectionCounts[img.section] = (sectionCounts[img.section] || 0) + 1;
			priorityCounts[img.priority] = (priorityCounts[img.priority] || 0) + 1;
		});

		return {
			totalImages: meta?.totalItems || total,
			activeImages: active,
			inactiveImages: inactive,
			sectionCounts,
			priorityCounts,
		};
	}, [images, meta]);

	// Handlers
	const updateSearchParams = (updates: Record<string, string | undefined>) => {
		const params = new URLSearchParams(searchParams.toString());

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

		params.set('page', '1'); // Reset to first page on filter change
		router.push(`${pathname}?${params.toString()}`);
	};

	const handleEdit = (image: GalleryImage) => {
		setSelectedImage(image);
		setFormOpen(true);
	};

	const handleDelete = async (image: GalleryImage) => {
		if (deleteConfirm === image.id) {
			try {
				await deleteImage(image.id).unwrap();
				toast.success('Image deleted successfully');
				setDeleteConfirm(null);
			} catch (error) {
				toast.error(`Failed to delete image  ${error}`);
			}
		} else {
			setDeleteConfirm(image.id);
			setTimeout(() => setDeleteConfirm(null), 3000); // Auto-clear after 3 seconds
		}
	};

	const handleToggleStatus = async (image: GalleryImage) => {
		try {
			await toggleStatus(image.id).unwrap();
			toast.success(
				`Image ${image.isActive ? 'deactivated' : 'activated'} successfully`
			);
		} catch (error) {
			toast.error(`Failed to update image status${error}`);
		}
	};

	const handleFormSuccess = () => {
		setSelectedImage(null);
		refetch();
	};

	return (
		<Suspense fallback={<PageSkeletonLoader />}>
			<div className="min-h-screen bg-background p-6 lg:p-8">
				<div className="max-w-7xl mx-auto space-y-6">
					{/* Header */}
					<motion.div
						initial={{ opacity: 0, y: -20 }}
						animate={{ opacity: 1, y: 0 }}
						className="flex items-center justify-between"
					>
						<div>
							<h1 className="text-3xl lg:text-4xl font-serif font-bold text-foreground/90">
								Gallery Management
							</h1>
							<p className="text-foreground/60 mt-2">
								Manage your website's gallery images across different
								sections
							</p>
							<div className="luxury-line w-32 mt-4" />
						</div>

						<div className="flex items-center gap-3">
							<Button
								variant="outline"
								size="sm"
								onClick={() => refetch()}
								className="gap-2 border-primary/20"
							>
								<RefreshCw className="w-4 h-4" />
								Refresh
							</Button>

							{/* Section Filter */}
							<DropdownMenu>
								<DropdownMenuTrigger asChild>
									<Button
										variant="outline"
										size="sm"
										className="gap-2 border-primary/20"
									>
										<Filter className="w-4 h-4" />
										{section
											? GALLERY_SECTIONS.find(
													(s) => s.value === section
												)?.label
											: 'All Sections'}
									</Button>
								</DropdownMenuTrigger>
								<DropdownMenuContent
									align="end"
									className="bg-card border-primary/20"
								>
									<DropdownMenuCheckboxItem
										checked={!section}
										onCheckedChange={() =>
											updateSearchParams({ section: undefined })
										}
									>
										All Sections
									</DropdownMenuCheckboxItem>
									{GALLERY_SECTIONS.map((s) => (
										<DropdownMenuCheckboxItem
											key={s.value}
											checked={section === s.value}
											onCheckedChange={() =>
												updateSearchParams({ section: s.value })
											}
										>
											{s.icon} {s.label}
										</DropdownMenuCheckboxItem>
									))}
								</DropdownMenuContent>
							</DropdownMenu>

							{/* Add Button */}
							<Button
								onClick={() => {
									setSelectedImage(null);
									setFormOpen(true);
								}}
								className="bg-primary hover:bg-primary/90 text-primary-foreground gap-2 gold-glow"
							>
								<Plus className="w-4 h-4" />
								Add Image
							</Button>
						</div>
					</motion.div>

					{/* Stats Cards */}
					<GalleryStats {...stats} />

					{/* Gallery Grid */}
					<GalleryGrid
						images={images}
						onEdit={handleEdit}
						onDelete={handleDelete}
						onToggleStatus={handleToggleStatus}
					/>

					{/* Pagination */}
					{meta && meta.totalPages > 1 && (
						<div className="flex items-center justify-center gap-2 mt-8">
							<Button
								variant="outline"
								size="sm"
								onClick={() =>
									updateSearchParams({ page: (page - 1).toString() })
								}
								disabled={page === 1}
							>
								Previous
							</Button>
							<span className="px-4 py-2 text-sm">
								Page {page} of {meta.totalPages}
							</span>
							<Button
								variant="outline"
								size="sm"
								onClick={() =>
									updateSearchParams({ page: (page + 1).toString() })
								}
								disabled={page === meta.totalPages}
							>
								Next
							</Button>
						</div>
					)}

					{/* Form Modal */}
					<GalleryForm
						open={formOpen}
						onOpenChange={setFormOpen}
						image={selectedImage}
						onSuccess={handleFormSuccess}
					/>

					{/* Delete Confirmation Toast */}
					{deleteConfirm && (
						<div className="fixed bottom-4 right-4 bg-destructive/10 border border-destructive/20 rounded-lg p-4">
							<p className="text-sm text-destructive mb-2">
								Click again to confirm deletion
							</p>
							<Button
								size="sm"
								variant="destructive"
								onClick={() =>
									handleDelete(
										images.find((img) => img.id === deleteConfirm)!
									)
								}
							>
								Confirm Delete
							</Button>
						</div>
					)}
				</div>
			</div>
		</Suspense>
	);
}