/**
 * OptionDetailDialog
 * Shows the large-preview dialog for a trait option, including image carousel
 * navigation and the atlas methodology description.
 */
import React, { useState } from 'react';
import { AnimatePresence, motion as Motion } from 'framer-motion';
import { DialogContent, DialogTitle, DialogClose } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Move, X, ImageIcon, ChevronLeft, ChevronRight } from "lucide-react";
import { useLanguage } from '../../context/LanguageContext';

export default function OptionDetailDialog({ isOpen, dragControls, znakLabel, opt, imgArray, znakPopis }) {
  const { t, l } = useLanguage();
  const [activeIndex, setActiveIndex] = useState(0);

  if (!isOpen) return null;

  const hasImages = imgArray && imgArray.length > 0;

  const nextImg = () => setActiveIndex((prev) => (prev + 1) % imgArray.length);
  const prevImg = () => setActiveIndex((prev) => (prev - 1 + imgArray.length) % imgArray.length);

  return (
    <DialogContent
      overlayClassName="bg-transparent"
      className="fixed top-0 right-0 left-auto translate-x-0 translate-y-0 w-[600px] h-full bg-transparent border-none shadow-none pointer-events-none flex items-center justify-center z-[200]"
    >
      <Motion.div
        key={opt?.label_cs || opt?.label_en || znakLabel}
        drag
        dragControls={dragControls}
        dragListener={false}
        dragMomentum={false}
        initial={{ opacity: 0, x: 100 }}
        animate={{ opacity: 1, x: 0 }}
        className="bg-white rounded-[32px] shadow-2xl border border-slate-200 pointer-events-auto flex flex-col relative overflow-hidden"
        style={{ width: '550px', height: '85vh', maxHeight: '900px' }}
      >
        <div onPointerDown={(e) => dragControls.start(e)} className="border-b p-5 bg-slate-50 cursor-move flex items-center justify-between shrink-0 h-[70px]">
          <div className="flex items-center gap-4">
            <div className="p-2 bg-blue-100 rounded-xl"><Move className="w-4 h-4 text-blue-700" /></div>
            <DialogTitle className="text-base font-black text-blue-900 uppercase italic leading-none truncate max-w-[350px]">
              {znakLabel} - {l(opt, 'label')}
            </DialogTitle>
          </div>
          <DialogClose asChild>
            <Button type="button" variant="destructive" size="icon" className="h-9 w-9 rounded-full shrink-0"><X className="w-5 h-5" /></Button>
          </DialogClose>
        </div>

        <div className="flex-1 flex flex-col min-h-0 p-6 bg-white overflow-hidden">
          <div className="flex-1 relative min-h-0 w-full flex items-center justify-center bg-slate-50 rounded-2xl border border-slate-100 overflow-hidden group/main">
            {hasImages ? (
              <>
                <AnimatePresence mode="wait">
                  <Motion.img
                    key={activeIndex}
                    src={imgArray[activeIndex]}
                    initial={{ opacity: 0, scale: 0.95 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 1.05 }}
                    transition={{ duration: 0.2 }}
                    className="max-w-full max-h-full object-contain p-4"
                    alt="detail"
                  />
                </AnimatePresence>

                {imgArray.length > 1 && (
                  <>
                    <button onClick={prevImg} className="absolute left-2 p-2 bg-white/80 hover:bg-white rounded-full shadow-lg text-slate-700 transition-all opacity-0 group-hover/main:opacity-100">
                      <ChevronLeft size={24} />
                    </button>
                    <button onClick={nextImg} className="absolute right-2 p-2 bg-white/80 hover:bg-white rounded-full shadow-lg text-slate-700 transition-all opacity-0 group-hover/main:opacity-100">
                      <ChevronRight size={24} />
                    </button>
                    <div className="absolute top-4 right-4 bg-slate-900/10 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black text-slate-600">
                      {activeIndex + 1} / {imgArray.length}
                    </div>
                  </>
                )}
              </>
            ) : (
              <div className="flex flex-col items-center opacity-20"><ImageIcon size={64} /><p>{t('noImage')}</p></div>
            )}
          </div>

          {hasImages && imgArray.length > 1 && (
            <div className="shrink-0 mt-4 flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
              {imgArray.map((src, i) => (
                <button
                  key={i}
                  onClick={() => setActiveIndex(i)}
                  className={`relative w-16 h-16 rounded-xl border-2 shrink-0 transition-all overflow-hidden ${
                    activeIndex === i ? "border-blue-600 ring-2 ring-blue-100 scale-95" : "border-slate-100 opacity-60 hover:opacity-100"
                  }`}
                >
                  <img src={src} className="w-full h-full object-cover" alt="thumbnail" />
                </button>
              ))}
            </div>
          )}

          {znakPopis && (
            <div className="shrink-0 mt-4 p-4 bg-blue-50/50 rounded-2xl border border-blue-100">
              <span className="font-bold text-blue-900 uppercase block mb-1 text-[10px] tracking-widest leading-none">
                {t('methodology')}:
              </span>
              <p className="text-[12px] text-slate-700 leading-relaxed italic">
                {znakPopis}
              </p>
            </div>
          )}
        </div>

        <div className="bg-slate-900 py-2 text-center text-[7px] text-white font-bold uppercase tracking-[0.3em] shrink-0">
          {t('moveNote')}
        </div>
      </Motion.div>
    </DialogContent>
  );
}