/* ============================================================
   App shell — navegação + layout
   ============================================================ */
const NAV = [
  { key: "dashboard", label: "Dashboard",      icon: "dashboard" },
  { key: "clientes",  label: "Clientes",        icon: "users"     },
  { key: "vendas",    label: "Vendas",           icon: "cart"      },
  { key: "premios",   label: "Prêmios",          icon: "gift"      },
  { key: "resgates",  label: "Resgates",         icon: "swap"      },
  { key: "cliente",   label: "Área do cliente",  icon: "user"      },
  { key: "config",    label: "Configurações",    icon: "gear"      }
];

function LoadingScreen() {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", flexDirection: "column", gap: 16 }}>
      <span className="logo-mark" style={{ width: 52, height: 52, fontSize: 26, borderRadius: 14 }}>R</span>
      <p style={{ color: "var(--text-3)", fontSize: 14 }}>Conectando ao banco de dados…</p>
    </div>
  );
}

function ErrorScreen({ msg }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", flexDirection: "column", gap: 14, padding: 24 }}>
      <div className="empty-ic"><Icon name="alert" size={26} /></div>
      <h4>Erro de conexão</h4>
      <p style={{ color: "var(--text-3)", fontSize: 13.5, textAlign: "center", maxWidth: 420 }}>{msg}</p>
      <Button onClick={() => window.location.reload()} variant="ghost">Tentar novamente</Button>
    </div>
  );
}

function App() {
  const s = useStore();
  const [route, setRoute] = useState({ view: "dashboard", params: {} });
  const [navOpen, setNavOpen] = useState(false);

  function go(view, params) {
    setRoute({ view, params: params || {} });
    setNavOpen(false);
    window.scrollTo(0, 0);
  }

  if (!s.loaded) return <LoadingScreen />;
  if (s.error)   return <ErrorScreen msg={s.error} />;

  const activeKey = route.view === "cliente" && route.params.id
    ? "clientes"
    : route.view === "cliente" ? "cliente" : route.view;

  let body;
  switch (route.view) {
    case "dashboard": body = <Dashboard go={go} />; break;
    case "clientes":  body = <Clientes go={go} />; break;
    case "cliente":
      body = route.params.id
        ? <ClienteDetalhe id={route.params.id} go={go} />
        : <AreaCliente go={go} initial={route.params} />;
      break;
    case "vendas":   body = <Vendas go={go} initial={route.params} />; break;
    case "premios":  body = <Premios go={go} />; break;
    case "resgates": body = <Resgates go={go} initial={route.params} />; break;
    case "config":   body = <Configuracoes />; break;
    default:         body = <Dashboard go={go} />;
  }

  const cfg = s.config || {};

  return (
    <div className="app">
      {navOpen && <div className="scrim" onClick={() => setNavOpen(false)} />}
      <aside className={"sidebar" + (navOpen ? " open" : "")}>
        <div className="brand">
          <span className="logo-mark">R</span>
          <span className="brand-txt"><strong>RECO64</strong><em>Clube de Recompensas</em></span>
        </div>
        <nav className="nav">
          <span className="nav-label">Operação</span>
          {NAV.slice(0, 5).map((n) => (
            <button key={n.key} className={"nav-item" + (activeKey === n.key ? " on" : "")} onClick={() => go(n.key)}>
              <Icon name={n.icon} size={19} /> {n.label}
            </button>
          ))}
          <span className="nav-label">Cliente & Ajustes</span>
          {NAV.slice(5).map((n) => (
            <button key={n.key} className={"nav-item" + (activeKey === n.key ? " on" : "")} onClick={() => go(n.key)}>
              <Icon name={n.icon} size={19} /> {n.label}
            </button>
          ))}
        </nav>
        <div className="sidebar-foot">
          <strong>Painel do administrador</strong>
          R$ {String(cfg.reaisPorPonto || 1).replace(".", ",")} = 1 ponto
        </div>
      </aside>

      <div className="main">
        <header className="topbar">
          <button className="icon-btn" onClick={() => setNavOpen(true)} aria-label="Menu">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
              <path d="M4 7h16M4 12h16M4 17h16" />
            </svg>
          </button>
          <span className="brand-txt"><strong>RECO64</strong></span>
        </header>
        <main className="content">{body}</main>
      </div>

      <ToastHost />
    </div>
  );
}

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