import { useState } from 'react';
import type { ScreenshotEvidence } from '../../../types/report';
import { EvidenceLightbox } from './EvidenceLightbox';

interface EvidenceScreenshotProps {
  evidence: ScreenshotEvidence;
  compact?: boolean;
}

export function EvidenceScreenshot({ evidence, compact }: EvidenceScreenshotProps) {
  const [loaded, setLoaded] = useState(true);
  const [lightboxOpen, setLightboxOpen] = useState(false);

  if (!loaded) return null;

  return (
    <>
      <button
        type="button"
        onClick={() => setLightboxOpen(true)}
        className={`group relative rounded-xl overflow-hidden border border-slate-100 bg-white shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:shadow-[4px_6px_16px_rgba(0,0,0,0.09)] transition-all cursor-pointer ${
          compact ? 'w-full' : 'w-full max-w-[400px]'
        }`}
      >
        <div className="relative">
          <img
            src={evidence.url}
            alt={evidence.caption}
            className={`w-full object-cover ${compact ? 'h-24' : 'h-48'}`}
            onError={() => setLoaded(false)}
          />

          {/* Hover overlay */}
          <div className="absolute inset-0 bg-[#0A1128]/0 group-hover:bg-[#0A1128]/10 transition-colors flex items-center justify-center">
            <div className="w-8 h-8 rounded-full bg-white/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-sm">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path d="M15 3H21V9M21 3L13 11M10 5H5C3.9 5 3 5.9 3 7V19C3 20.1 3.9 21 5 21H17C18.1 21 19 20.1 19 19V14" stroke="#6C5CE7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
          </div>

          {/* Channel badge */}
          <span className="absolute top-2 left-2 rounded-full bg-white/90 backdrop-blur-sm px-2 py-1 text-xs font-medium text-[#4A3A7C] shadow-sm">
            {evidence.channel}
          </span>

          {/* Annotation indicators */}
          {evidence.annotations?.map((ann, i) => (
            <div
              key={i}
              className="absolute border-2 border-[#C084CF]/60 rounded-lg pointer-events-none"
              style={{
                left: `${ann.x}%`,
                top: `${ann.y}%`,
                width: ann.width ? `${ann.width}%` : 'auto',
                height: ann.height ? `${ann.height}%` : 'auto',
              }}
            />
          ))}
        </div>

        {/* Caption */}
        {!compact && (
          <div className="px-3 py-2">
            <p className="text-xs text-slate-600 leading-relaxed line-clamp-2">
              {evidence.caption}
            </p>
          </div>
        )}
      </button>

      <EvidenceLightbox
        evidence={lightboxOpen ? evidence : null}
        onClose={() => setLightboxOpen(false)}
      />
    </>
  );
}
