import { useEffect, useState } from "react";
import { useSystemStructures } from "../hooks/useSystemStructures.js";
import { useAtlasStore } from "../store/useAtlasStore.js";
import { Scene } from "../components/viewer/Scene.js";
import { LayerToggle } from "../components/LayerToggle.js";
import { ClippingControls } from "../components/ClippingControls.js";
import { SearchNav } from "../components/SearchNav.js";
import { StructureInfoPanel } from "../components/StructureInfoPanel.js";
import { QuickRegionNav } from "../components/QuickRegionNav.js";

// Em telas pequenas não há espaço para os 3 painéis lado a lado — os
// laterais viram gavetas (drawers) que deslizam por cima do visualizador
// 3D, que fica sempre em tela cheia (é o que importa pra estudar).
export default function AtlasPage() {
  const visibleSystems = useAtlasStore((s) => s.visibleSystems);
  const { bySlug } = useSystemStructures(visibleSystems);
  const selectedStructureId = useAtlasStore((s) => s.selectedStructureId);

  const [leftOpen, setLeftOpen] = useState(false);
  const [rightOpen, setRightOpen] = useState(false);

  useEffect(() => {
    if (selectedStructureId) {
      setRightOpen(true);
      setLeftOpen(false);
    }
  }, [selectedStructureId]);

  return (
    <div className="h-full relative md:grid md:grid-cols-[280px_1fr_320px]">
      <aside
        className={`fixed md:static inset-y-0 left-0 z-30 w-[86vw] max-w-[300px] md:w-auto
          border-r border-white/10 bg-panel p-3 flex flex-col min-h-0 overflow-y-auto
          transition-transform duration-200 md:translate-x-0
          ${leftOpen ? "translate-x-0" : "-translate-x-full"}`}
      >
        <button
          onClick={() => setLeftOpen(false)}
          className="md:hidden self-end text-slate-400 hover:text-white text-sm mb-2 px-2 py-1"
          aria-label="Fechar painel"
        >
          ✕ Fechar
        </button>
        <LayerToggle />
        <ClippingControls />
        <div className="flex-1 min-h-0 mt-4">
          <SearchNav />
        </div>
      </aside>

      {(leftOpen || rightOpen) && (
        <div
          className="fixed inset-0 bg-black/50 z-20 md:hidden"
          onClick={() => {
            setLeftOpen(false);
            setRightOpen(false);
          }}
        />
      )}

      <div className="relative h-full min-h-0">
        <Scene bySlug={bySlug} />
        <QuickRegionNav />

        <button
          onClick={() => setLeftOpen(true)}
          className="md:hidden absolute top-3 left-3 z-10 bg-panel/90 border border-white/10 rounded-lg px-3 py-2 text-xs shadow-lg"
        >
          ☰ Camadas
        </button>
        <button
          onClick={() => setRightOpen(true)}
          className="md:hidden absolute top-3 right-3 z-10 bg-panel/90 border border-white/10 rounded-lg px-3 py-2 text-xs shadow-lg"
        >
          ℹ️ Detalhes
        </button>
      </div>

      <aside
        className={`fixed md:static inset-y-0 right-0 z-30 w-[86vw] max-w-[320px] md:w-auto
          border-l border-white/10 bg-panel p-4 overflow-y-auto
          transition-transform duration-200 md:translate-x-0
          ${rightOpen ? "translate-x-0" : "translate-x-full"}`}
      >
        <button
          onClick={() => setRightOpen(false)}
          className="md:hidden text-slate-400 hover:text-white text-sm mb-2 px-2 py-1"
          aria-label="Fechar painel"
        >
          ✕ Fechar
        </button>
        <StructureInfoPanel bySlug={bySlug} />
      </aside>
    </div>
  );
}