'use client';

import * as React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { GalleryImage } from '@/lib/modules/gallery/gallery.types';
import { Eye, EyeOff, Trash2, Edit, AlertCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import Image from 'next/image';
import { GALLERY_PRIORITIES, GALLERY_SECTIONS } from '../_const/gallery';
import { useSelector } from 'react-redux';
import { isAdminSelector } from '@/store/authSlice';

interface GalleryGridProps {
	images: GalleryImage[];
	onEdit: (image: GalleryImage) => void;
	onDelete: (image: GalleryImage) => void;
	onToggleStatus: (image: GalleryImage) => void;
}

export function GalleryGrid({ images, onEdit, onDelete }: GalleryGridProps) {
		const isAdmin = useSelector(isAdminSelector);
	const [imageLoadErrors, setImageLoadErrors] = React.useState<
		Record<string, boolean>
	>({});
	const handleImageError = (imageId: string) => {
		setImageLoadErrors((prev) => ({ ...prev, [imageId]: true }));
	};

	if (images.length === 0) {
		return (
			<motion.div
				initial={{ opacity: 0, y: 20 }}
				animate={{ opacity: 1, y: 0 }}
				className="flex flex-col items-center justify-center h-64 text-center"
			>
				<div className="w-20 h-20 rounded-full bg-muted flex items-center justify-center mb-4">
					<AlertCircle className="w-8 h-8 text-primary/40" />
				</div>
				<h3 className="text-lg font-semibold text-foreground mb-2">
					No Images Found
				</h3>
				<p className="text-sm text-muted-foreground max-w-sm">
					Add your first gallery image to start building your collection.
				</p>
			</motion.div>
		);
	}

	return (
		<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
			<AnimatePresence>
				{images.map((image, index) => (
					<motion.div
						key={image.id}
						initial={{ opacity: 0, scale: 0.95 }}
						animate={{ opacity: 1, scale: 1 }}
						exit={{ opacity: 0, scale: 0.95 }}
						transition={{ delay: index * 0.05 }}
						whileHover={{ y: -6 }}
						className="group relative rounded-2xl overflow-hidden
						bg-card
						border border-border
						shadow-sm hover:shadow-xl
						hover:border-primary/40
						transition-all duration-500"
					>
						{/* Image */}
						<div className="relative aspect-[4/3] w-full overflow-hidden">
							{imageLoadErrors[image.id] ? (
								<div className="w-full h-full flex items-center justify-center bg-muted">
									<AlertCircle className="w-8 h-8 text-primary/30" />
								</div>
							) : (
								<Image
									src={image.image}
									alt={`Gallery image ${index + 1}`}
									fill
									sizes="(max-width: 768px) 100vw, 33vw"
									className="object-cover transition-transform duration-700 group-hover:scale-105"
									onError={() => handleImageError(image.id)}
								/>
							)}

							{/* Dark overlay */}
							<div className="absolute inset-0 bg-linear-to-t from-black/60 via-black/20 to-transparent" />

							{/* Badges */}
							<div className="absolute top-3 left-3 right-3 flex justify-between">
								{/* Priority */}
								<Badge className="bg-primary/15 text-primary border border-primary/30 px-2.5 py-1 text-xs backdrop-blur-sm">
									<span className="flex items-center gap-1">
										{
											GALLERY_PRIORITIES.find(
												(p) => p.value === image.priority
											)?.icon
										}
										<span className="capitalize">
											{image.priority}
										</span>
									</span>
								</Badge>

								{/* Status */}
								<Badge className="bg-background/70 text-muted-foreground border border-border px-2.5 py-1 text-xs backdrop-blur-sm">
									{image.isActive ? (
										<>
											<Eye className="w-3 h-3 mr-1 inline text-primary" />
											Active
										</>
									) : (
										<>
											<EyeOff className="w-3 h-3 mr-1 inline text-primary" />
											Inactive
										</>
									)}
								</Badge>
							</div>
						</div>

						{/* Content */}
						<div className="p-5 space-y-4">
							<div>
								<h3 className="text-sm font-semibold text-foreground">
									{GALLERY_SECTIONS.find(
										(s) => s.value === image.section
									)?.label || image.section}
								</h3>

								<p className="text-xs text-muted-foreground mt-1">
									{new Date(image.createdAt).toLocaleDateString(
										'en-US',
										{
											month: 'short',
											day: 'numeric',
											year: 'numeric',
										}
									)}
								</p>
							</div>

							{/* Actions */}
							<div className="flex items-center gap-2 pt-3 border-t border-border/40">
								<Button
									size="sm"
									variant="ghost"
									onClick={() => onEdit(image)}
									className="flex-1 text-muted-foreground
									hover:text-primary hover:bg-primary/10
									transition-all"
								>
									<Edit className="w-4 h-4 mr-1" />
									Edit
								</Button>

								{isAdmin && (
									<Button
										size="sm"
										variant="ghost"
										onClick={() => onDelete(image)}
										className="flex-1 text-muted-foreground
										hover:text-primary hover:bg-primary/10
										transition-all"
									>
										<Trash2 className="w-4 h-4 mr-1" />
										Delete
									</Button>
								)}
							</div>
						</div>
					</motion.div>
				))}
			</AnimatePresence>
		</div>
	);
}