"use client";

import { useState } from "react";
import Image from "next/image";
import { Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
	Pagination,
	PaginationContent,
	PaginationItem,
	PaginationLink,
	PaginationNext,
	PaginationPrevious,
} from "@/components/ui/pagination";
import { PhotoDialog } from "@/components/photo-dialog";
import useFileUpload from "@/hooks/use-file-upload";
import useMedia from "@/hooks/use-media";
import Media from "@/interfaces/Media";
import useApiMutation from "@/hooks/use-api";
import request from "@/lib/request";

export default function PhotoGallery() {
	const {
		data,
		error: mediaError,
		isLoading,
		success,
		setPage,
		setLimit,
		mutate,
	} = useMedia();
	console.log(data);
	const [selectedPhoto, setSelectedPhoto] = useState<Media | null>(null);
	const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
	const { progress, isUploading, error, uploadFile, cancelUpload } =
		useFileUpload();

	const handleAddPhoto = (newPhoto: Omit<Media, "id">, file: File) => {
		uploadFile(file, "/media/upload", (response) => {
			mutate();
		});
	};

	const handleUpdatePhoto = (updatedPhoto: Omit<Media, "id">) => {
		if (selectedPhoto) {
		}
		setSelectedPhoto(null);
	};

	const handleDeletePhoto = async (id: Media["id"]) => {
		try {
			const res = await request<undefined>(`/media/${id}/delete`, {
				method: "DELETE",
				requiresAuth: true,
			});
			if (res.status === "Success") mutate();
		} catch (e) {
			console.log(e);
		}
		setSelectedPhoto(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">Gallerie Photo</h1>
				<Button
					disabled={isLoading}
					onClick={() => setIsAddDialogOpen(true)}
				>
					<Plus className="mr-2 h-4 w-4" /> Ajouter une photo
				</Button>
			</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) => (
					<div
						key={photo.id}
						className="aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
						onClick={() => setSelectedPhoto(photo)}
					>
						<Image
							src={photo.url || "/placeholder.svg"}
							alt={photo.alt}
							width={300}
							height={300}
							className="w-full h-full object-cover"
						/>
					</div>
				))}
			</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>
			<PhotoDialog
				isOpen={!!selectedPhoto}
				photo={selectedPhoto || undefined}
				onClose={() =>
					setSelectedPhoto((p) => (isUploading ? p : null))
				}
				onDelete={handleDeletePhoto}
				onSave={handleUpdatePhoto}
			/>
			<PhotoDialog
				isOpen={isAddDialogOpen}
				onClose={() => setIsAddDialogOpen(false)}
				onSave={handleAddPhoto}
			/>
		</div>
	);
}