Untitled

"use client"

import { useState, useEffect } from "react"
import { Download, MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { PhotoComments } from "./photo-comments"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "sonner"

interface Section {
  title: string;
  description: string;
  images: {
    src: string;
    alt: string;
    width: number;
    height: number;
    thumbnailSrc?: string;
  }[];
}

interface GalleryProps {
  sections: Section[];
}

interface CommentCounts {
  [key: string]: number;
}

interface ImageDialogProps {
  image: Section['images'][0];
  fullSizeImageSrc: string;
  thumbnailSrc: string;
  photoId: string;
  commentCount: number;
  selectedTab: string;
  setSelectedTab: (tab: string) => void;
  isFullImageLoaded: boolean;
  setIsFullImageLoaded: (loaded: boolean) => void;
  handleDownload: (src: string) => Promise<void>;
  isDownloading: boolean;
  onCommentAdded: (photoId: string) => void;
}

function ImageDialog({
  image,
  fullSizeImageSrc,
  thumbnailSrc,
  photoId,
  commentCount,
  selectedTab,
  setSelectedTab,
  isFullImageLoaded,
  setIsFullImageLoaded,
  handleDownload,
  isDownloading,
  onCommentAdded
}: ImageDialogProps) {
  return (
    <div className="flex flex-col h-full">
      <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-col h-full">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 mb-4">
          <TabsList className="h-8 sm:h-9">
            <TabsTrigger value="preview" className="text-sm px-3">
              Vorschau
            </TabsTrigger>
            <TabsTrigger value="comments" className="text-sm px-3">
              Kommentare
              {commentCount > 0 && (
                <span className="ml-1.5 bg-primary/10 text-primary rounded-full px-1.5 py-0.5 text-xs">
                  {commentCount}
                </span>
              )}
            </TabsTrigger>
          </TabsList>
          <Button 
            onClick={() => handleDownload(fullSizeImageSrc)}
            disabled={isDownloading}
            size="sm"
            className="h-8 sm:h-9 text-sm"
          >
            <Download className="mr-2 h-4 w-4" />
            Bild herunterladen
          </Button>
        </div>

        <div className="flex-1 min-h-0 relative rounded-lg bg-background">
          <TabsContent 
            value="preview" 
            className="h-full"
          >
            <div className="h-full flex items-center justify-center p-4">
              <img
                src={thumbnailSrc}
                alt={image.alt}
                className="max-w-full max-h-full w-auto h-auto object-contain transition-opacity duration-300"
                style={{ opacity: isFullImageLoaded ? 0 : 1 }}
              />
              <img
                src={fullSizeImageSrc}
                alt={image.alt}
                className="max-w-full max-h-full w-auto h-auto object-contain transition-opacity duration-300 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
                style={{ opacity: isFullImageLoaded ? 1 : 0 }}
                onLoad={() => setIsFullImageLoaded(true)}
              />
            </div>
          </TabsContent>
          
          <TabsContent 
            value="comments" 
            className="absolute inset-0 overflow-y-auto"
          >
            <div className="p-4 w-full">
              <style jsx global>{`
                .rounded-lg.border.bg-card {
                  max-width: 100%;
                  overflow: hidden;
                }
                .rounded-lg.border.bg-card > div {
                  width: 100%;
                }
                .rounded-lg.border.bg-card > div > div {
                  flex-wrap: wrap;
                  gap: 0.5rem;
                }
                .rounded-lg.border.bg-card > div > div > span {
                  order: 2;
                  width: 100%;
                  text-align: left;
                  padding-left: 3.25rem;
                }
              `}</style>
              <PhotoComments 
                photoId={photoId}
                onCommentAdded={() => onCommentAdded(photoId)}
              />
            </div>
          </TabsContent>
        </div>
      </Tabs>
    </div>
  );
}

export function Gallery({ sections }: GalleryProps) {
  const [selectedImage, setSelectedImage] = useState<number | null>(null)
  const [isDownloading, setIsDownloading] = useState(false)
  const [isFullImageLoaded, setIsFullImageLoaded] = useState(false)
  const [commentCounts, setCommentCounts] = useState<CommentCounts>({})
  const [selectedTab, setSelectedTab] = useState<string>("preview")
  const [isDialogOpen, setIsDialogOpen] = useState(false)

  useEffect(() => {
    if (!isDialogOpen) {
      setSelectedTab("preview")
      setIsFullImageLoaded(false)
    }
  }, [isDialogOpen])

  useEffect(() => {
    const fetchCommentCounts = async () => {
      const clientId = window.location.pathname.split('/')[1];
      
      const counts: CommentCounts = {};
      for (const section of sections) {
        for (const [index] of section.images.entries()) {
          const photoId = `${section.title}-${index}`;
          try {
            const response = await fetch(`/api/comments?photoId=${encodeURIComponent(photoId)}&clientId=${encodeURIComponent(clientId)}`);
            if (response.ok) {
              const comments = await response.json();
              counts[photoId] = comments.length;
            }
          } catch (error) {
            console.error('Error fetching comment count:', error);
          }
        }
      }
      setCommentCounts(counts);
    };

    fetchCommentCounts();
  }, [sections]);

  const handleDownload = async (imageSrc: string) => {
    try {
      setIsDownloading(true);
      const fileName = imageSrc.split('/').pop() || 'image';
      const response = await fetch(imageSrc);
      
      if (!response.ok) throw new Error('Download failed');
      
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error('Download error:', error);
      toast.error('Download fehlgeschlagen');
    } finally {
      setIsDownloading(false);
    }
  };

  return (
    <div className="space-y-12">
      {sections.map((section, sectionIndex) => (
        <div key={sectionIndex} className="space-y-4">
          <div className="space-y-2">
            <h2 className="text-2xl font-bold">{section.title}</h2>
            {section.description && (
              <p className="text-muted-foreground">{section.description}</p>
            )}
          </div>
          
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {section.images.map((image, imageIndex) => {
              const aspectRatio = image.width / image.height;
              const isPortrait = aspectRatio < 0.8;
              const isLandscape = aspectRatio > 1.2;
              const photoId = `${section.title}-${imageIndex}`;
              const commentCount = commentCounts[photoId] || 0;

              return (
                <div
                  key={imageIndex}
                  className={`
                    relative overflow-hidden rounded-lg bg-muted/30 transition-opacity duration-300
                    ${isPortrait ? 'row-span-2' : ''}
                  `}
                  style={{
                    aspectRatio: isPortrait ? '2/3' : isLandscape ? '16/9' : '1/1',
                  }}
                >
                  <img
                    src={image.thumbnailSrc}
                    alt={image.alt}
                    className="h-full w-full object-cover"
                    loading="lazy"
                  />

                  <Dialog onOpenChange={(open) => {
                    setIsDialogOpen(open);
                    if (open) {
                      setSelectedTab("preview");
                      setIsFullImageLoaded(false);
                    }
                  }}>
                    <DialogTrigger asChild>
                      <div className="absolute inset-0 flex items-center justify-center gap-2 bg-black/60 opacity-0 hover:opacity-100 transition-opacity duration-200 cursor-pointer">
                        <Button 
                          variant="secondary" 
                          size="icon" 
                          className="h-9 w-9 z-10"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleDownload(image.src);
                          }}
                        >
                          <Download className="h-4 w-4" />
                        </Button>
                      </div>
                    </DialogTrigger>
                    <DialogContent className="w-[90%] h-[90vh] max-w-7xl p-4 sm:p-6">
                      <DialogHeader className="mb-4">
                        <DialogTitle>Bildvorschau</DialogTitle>
                        <DialogDescription>
                          Ansehen und herunterladen des Bildes in voller Auflösung
                        </DialogDescription>
                      </DialogHeader>
                      <div className="flex-1 h-[calc(90vh-8rem)]">
                        <ImageDialog 
                          image={image}
                          fullSizeImageSrc={image.src}
                          thumbnailSrc={image.thumbnailSrc}
                          photoId={photoId}
                          commentCount={commentCount}
                          selectedTab={selectedTab}
                          setSelectedTab={setSelectedTab}
                          isFullImageLoaded={isFullImageLoaded}
                          setIsFullImageLoaded={setIsFullImageLoaded}
                          handleDownload={handleDownload}
                          isDownloading={isDownloading}
                          onCommentAdded={(photoId) => {
                            setCommentCounts(prev => ({
                              ...prev,
                              [photoId]: (prev[photoId] || 0) + 1
                            }));
                          }}
                        />
                      </div>
                    </DialogContent>
                  </Dialog>

                  {commentCount > 0 && (
                    <Dialog onOpenChange={(open) => {
                      setIsDialogOpen(open);
                      if (open) setSelectedTab("comments");
                    }}>
                      <DialogTrigger asChild>
                        <div className="absolute bottom-2 right-2 z-10">
                          <div className="bg-black/70 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1 text-white text-sm cursor-pointer hover:bg-black/80 transition-colors">
                            <MessageCircle className="h-4 w-4" />
                            <span>{commentCount}</span>
                          </div>
                        </div>
                      </DialogTrigger>
                      <DialogContent className="w-[90%] h-[90vh] max-w-7xl p-4 sm:p-6">
                        <DialogHeader className="mb-4">
                          <DialogTitle>Bildvorschau</DialogTitle>
                          <DialogDescription>
                            Ansehen und herunterladen des Bildes in voller Auflösung
                          </DialogDescription>
                        </DialogHeader>
                        <div className="flex-1 h-[calc(90vh-8rem)]">
                          <ImageDialog 
                            image={image}
                            fullSizeImageSrc={image.src}
                            thumbnailSrc={image.thumbnailSrc}
                            photoId={photoId}
                            commentCount={commentCount}
                            selectedTab={selectedTab}
                            setSelectedTab={setSelectedTab}
                            isFullImageLoaded={isFullImageLoaded}
                            setIsFullImageLoaded={setIsFullImageLoaded}
                            handleDownload={handleDownload}
                            isDownloading={isDownloading}
                            onCommentAdded={(photoId) => {
                              setCommentCounts(prev => ({
                                ...prev,
                                [photoId]: (prev[photoId] || 0) + 1
                              }));
                            }}
                          />
                        </div>
                      </DialogContent>
                    </Dialog>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

export default Gallery;