// shell.jsx — App shell (sidebar + topbar + tweaks + module router)
const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "dense": false,
  "hideMoney": false,
  "lang": "pt",
  "module": "dashboard",
  "collapsed": false,
  "currentUser": "admin"
}/*EDITMODE-END*/;

// ---- USER PROFILES ----
const USERS = [
  { key: "admin", name: "Dione Alves", role: "Super administrador", role_en: "Super admin", color: "" },
  { key: "manager", name: "Paloma Ferreira", role: "Gerente operacional", role_en: "Operations manager", color: "purple" },
  { key: "lawyer", name: "Dr. Wellton Reis", role: "Advogado", role_en: "Legal counsel", color: "orange" },
  { key: "ops", name: "Alex Santos", role: "Analista", role_en: "Analyst", color: "cyan" },
];

// Permissions per user
const USER_MODULES = {
  admin: null, // all
  manager: ["dashboard", "analysis", "opportunities", "crm_kanban", "acquisitions", "maintenance", "contracts", "trackers", "reviews", "management", "finance", "cashbook", "financing", "team", "support", "account"],
  lawyer: ["dashboard", "lawyer", "contracts", "acquisitions", "support", "account"],
  ops: ["dashboard", "analysis", "opportunities", "crm_kanban", "reviews", "support", "account"],
};

function App({ authUser, onLogout }) {
  const [tweaks, setTweaks] = useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem("nau_tweaks") || "null");
      return { ...TWEAK_DEFAULTS, ...(saved || {}) };
    } catch (e) { return TWEAK_DEFAULTS; }
  });

  // Real auth is authoritative for the active role/profile.
  useEffect(() => {
    if (authUser && authUser.role_key) {
      setTweaks((p) => (p.currentUser === authUser.role_key ? p : { ...p, currentUser: authUser.role_key }));
    }
  }, [authUser]);
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [search, setSearch] = useState("");
  const [pendingBadge, setPendingBadge] = useState(0);
  const [crmBadge, setCrmBadge] = useState(0);
  const [vehiclesVersion, setVehiclesVersion] = useState(0);
  const [acquisitionsBadge, setAcquisitionsBadge] = useState(0);
  const [maintenanceBadge, setMaintenanceBadge] = useState(0);
  const [switcherOpen, setSwitcherOpen] = useState(false);

  const refreshMaintenanceBadge = () => {
    const veh = window.NA.vehicles || [];
    const itemsByAcq = window.NA.maintenanceItemsByAcq || {};
    const AM = window.NA.AcquisitionMaintenance;
    const count = AM?.countMaintenanceAlerts?.(veh, itemsByAcq)
      ?? veh.filter(v => v.maintenance && v.maintenance.length > 0).length;
    setMaintenanceBadge(count);
  };

  const refreshAcquisitionsBadge = () => {
    const veh = window.NA.vehicles || [];
    const AF = window.NA.AcquisitionFinance;
    const count = AF?.countAcquisitionAlerts?.(veh) ?? veh.filter(v => v.status === "overdue").length;
    setAcquisitionsBadge(count);
  };

  const refreshPendingBadge = async () => {
    const db = window.NA.db;
    if (!db?.isConfigured()) { setPendingBadge(0); setCrmBadge(0); return; }
    try {
      const [analysisCount, crmCount] = await Promise.all([
        db.countPendingAnalyses(["draft", "pending"]),
        db.countPendingAnalyses(["pending"]),
      ]);
      setPendingBadge(analysisCount);
      setCrmBadge(crmCount);
    } catch (e) { setPendingBadge(0); setCrmBadge(0); }
  };

  const refreshVehicles = async () => {
    const db = window.NA.db;
    const fallback = (window.NA.vehiclesMock || []).map(v => ({ ...v }));
    if (!db?.isConfigured()) {
      window.NA.vehicles = fallback;
      if (db?.refreshMaintenanceItemsMap) {
        db.refreshMaintenanceItemsMap().catch(() => {});
      }
      setVehiclesVersion(v => v + 1);
      refreshAcquisitionsBadge();
      refreshMaintenanceBadge();
      return;
    }
    try {
      const rows = await db.refreshVehicles();
      window.NA.vehicles = rows ?? [];
      if (db.refreshMaintenanceItemsMap) await db.refreshMaintenanceItemsMap();
    } catch (e) {
      console.warn("NorthAuto vehicles load:", e.message || e);
      window.NA.vehicles = [];
    }
    setVehiclesVersion(v => v + 1);
    refreshAcquisitionsBadge();
    refreshMaintenanceBadge();
  };

  useEffect(() => {
    const db = window.NA.db;
    if (!db || !db.isConfigured()) {
      refreshVehicles();
      return;
    }
    db.ensureSession().then(() => {
      refreshPendingBadge();
      refreshVehicles();
    });
  }, []);

  useEffect(() => {
    const onRefresh = () => refreshPendingBadge();
    window.addEventListener("na:analyses-changed", onRefresh);
    return () => window.removeEventListener("na:analyses-changed", onRefresh);
  }, []);

  useEffect(() => {
    const onRefresh = () => refreshVehicles();
    window.addEventListener("na:acquisitions-changed", onRefresh);
    return () => window.removeEventListener("na:acquisitions-changed", onRefresh);
  }, []);

  // Apply body classes
  useEffect(() => {
    document.body.classList.toggle("dark", !!tweaks.dark);
    document.body.classList.toggle("dense", !!tweaks.dense);
    document.body.classList.toggle("hide-money", !!tweaks.hideMoney);
    try { localStorage.setItem("nau_tweaks", JSON.stringify(tweaks)); } catch (e) {}
  }, [tweaks]);

  // Tweaks panel protocol
  useEffect(() => {
    function handler(ev) {
      const d = ev.data || {};
      if (d.type === "__activate_edit_mode") setTweaksOpen(true);
      else if (d.type === "__deactivate_edit_mode") setTweaksOpen(false);
    }
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  // Lucide refresh after every render
  useEffect(() => {
    if (window.lucide) {
      try { window.lucide.createIcons(); } catch (e) {}
    }
  });

  const setT = (patch) => setTweaks((p) => {
    const next = { ...p, ...patch };
    if (patch.module && patch.module !== p.module) {
      try { history.replaceState(null, "", "#" + patch.module); } catch (e) {}
    }
    return next;
  });

  useEffect(() => {
    function applyHash() {
      const key = (location.hash || "").replace(/^#/, "").split("?")[0];
      if (key && window.NA.M && window.NA.M[key]) {
        setTweaks((p) => (p.module === key ? p : { ...p, module: key }));
      }
    }
    applyHash();
    window.addEventListener("hashchange", applyHash);
    return () => window.removeEventListener("hashchange", applyHash);
  }, []);

  useEffect(() => {
    const key = tweaks.module || "dashboard";
    const want = "#" + key;
    if (location.hash !== want && !location.hash.includes("?")) {
      try { history.replaceState(null, "", want); } catch (e) {}
    }
  }, [tweaks.module]);

  useEffect(() => {
    function onKey(e) {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); setSwitcherOpen(s => !s); }
      else if (e.key === "Escape") setSwitcherOpen(false);
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const lang = tweaks.lang || "pt";
  const t = (k) => window.NA.t(k, lang);
  let currentUser = USERS.find(u => u.key === tweaks.currentUser) || USERS[0];
  if (authUser && authUser.role_key === currentUser.key && authUser.display_name) {
    currentUser = { ...currentUser, name: authUser.display_name };
  }
  window.NA.currentUser = currentUser;
  const allowed = USER_MODULES[currentUser.key];
  const modules = window.NA.modules
    .filter(m => !allowed || allowed.includes(m.key))
    .map(m => {
      if (pendingBadge > 0 && m.key === "analysis") return { ...m, badge: String(pendingBadge), badgeKind: "warning" };
      if (crmBadge > 0 && m.key === "crm_kanban") return { ...m, badge: String(crmBadge), badgeKind: "primary" };
      if (acquisitionsBadge > 0 && m.key === "acquisitions") return { ...m, badge: String(acquisitionsBadge), badgeKind: "error" };
      if (maintenanceBadge > 0 && m.key === "maintenance") return { ...m, badge: String(maintenanceBadge), badgeKind: "warning" };
      return m;
    });

  const ModuleComp = (window.NA.M && window.NA.M[tweaks.module]) || (window.NA.M && window.NA.M.dashboard);
  const moduleMeta = window.NA.modules.find(m => m.key === tweaks.module);

  return (
    <div className={"app" + (tweaks.collapsed ? " collapsed" : "")}>
      <Sidebar t={t} active={tweaks.module} onNav={(m) => setT({ module: m })}
               modules={modules} collapsed={tweaks.collapsed} onToggleCollapsed={() => setT({ collapsed: !tweaks.collapsed })} />
      <div className="content">
        <TopBar t={t} lang={lang} tweaks={tweaks} setT={setT} setTweaksOpen={setTweaksOpen}
                moduleMeta={moduleMeta} user={currentUser} onOpenSwitcher={() => setSwitcherOpen(true)}
                authUser={authUser} onLogout={onLogout} />
        <div className="main">
          {ModuleComp ? <ModuleComp key={tweaks.module + "-" + vehiclesVersion} t={t} lang={lang} setT={setT} user={currentUser} tweaks={tweaks} /> : <div className="empty"><h3>Módulo em construção</h3></div>}
        </div>
      </div>
      {tweaksOpen && (
        <TweaksPanel tweaks={tweaks} setT={setT} onClose={() => {
          setTweaksOpen(false);
          window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*");
        }} users={USERS} />
      )}
      {switcherOpen && (
        <ModuleSwitcher modules={modules} t={t} onClose={() => setSwitcherOpen(false)}
          onPick={(k) => { setT({ module: k }); setSwitcherOpen(false); }} />
      )}
    </div>
  );
}

// ============================================================
// SIDEBAR
// ============================================================
function Sidebar({ t, active, onNav, modules, collapsed, onToggleCollapsed }) {
  const [filter, setFilter] = useState("");
  const groups = ["operations", "finance", "admin", "super_admin"];
  const filtered = modules.filter(m => !filter || t(m.i18n).toLowerCase().includes(filter.toLowerCase()));

  return (
    <nav className="rail" data-screen-label="Sidebar">
      <div className="brand">
        <div className="mark">
          <svg viewBox="0 0 48 48" fill="none">
            <circle cx="24" cy="24" r="20" stroke="currentColor" strokeWidth="2.5" fill="none"></circle>
            <path d="M24 6 L29 24 L24 22 L19 24 Z" fill="currentColor"></path>
            <path d="M24 42 L29 24 L24 26 L19 24 Z" fill="currentColor" opacity="0.4"></path>
          </svg>
        </div>
        <div className="name">NorthAuto <span>OS</span></div>
      </div>
      <div className="nav-search">
        <input placeholder={t("common_search") + "…"} value={filter} onChange={e => setFilter(e.target.value)} />
      </div>
      <div className="nav-list">
        {groups.map(g => {
          const items = filtered.filter(m => m.group === g);
          if (!items.length) return null;
          return (
            <div key={g}>
              <div className="group"><span>{t("group_" + g)}</span></div>
              {items.map(m => (
                <div key={m.key} className={"item" + (active === m.key ? " active" : "")} onClick={() => onNav(m.key)}>
                  <window.NA.Icon name={m.icon} size={16} />
                  <span>{t(m.i18n)}</span>
                  {m.badge && <span className={"badge " + (m.badgeKind || "")}>{m.badge}</span>}
                </div>
              ))}
            </div>
          );
        })}
      </div>
      <div className="footer">
        <div className="row"><span>API</span><b style={{ color: "var(--color-success)" }}>● online</b></div>
        <div className="row"><span>Build</span><b>2026.05.23</b></div>
        <div className="row" style={{ cursor: "pointer" }} onClick={onToggleCollapsed}>
          <span>Recolher</span>
          <window.NA.Icon name={collapsed ? "chevrons-right" : "chevrons-left"} size={12} />
        </div>
      </div>
    </nav>
  );
}

// ============================================================
// TOPBAR
// ============================================================
function TopBar({ t, lang, tweaks, setT, setTweaksOpen, moduleMeta, user, onOpenSwitcher, authUser, onLogout }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef(null);
  useEffect(() => {
    function onDoc(e) {
      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
    }
    if (menuOpen) document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [menuOpen]);
  return (
    <div className="topbar">
      <div className="crumbs">
        <window.NA.Icon name={moduleMeta ? moduleMeta.icon : "home"} size={14} />
        <span>NorthAuto OS</span>
        <window.NA.Icon name="chevron-right" size={12} />
        <span className="h">{moduleMeta ? t(moduleMeta.i18n) : "—"}</span>
      </div>
      <div style={{ justifySelf: "center", width: "100%", maxWidth: 480 }}>
        <div className="search-box" onClick={onOpenSwitcher} style={{ cursor: "pointer" }}>
          <window.NA.Icon name="search" size={14} />
          <input readOnly placeholder={t("common_search") + " — placas, clientes, módulos…"} style={{ cursor: "pointer" }} />
          <span className="kbd">Ctrl K</span>
        </div>
      </div>
      <div className="actions">
        <div className="lang" onClick={() => setT({ lang: lang === "pt" ? "en" : "pt" })}>
          <b>{lang === "pt" ? "PT" : "EN"}</b> / {lang === "pt" ? "EN" : "PT"}
        </div>
        <button className="icon-btn" title="Notificações">
          <window.NA.Icon name="bell" size={16} /><span className="dot"></span>
        </button>
        <button className="icon-btn" title="Tweaks" onClick={() => {
          setTweaksOpen(true);
          window.parent.postMessage({ type: "__edit_mode_available" }, "*");
        }}>
          <window.NA.Icon name="sliders-horizontal" size={16} />
        </button>
        <div className="user" ref={menuRef} style={{ position: "relative" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}
               onClick={() => setMenuOpen(o => !o)}>
            <window.NA.Avatar name={user.name} color={user.color} />
            <div className="who">{user.name.split(" ")[0]}<small>{lang === "en" ? user.role_en : user.role}</small></div>
            <window.NA.Icon name="chevron-down" size={14} style={{ color: "var(--fg3)" }} />
          </div>
          {menuOpen && (
            <div style={{
              position: "absolute", top: "calc(100% + 8px)", right: 0, minWidth: 220, zIndex: 2200,
              background: "var(--color-bg-elevated)", border: "1px solid var(--color-border)",
              borderRadius: 10, boxShadow: "var(--shadow-2)", overflow: "hidden", padding: 6
            }}>
              <div style={{ padding: "8px 10px", borderBottom: "1px solid var(--color-border-secondary)", marginBottom: 4 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: "var(--fg1)" }}>{user.name}</div>
                {authUser && authUser.email && (
                  <div style={{ fontSize: 11, color: "var(--fg3)", fontFamily: "var(--font-mono)", marginTop: 2 }}>{authUser.email}</div>
                )}
              </div>
              <div onClick={() => { setMenuOpen(false); setT({ module: "account" }); }}
                   className="user-menu-item" style={userMenuItemStyle}>
                <window.NA.Icon name="user" size={15} style={{ color: "var(--fg2)" }} />
                <span>{lang === "en" ? "My account" : "Minha conta"}</span>
              </div>
              <div onClick={() => { setMenuOpen(false); onLogout && onLogout(); }}
                   className="user-menu-item" style={{ ...userMenuItemStyle, color: "var(--color-error)" }}>
                <window.NA.Icon name="log-out" size={15} />
                <span>{lang === "en" ? "Sign out" : "Sair"}</span>
              </div>
            </div>
          )}
        </div>
      </div>
      <style>{`
        .user-menu-item:hover { background: var(--color-fill-tertiary); }
      `}</style>
    </div>
  );
}

const userMenuItemStyle = {
  display: "flex", alignItems: "center", gap: 10, padding: "8px 10px",
  borderRadius: 6, cursor: "pointer", fontSize: 13, color: "var(--fg1)"
};

// ============================================================
// MODULE SWITCHER (Ctrl+K)
// ============================================================
function ModuleSwitcher({ modules, t, onClose, onPick }) {
  const [q, setQ] = useState("");
  const filtered = modules.filter(m => !q || t(m.i18n).toLowerCase().includes(q.toLowerCase()));
  return (
    <div style={{
      position: "fixed", inset: 0, background: "var(--color-bg-mask)", zIndex: 2000,
      display: "flex", alignItems: "flex-start", justifyContent: "center", paddingTop: "10vh"
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: 560, maxWidth: "90vw", background: "var(--color-bg-elevated)",
        border: "1px solid var(--color-border)", borderRadius: 10, boxShadow: "var(--shadow-2)",
        overflow: "hidden", display: "flex", flexDirection: "column"
      }}>
        <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--color-border-secondary)", display: "flex", gap: 8, alignItems: "center" }}>
          <window.NA.Icon name="search" size={16} style={{ color: "var(--fg3)" }} />
          <input autoFocus value={q} onChange={e => setQ(e.target.value)}
            placeholder={t("common_search") + " — abrir módulo"} style={{
              all: "unset", flex: 1, fontSize: 14, color: "var(--fg1)"
            }} />
          <span className="kbd">Esc</span>
        </div>
        <div style={{ maxHeight: 380, overflow: "auto", padding: 6 }}>
          {filtered.map(m => (
            <div key={m.key} onClick={() => onPick(m.key)} style={{
              padding: "8px 10px", borderRadius: 6, display: "flex", alignItems: "center", gap: 10,
              cursor: "pointer", fontSize: 13
            }} className="switcher-item">
              <window.NA.Icon name={m.icon} size={16} style={{ color: "var(--fg2)" }} />
              <span>{t(m.i18n)}</span>
              <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg3)" }}>{m.group}</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .switcher-item:hover { background: var(--color-fill-tertiary); }
      `}</style>
    </div>
  );
}

// ============================================================
// TWEAKS PANEL
// ============================================================
function TweaksPanel({ tweaks, setT, onClose, users }) {
  return (
    <div className="tweaks" data-screen-label="Tweaks">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <h4>Tweaks</h4>
        <button className="icon-btn" onClick={onClose} style={{ marginRight: -8 }}>
          <window.NA.Icon name="x" size={14} />
        </button>
      </div>
      <div className="t-row">
        <span className="lbl"><window.NA.Icon name="moon" /> Tema escuro</span>
        <window.NA.Switch on={!!tweaks.dark} onChange={v => setT({ dark: v })} />
      </div>
      <div className="t-row">
        <span className="lbl"><window.NA.Icon name="layout-grid" /> Densidade compacta</span>
        <window.NA.Switch on={!!tweaks.dense} onChange={v => setT({ dense: v })} />
      </div>
      <div className="t-row">
        <span className="lbl"><window.NA.Icon name="eye-off" /> Ocultar valores</span>
        <window.NA.Switch on={!!tweaks.hideMoney} onChange={v => setT({ hideMoney: v })} />
      </div>
      <div style={{ height: 1, background: "var(--color-border-secondary)" }}></div>
      <div className="col" style={{ gap: 6 }}>
        <div style={{ fontSize: 11, color: "var(--fg3)", fontWeight: 500 }}>IDIOMA</div>
        <window.NA.Segmented value={tweaks.lang} onChange={v => setT({ lang: v })}
          options={[{ value: "pt", label: "Português" }, { value: "en", label: "English" }]} />
      </div>
      <div className="col" style={{ gap: 6 }}>
        <div style={{ fontSize: 11, color: "var(--fg3)", fontWeight: 500 }}>PERFIL ATIVO</div>
        <select className="input" value={tweaks.currentUser}
          onChange={e => setT({ currentUser: e.target.value })}>
          {users.map(u => <option key={u.key} value={u.key}>{u.name} — {u.role}</option>)}
        </select>
      </div>
    </div>
  );
}

// ============================================================
// LOGIN SCREEN
// ============================================================
function BrandMark({ size = 44 }) {
  return (
    <div className="login-mark" style={{ width: size, height: size }}>
      <svg viewBox="0 0 48 48" fill="none" width={size} height={size}>
        <circle cx="24" cy="24" r="20" stroke="currentColor" strokeWidth="2.5" fill="none"></circle>
        <path d="M24 6 L29 24 L24 22 L19 24 Z" fill="currentColor"></path>
        <path d="M24 42 L29 24 L24 26 L19 24 Z" fill="currentColor" opacity="0.4"></path>
      </svg>
    </div>
  );
}

function LoginScreen({ onSuccess }) {
  const cfg = window.NA_CONFIG || {};
  const db = window.NA.db;
  const [email, setEmail] = useState(cfg.supabaseAuthEmail || "");
  const [password, setPassword] = useState("");
  const [showPass, setShowPass] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const submit = async (e) => {
    e.preventDefault();
    if (loading) return;
    setError("");
    if (!email || !password) { setError("Informe e-mail e senha."); return; }
    if (!db || !db.isConfigured()) { setError("Supabase não configurado."); return; }
    setLoading(true);
    try {
      const data = await db.signIn(email.trim(), password);
      const session = (data && data.session) || await db.getExistingSession();
      const role = await db.resolveUserRole(session);
      onSuccess && onSuccess(session, role);
    } catch (err) {
      const msg = (err && (err.message || err.error_description)) || "Falha ao entrar.";
      setError(/invalid login/i.test(msg) ? "E-mail ou senha inválidos." : msg);
      setLoading(false);
    }
  };

  return (
    <div className="login-wrap">
      <div className="login-aside">
        <div className="login-aside-inner">
          <div className="login-brand">
            <BrandMark size={40} />
            <div className="login-brand-name">NorthAuto <span>OS</span></div>
          </div>
          <h1>Plataforma de gestão automotiva</h1>
          <p>Aquisições, manutenção, financeiro e CRM em um só lugar. Acesse com sua conta para continuar.</p>
          <ul className="login-points">
            <li><window.NA.Icon name="shield-check" size={16} /> Acesso seguro por perfil</li>
            <li><window.NA.Icon name="gauge" size={16} /> Operação em tempo real</li>
            <li><window.NA.Icon name="layers" size={16} /> Todos os módulos integrados</li>
          </ul>
        </div>
      </div>

      <div className="login-panel">
        <form className="login-card" onSubmit={submit}>
          <div className="login-card-head">
            <BrandMark size={38} />
            <h2>Entrar</h2>
            <p>Bem-vindo de volta. Faça login para acessar o painel.</p>
          </div>

          {error && (
            <div className="login-error">
              <window.NA.Icon name="alert-circle" size={16} />
              <span>{error}</span>
            </div>
          )}

          <label className="login-field">
            <span>E-mail</span>
            <div className="login-input">
              <window.NA.Icon name="mail" size={16} />
              <input type="email" autoComplete="username" placeholder="voce@northauto.app"
                     value={email} onChange={e => setEmail(e.target.value)} autoFocus />
            </div>
          </label>

          <label className="login-field">
            <span>Senha</span>
            <div className="login-input">
              <window.NA.Icon name="lock" size={16} />
              <input type={showPass ? "text" : "password"} autoComplete="current-password"
                     placeholder="••••••••" value={password} onChange={e => setPassword(e.target.value)} />
              <button type="button" className="login-eye" onClick={() => setShowPass(s => !s)}
                      title={showPass ? "Ocultar senha" : "Mostrar senha"}>
                <window.NA.Icon name={showPass ? "eye-off" : "eye"} size={16} />
              </button>
            </div>
          </label>

          <button type="submit" className="login-submit" disabled={loading}>
            {loading ? <span>Entrando…</span> : <><span>Entrar</span><window.NA.Icon name="arrow-right" size={16} /></>}
          </button>

          <div className="login-foot">
            <window.NA.Icon name="shield" size={12} />
            <span>Conexão segura • NorthAuto OS</span>
          </div>
        </form>
      </div>

      <style>{LOGIN_CSS}</style>
    </div>
  );
}

const LOGIN_CSS = `
.login-wrap { position: fixed; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--color-bg-layout); overflow: auto; }
.login-mark { color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; }
.login-aside { position: relative; background:
  radial-gradient(1200px 600px at -10% -10%, rgba(22,119,255,0.18), transparent 55%),
  radial-gradient(900px 500px at 110% 110%, rgba(22,119,255,0.10), transparent 50%),
  var(--color-bg-container);
  border-right: 1px solid var(--color-border-secondary); display: flex; align-items: center; padding: 48px; }
.login-aside-inner { max-width: 440px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.login-brand-name { font-size: 22px; font-weight: 700; color: var(--fg1); letter-spacing: -0.01em; }
.login-brand-name span { color: var(--fg3); font-weight: 400; }
.login-aside h1 { font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--fg1); margin: 0 0 16px; letter-spacing: -0.02em; }
.login-aside p { font-size: 15px; color: var(--fg2); line-height: 1.6; margin: 0 0 32px; }
.login-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.login-points li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg2); }
.login-points li svg { color: var(--color-primary); }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.login-card-head { text-align: center; margin-bottom: 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.login-card-head h2 { font-size: 24px; font-weight: 700; color: var(--fg1); margin: 6px 0 0; letter-spacing: -0.01em; }
.login-card-head p { font-size: 13px; color: var(--fg3); margin: 0; }
.login-error { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-error);
  background: var(--color-error-bg); border: 1px solid var(--color-error); border-radius: 8px; padding: 10px 12px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field > span { font-size: 12px; font-weight: 600; color: var(--fg2); }
.login-input { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  background: var(--color-bg-container); border: 1px solid var(--color-border); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.login-input:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg); }
.login-input svg { color: var(--fg3); flex-shrink: 0; }
.login-input input { all: unset; flex: 1; font-size: 14px; color: var(--fg1); min-width: 0; }
.login-eye { all: unset; cursor: pointer; color: var(--fg3); display: inline-flex; padding: 4px; border-radius: 6px; }
.login-eye:hover { color: var(--fg1); }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 6px;
  background: var(--color-primary); color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: opacity .15s, transform .05s; }
.login-submit:hover { opacity: .92; }
.login-submit:active { transform: translateY(1px); }
.login-submit:disabled { opacity: .6; cursor: default; }
.login-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--fg3); }
@media (max-width: 860px) { .login-wrap { grid-template-columns: 1fr; } .login-aside { display: none; } }
`;

// ============================================================
// AUTH GATE — decides between login screen and the app
// ============================================================
function AuthGate() {
  const [status, setStatus] = useState("booting"); // booting | anon | authed
  const [authUser, setAuthUser] = useState(null);
  const db = window.NA.db;

  // Apply saved theme preference early so login/splash match the user's choice.
  useEffect(() => {
    try {
      const saved = JSON.parse(localStorage.getItem("nau_tweaks") || "null") || {};
      document.body.classList.toggle("dark", !!saved.dark);
      document.body.classList.toggle("dense", !!saved.dense);
    } catch (e) {}
  }, []);

  useEffect(() => {
    let mounted = true;
    (async () => {
      if (!db || !db.isConfigured()) { if (mounted) setStatus("authed"); return; } // no backend → open app
      try {
        const session = await db.getExistingSession();
        if (!session) { if (mounted) setStatus("anon"); return; }
        const role = await db.resolveUserRole(session);
        if (mounted) { setAuthUser(role); setStatus("authed"); }
      } catch (e) {
        if (mounted) setStatus("anon");
      }
    })();
    return () => { mounted = false; };
  }, []);

  useEffect(() => {
    if (!db || !db.onAuthStateChange) return;
    const { data } = db.onAuthStateChange((event, session) => {
      if (event === "SIGNED_OUT" || !session) { setAuthUser(null); setStatus("anon"); }
    });
    return () => { try { data.subscription.unsubscribe(); } catch (e) {} };
  }, []);

  const handleLogout = async () => {
    try { await db.signOut(); } catch (e) {}
    setAuthUser(null);
    setStatus("anon");
  };

  const handleSuccess = (session, role) => {
    setAuthUser(role);
    setStatus("authed");
  };

  if (status === "booting") {
    return (
      <div style={{ position: "fixed", inset: 0, display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center", gap: 14, background: "var(--color-bg-layout)" }}>
        <BrandMark size={44} />
        <div style={{ fontSize: 13, color: "var(--fg3)" }}>Carregando…</div>
      </div>
    );
  }
  if (status === "anon") return <LoginScreen onSuccess={handleSuccess} />;
  return <App authUser={authUser} onLogout={handleLogout} />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<AuthGate />);