import { useMemo, useState } from "react";
import { useAtlasStore } from "../store/useAtlasStore.js";
import { MICROSCOPY_HOTSPOTS } from "../data/microscopyHotspots.js";
import { MICROSCOPY_CREDITS } from "../data/microscopyCredits.js";
import type { Structure } from "../lib/api.js";

// Generalização do SkinDiagram.tsx pra sistemas sem malha 3D que precisam
// de MAIS de uma imagem (histologia tem uma fotomicrografia real por
// tecido, ao contrário do tegumentar, que é uma imagem só) — ver a decisão
// de usar fotos reais em vez de geometria procedural em
// data-pipeline/seed/build-manifest-microscopy.mjs.
export function MicroscopyDiagram({
  bySlug,
  systemSlug,
  title,
}: {
  bySlug: Map<string, Structure>;
  systemSlug: string;
  title: string;
}) {
  const selectedStructureId = useAtlasStore((s) => s.selectedStructureId);
  const selectStructure = useAtlasStore((s) => s.selectStructure);
  const toggleSystem = useAtlasStore((s) => s.toggleSystem);

  const structures = useMemo(
    () => [...bySlug.values()].filter((s) => s.system.slug === systemSlug),
    [bySlug, systemSlug],
  );

  // Cada "modelFile" aqui não é uma malha — é o caminho da fotomicrografia
  // que aquela estrutura pertence (ver build-manifest-microscopy.mjs).
  // Agrupar por ele é o que separa as estruturas em "lâminas" navegáveis.
  const byImage = useMemo(() => {
    const map = new Map<string, Structure[]>();
    for (const s of structures) {
      if (!map.has(s.modelFile)) map.set(s.modelFile, []);
      map.get(s.modelFile)!.push(s);
    }
    return map;
  }, [structures]);

  const images = useMemo(() => [...byImage.keys()], [byImage]);
  const [activeImage, setActiveImage] = useState<string | null>(null);
  const currentImage = activeImage && byImage.has(activeImage) ? activeImage : images[0];

  if (structures.length === 0 || !currentImage) return null;

  const currentStructures = byImage.get(currentImage) ?? [];
  // O último trecho do regionPath é o "nome da lâmina" (ex: "Tecido Ósseo")
  // — mesma lista usada pra dar nome de cada estrutura, reaproveitada aqui
  // só como rótulo da aba, pra não precisar de mais um arquivo de dados.
  const tabLabel = (image: string) => {
    const first = byImage.get(image)?.[0];
    return first?.regionPath[first.regionPath.length - 1] ?? image;
  };

  return (
    <div className="absolute inset-0 z-10 flex items-center justify-center p-4 bg-ink/70">
      <div className="relative bg-panel border border-white/10 rounded-xl shadow-2xl p-3 sm:p-4 max-w-2xl w-full max-h-full overflow-y-auto">
        <div className="flex items-center justify-between mb-2">
          <h2 className="text-sm font-semibold text-white">{title} — clique nos pontos pra explorar</h2>
          <button
            onClick={() => toggleSystem(systemSlug)}
            className="text-slate-400 hover:text-white text-sm px-2 py-1"
            aria-label="Fechar diagrama"
          >
            ✕
          </button>
        </div>

        {images.length > 1 && (
          <div className="flex flex-wrap gap-1.5 mb-3">
            {images.map((image) => (
              <button
                key={image}
                onClick={() => setActiveImage(image)}
                className={`text-xs px-2.5 py-1 rounded-full border transition-colors
                  ${
                    image === currentImage
                      ? "bg-accent border-accent text-white"
                      : "border-white/15 text-slate-300 hover:border-white/30"
                  }`}
              >
                {tabLabel(image)}
              </button>
            ))}
          </div>
        )}

        <div className="relative w-full select-none">
          <img
            key={currentImage}
            src={currentImage}
            alt={tabLabel(currentImage)}
            className="w-full h-auto rounded-lg border border-white/10"
            draggable={false}
          />
          {currentStructures.map((structure) => {
            const hotspot = MICROSCOPY_HOTSPOTS[structure.slug];
            if (!hotspot) return null;
            const isSelected = structure.id === selectedStructureId;
            return (
              <button
                key={structure.id}
                onClick={() => selectStructure(structure.id)}
                title={structure.namePt}
                aria-label={structure.namePt}
                style={{ left: `${hotspot.x}%`, top: `${hotspot.y}%` }}
                className={`absolute -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full border-2 transition-all
                  ${
                    isSelected
                      ? "bg-accent border-white scale-125 shadow-[0_0_0_4px_rgba(79,124,255,0.35)]"
                      : "bg-accent/70 border-white/70 hover:scale-125 hover:bg-accent"
                  }`}
              />
            );
          })}
        </div>

        <p className="text-[11px] text-slate-500 mt-2">
          Fotomicrografia real (não ilustração). {MICROSCOPY_CREDITS[currentImage] ?? ""}
        </p>
      </div>
    </div>
  );
}