"use client";

import Image from "next/image";
import {
	Pagination,
	PaginationContent,
	PaginationItem,
	PaginationLink,
	PaginationNext,
	PaginationPrevious,
} from "@/components/ui/pagination";
import useMedia from "@/hooks/use-media";
import { Loader2 } from "lucide-react";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import { useState } from "react";

export default function PhotoGallery() {
	const {
		data,
		error: mediaError,
		isLoading,
		success,
		setPage,
		setLimit,
		mutate,
	} = useMedia();

	const [index, setIndex] = useState<number | null>(null);

	return (
		<div className="container mx-auto px-4 py-8">
			<div className="flex justify-between items-center mb-8">
				<h1 className="text-3xl font-bold">Galerie Photo</h1>
			</div>
			{isLoading ? (
				<div className="flex w-full h-full justify-center">
					<Loader2 className="animate-spin" />
				</div>
			) : (
				<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
					{data?.items.map((photo, idx) => (
						<div
							key={photo.id}
							className="aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
							onClick={() => setIndex(idx)}
						>
							<Image
								src={photo.url || "/placeholder.svg"}
								alt={photo.alt}
								width={300}
								height={300}
								unoptimized
								className="w-full h-full object-cover"
							/>
						</div>
					))}
					<Lightbox
						open={index !== null}
						close={() => setIndex(null)}
						slides={data?.items.map((i) => ({ src: i.url }))}
						index={index ?? 0}
						plugins={[Zoom]}
					/>
				</div>
			)}
			<Pagination className="mt-8">
				<PaginationContent>
					<PaginationItem>
						<PaginationPrevious
							href="#"
							onClick={(e) => {
								e.preventDefault();
								setPage((prev) => Math.max(prev - 1, 1));
							}}
							className={
								data?.page === 1
									? "pointer-events-none opacity-50"
									: ""
							}
						/>
					</PaginationItem>
					{[...Array(data?.totalPages)].map((_, i) => (
						<PaginationItem key={i + 1}>
							<PaginationLink
								href="#"
								onClick={(e) => {
									e.preventDefault();
									setPage(i + 1);
								}}
								isActive={data?.page === i + 1}
							>
								{i + 1}
							</PaginationLink>
						</PaginationItem>
					))}
					<PaginationItem>
						<PaginationNext
							href="#"
							onClick={(e) => {
								e.preventDefault();
								setPage((prev) =>
									Math.min(prev + 1, data?.totalPages ?? 1),
								);
							}}
							className={
								data?.page === data?.totalPages
									? "pointer-events-none opacity-50"
									: ""
							}
						/>
					</PaginationItem>
				</PaginationContent>
			</Pagination>
		</div>
	);
}