import React from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Heart } from 'lucide-react';
import { likePhoto } from '../services/photosApi';

type Photo = { id: number; file_path?: string; thumbnail_path?: string; likes_count?: number; created_at?: string };

export default function PhotoLightbox() {
  const nav = useNavigate();
  const { state } = useLocation();
  const { photoId } = useParams();
  const [photo, setPhoto] = React.useState<Photo | null>((state as any)?.photo ?? null);

  const [likes, setLikes] = React.useState<number | null>(null);
  const [liked, setLiked] = React.useState(false);

  React.useEffect(() => {
    if (photo) return;
    (async () => {
      const res = await fetch(`/api/v1/photos/${photoId}`);
      if (res.ok) setPhoto(await res.json());
    })();
  }, [photo, photoId]);

  React.useEffect(() => {
    if (photo && likes === null) setLikes(photo.likes_count ?? 0);
  }, [photo, likes]);

  async function onLike() {
    if (liked || !photo) return;
    setLiked(true);
    const c = await likePhoto(photo.id);
    setLikes(c);
  }

  function onOpenChange(open: boolean) {
    if (!open) nav(-1);
  }

  return (
    <Dialog open onOpenChange={onOpenChange}>
      <DialogContent className="max-w-5xl border-0 bg-black p-0 text-white">
        <div className="flex items-center justify-between p-2">
          <div className="flex items-center gap-2">
            <Button variant="secondary" size="sm" onClick={onLike} disabled={liked}>
              <Heart className="mr-1 h-4 w-4" /> {likes ?? 0}
            </Button>
          </div>
          <Button variant="secondary" size="sm" onClick={() => nav(-1)}>Schließen</Button>
        </div>
        <div className="flex items-center justify-center">
          {photo ? (
            <img src={photo.file_path || photo.thumbnail_path} alt="Foto" className="max-h-[80vh] w-auto" />
          ) : (
            <div className="p-6">Lade…</div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}