Untitled

"use client"

import React, { useState, useRef } from "react"
import { motion, useScroll, useMotionValueEvent } from "framer-motion"
import { Slider } from "@/components/ui/slider"
import { Button } from "@/components/ui/button"
import { 
  Search, 
  Moon, 
  Sun, 
  List, 
  X, 
  ChevronUp, 
  ZoomIn, 
  ZoomOut,
  UserRound,
  Mail,
  Instagram,
  Filter,
  Heart,
  Check,
  MessageCircle,
  Download
} from "lucide-react"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

interface ToolbarProps {
  gridSize: number;
  setGridSize: (value: number) => void;
  sections: {
    title: string;
    description?: string;
  }[];
  inView?: boolean;
  clientConfig: any;
  favorites: {[key: string]: boolean};
  showFavoritesOnly: boolean;
  setShowFavoritesOnly: (value: boolean) => void;
  commentCounts: {[key: string]: number};
  showCommentsOnly: boolean;
  setShowCommentsOnly: (value: boolean) => void;
  handleDownloadAllFavorites: () => void;
}

export const ScrollToolbar = ({ 
  gridSize, 
  setGridSize, 
  sections, 
  inView = false,
  clientConfig,
  favorites,
  showFavoritesOnly,
  setShowFavoritesOnly,
  commentCounts,
  showCommentsOnly,
  setShowCommentsOnly,
  handleDownloadAllFavorites
}: ToolbarProps) => {
  const [variant, setVariant] = useState("hidden")
  const { scrollY } = useScroll()
  
  const scrollToSection = (sectionTitle: string) => {
    const element = document.getElementById(`section-${sectionTitle}`)
    if (element) {
      element.scrollIntoView({ behavior: "smooth" })
    }
  }

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" })
  }
  
  useMotionValueEvent(scrollY, "change", (latest) => {
    if (inView) return setVariant("absolute")
    if (latest > 300) setVariant("visible")
    else setVariant("hidden")
  })

  // Calculate the number of favorited images
  const favoriteCount = Object.values(favorites).filter(Boolean).length;

  return (
    <motion.div
      variants={{
        hidden: { position: 'fixed', bottom: "-100px", left: 0, right: 0 },
        visible: { position: 'fixed', bottom: '20px', left: 0, right: 0 },
        absolute: { position: 'absolute', bottom: '20px', left: 0, right: 0 }
      }}
      animate={variant}
      transition={{ duration: 0.3, ease: "easeInOut" }}
      className="z-40 flex w-full justify-center pointer-events-none"
    >
      <div className="rounded-full bg-zinc-900/90 backdrop-blur-sm flex px-2 sm:px-4 py-4 border-zinc-800 border shadow-lg pointer-events-auto">
        {/* Image Size Adjustment */}
        <Popover>
          <PopoverTrigger asChild>
            <div className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors">
              <Search className="h-5 w-5 text-zinc-300" />
            </div>
          </PopoverTrigger>
          <PopoverContent 
            className="w-72 p-4 bg-zinc-900 border-zinc-800 text-zinc-300" 
            sideOffset={16}
            side="top"
            align="center"
          >
            <div className="space-y-4">
              <h4 className="font-medium text-sm">Fotogröße anpassen</h4>
              <div className="flex items-center gap-3">
                <ZoomIn className="h-4 w-4 text-zinc-400" />
                <Slider 
                  value={[gridSize]}
                  min={1}
                  max={6}
                  step={1}
                  onValueChange={(value) => setGridSize(value[0])}
                  className="flex-1"
                />
                <ZoomOut className="h-4 w-4 text-zinc-400" />
              </div>
            </div>
          </PopoverContent>
        </Popover>
        
        <div className="h-6 w-px bg-zinc-700 mx-1 sm:mx-2" />
        
        {/* Filter Options */}
        <Popover>
          <PopoverTrigger asChild>
            <div className={`
              px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer 
              ${showFavoritesOnly || showCommentsOnly ? 'bg-zinc-800 text-zinc-200' : 'hover:bg-zinc-800 text-zinc-300'} 
              rounded-full transition-colors relative
            `}>
              <Filter className="h-5 w-5" />
              {(favoriteCount > 0 && showFavoritesOnly) || (Object.keys(commentCounts).length > 0 && showCommentsOnly) ? (
                <span className="absolute -top-1 -right-1 flex h-3 w-3">
                  <span className="relative inline-flex rounded-full h-3 w-3 bg-zinc-200"></span>
                </span>
              ) : null}
            </div>
          </PopoverTrigger>
          <PopoverContent 
            className="w-72 p-4 bg-zinc-900 border-zinc-800 text-zinc-300" 
            sideOffset={16}
            side="top"
            align="center"
          >
            <div className="space-y-4">
              <h4 className="font-medium text-sm">Filter Optionen</h4>
              <div className="space-y-2">
                <div 
                  className="flex items-center gap-3 p-2 rounded-md hover:bg-zinc-800 cursor-pointer transition-colors"
                  onClick={() => {
                    setShowFavoritesOnly(!showFavoritesOnly);
                    if (!showFavoritesOnly) setShowCommentsOnly(false);
                  }}
                >
                  <div className={`p-1.5 rounded-full ${showFavoritesOnly ? 'bg-pink-500/20' : 'bg-zinc-800'}`}>
                    <Heart 
                      className={`h-4 w-4 ${showFavoritesOnly ? 'text-pink-500' : 'text-zinc-400'}`} 
                      fill={showFavoritesOnly ? 'currentColor' : 'none'} 
                    />
                  </div>
                  <span className="text-sm flex-1">Nur Favoriten anzeigen</span>
                  <div className={`w-4 h-4 rounded-full border ${showFavoritesOnly ? 'bg-pink-500 border-pink-600' : 'border-zinc-600'} flex items-center justify-center`}>
                    {showFavoritesOnly && <Check className="h-3 w-3 text-white" />}
                  </div>
                </div>
                
                <div 
                  className="flex items-center gap-3 p-2 rounded-md hover:bg-zinc-800 cursor-pointer transition-colors"
                  onClick={() => {
                    setShowCommentsOnly(!showCommentsOnly);
                    if (!showCommentsOnly) setShowFavoritesOnly(false);
                  }}
                >
                  <div className={`p-1.5 rounded-full ${showCommentsOnly ? 'bg-blue-500/20' : 'bg-zinc-800'}`}>
                    <MessageCircle 
                      className={`h-4 w-4 ${showCommentsOnly ? 'text-blue-500' : 'text-zinc-400'}`} 
                    />
                  </div>
                  <span className="text-sm flex-1">Nur Bilder mit Kommentaren anzeigen</span>
                  <div className={`w-4 h-4 rounded-full border ${showCommentsOnly ? 'bg-blue-500 border-blue-600' : 'border-zinc-600'} flex items-center justify-center`}>
                    {showCommentsOnly && <Check className="h-3 w-3 text-white" />}
                  </div>
                </div>
                
                {favoriteCount > 0 && showFavoritesOnly && (
                  <div className="flex items-center gap-3 p-2 text-xs text-zinc-400 italic">
                    {favoriteCount} {favoriteCount === 1 ? 'Favorit' : 'Favoriten'} ausgewählt
                  </div>
                )}
                
                {Object.keys(commentCounts).length > 0 && showCommentsOnly && (
                  <div className="flex items-center gap-3 p-2 text-xs text-zinc-400 italic">
                    {Object.keys(commentCounts).length} {Object.keys(commentCounts).length === 1 ? 'Bild' : 'Bilder'} mit Kommentaren
                  </div>
                )}
              </div>
            </div>
          </PopoverContent>
        </Popover>
        
        <div className="h-6 w-px bg-zinc-700 mx-1 sm:mx-2" />
        
        {/* Favorites Heart with Popover */}
        <Popover>
          <PopoverTrigger asChild>
            <div className={`
              px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer 
              ${favoriteCount > 0 ? 'hover:bg-pink-500/20 text-pink-500' : 'hover:bg-zinc-800/50 text-zinc-500'}
              rounded-full transition-colors
            `}>
              <Heart className="h-5 w-5" fill={favoriteCount > 0 ? "currentColor" : "none"} />
              {favoriteCount > 0 && (
                <span className="ml-1 text-xs hidden sm:inline-block">{favoriteCount}</span>
              )}
            </div>
          </PopoverTrigger>
          <PopoverContent 
            className="w-64 p-0 bg-zinc-900 border-zinc-800 text-zinc-300 shadow-xl" 
            sideOffset={16}
            side="top"
            align="center"
          >
            <div className="p-3 border-b border-zinc-800">
              <h4 className="font-medium">Favoriten</h4>
            </div>
            
            <div className="p-4">
              {favoriteCount > 0 ? (
                <div className="space-y-4">
                  <p className="text-sm text-zinc-300">
                    Sie haben {favoriteCount} {favoriteCount === 1 ? 'Bild' : 'Bilder'} als Favorit markiert.
                  </p>
                  
                  <Button 
                    className="w-full bg-gradient-to-r from-pink-500 to-rose-500 hover:from-pink-600 hover:to-rose-600 text-white border-0"
                    onClick={handleDownloadAllFavorites}
                  >
                    <Download className="mr-2 h-4 w-4" />
                    Alle Favoriten herunterladen
                  </Button>
                  
                  {/* Placeholder for future functionality */}
                  <p className="text-xs text-zinc-500 text-center">
                    Weitere Optionen kommen in Kürze
                  </p>
                </div>
              ) : (
                <div className="py-4 text-center space-y-2">
                  <Heart className="h-8 w-8 text-zinc-500 mx-auto mb-2" />
                  <p className="text-sm text-zinc-400">
                    Sie haben noch keine Favoriten ausgewählt.
                  </p>
                  <p className="text-xs text-zinc-500">
                    Klicken Sie auf das Herz-Symbol bei den Bildern, um sie zu Ihren Favoriten hinzuzufügen.
                  </p>
                </div>
              )}
            </div>
          </PopoverContent>
        </Popover>
        
        <div className="h-6 w-px bg-zinc-700 mx-1 sm:mx-2" />
        
        {/* Dark/Light Mode Toggle - Hide on mobile */}
        <div className="hidden sm:flex px-2 sm:px-3 md:px-4 items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors">
          <Sun className="h-5 w-5 text-zinc-300" />
        </div>
        
        <div className="hidden sm:block h-6 w-px bg-zinc-700 mx-1 sm:mx-2" />
        
        {/* Table of Contents */}
        <Popover>
          <PopoverTrigger asChild>
            <div className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors">
              <List className="h-5 w-5 text-zinc-300" />
            </div>
          </PopoverTrigger>
          <PopoverContent 
            className="w-72 p-0 bg-zinc-900 border-zinc-800 text-zinc-300 max-h-96 overflow-y-auto" 
            sideOffset={16}
            side="top"
            align="center"
          >
            <div className="p-3 border-b border-zinc-800">
              <h4 className="font-medium">Inhaltsverzeichnis</h4>
            </div>
            <div className="p-2">
              {sections.map((section, index) => (
                <div
                  key={index}
                  onClick={() => scrollToSection(section.title)}
                  className="p-2 hover:bg-zinc-800 rounded cursor-pointer transition-colors"
                >
                  {section.title}
                </div>
              ))}
            </div>
          </PopoverContent>
        </Popover>
        
        <div className="h-6 w-px bg-zinc-700 mx-1 sm:mx-2" />
        
        {/* Personal Info */}
        <Popover>
          <PopoverTrigger asChild>
            <div className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors">
              <UserRound className="h-5 w-5 text-zinc-300" />
            </div>
          </PopoverTrigger>
          <PopoverContent 
            className="w-80 p-0 bg-zinc-900/95 border-zinc-800 text-zinc-300 shadow-xl" 
            sideOffset={16}
            side="top"
            align="center"
          >
            <div className="overflow-hidden rounded-md">
              {/* Card header with background image */}
              <div className="relative p-6">
                {/* Background image - dark overlay applied */}
                <div className="absolute inset-0 z-0">
                  <div className="absolute inset-0 bg-gradient-to-r from-zinc-900/80 to-zinc-900/10"></div>
                <img 
                    src="/background-image.jpg" 
                    alt="Background" 
                    className="w-full h-full object-cover object-center opacity-90"
                  />
                </div>
                
                {/* Circular avatar image */}
                <div className="w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center mb-3 ring-2 ring-white/20 shadow-lg overflow-hidden relative z-10">
                  <img 
                    src="/avatar.jpg"
                    alt="Avatar"
                    className="w-full h-full object-cover object-center"
                    onError={(e) => {
                      // Fallback if image fails to load
                      e.currentTarget.style.display = 'none';
                      e.currentTarget.parentElement.innerHTML = '<span class="text-white text-xl font-bold">P</span>';
                    }}
                  />
                </div>
                
                <h3 className="font-bold text-white text-xl relative z-10">
                  {clientConfig?.photographerName || "Fotograf"}
                </h3>
                <div className="flex items-center gap-2 mt-1 relative z-10">
                  <div className="h-1 w-6 bg-indigo-400 rounded-full"></div>
                  <p className="text-white/90 text-sm font-medium">
                    {clientConfig?.photographerCredit || "Professionelle Fotografie"}
                  </p>
                </div>
              </div>
              
              {/* Card body */}
              <div className="p-4 space-y-4 bg-gradient-to-b from-zinc-900 to-zinc-950">
                {/* Contact details with null checks */}
                <div className="space-y-3 pt-1">
                  <div className="flex items-center gap-3 text-zinc-300 p-2 rounded-md hover:bg-zinc-800/50 transition-colors">
                    <div className="bg-indigo-800/30 p-2 rounded-md">
                      <Mail className="h-4 w-4 text-indigo-300" />
                    </div>
                    <a 
                      href={`mailto:${clientConfig?.photographerEmail || "info@example.com"}`} 
                      className="text-sm hover:text-indigo-300 transition-colors flex-1"
                    >
                      {clientConfig?.photographerEmail || "info@example.com"}
                    </a>
                  </div>
                  
                  <div className="flex items-center gap-3 text-zinc-300 p-2 rounded-md hover:bg-zinc-800/50 transition-colors">
                    <div className="bg-indigo-800/30 p-2 rounded-md">
                      <Instagram className="h-4 w-4 text-indigo-300" />
                    </div>
                    <a 
                      href={clientConfig?.photographerInstagram || "#"} 
                      target="_blank" 
                      rel="noopener noreferrer" 
                      className="text-sm hover:text-indigo-300 transition-colors flex-1"
                    >
                      Instagram
                    </a>
                  </div>
                </div>
                
                {/* Decorated separator */}
                <div className="relative flex items-center py-2">
                  <div className="flex-grow border-t border-zinc-800"></div>
                  <span className="flex-shrink mx-3 text-zinc-500 text-xs">FOTOGRAF</span>
                  <div className="flex-grow border-t border-zinc-800"></div>
                </div>
                
                {/* Brief description */}
                <p className="text-sm text-zinc-400">
                  Hallo, mein Name ist Justin Faltus, ich bin ein perfektionistischer Fotograf, mit Sitz in Heidenheim, Baden-Württemberg. Meine Liebe zur Fotografie wurde durch magische Momente und wertvolle Erinnerungen geprägt. Ich arbeite stets mit höchster Professionalität und Perfektionismus, um Ihnen atemberaubende Bilder zu liefern, die unvergesslich bleiben.
                </p>
                
                {/* Contact button with gradient */}
                <Button 
                  className="w-full mt-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 border-0 text-indigo-100" 
                  onClick={() => window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })}
                >
                  Kontaktieren
                </Button>
              </div>
            </div>
          </PopoverContent>
        </Popover>
        
        <div className="h-6 w-px bg-zinc-700 mx-1 sm:mx-2" />
        
        {/* Scroll to Top */}
        <div 
          className="px-2 sm:px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors"
          onClick={scrollToTop}
        >
          <ChevronUp className="h-5 w-5 text-zinc-300" />
        </div>
      </div>
    </motion.div>
  )
}

export default ScrollToolbar