// ============ App shell ============
const NAV = [
  { id: "overview",  labelKey: "nav_overview",  icon: "home",      group: "main" },
  { id: "analytics", labelKey: "nav_analytics", icon: "analytics", group: "main" },
  { id: "trends",    labelKey: "nav_trends",    icon: "zap",       group: "main" },
  { id: "workflow",  labelKey: "nav_workflow",  icon: "workflow",  group: "ops"  },
  { id: "admin",     labelKey: "nav_admin",     icon: "users",     group: "ops"  },
];

const EXPECTED_CLIENTE = "lacomer";

const App = () => {
  const [settings, setSettings] = React.useState(() => {
    try {
      const s = localStorage.getItem("is_settings");
      return s ? { ...TWEAK_DEFAULTS, ...JSON.parse(s) } : TWEAK_DEFAULTS;
    } catch { return TWEAK_DEFAULTS; }
  });
  const [route, setRoute] = React.useState(() => localStorage.getItem("is_route") || "overview");
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [searchQuery, setSearchQuery] = React.useState("");
  const [activeTerm, setActiveTerm] = React.useState(null);
  const t = useT(settings.language);
  const auth = useFirebaseAuth();

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", settings.theme);
    document.documentElement.setAttribute("data-density", settings.density);
    localStorage.setItem("is_settings", JSON.stringify(settings));
  }, [settings]);

  React.useEffect(() => { localStorage.setItem("is_route", route); }, [route]);

  // Edit mode listener (host toolbar)
  React.useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode") setTweaksOpen(true);
      if (e.data?.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const titles = {
    overview:  { title: t("overview_title"),  crumbs: t("overview_crumbs") },
    analytics: { title: t("analytics_title"), crumbs: t("analytics_crumbs") },
    trends:    { title: t("trends_title"),    crumbs: t("trends_crumbs") },
    workflow:  { title: t("workflow_title"),  crumbs: t("workflow_crumbs") },
    admin:     { title: t("admin_title"),     crumbs: t("admin_crumbs") },
  };

  // ===== App-level auth gate: whole site requires sign-in with the cliente claim =====
  if (!auth.ready) {
    return (
      <div style={{ position: "fixed", inset: 0, display: "grid", placeItems: "center", color: "var(--text-faint)", fontSize: 13 }}>
        <div style={{ width: 28, height: 28, borderRadius: "50%", border: "2px solid var(--line-2)", borderTopColor: "var(--accent)", animation: "spin 900ms linear infinite" }}/>
      </div>
    );
  }
  if (auth.error) return <div style={{ position: "fixed", inset: 0, display: "grid", placeItems: "center", color: "var(--danger)", fontSize: 13 }}>{auth.error}</div>;
  if (!auth.user) return <LoginGate t={t}/>;
  if (auth.claims?.cliente !== EXPECTED_CLIENTE) return <ForbiddenPanel t={t} user={auth.user} cliente={EXPECTED_CLIENTE}/>;

  // Derived user-display bits for sidebar-foot
  const userName = auth.user.name || auth.user.email || "—";
  const userRole = auth.claims?.role || null;
  // Read-only users don't get the Admin view (server also rejects /api/users).
  const readOnly = isReadOnly(auth.claims);
  const nav = readOnly ? NAV.filter(n => n.id !== "admin") : NAV;
  const view = readOnly && route === "admin" ? "overview" : route;
  const initials = (userName)
    .split(/[ .@_-]/).filter(Boolean)
    .map(s => s[0]).slice(0, 2).join("").toUpperCase() || "?";

  return (
    <div className="app">
      {/* Sidebar */}
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark">
            <img src="/anteater-logo.webp" alt="Anteater" className="brand-logo-img" onError={(e) => { e.currentTarget.style.display = "none"; }}/>
          </div>
          <div className="brand-name">
            {t("anteater")}
            <small>{t("anteater_slogan")}</small>
          </div>
        </div>

        <div className="nav-label">{t("nav_main")}</div>
        {nav.filter(n => n.group === "main").map(n => (
          <div key={n.id}
            className={"nav-item" + (view === n.id ? " active" : "")}
            onClick={(e) => { attachRipple(e); setRoute(n.id); }}>
            <Icon name={n.icon} size={18}/> {t(n.labelKey)}
          </div>
        ))}

        <div className="nav-label">{t("nav_ops")}</div>
        {nav.filter(n => n.group === "ops").map(n => (
          <div key={n.id}
            className={"nav-item" + (view === n.id ? " active" : "")}
            onClick={(e) => { attachRipple(e); setRoute(n.id); }}>
            <Icon name={n.icon} size={18}/> {t(n.labelKey)}
          </div>
        ))}

        <div className="sidebar-foot">
          <div className="avatar" title={auth.user.email || ""}>{initials}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="who" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {userName}
            </div>
            <div className="role" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {readOnly ? `${t("read_only")} · ${EXPECTED_CLIENTE}` : userRole ? `${userRole} · ${EXPECTED_CLIENTE}` : EXPECTED_CLIENTE}
            </div>
          </div>
          <Button variant="ghost" icon="x" title={t("sign_out")} onClick={fbSignOut}/>
        </div>
        <div className="sidebar-powered">
          {t("powered_by")} <span className="brand-amarello">Amarello</span>
        </div>
      </aside>

      {/* Main */}
      <div className="main">
        <header className="topbar">
          <div>
            <h1 data-screen-label={view}>{titles[view].title}</h1>
            <div className="crumbs">{titles[view].crumbs}</div>
          </div>
          <div className="spacer"/>
          <div className="search-field" title={t("search_hint")}>
            <Icon name="search" size={14} style={{ color: "var(--text-faint)" }}/>
            <input
              placeholder={t("search_placeholder")}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter" && searchQuery.trim()) {
                  setActiveTerm(searchQuery.trim());
                }
              }}
            />
            <kbd>↵</kbd>
          </div>
          <Button variant="ghost" icon="globe" onClick={() => setSettings(s => ({ ...s, language: s.language === "es" ? "en" : "es" }))}>
            {settings.language === "es" ? "ES" : "EN"}
          </Button>
          <Button variant="ghost" icon={settings.theme === "dark" ? "sun" : "moon"}
            onClick={() => setSettings(s => ({ ...s, theme: s.theme === "dark" ? "light" : "dark" }))}/>
        </header>

        <main className="content" key={view}>
          {view === "overview"  && <ViewOverview t={t} setRoute={setRoute}/>}
          {view === "analytics" && <ViewAnalytics t={t}/>}
          {view === "trends"    && <ViewTrends t={t}/>}
          {view === "workflow"  && <ViewWorkflow t={t} readOnly={readOnly}/>}
          {view === "admin"     && <ViewAdmin t={t}/>}
        </main>
      </div>

      {/* Term details modal */}
      <TermDetails term={activeTerm} onClose={() => setActiveTerm(null)} t={t}/>

      {/* Tweaks FAB */}
      <button className="tweaks-fab" onClick={(e) => { attachRipple(e); setTweaksOpen(o => !o); }}
        aria-label="Tweaks" title="Tweaks">
        <Icon name="sliders" size={20}/>
      </button>
      <TweaksPanel open={tweaksOpen} onClose={() => setTweaksOpen(false)} settings={settings} setSettings={setSettings} t={t}/>
    </div>
  );
};

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