'use client';

import type { Photo } from '@/lib/data';
import Image from 'next/image';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogClose } from '@/components/ui/dialog';
import { Button } from './ui/button';
import { Download, X } from 'lucide-react';
import { toast } from '@/hooks/use-toast';

interface PhotoModalProps {
  photo: Photo | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export default function PhotoModal({ photo, open, onOpenChange }: PhotoModalProps) {
  if (!photo) return null;

  const handleDownload = async () => {
    try {
      const response = await fetch(photo.src);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.download = `${photo.alt.replace(/ /g, '_')}.png`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();
       toast({
        title: "¡Descargado!",
        description: "La foto se ha guardado en tu dispositivo.",
      });
    } catch (error) {
       toast({
        variant: "destructive",
        title: "Error",
        description: "No se pudo descargar la imagen.",
      });
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-5xl w-auto p-0 bg-transparent border-0 shadow-none">
        <DialogHeader>
          <DialogTitle className="sr-only">{photo.alt}</DialogTitle>
          <DialogDescription className="sr-only">{photo.caption}</DialogDescription>
        </DialogHeader>
        <div className="relative">
          <Image
            src={photo.src}
            alt={photo.alt}
            width={1600}
            height={1200}
            className="object-contain w-auto h-auto max-w-[90vw] max-h-[85vh] rounded-xl shadow-2xl"
            data-ai-hint={photo.dataAiHint}
          />
           <div className="absolute top-4 right-4 flex gap-2">
             <Button 
                onClick={handleDownload} 
                size="icon" 
                aria-label="Descargar" 
                className="h-8 w-8 bg-black/50 text-white border-none transition-colors hover:bg-black/75"
              >
                <Download className="h-4 w-4" />
             </Button>
            <DialogClose asChild>
                <Button 
                    variant="secondary" 
                    size="icon" 
                    aria-label="Cerrar" 
                    className="h-8 w-8 group bg-black/50 text-white border-none transition-colors hover:bg-black/75"
                 >
                    <X className="h-4 w-4 transition-transform duration-300 ease-in-out group-hover:scale-125" />
                </Button>
            </DialogClose>
           </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}