/* Desktop dashboard — multi-view, clickable, interactive */

const Dashboard = () => (
  <AppProvider>
    <DashboardInner/>
  </AppProvider>
);

const DashboardInner = () => {
  const [view, setView] = React.useState('overview');
  const [tab, setTab] = React.useState('overview');
  return (
    <div className="dash-root">
      <DashSidebar view={view} setView={setView}/>
      <DashMain view={view} tab={tab} setTab={setTab}/>
    </div>
  );
};

/* ===== Sidebar ===== */
const NAV = [
  { group: 'Workspace', items: [
    { id: 'overview',   icon: <IconHome size={14}/>,   label: 'Overview' },
    { id: 'projects',   icon: <IconLayers size={14}/>, label: 'Projects', badge: '12' },
    { id: 'ai',         icon: <IconChip size={14}/>,   label: 'AI Systems' },
    { id: 'blockchain', icon: <IconBox size={14}/>,    label: 'Blockchain' },
    { id: 'infra',      icon: <IconCloud size={14}/>,  label: 'Infrastructure' },
  ]},
  { group: 'Intelligence', items: [
    { id: 'data',       icon: <IconChart size={14}/>,  label: 'Data Intelligence' },
    { id: 'automation', icon: <IconBolt size={14}/>,   label: 'Automation' },
    { id: 'execution',  icon: <IconShield size={14}/>, label: 'Execution Layer' },
  ]},
];

const DashSidebar = ({ view, setView }) => {
  const app = useApp();
  const healthBar = useLiveNumber(94, { delta: 0.6, min: 90, max: 99, decimals: 1 });
  const health = useLiveNumber(99.97, { delta: 0.02, min: 99.85, max: 100, decimals: 2 });
  return (
    <aside className="dash-sidebar">
      <div className="dash-brand">
        <Brandmark size={22}/>
        <div>
          <div className="dash-brand-name">Nova Systems</div>
          <div className="dash-brand-sub">Admin Panel · Demo</div>
        </div>
      </div>

      <button className="dash-search" onClick={() => app.openModal({ kind: 'cmdk' })}>
        <IconSearch size={13}/>
        <span>Search systems…</span>
        <kbd>⌘K</kbd>
      </button>

      {NAV.map((g) => (
        <div key={g.group} className="dash-nav-group">
          <div className="dash-nav-label">{g.group}</div>
          {g.items.map(i => (
            <button
              key={i.id}
              className={"dash-nav-item" + (view === i.id ? ' active' : '')}
              onClick={() => setView(i.id)}
            >
              <span className="dash-nav-icon">{i.icon}</span>
              <span className="dash-nav-label-txt">{i.label}</span>
              {i.badge && <span className="dash-nav-badge">{i.badge}</span>}
            </button>
          ))}
        </div>
      ))}

      <div className="dash-sidebar-foot">
        <div className="dash-health">
          <div className="dash-health-top">
            <span className="dash-pulse"/>
            <span>All systems</span>
            <span className="dash-health-val live">{fmt(health, 2)}%</span>
          </div>
          <div className="dash-health-bar"><i style={{ width: healthBar + '%' }}/></div>
        </div>
      </div>
    </aside>
  );
};

/* ===== Topbar + body ===== */
const DashMain = ({ view, tab, setTab }) => {
  const app = useApp();
  const meta = NAV.flatMap(g => g.items).find(i => i.id === view);
  return (
    <main className="dash-main">
      <header className="dash-topbar">
        <div className="dash-crumbs">
          <span className="muted-2">Workspace</span>
          <span className="dash-sep">/</span>
          <span>{meta?.label || 'Overview'}</span>
        </div>
        <div className="dash-tabs">
          {['overview', 'execution', 'modules'].map(t => (
            <button key={t} className={"dash-tab" + (tab === t ? ' active' : '')} onClick={() => setTab(t)}>
              {t[0].toUpperCase() + t.slice(1)}
            </button>
          ))}
        </div>
        <div className="dash-top-actions">
          <button className="dash-icon-btn" onClick={() => app.openModal({ kind: 'notifs' })} title="Notifications">
            <IconBell size={13}/>
            <span className="dash-icon-dot"/>
          </button>
          <button className="dash-connect" onClick={() => app.toast({ title: 'Connected', msg: 'Wallet · 0x4f…ab9c' })}>
            <span className="dash-connect-dot"/>
            Connect
          </button>
          <button className="dash-avatar" onClick={() => app.toast('Profile · Alex Morgan')}/>
        </div>
      </header>

      <div className="dash-body">
        {view === 'overview'   && <ViewOverview/>}
        {view === 'projects'   && <ViewProjects/>}
        {view === 'ai'         && <ViewAI/>}
        {view === 'blockchain' && <ViewBlockchain/>}
        {view === 'infra'      && <ViewInfra/>}
        {view === 'data'       && <ViewData/>}
        {view === 'automation' && <ViewAutomation/>}
        {view === 'execution'  && <ViewExecution/>}
      </div>
    </main>
  );
};

Object.assign(window, { Dashboard, DashSidebar, DashMain });