/* Mobile dashboard — interactive with tabs */
const MobileDashboard = () => (
  <AppProvider>
    <MobileDashboardInner/>
  </AppProvider>
);

const MobileDashboardInner = () => {
  const [tab, setTab] = React.useState('home');
  const app = useApp();
  return (
    <div className="mdash-root">
      <div className="mdash-status">
        <span className="mdash-time">9:41</span>
        <div className="mdash-status-r">
          <svg width="12" height="8" viewBox="0 0 12 8" fill="currentColor"><rect x="0" y="6" width="2" height="2" rx="0.4"/><rect x="3" y="4" width="2" height="4" rx="0.4"/><rect x="6" y="2" width="2" height="6" rx="0.4"/><rect x="9" y="0" width="2" height="8" rx="0.4"/></svg>
          <svg width="11" height="8" viewBox="0 0 11 8" fill="none" stroke="currentColor" strokeWidth="0.8"><path d="M1 4 a4 4 0 0 1 9 0"/><path d="M2.5 5.5 a2.5 2.5 0 0 1 6 0"/><circle cx="5.5" cy="7" r="0.6" fill="currentColor"/></svg>
          <svg width="16" height="8" viewBox="0 0 16 8" fill="none"><rect x="0.5" y="1" width="13" height="6" rx="1.2" stroke="currentColor" strokeOpacity="0.5" strokeWidth="0.8"/><rect x="14" y="3" width="1.5" height="2" rx="0.4" fill="currentColor" opacity="0.5"/><rect x="2" y="2.5" width="9" height="3" rx="0.5" fill="currentColor"/></svg>
        </div>
      </div>

      <div className="mdash-content">
        {tab === 'home'     && <MViewHome/>}
        {tab === 'projects' && <MViewProjects/>}
        {tab === 'activity' && <MViewActivity/>}
        {tab === 'settings' && <MViewSettings/>}
      </div>

      <nav className="mdash-tabs">
        <button className={tab === 'home' ? 'active' : ''} onClick={() => setTab('home')}><IconHome size={14}/></button>
        <button className={tab === 'projects' ? 'active' : ''} onClick={() => setTab('projects')}><IconLayers size={14}/></button>
        <button className="mdash-tab-fab" onClick={() => app.openModal({ kind: 'newproj' })}><IconPlus size={14}/></button>
        <button className={tab === 'activity' ? 'active' : ''} onClick={() => setTab('activity')}><IconChart size={14}/></button>
        <button className={tab === 'settings' ? 'active' : ''} onClick={() => setTab('settings')}><IconSettings size={14}/></button>
      </nav>

      <div className="mdash-home"/>
    </div>
  );
};

/* Save app reference so the FAB can use it from outside hook context */
const MobileAppBridge = () => {
  const app = useApp();
  React.useEffect(() => { window.__app = app; }, [app]);
  return null;
};

/* ===== Home ===== */
const MViewHome = () => {
  const app = useApp();
  const revenue = useLiveNumber(48034, { delta: 80, min: 47200, max: 49200 });
  const systems = useLiveNumber(33, { delta: 1, min: 30, max: 36 });
  const sparkPath = "M0,52 C20,46 40,38 60,40 C80,42 100,28 120,22 C140,16 160,30 180,24 C200,18 220,8 240,12";
  return (
    <div className="mdash-page">
      <header className="mdash-top">
        <button className="mdash-avatar" onClick={() => app.toast('Profile')} aria-label="Profile"/>
        <div className="mdash-greeting">
          <span className="mdash-hi">Hi, Alex</span>
          <span className="mdash-sub">Nova Systems</span>
        </div>
        <button className="mdash-icon" onClick={() => app.openModal({ kind: 'notifs' })}>
          <IconBell size={11}/>
          <span className="mdash-icon-dot"/>
        </button>
      </header>

      <div className="mdash-balance">
        <div className="mdash-balance-label">Revenue · MTD</div>
        <div className="mdash-balance-val">
          <span className="mdash-cur">$</span>
          <span className="live">{fmt(revenue)}</span>
          <span className="mdash-delta">+4.2%</span>
        </div>
        <svg className="mdash-balance-spark" viewBox="0 0 240 64" preserveAspectRatio="none">
          <defs>
            <linearGradient id="mdash-grad-fill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#5eead4" stopOpacity="0.45"/>
              <stop offset="1" stopColor="#5eead4" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d={sparkPath + " L240,64 L0,64 Z"} fill="url(#mdash-grad-fill)"/>
          <path d={sparkPath} stroke="#5eead4" strokeWidth="1.6" fill="none"/>
          <circle cx="200" cy="18" r="2.5" fill="#a5f3fc"/>
        </svg>
        <div className="mdash-balance-actions">
          <button onClick={() => app.openModal({ kind: 'deploy', target: 'nova-systems' })}><IconBolt size={9}/> Deploy</button>
          <button onClick={() => app.toast({ title: 'Sent', msg: 'Approval sent to Maya Stone' })}><IconNetwork size={9}/> Approve</button>
          <button onClick={() => app.toast('Reports (demo)')}><IconChart size={9}/> Reports</button>
        </div>
      </div>

      <div className="mdash-kpis">
        <button className="mdash-kpi" onClick={() => app.toast({ msg: `Active Systems: ${systems}` })}>
          <span className="mdash-kpi-label">Active Systems</span>
          <strong className="live">{fmt(systems)}</strong>
          <span className="mdash-kpi-d up">+4</span>
        </button>
        <button className="mdash-kpi" onClick={() => app.toast('System health: 99.98%')}>
          <span className="mdash-kpi-label">Uptime</span>
          <strong>99.98%</strong>
          <span className="mdash-kpi-d">●</span>
        </button>
      </div>

      <div className="mdash-list">
        <div className="mdash-list-head"><span>Activity</span><span className="mdash-list-more">···</span></div>
        <button className="mdash-list-row" onClick={() => app.toast({ title: 'Nova Systems', msg: 'v2.4.1 deployed' })}>
          <span className="mdash-list-ico ok"><IconCheck size={9}/></span>
          <div className="mdash-list-c"><strong>Nova Systems · sync</strong><span>module v2.4.1</span></div>
          <span className="mdash-list-t">2m</span>
        </button>
        <button className="mdash-list-row" onClick={() => app.toast({ title: 'Atlas Workspace', msg: 'Build · us-east-1' })}>
          <span className="mdash-list-ico cyan"><IconBolt size={9}/></span>
          <div className="mdash-list-c"><strong>Atlas Workspace · build</strong><span>deploy us-east-1</span></div>
          <span className="mdash-list-t">7m</span>
        </button>
        <button className="mdash-list-row" onClick={() => app.toast({ msg: '18 new updates today', tone: 'ok' })}>
          <span className="mdash-list-ico warn"><IconSparkle size={9}/></span>
          <div className="mdash-list-c"><strong>+18 notifications</strong><span>new updates today</span></div>
          <span className="mdash-list-t">14m</span>
        </button>
      </div>

      <button className="mdash-cta" onClick={() => app.openModal({ kind: 'deploy', target: 'nova-prod' })}>
        <IconRocket size={11}/> Deploy / Scale <IconArrowRight size={10}/>
      </button>
    </div>
  );
};

/* ===== Projects ===== */
const MViewProjects = () => {
  const app = useApp();
  return (
    <div className="mdash-page">
      <header className="mdash-page-head">
        <h3>Projects</h3>
        <button className="mdash-icon" onClick={() => app.openModal({ kind: 'newproj' })}><IconPlus size={11}/></button>
      </header>
      <div className="mdash-proj-list">
        {[
          { n: 'Nova Systems',    k: 'SaaS',     s: 'live',     c: '#22d3ee', p: 94 },
          { n: 'Atlas Workspace', k: 'WEB4',     s: 'live',     c: '#5eead4', p: 88 },
          { n: 'Orion Control',   k: 'LAYER-1',  s: 'syncing',  c: '#7c5cff', p: 72 },
          { n: 'Web4 Commerce',   k: 'INVEST',   s: 'live',     c: '#fbbf24', p: 91 },
          { n: 'GameHub Demo',    k: 'GAMING',   s: 'live',     c: '#fb7185', p: 96 },
        ].map(p => (
          <button key={p.n} className="mdash-proj-row" onClick={() => app.toast({ title: p.n, msg: `${p.k} · ${p.s}` })}>
            <span className="mdash-proj-mark" style={{background: p.c, color: '#04141a'}}>{p.n[0]}</span>
            <div>
              <strong>{p.n}</strong>
              <span>{p.k}</span>
            </div>
            <span className={"dash-pill-status " + (p.s === 'syncing' ? 'syncing' : 'live')}><span className="dot"/>{p.s}</span>
          </button>
        ))}
      </div>
    </div>
  );
};

/* ===== Activity ===== */
const MViewActivity = () => {
  const app = useApp();
  const items = [
    { sev: 'ok',   t: 'Nova Systems v2.4.1 deployed', m: 'us-east-1 · 2m' },
    { sev: 'info', t: 'Atlas Workspace module booted', m: 'eu-west-2 · 7m' },
    { sev: 'ok',   t: 'Orion block #482,113',           m: 'global · 9m' },
    { sev: 'warn', t: 'Web4 Commerce · review',         m: 'eu-central · 14m' },
    { sev: 'ok',   t: 'Support Pilot · context scaled', m: 'us-west-2 · 22m' },
    { sev: 'info', t: 'Auto-scale +4 instances',        m: 'ap-south-1 · 36m' },
    { sev: 'ok',   t: 'Payment received',               m: '$2,400 · 41m' },
  ];
  return (
    <div className="mdash-page">
      <header className="mdash-page-head">
        <h3>Activity</h3>
        <button className="mdash-icon" onClick={() => app.toast('Filters')}><IconMore size={11}/></button>
      </header>
      <div className="mdash-act-list">
        {items.map((e, i) => (
          <button key={i} className="mdash-act-row" onClick={() => app.toast({ msg: e.t, tone: e.sev === 'warn' ? 'warn' : 'ok' })}>
            <span className={"dash-event-sev " + e.sev}/>
            <div>
              <strong>{e.t}</strong>
              <span>{e.m}</span>
            </div>
            <IconArrowRight size={10}/>
          </button>
        ))}
      </div>
    </div>
  );
};

/* ===== Settings ===== */
const MViewSettings = () => {
  const app = useApp();
  const [notifs, setNotifs] = React.useState(true);
  const [biom, setBiom] = React.useState(true);
  const [dark, setDark] = React.useState(true);
  return (
    <div className="mdash-page">
      <header className="mdash-page-head">
        <h3>Settings</h3>
      </header>
      <div className="mdash-settings">
        <button className="mdash-set-row" onClick={() => app.toast('Profile · Alex Morgan')}>
          <span className="mdash-avatar"/>
          <div><strong>Alex Morgan</strong><span>alex@demo.io</span></div>
          <IconArrowRight size={10}/>
        </button>
        <Toggle label="Push notifications" sub="Critical events" v={notifs} onChange={() => { setNotifs(n => !n); app.toast(`Notifications ${!notifs ? 'on' : 'off'}`); }}/>
        <Toggle label="Biometric approvals" sub="Face ID / fingerprint" v={biom} onChange={() => { setBiom(n => !n); app.toast(`Biometric ${!biom ? 'enabled' : 'disabled'}`); }}/>
        <Toggle label="Dark mode" sub="Always on" v={dark} onChange={() => setDark(n => !n)}/>
        <button className="mdash-set-row" onClick={() => app.toast({ title: 'Logged out', msg: 'See you, Alex' })}>
          <span className="mdash-set-ico"><IconClose size={11}/></span>
          <div><strong>Sign out</strong><span>End this session</span></div>
        </button>
      </div>
    </div>
  );
};

const Toggle = ({ label, sub, v, onChange }) => (
  <button className="mdash-set-row" onClick={onChange}>
    <span className="mdash-set-ico"><IconBolt size={11}/></span>
    <div><strong>{label}</strong><span>{sub}</span></div>
    <span className={"mdash-switch" + (v ? ' on' : '')}><i/></span>
  </button>
);

Object.assign(window, { MobileDashboard, MobileAppBridge });