// app.jsx — Capivara's Fishing ERP — shell, router, login, RBAC

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "balanced",
  "density": "regular",
  "dark": false,
  "logoStyle": "mascot"
}/*EDITMODE-END*/;

/* ──────────────────────────────────────────────────────────────
   NAV CONFIG — operational items only (admin items live in admin panel)
   ────────────────────────────────────────────────────────────── */
const NAV_MAIN = [
  { section: "Operação", items: [
    { id: "dashboard", label: "Dashboard",      icon: I.Dashboard },
    { id: "pdv",       label: "PDV — Caixa",    icon: I.Pdv, badge: "2" },
  ]},
  { section: "Catálogo & Vendas", items: [
    { id: "estoque",   label: "Estoque",        icon: I.Box },
    { id: "vendas",    label: "Vendas",         icon: I.Receipt },
    { id: "nf",        label: "Notas Fiscais",  icon: I.Doc },
    { id: "clientes",  label: "Clientes",       icon: I.Users },
  ]},
];

const NAV_ADMIN = [
  { section: "Painel Administrativo", items: [
    { id: "admin-integracoes",  label: "Integrações",   icon: I.Plug },
    { id: "admin-compras",      label: "Compras",       icon: I.Truck },
    { id: "admin-fornecedores", label: "Fornecedores",  icon: I.Users },
    { id: "admin-financeiro",   label: "Financeiro",    icon: I.Cash, requires: "financeiro" },
    { id: "admin-relatorios",   label: "Relatórios",    icon: I.Chart },
    { id: "admin-usuarios",     label: "Usuários",      icon: I.Shield, requires: "usuarios" },
  ]},
  { section: "Interno DashM", items: [
    { id: "admin-discovery",    label: "Discovery",     icon: I.Bell, requires: "discovery" },
  ]},
];

const ROUTE_TO_PERM = {
  dashboard: "dashboard",
  pdv: "pdv",
  estoque: "estoque",
  vendas: "vendas",
  nf: "nf",
  clientes: "clientes",
  "admin-integracoes":  "integracoes",
  "admin-compras":      "compras",
  "admin-fornecedores": "fornecedores",
  "admin-financeiro":   "financeiro",
  "admin-relatorios":   "relatorios",
  "admin-usuarios":     "usuarios",
  "admin-discovery":    "discovery",
};

const ROUTE_LABELS = {
  dashboard: { title: "Visão geral", sub: "KPIs, vendas e operação em tempo real" },
  pdv: { title: "PDV — Frente de Caixa", sub: "Atendimento e vendas presenciais" },
  estoque: { title: "Estoque", sub: "Gestão unificada — loja física + marketplaces" },
  vendas: { title: "Vendas", sub: "Histórico de pedidos e vendas" },
  nf: { title: "Notas Fiscais", sub: "NFC-e (PDV) e NF-e (faturamento)" },
  clientes: { title: "Clientes", sub: "Base de cadastros" },
  "admin-integracoes":  { title: "Integrações",  sub: "Marketplaces, gateways e ERPs" },
  "admin-compras":      { title: "Compras",      sub: "Pedidos a fornecedores e reposição" },
  "admin-fornecedores": { title: "Fornecedores", sub: "Cadastro de parceiros" },
  "admin-financeiro":   { title: "Financeiro",   sub: "Caixa, contas e conciliação" },
  "admin-relatorios":   { title: "Relatórios",   sub: "Análises e exportações" },
  "admin-usuarios":     { title: "Usuários & Permissões", sub: "Operadores e perfis de acesso" },
  "admin-discovery":    { title: "Discovery comercial", sub: "Ferramenta interna DashM — anote respostas da reunião com o cliente" },
};

/* ──────────────────────────────────────────────────────────────
   APP
   ────────────────────────────────────────────────────────────── */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [user, setUser] = useState(null);
  const [adminMode, setAdminMode] = useState(false);
  const [route, setRoute] = useState("dashboard");
  const [toast, setToast] = useState(null);
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

  // Apply theme/palette/density
  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", t.dark ? "dark" : "light");
    root.setAttribute("data-palette", t.palette);
    root.setAttribute("data-density", t.density);
  }, [t.dark, t.palette, t.density]);

  // Toast auto-dismiss
  useEffect(() => {
    if (!toast) return;
    const id = setTimeout(() => setToast(null), 2800);
    return () => clearTimeout(id);
  }, [toast]);

  // When user logs in, route to their default landing screen
  useEffect(() => {
    if (!user) return;
    setAdminMode(false);
    if (user.role === "vendedor") setRoute("pdv");
    else if (user.role === "caixa") setRoute("pdv");
    else setRoute("dashboard");
  }, [user]);

  function showToast({ msg, kind = "ok" }) { setToast({ msg, kind, id: Date.now() }); }

  function enterAdmin() {
    setAdminMode(true);
    // pick first allowed admin route
    const first = NAV_ADMIN[0].items.find(it => can(user, ROUTE_TO_PERM[it.id]));
    if (first) setRoute(first.id);
  }
  function exitAdmin() {
    setAdminMode(false);
    setRoute(user.role === "vendedor" || user.role === "caixa" ? "pdv" : "dashboard");
  }

  if (!user) {
    return (
      <>
        <LockScreen onPick={setUser} />
        <TweaksUI t={t} setTweak={setTweak} />
      </>
    );
  }

  // Filter nav by permissions
  const navGroups = adminMode ? NAV_ADMIN : NAV_MAIN;
  const filteredNav = navGroups
    .map(g => ({
      ...g,
      items: g.items.filter(it => can(user, ROUTE_TO_PERM[it.id])),
    }))
    .filter(g => g.items.length > 0);

  return (
    <>
      <div className="app" data-sidebar-collapsed={sidebarCollapsed}>
        <Sidebar
          navGroups={filteredNav}
          route={route}
          onRoute={setRoute}
          user={user}
          collapsed={sidebarCollapsed}
          onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
          logoStyle={t.logoStyle}
          adminMode={adminMode}
          onExitAdmin={exitAdmin}
        />
        <div className="main">
          <Topbar
            route={route}
            user={user}
            onLogout={() => setUser(null)}
            onAdminPanel={enterAdmin}
            adminMode={adminMode}
            onExitAdmin={exitAdmin}
            t={t}
            setTweak={setTweak}
          />
          <div className={`content${route === "pdv" ? " no-pad" : ""}`}>
            <ScreenRouter route={route} user={user} onToast={showToast} />
          </div>
        </div>
      </div>
      <TweaksUI t={t} setTweak={setTweak} />
      {toast && <div className={`toast ${toast.kind}`} key={toast.id}>{toast.msg}</div>}
    </>
  );
}

function ScreenRouter({ route, user, onToast }) {
  // Guard — if user lost access, show fallback
  const perm = ROUTE_TO_PERM[route];
  if (perm && !can(user, perm)) {
    return <AccessDenied user={user} />;
  }
  switch (route) {
    case "dashboard":          return <DashboardScreen onToast={onToast} user={user} />;
    case "pdv":                return <PDVScreen currentUser={user} onToast={onToast} />;
    case "estoque":            return <EstoqueScreen onToast={onToast} user={user} />;
    case "vendas":             return <VendasScreen onToast={onToast} />;
    case "nf":                 return <NFScreen onToast={onToast} />;
    case "clientes":           return <ClientesScreen onToast={onToast} />;
    case "admin-integracoes":  return <IntegracoesScreen onToast={onToast} />;
    case "admin-compras":      return <ComprasScreen onToast={onToast} />;
    case "admin-fornecedores": return <FornecedoresScreen onToast={onToast} />;
    case "admin-financeiro":   return <FinanceiroScreen onToast={onToast} />;
    case "admin-relatorios":   return <RelatoriosScreen onToast={onToast} />;
    case "admin-usuarios":     return <UsuariosScreen onToast={onToast} />;
    case "admin-discovery":    return <DiscoveryScreen onToast={onToast} />;
    default: return <DashboardScreen onToast={onToast} />;
  }
}

function AccessDenied({ user }) {
  return (
    <div className="empty-state" style={{ paddingTop: 80 }}>
      <div style={{
        width: 64, height: 64, borderRadius: 16, background: "var(--err-bg)",
        display: "flex", alignItems: "center", justifyContent: "center", color: "var(--err)",
        marginBottom: 6,
      }}>
        <I.Lock size={28} />
      </div>
      <h2 style={{ fontSize: 20, color: "var(--ink)" }}>Acesso restrito</h2>
      <div style={{ maxWidth: 380, fontSize: 13.5 }}>
        Seu perfil ({ROLE_LABEL[user.role]}) não tem permissão para esta tela.
        Solicite acesso ao CEO ou ao Administrador.
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   SIDEBAR
   ────────────────────────────────────────────────────────────── */
function Sidebar({ navGroups, route, onRoute, user, collapsed, onToggle, logoStyle, adminMode, onExitAdmin }) {
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        {logoStyle === "mascot"
          ? <img src="assets/logo.png" alt="Capivara's" />
          : (
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: "var(--brand-orange)", color: "#fff",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16,
              flexShrink: 0,
            }}>C'</div>
          )}
        <div className="sidebar-brand-name">
          <b>Capivara's</b>
          <span>Fishing ERP</span>
        </div>
      </div>

      {adminMode && (
        <div className="admin-banner" onClick={onExitAdmin} title="Voltar ao ERP">
          <I.Shield size={14} />
          <span>Painel Administrativo</span>
        </div>
      )}

      <nav className="sidebar-nav">
        {navGroups.map(group => (
          <React.Fragment key={group.section}>
            {!collapsed && <div className="sidebar-section">{group.section}</div>}
            {group.items.map(it => {
              const Icon = it.icon;
              return (
                <div
                  key={it.id}
                  className={`nav-item${route === it.id ? " active" : ""}`}
                  onClick={() => onRoute(it.id)}
                  title={collapsed ? it.label : undefined}
                >
                  <Icon className="ico" size={17} />
                  <span>{it.label}</span>
                  {it.badge && <span className="badge-mini">{it.badge}</span>}
                </div>
              );
            })}
          </React.Fragment>
        ))}
      </nav>

      <div className="sidebar-collapse" onClick={onToggle} title={collapsed ? "Expandir menu" : "Recolher menu"}>
        {collapsed ? <I.ChevR size={14} /> : <I.ChevL size={14} />}
        <span className="sidebar-collapse-text">Recolher menu</span>
      </div>

      <div className="sidebar-footer">
        <div className="avatar">{user.nome.split(" ").map(p => p[0]).slice(0, 2).join("")}</div>
        <div className="sidebar-user" style={{ minWidth: 0, flex: 1 }}>
          <b style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{user.nome.split(" ").slice(0, 2).join(" ")}</b>
          <span style={{ textTransform: "uppercase", letterSpacing: "0.04em", fontSize: 10 }}>
            {ROLE_LABEL[user.role]}
          </span>
        </div>
      </div>
    </aside>
  );
}

/* ──────────────────────────────────────────────────────────────
   TOPBAR
   ────────────────────────────────────────────────────────────── */
function Topbar({ route, user, onLogout, onAdminPanel, adminMode, onExitAdmin, t, setTweak }) {
  const meta = ROUTE_LABELS[route] || {};
  return (
    <header className="topbar">
      <div className="row" style={{ gap: 4, alignItems: "center" }}>
        {adminMode && (
          <button className="admin-back-btn" onClick={onExitAdmin}>
            <I.ChevL size={13} /> Sair do painel
          </button>
        )}
        <h1 style={{ marginLeft: adminMode ? 8 : 0 }}>{meta.title}</h1>
        <span className="topbar-sub">{meta.sub}</span>
      </div>
      <div className="topbar-right">
        <button
          className="btn btn-ghost btn-icon"
          title={t.dark ? "Tema claro" : "Tema escuro"}
          onClick={() => setTweak("dark", !t.dark)}
        >
          {t.dark ? <I.Sun size={16} /> : <I.Moon size={16} />}
        </button>
        <button className="btn btn-ghost btn-icon" title="Notificações" style={{ position: "relative" }}>
          <I.Bell size={16} />
          <span style={{ position: "absolute", top: 6, right: 6, width: 7, height: 7, background: "var(--brand-orange)", borderRadius: "50%" }} />
        </button>
        <div style={{ width: 1, height: 22, background: "var(--line)" }} />
        <UserDropdown
          user={user}
          onLogout={onLogout}
          onAdminPanel={onAdminPanel}
          adminMode={adminMode}
          dark={t.dark}
          onToggleDark={() => setTweak("dark", !t.dark)}
        />
      </div>
    </header>
  );
}

/* ──────────────────────────────────────────────────────────────
   USER DROPDOWN
   ────────────────────────────────────────────────────────────── */
function UserDropdown({ user, onLogout, onAdminPanel, adminMode, dark, onToggleDark }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    if (open) document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [open]);

  // Admin panel is available if user has access to ANY admin-only screen
  const adminEligible = ["admin", "ceo", "gerente"].includes(user.role);

  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button className="user-pill" onClick={() => setOpen(!open)}>
        <div className="avatar" style={{ width: 30, height: 30, fontSize: 12 }}>
          {user.nome.split(" ").map(p => p[0]).slice(0, 2).join("")}
        </div>
        <div className="pill-info">
          <b>{user.nome.split(" ").slice(0, 2).join(" ")}</b>
          <span>{ROLE_LABEL[user.role]}</span>
        </div>
        <I.Down size={14} style={{ color: "var(--ink-3)", marginRight: 4 }} />
      </button>
      {open && (
        <div className="user-menu">
          <div className="user-menu-header">
            <div className="avatar" style={{ width: 40, height: 40, fontSize: 14 }}>
              {user.nome.split(" ").map(p => p[0]).slice(0, 2).join("")}
            </div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <b style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{user.nome}</b>
              <span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", display: "block" }}>{user.email}</span>
              <span style={{ marginTop: 4, display: "inline-block" }}>
                <span className={`tag-role ${user.role}`}>{ROLE_LABEL[user.role]}</span>
              </span>
            </div>
          </div>

          <div className="user-menu-item">
            <I.Users size={14} />
            <span className="grow">Meu perfil</span>
          </div>

          {adminEligible && !adminMode && (
            <div className="user-menu-item featured" onClick={() => { setOpen(false); onAdminPanel(); }}>
              <I.Shield size={14} />
              <span className="grow">Painel Administrativo</span>
              <I.ChevR size={12} />
            </div>
          )}

          <div className="user-menu-item" onClick={() => { onToggleDark(); }}>
            {dark ? <I.Sun size={14} /> : <I.Moon size={14} />}
            <span className="grow">{dark ? "Tema claro" : "Tema escuro"}</span>
          </div>

          <div className="user-menu-item">
            <I.Settings size={14} />
            <span className="grow">Preferências</span>
          </div>

          <div className="user-menu-divider" />

          <div className="user-menu-item danger" onClick={() => { setOpen(false); onLogout(); }}>
            <I.Lock size={14} />
            <span className="grow">Sair / Trocar usuário</span>
          </div>
        </div>
      )}
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   LOCK / LOGIN
   ────────────────────────────────────────────────────────────── */
function LockScreen({ onPick }) {
  return (
    <div className="lock">
      <div className="lock-card">
        <img src="assets/logo.png" className="lock-logo" alt="Capivara's Fishing" />
        <h2>Capivara's Fishing ERP</h2>
        <div className="lock-sub">Selecione um usuário para entrar — apenas demonstração</div>

        <div className="users-row">
          {USERS.filter(u => u.ativo).map(u => (
            <div key={u.id} className="user-pick" onClick={() => onPick(u)}>
              <div className="avatar" style={{ width: 38, height: 38, fontSize: 13 }}>
                {u.nome.split(" ").map(p => p[0]).slice(0, 2).join("")}
              </div>
              <div className="grow">
                <b>{u.nome}</b>
                <span>{u.email}</span>
              </div>
              <span className={`tag-role ${u.role}`}>
                {{ admin: "Admin", ceo: "CEO", gerente: "Gerente", caixa: "Caixa", vendedor: "Vend." }[u.role]}
              </span>
            </div>
          ))}
        </div>

        <div className="muted" style={{ marginTop: 22, fontSize: 11.5 }}>
          PDV01 · {STORE_INFO.cidade} · v0.1 MVP
        </div>
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   TWEAKS PANEL
   ────────────────────────────────────────────────────────────── */
function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Identidade" />
      <TweakRadio
        label="Logo"
        value={t.logoStyle}
        options={[
          { value: "mascot", label: "Mascote" },
          { value: "mono",   label: "Monograma" },
        ]}
        onChange={(v) => setTweak("logoStyle", v)}
      />

      <TweakSection label="Paleta da interface" />
      <TweakRadio
        label="Estilo"
        value={t.palette}
        options={[
          { value: "balanced", label: "Equilibrado" },
          { value: "bold",     label: "Marca forte" },
          { value: "sober",    label: "Sóbrio" },
        ]}
        onChange={(v) => setTweak("palette", v)}
      />
      <TweakToggle
        label="Tema escuro"
        value={t.dark}
        onChange={(v) => setTweak("dark", v)}
      />

      <TweakSection label="Densidade" />
      <TweakRadio
        label="Espaçamento"
        value={t.density}
        options={[
          { value: "compact", label: "Compacto" },
          { value: "regular", label: "Regular" },
          { value: "comfy",   label: "Confortável" },
        ]}
        onChange={(v) => setTweak("density", v)}
      />
    </TweaksPanel>
  );
}

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