import { useAtlasStore } from "../store/useAtlasStore.js";
import type { Structure } from "../lib/api.js";

export function StructureInfoPanel({
  bySlug,
  onClose,
}: {
  bySlug: Map<string, Structure>;
  // No desktop o painel é uma gaveta lateral sempre visível (não faz
  // sentido "fechar", só trocar de estrutura), então esse botão só existe
  // quando a página que usa o painel passa um onClose — hoje é o caso da
  // bottom sheet do Atlas no mobile.
  onClose?: () => void;
}) {
  const selectedStructureId = useAtlasStore((s) => s.selectedStructureId);
  const selectStructure = useAtlasStore((s) => s.selectStructure);

  const structure = selectedStructureId
    ? [...bySlug.values()].find((s) => s.id === selectedStructureId)
    : null;

  if (!structure) {
    return (
      <div className="text-sm text-slate-400">
        Clique em uma estrutura no modelo 3D para ver os detalhes aqui.
      </div>
    );
  }

  function handleClose() {
    selectStructure(null);
    onClose?.();
  }

  return (
    <div className="space-y-3">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <h2 className="text-lg font-semibold text-white leading-snug">{structure.namePt}</h2>
          <p className="text-sm text-slate-400 italic">{structure.nameEn}</p>
        </div>
        <button
          onClick={handleClose}
          className="shrink-0 text-slate-400 hover:text-white text-lg leading-none p-1 -m-1"
          aria-label="Fechar detalhes"
        >
          ✕
        </button>
      </div>

      <span
        className="inline-block text-xs px-2 py-1 rounded-full"
        style={{ backgroundColor: structure.system.colorHex + "33", color: structure.system.colorHex }}
      >
        {structure.system.namePt}
      </span>

      {structure.description && (
        <p className="text-sm text-slate-300 leading-relaxed">{structure.description}</p>
      )}

      {structure.regionPath.length > 0 && (
        <p className="text-xs text-slate-500">{structure.regionPath.join(" › ")}</p>
      )}

      {structure.synonyms.length > 0 && (
        <p className="text-xs text-slate-500">Sinônimos: {structure.synonyms.join(", ")}</p>
      )}
    </div>
  );
}