/* global React, ReactDOM, Icon, StatusDot, CommandCenter, AgentsView, CreativeView, CampaignsView, BriefsView, AlertsView, AgencyView, SettingsView, DATA */
const { useState: useStateA, useEffect: useEffectA } = React;

const NAV = [
  { id: "command", label: "Command Center", icon: "grid" },
  { id: "agency", label: "Vue agence", icon: "layers" },
  { id: "agents", label: "Agents", icon: "bolt" },
  { id: "creative", label: "Creative Intelligence", icon: "sparks" },
  { id: "campaigns", label: "Campagnes", icon: "doc" },
  { id: "briefs", label: "Briefs", icon: "flask" },
];

function Sidebar({ route, setRoute }) {
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="var(--bg)" strokeWidth="2.4" />
            <path d="M16 16l4 4" stroke="var(--bg)" strokeWidth="2.4" strokeLinecap="round" />
            <circle cx="11" cy="11" r="2.4" fill="var(--bg)" />
          </svg>
        </div>
        <div className="brand-name">bidvern<span className="brand-dot">.</span></div>
      </div>

      <nav className="nav">
        {NAV.map((n) => (
          <button key={n.id} className={"nav-item" + (route === n.id ? " nav-on" : "")} onClick={() => setRoute(n.id)}>
            <Icon name={n.icon} size={18} fill={n.id === "agents"} />
            <span>{n.label}</span>
          </button>
        ))}
      </nav>

      <div className="nav-section">PLATEFORME</div>
      <nav className="nav">
        <button className={"nav-item" + (route === "alerts" ? " nav-on" : "")} onClick={() => setRoute("alerts")}><Icon name="bell" size={18} /><span>Alertes</span><span className="nav-badge">3</span></button>
        <button className={"nav-item" + (route === "settings" ? " nav-on" : "")} onClick={() => setRoute("settings")}><Icon name="settings" size={18} /><span>Réglages</span></button>
      </nav>

      <div className="side-foot">
        <button className="autonomy-summary" onClick={() => setRoute("agency")} style={{ width: "100%", border: "1px solid var(--border-soft)", cursor: "pointer", textAlign: "left", fontFamily: "var(--sans)", color: "var(--text)" }}>
          <div className="as-row"><span className="pulse-dot" style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--accent)" }} /> 5 agents en service</div>
          <div className="as-sub num">4 comptes · 1 247 décisions</div>
        </button>
      </div>
    </aside>
  );
}

function Topbar({ theme, setTheme }) {
  const { accounts } = DATA;
  const [acc, setAcc] = useStateA(accounts[0].id);
  const [open, setOpen] = useStateA(false);
  const current = accounts.find((a) => a.id === acc);
  const totalSpend = "645 280 €";
  return (
    <header className="topbar">
      <div className="acc-switch" onClick={() => setOpen((o) => !o)}>
        <div className="acc-av" style={{ background: current.color }}>{current.initials}</div>
        <div className="acc-meta">
          <div className="acc-name">{current.name}</div>
          <div className="acc-sub num">ROAS {current.roas}× · {current.spend} / 30j</div>
        </div>
        <Icon name="chevron" size={16} style={{ transform: open ? "rotate(90deg)" : "rotate(90deg)", color: "var(--text-faint)" }} />
        {open && (
          <div className="acc-menu" onClick={(e) => e.stopPropagation()}>
            {accounts.map((a) => (
              <button key={a.id} className={"acc-opt" + (a.id === acc ? " on" : "")} onClick={() => { setAcc(a.id); setOpen(false); }}>
                <div className="acc-av sm" style={{ background: a.color }}>{a.initials}</div>
                <div className="acc-meta">
                  <div className="acc-name">{a.name}</div>
                  <div className="acc-sub num">ROAS {a.roas}× · {a.spend}</div>
                </div>
                {a.id === acc && <Icon name="check" size={15} stroke={2.4} style={{ color: "var(--accent)" }} />}
              </button>
            ))}
            <div className="acc-all num">4 comptes · {totalSpend} pilotés</div>
          </div>
        )}
      </div>

      <div className="topbar-search">
        <Icon name="search" size={16} style={{ color: "var(--text-faint)" }} />
        <input placeholder="Rechercher une campagne, un mot-clé, un agent…" />
        <span className="kbd">⌘K</span>
      </div>

      <div className="topbar-right">
        <button className="icon-btn theme-toggle" onClick={() => setTheme(theme === "light" ? "dark" : "light")} title="Changer de thème">
          {theme === "light"
            ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z" /></svg>
            : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4.2" /><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4" /></svg>}
        </button>
        <button className="icon-btn"><Icon name="bell" size={18} /><span className="dot-badge" /></button>
        <div className="health">
          <StatusDot status="active" />
          <span>Tout est sous contrôle</span>
        </div>
      </div>
    </header>
  );
}

function App() {
  const [route, setRoute] = useStateA("command");
  const [theme, setTheme] = useStateA(() => localStorage.getItem("bidvern-theme") || "dark");
  useEffectA(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("bidvern-theme", theme);
  }, [theme]);
  const views = {
    command: CommandCenter,
    agency: AgencyView,
    agents: AgentsView,
    creative: CreativeView,
    campaigns: CampaignsView,
    briefs: BriefsView,
    alerts: AlertsView,
    settings: SettingsView,
  };
  const View = views[route];
  return (
    <div className="app">
      <Sidebar route={route} setRoute={setRoute} />
      <div className="main">
        <Topbar theme={theme} setTheme={setTheme} />
        <main className="content" key={route}>
          <View />
        </main>
      </div>
    </div>
  );
}

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