import { useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import type { ScreenshotEvidence } from '../../../types/report';

interface EvidenceLightboxProps {
  evidence: ScreenshotEvidence | null;
  onClose: () => void;
}

export function EvidenceLightbox({ evidence, onClose }: EvidenceLightboxProps) {
  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    },
    [onClose],
  );

  useEffect(() => {
    if (evidence) {
      document.addEventListener('keydown', handleKeyDown);
      document.body.style.overflow = 'hidden';
    }
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      document.body.style.overflow = '';
    };
  }, [evidence, handleKeyDown]);

  return (
    <AnimatePresence>
      {evidence && (
        <motion.div
          data-no-print
          className="fixed inset-0 z-50 flex items-center justify-center p-6"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
        >
          {/* Backdrop */}
          <div
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            onClick={onClose}
          />

          {/* Content */}
          <motion.div
            className="relative max-w-5xl w-full max-h-[90vh] flex flex-col"
            initial={{ scale: 0.95, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.95, opacity: 0 }}
            transition={{ duration: 0.2 }}
          >
            {/* Close button */}
            <button
              onClick={onClose}
              className="absolute -top-3 -right-3 z-10 w-8 h-8 rounded-full bg-white shadow-md flex items-center justify-center hover:bg-slate-50 transition-colors"
            >
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M2 2L12 12M12 2L2 12" stroke="#0A1128" strokeWidth="2" strokeLinecap="round" />
              </svg>
            </button>

            {/* Image container with annotations */}
            <div className="relative rounded-2xl overflow-hidden bg-white shadow-2xl">
              <img
                src={evidence.url}
                alt={evidence.caption}
                className="w-full h-auto max-h-[70vh] object-contain"
              />

              {/* Annotation overlays */}
              {evidence.annotations?.map((ann, i) => (
                <div
                  key={i}
                  className="absolute border-2 border-[#C084CF] rounded-lg pointer-events-none"
                  style={{
                    left: `${ann.x}%`,
                    top: `${ann.y}%`,
                    width: ann.width ? `${ann.width}%` : 'auto',
                    height: ann.height ? `${ann.height}%` : 'auto',
                  }}
                >
                  {ann.label && (
                    <span className="absolute -top-6 left-0 text-xs bg-[#C084CF] text-white px-2 py-1 rounded font-medium whitespace-nowrap">
                      {ann.label}
                    </span>
                  )}
                </div>
              ))}
            </div>

            {/* Caption */}
            <div className="mt-3 bg-white rounded-xl px-4 py-3 shadow-sm">
              <p className="text-sm text-[#0A1128] font-medium">{evidence.caption}</p>
              {evidence.sourceUrl && (
                <p className="text-xs text-slate-400 mt-1">{evidence.sourceUrl}</p>
              )}
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
