import { useState } from 'react';
import { X, Download, Pencil } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useModelStore } from '@/stores/useModelStore';
import { AnnotationEditor } from '@/components/AnnotationEditor';

export function ScreenshotGallery() {
  const { screenshots, removeScreenshot, clearScreenshots, addScreenshot } = useModelStore();
  const [editingIndex, setEditingIndex] = useState<number | null>(null);

  if (screenshots.length === 0 && editingIndex === null) return null;

  const handleSaveAnnotated = (dataUrl: string) => {
    if (editingIndex !== null) {
      // Replace the original screenshot with the annotated version
      useModelStore.setState((state) => ({
        screenshots: state.screenshots.map((s, i) => (i === editingIndex ? dataUrl : s)),
      }));
      setEditingIndex(null);
    }
  };

  return (
    <>
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <h3 className="font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
            Capturas ({screenshots.length})
          </h3>
          <Button variant="ghost" size="sm" className="h-6 text-[10px]" onClick={clearScreenshots}>
            Limpar
          </Button>
        </div>
        <div className="grid grid-cols-2 gap-2">
          {screenshots.map((src, i) => (
            <div key={i} className="group relative rounded-lg border overflow-hidden bg-muted/30">
              <img src={src} alt={`Captura ${i + 1}`} className="w-full aspect-video object-cover" />
              <div className="absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                <button
                  onClick={() => setEditingIndex(i)}
                  className="h-6 w-6 rounded bg-card/90 flex items-center justify-center"
                  title="Anotar"
                >
                  <Pencil className="h-3 w-3 text-primary" />
                </button>
                <a
                  href={src}
                  download={`TrackkSteelXR_capture_${i + 1}.png`}
                  className="h-6 w-6 rounded bg-card/90 flex items-center justify-center"
                >
                  <Download className="h-3 w-3 text-primary" />
                </a>
                <button
                  onClick={() => removeScreenshot(i)}
                  className="h-6 w-6 rounded bg-card/90 flex items-center justify-center"
                >
                  <X className="h-3 w-3 text-destructive" />
                </button>
              </div>
              <div className="absolute bottom-1 left-1">
                <span className="font-mono text-[9px] bg-card/80 rounded px-1 py-0.5 text-muted-foreground">
                  #{i + 1}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {editingIndex !== null && screenshots[editingIndex] && (
        <AnnotationEditor
          imageSrc={screenshots[editingIndex]}
          onSave={handleSaveAnnotated}
          onClose={() => setEditingIndex(null)}
        />
      )}
    </>
  );
}