// ===== App entry · screen switcher =====

const SCREEN_GROUPS = [
  {
    id: "design",
    label: "Design",
    items: [
      { id: "tokens",    label: "Tokens" },
      { id: "storybook", label: "Storybook" },
      { id: "states",    label: "Estados" },
    ],
  },
  {
    id: "marketing",
    label: "Marketing",
    items: [
      { id: "landing",     label: "Landing"        },
      { id: "personas",    label: "Personas"       },
      { id: "casos",       label: "Casos de uso"   },
      { id: "agentes",     label: "Os 6 agentes"   },
      { id: "precos",      label: "Preços"         },
      { id: "comparativo", label: "Comparativo"    },
      { id: "blog",        label: "Blog"           },
      { id: "sobre",       label: "Sobre & Contato"},
    ],
  },
  {
    id: "fluxos",
    label: "Fluxos",
    items: [
      { id: "onboarding", label: "Onboarding" },
      { id: "proposta",   label: "Montar proposta" },
    ],
  },
  {
    id: "app",
    label: "App",
    items: [
      { id: "editais",     label: "Editais"          },
      { id: "analise",     label: "Análise"          },
      { id: "kanban",      label: "Kanban"           },
      { id: "cockpit",     label: "Cockpit"          },
      { id: "replay",      label: "Replay pregão"    },
      { id: "cofre",       label: "Cofre"            },
      { id: "pecas",       label: "Peças"            },
      { id: "posvit",      label: "Pós-Vitória"      },
      { id: "resultados",  label: "Resultados"       },
      { id: "avisos",      label: "Avisos"           },
      { id: "empresa",     label: "Empresa & Equipe" },
      { id: "billing",     label: "Faturamento"      },
      { id: "integracoes", label: "Integrações"      },
      { id: "config",      label: "Configurações"    },
      { id: "suporte",     label: "Suporte"          },
      { id: "mobile",      label: "Mobile PWA"       },
      { id: "mobile-gal",  label: "Mobile · galeria" },
    ],
  },
  {
    id: "system",
    label: "Sistema",
    items: [
      { id: "auth",   label: "Auth"   },
      { id: "admin",  label: "Admin"  },
      { id: "status", label: "Status público" },
      { id: "legal",  label: "Legal"  },
      { id: "errors", label: "Erros"  },
    ],
  },
];

const ALL_SCREENS = SCREEN_GROUPS.flatMap((g) => g.items.map((i) => ({ ...i, group: g.label })));

function App() {
  const [screen, setScreen] = React.useState(() => {
    const h = (window.location.hash || "").replace("#", "");
    return h && ALL_SCREENS.find((s) => s.id === h) ? h : "tokens";
  });
  const [theme, setTheme]   = React.useState("light");
  const [beginnerMode, setBeginnerMode] = React.useState(false);
  const [openEdital, setOpenEdital] = React.useState(null);
  const [openArticle, setOpenArticle] = React.useState(null);
  const [groupOpen, setGroupOpen] = React.useState(null);

  React.useEffect(() => {
    document.documentElement.dataset.theme = theme;
  }, [theme]);

  React.useEffect(() => {
    if (screen) window.location.hash = screen;
  }, [screen]);

  React.useEffect(() => {
    const onHashChange = () => {
      const h = (window.location.hash || "").replace("#", "");
      if (h && ALL_SCREENS.find((s) => s.id === h)) setScreen(h);
    };
    window.addEventListener("hashchange", onHashChange);
    return () => window.removeEventListener("hashchange", onHashChange);
  }, []);

  React.useEffect(() => {
    const onClick = () => setGroupOpen(null);
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  const handleOpenEdital = (e) => { setOpenEdital(e); setScreen("detalhe"); };
  const handleBack = () => setScreen("editais");

  const currentScreen = ALL_SCREENS.find((s) => s.id === screen);
  const currentGroup  = SCREEN_GROUPS.find((g) => g.items.some((i) => i.id === screen));

  const isPublicScreen = ["landing", "blog", "auth", "precos", "personas", "casos", "comparativo", "sobre", "agentes", "status", "legal"].includes(screen);

  return (
    <div className="h-screen flex flex-col">
      {/* Switcher */}
      <header className="shrink-0 h-14 border-b border-pleita-line bg-surface-1/95 backdrop-blur flex items-center px-4 md:px-6 gap-4 z-50">
        <Logo size={18} />
        <span className="pl-num text-[10px] uppercase tracking-[0.18em] text-pleita-stone-2 hidden md:inline">
          showcase · v2
        </span>

        {/* Group dropdowns */}
        <div className="flex items-center gap-1 ml-2 md:ml-6 overflow-x-auto scrollbar-pl">
          {SCREEN_GROUPS.map((g) => {
            const isCurrent = currentGroup?.id === g.id;
            const isOpen = groupOpen === g.id;
            return (
              <div key={g.id} className="relative" onClick={(e) => e.stopPropagation()}>
                <button
                  onClick={() => setGroupOpen(isOpen ? null : g.id)}
                  className={`pl-num text-[11px] uppercase tracking-wider px-3 py-1.5 rounded-full transition-colors whitespace-nowrap inline-flex items-center gap-1.5 ${
                    isCurrent ? "bg-pleita-ink text-pleita-paper" : "text-pleita-stone hover:text-pleita-ink hover:bg-surface-2"
                  }`}
                >
                  {g.label}
                  {isCurrent && currentScreen && <span className="opacity-70">· {currentScreen.label}</span>}
                  <svg viewBox="0 0 12 8" className={`size-2.5 transition-transform ${isOpen ? "rotate-180" : ""}`} fill="none" stroke="currentColor" strokeWidth="2"><path d="M1 1.5l5 5 5-5" /></svg>
                </button>
                {isOpen && (
                  <div className="absolute top-full left-0 mt-1.5 min-w-[200px] rounded-xl bg-surface-card border border-pleita-line shadow-pl-md py-1.5 z-50">
                    {g.items.map((it) => {
                      const isActive = it.id === screen;
                      return (
                        <button
                          key={it.id}
                          onClick={() => { setScreen(it.id); setGroupOpen(null); }}
                          className={`w-full text-left text-xs pl-num uppercase tracking-wider px-3 py-2 transition-colors ${
                            isActive ? "bg-pleita-lime/15 text-pleita-ink font-semibold" : "text-pleita-stone hover:bg-surface-2 hover:text-pleita-ink"
                          }`}
                        >
                          {it.label}
                          {isActive && <span className="ml-2 size-1.5 rounded-full bg-pleita-lime inline-block align-middle" />}
                        </button>
                      );
                    })}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        <div className="ml-auto flex items-center gap-1 rounded-full border border-pleita-line bg-surface-2 p-1">
          {[
            { id: "light",    label: "Claro",    Icon: Icons.Sun  },
            { id: "conforto", label: "Conforto", Icon: Icons.Coffee },
            { id: "dark",     label: "Escuro",   Icon: Icons.Moon },
          ].map((t) => (
            <button
              key={t.id}
              onClick={() => setTheme(t.id)}
              aria-pressed={theme === t.id}
              className={`pl-num inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] uppercase tracking-wider transition-colors ${
                theme === t.id ? "bg-pleita-ink text-pleita-paper" : "text-pleita-stone-2 hover:text-pleita-stone"
              }`}
              title={t.label}
            >
              <t.Icon className="size-3" />
              <span className="hidden md:inline">{t.label}</span>
            </button>
          ))}
        </div>
      </header>

      {/* Conteúdo */}
      <div className="flex-1 min-h-0 overflow-hidden">
        {screen === "tokens"      && <ScreenTokens />}
        {screen === "storybook"   && <ScreenStorybook />}
        {screen === "states"      && <ScreenStates />}
        {screen === "landing"     && <div className="h-full overflow-y-auto scrollbar-pl"><ScreenLanding /></div>}
        {screen === "personas"    && <div className="h-full overflow-y-auto scrollbar-pl"><ScreenPersonas /></div>}
        {screen === "casos"       && <div className="h-full overflow-y-auto scrollbar-pl"><ScreenCasos /></div>}
        {screen === "precos"      && <div className="h-full overflow-y-auto scrollbar-pl"><ScreenPrecos /></div>}
        {screen === "comparativo" && <div className="h-full overflow-y-auto scrollbar-pl"><ScreenComparativo /></div>}
        {screen === "blog"        && <div className="h-full overflow-y-auto scrollbar-pl">{openArticle ? <ScreenBlogArticle post={openArticle} onBack={() => setOpenArticle(null)} /> : <ScreenBlog goToArticle={setOpenArticle} />}</div>}
        {screen === "sobre"       && <div className="h-full overflow-y-auto scrollbar-pl"><ScreenSobre /></div>}
        {screen === "agentes"     && <ScreenAgentes />}

        {screen === "editais"     && <ScreenEditais  onOpen={handleOpenEdital}  beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "detalhe"     && <ScreenEditalDetail edital={openEdital} onBack={handleBack} beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "analise"     && <div className="h-full overflow-y-auto scrollbar-pl"><ScreenAnalise /></div>}
        {screen === "kanban"      && <ScreenKanban       beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "cockpit"     && <ScreenCockpit      beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "cofre"       && <ScreenCofre        beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "pecas"       && <ScreenPecas        beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "posvit"      && <ScreenPosVitoria   beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "resultados"  && <ScreenResultados   beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "avisos"      && <ScreenAvisos       beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "config"      && <ScreenConfig       beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "suporte"     && <ScreenSuporte      beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "mobile"      && <div className="h-full overflow-y-auto scrollbar-pl"><ScreenMobile /></div>}
        {screen === "mobile-gal"  && <ScreenMobileGaleria />}
        {screen === "onboarding"  && <ScreenOnboarding />}
        {screen === "proposta"    && <ScreenProposta    beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "empresa"     && <ScreenEmpresa     beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "billing"     && <ScreenBilling     beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "integracoes" && <ScreenIntegracoes beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}
        {screen === "replay"      && <ScreenReplay      beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} />}

        {screen === "auth"        && <div className="h-full overflow-y-auto scrollbar-pl"><ScreenAuth /></div>}
        {screen === "admin"       && <ScreenAdmin />}
        {screen === "status"      && <div className="h-full overflow-y-auto scrollbar-pl"><ScreenStatus /></div>}
        {screen === "legal"       && <div className="h-full overflow-y-auto scrollbar-pl"><ScreenLegal /></div>}
        {screen === "errors"      && <ScreenErrors />}
      </div>

      {/* WhatsApp FAB — visível em telas públicas */}
      {isPublicScreen && <WhatsAppFab />}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);