// components/ProductGallery.tsx
"use client";

import { useState } from "react";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";
import { ShieldCheck, ZoomIn } from "lucide-react";

interface ProductGalleryProps {
  images: string[];
  title: string;
  fileType: string;
}

export default function ProductGallery({ images, title, fileType }: ProductGalleryProps) {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const angleLabels = ["Main Preview", "Watermarked Full View", "Detail Zoom", "Card Mockup"];

  return (
    <div className="space-y-4">
      {/* Big Active Preview Canvas */}
      <div className="relative aspect-[4/3] w-full overflow-hidden rounded-2xl bg-zinc-900 border border-zinc-800 shadow-2xl">
        <AnimatePresence mode="wait">
          <motion.div
            key={selectedIndex}
            initial={{ opacity: 0, scale: 0.98 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.98 }}
            transition={{ duration: 0.2 }}
            className="relative h-full w-full"
          >
            <Image
              src={images[selectedIndex] || images[0]}
              alt={`${title} - Angle ${selectedIndex + 1}`}
              fill
              className="object-contain p-2"
              priority
            />
          </motion.div>
        </AnimatePresence>

        {/* Top Badges */}
        <div className="absolute top-4 left-4 flex gap-2">
          <span className="rounded-lg bg-indigo-600/90 backdrop-blur-md px-3 py-1 text-xs font-bold text-white shadow">
            {fileType} FORMAT
          </span>
          <span className="rounded-lg bg-black/70 backdrop-blur-md px-3 py-1 text-xs font-medium text-zinc-300">
            {angleLabels[selectedIndex] || `Angle ${selectedIndex + 1}`}
          </span>
        </div>

        <div className="absolute bottom-4 right-4 flex items-center gap-1.5 rounded-lg bg-black/60 backdrop-blur-md px-2.5 py-1 text-[11px] text-zinc-400">
          <ShieldCheck className="h-3.5 w-3.5 text-indigo-400" />
          <span>Protected Vector Preview</span>
        </div>
      </div>

      {/* 3 to 4 Multi-Angle Thumbnail Switchers */}
      <div className="grid grid-cols-4 gap-3">
        {images.map((imgUrl, idx) => (
          <button
            key={idx}
            type="button"
            onClick={() => setSelectedIndex(idx)}
            className={`group relative aspect-[4/3] w-full overflow-hidden rounded-xl bg-zinc-900 border transition-all ${
              selectedIndex === idx
                ? "border-indigo-500 ring-2 ring-indigo-500/30 scale-[1.02]"
                : "border-zinc-800 opacity-60 hover:opacity-100 hover:border-zinc-700"
            }`}
          >
            <Image
              src={imgUrl}
              alt={`Thumbnail ${idx + 1}`}
              fill
              className="object-cover p-1"
            />
            <span className="absolute bottom-1 left-1 right-1 text-center rounded bg-black/70 py-0.5 text-[9px] font-semibold text-zinc-300 backdrop-blur-sm truncate">
              {angleLabels[idx] || `Angle ${idx + 1}`}
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}