// settings/Admin.jsx — Admin console screens. Gated by is_admin === true.
// Utilitarian per brief: list-driven, not hero-driven.

function AdminRoot({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Settings" title="Admin"/>

      <div style={{ padding: '4px 20px 0' }}>
        <div className="eyebrow" style={{ color: 'var(--io-orange)' }}>Administration · portal.lukas.dev</div>
        <div className="t1" style={{ marginTop: 6, letterSpacing: -0.5 }}>Stats</div>
        <div className="bd" style={{ color: 'var(--io-label-secondary)', marginTop: 6 }}>
          Live counts from this server. Updated every 60 seconds.
        </div>
      </div>

      {/* KPI grid */}
      <div style={{ padding: '16px 16px 0', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
        {[
          { l: 'Users',     v: '14',     s: '+1 this week' },
          { l: 'Feeds',     v: '38',     s: '23 subscribed · 15 manual' },
          { l: 'Events',    v: '24,612', s: 'Across 14 calendars' },
          { l: 'DB size',   v: '142 MB', s: 'Up 4 MB · 14 days' },
          { l: 'Uptime',    v: '38d', s: 'Last restart Feb 6' },
          { l: 'Sessions',  v: '21',     s: '6 active right now' },
        ].map(k => (
          <div key={k.l} className="kpi">
            <div className="lb">{k.l}</div>
            <div className="vl" data-num>{k.v}</div>
            <div className="sub">{k.s}</div>
          </div>
        ))}
      </div>

      {/* Live chart */}
      <SectionHead label="Requests · last 7 days"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card padded" style={{ padding: 16 }}>
          <BarChart data={[
            { day: 'Mon', hours: 8.2 }, { day: 'Tue', hours: 9.1 }, { day: 'Wed', hours: 7.4 },
            { day: 'Thu', hours: 10.6 },{ day: 'Fri', hours: 8.8 }, { day: 'Sat', hours: 4.2 },
            { day: 'Sun', hours: 5.8 },
          ]} goal={9} max={12} height={110} accent="var(--io-orange)"/>
          <div className="between" style={{ marginTop: 12, paddingTop: 12, borderTop: '0.5px solid var(--io-separator)' }}>
            <div className="cp" style={{ color: 'var(--io-label-secondary)' }}>Avg <span data-num style={{ color: 'var(--io-label)' }}>7.7k</span>/day</div>
            <div className="cp" style={{ color: 'var(--io-label-secondary)' }}>p95 <span data-num style={{ color: 'var(--io-label)' }}>184ms</span></div>
          </div>
        </div>
      </div>

      <div className="set-section-hd">Sections</div>
      <div className="set-group">
        <SetRow ic="user"     color="var(--io-blue)"   ti="Users"         de="14"/>
        <SetRow ic="lock"     color="var(--io-green)"  ti="Sessions"      de="21" badge="2"/>
        <SetRow ic="alert"    color="var(--io-orange)" ti="Logs"          de="Live"/>
        <SetRow ic="refresh"  color="var(--io-purple)" ti="Deployment"    de="v2.4.1"/>
        <SetRow ic="settings" color="var(--io-label-tertiary)" ti="Backups" de="Yesterday"/>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="settings"/>
    </FrameScreen>
  );
}
window.AdminRoot = AdminRoot;

function AdminUsers({ dark = false }) {
  const users = [
    { i: 'L', n: 'Lukas Park',  u: 'lukas',  e: 'Active',  r: 'Admin',  c: '#5E5CE6', last: 'Now' },
    { i: 'M', n: 'Maya Tan',    u: 'maya',   e: 'Active',  r: 'User',   c: '#FF2D55', last: '2h ago' },
    { i: 'P', n: 'Priya N',     u: 'priya',  e: 'Active',  r: 'User',   c: '#34C759', last: 'Yesterday' },
    { i: 'A', n: 'Anu Liu',     u: 'anu',    e: 'Active',  r: 'User',   c: '#AF52DE', last: '3 days' },
    { i: 'D', n: 'David K',     u: 'davidk', e: 'Disabled',r: 'User',   c: '#FF9500', last: 'Feb 2' },
    { i: 'S', n: 'Sam R',       u: 'sam',    e: 'Active',  r: 'User',   c: '#5AC8FA', last: '12h' },
  ];
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Admin" title="Users"/>

      <div style={{ padding: '8px 16px 0' }}>
        <div style={{
          background: 'var(--io-fill-tertiary)', borderRadius: 10,
          padding: '7px 10px', display: 'flex', alignItems: 'center', gap: 8,
          color: 'var(--io-label-tertiary)', fontSize: 17, letterSpacing: -0.4,
        }}>
          <Icon name="search" size={16} stroke={2.2}/>
          <span style={{ flex: 1 }}>Search users</span>
        </div>
      </div>

      <div style={{ padding: '12px 16px 0' }}>
        <SegControl items={['All', 'Active', 'Disabled', 'Admins']} active="All"/>
      </div>

      <div className="set-section-hd">14 users</div>
      <div className="set-group">
        {users.map((u, i) => (
          <div key={u.u} className="set-row">
            <div className="ic" style={{ background: u.c, fontSize: 13, fontWeight: 600, color: '#fff' }}>{u.i}</div>
            <div style={{ flex: 1 }}>
              <div className="ti" style={{ fontSize: 16 }}>{u.n}</div>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>
                <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }}>{u.u}</span> · {u.r}
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              {u.e === 'Disabled'
                ? <span className="pill heavy">Disabled</span>
                : <span className="cp" style={{ color: 'var(--io-label-secondary)' }}>{u.last}</span>}
            </div>
            <div className="ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
        ))}
      </div>

      <div style={{ padding: '20px 16px 0' }}>
        <div className="set-group">
          <SetRow ic="plus" color="var(--io-blue)" ti="Add user"/>
        </div>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="settings"/>
    </FrameScreen>
  );
}
window.AdminUsers = AdminUsers;

function AdminUserDetail({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Users" title="Maya Tan"/>

      {/* hero */}
      <div style={{ padding: '8px 16px 0' }}>
        <div className="card padded" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            width: 52, height: 52, borderRadius: 50,
            background: '#FF2D55', color: '#fff',
            display: 'grid', placeItems: 'center', fontSize: 20, fontWeight: 600,
          }}>M</div>
          <div style={{ flex: 1 }}>
            <div className="hd" style={{ fontSize: 17 }}>Maya Tan</div>
            <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>
              <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }}>maya</span> · since Sep 4, 2025
            </div>
          </div>
          <span className="pill low">Active</span>
        </div>
      </div>

      {/* KPIs */}
      <div style={{ padding: '12px 16px 0', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        <div className="kpi"><div className="lb">Feeds</div><div className="vl" data-num>5</div></div>
        <div className="kpi"><div className="lb">Events</div><div className="vl" data-num>1,872</div></div>
        <div className="kpi"><div className="lb">Sessions</div><div className="vl" data-num>3</div></div>
      </div>

      <div className="set-section-hd">Profile</div>
      <div className="set-group">
        <SetRow ti="Display name" de="Maya Tan"/>
        <SetRow ti="Email"        de="maya@…"/>
        <SetRow ti="Role"         de="User"/>
      </div>

      <div className="set-section-hd">Access</div>
      <div className="set-group">
        <SetRow ic="lock" color="var(--io-blue)"   ti="Reset password"/>
        <SetRow ic="check" color="var(--io-green)" ti="Grant admin"/>
        <SetRow ic="alert" color="var(--io-orange)"ti="Active sessions" de="3"/>
        <SetRow ic="trash" color="var(--io-red)"   ti="Disable user" danger chevron={false}/>
      </div>

      <div className="set-section-hd">Activity</div>
      <div className="set-group">
        <SetRow ti="Last sign-in"  de="2h ago · iPhone" chevron={false}/>
        <SetRow ti="Last sync"     de="14 min ago" chevron={false}/>
        <SetRow ti="Storage"       de="34.6 MB" chevron={false}/>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="settings"/>
    </FrameScreen>
  );
}
window.AdminUserDetail = AdminUserDetail;

function AdminSessions({ dark = false }) {
  const sess = [
    { who: 'lukas',  dev: 'iPhone 15 Pro',     ip: '92.40.xxx.xxx', loc: 'London, UK',     last: 'Now',         mine: true },
    { who: 'lukas',  dev: 'MacBook Pro · Safari', ip: '92.40.xxx.xxx', loc: 'London, UK',  last: '8 min',       mine: false },
    { who: 'maya',   dev: 'iPhone 13',         ip: '81.20.xxx.xxx', loc: 'Cambridge, UK',  last: '2h ago',      mine: false },
    { who: 'priya',  dev: 'Chrome · Linux',    ip: '141.6.xxx.xxx', loc: 'Berlin, DE',     last: 'Yesterday',   mine: false },
    { who: 'anu',    dev: 'Safari · iOS',      ip: '92.40.xxx.xxx', loc: 'London, UK',     last: '3 days',      mine: false },
    { who: 'sam',    dev: 'Outlook subscribe', ip: '51.6.xxx.xxx',  loc: 'Manchester, UK', last: '12h',         mine: false },
  ];
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Admin" title="Sessions"/>

      <div className="set-section-hd">{sess.length} active sessions</div>
      <div className="set-group">
        {sess.map((s, i) => (
          <div key={i} className="set-row">
            <div style={{ flex: 1 }}>
              <div className="ti" style={{ fontSize: 16 }}>
                <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }}>{s.who}</span>
                <span style={{ color: 'var(--io-label-secondary)', fontWeight: 400, marginLeft: 6 }}>· {s.dev}</span>
              </div>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>
                {s.loc} · <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }}>{s.ip}</span> · {s.last}
              </div>
            </div>
            {s.mine ? (
              <span className="pill info">This device</span>
            ) : (
              <span className="bd" style={{ color: 'var(--io-red)', fontWeight: 500, fontSize: 15 }}>Revoke</span>
            )}
          </div>
        ))}
      </div>

      <div style={{ padding: '20px 16px 0' }}>
        <div className="set-group">
          <SetRow ti="Revoke all other sessions" danger chevron={false}/>
        </div>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="settings"/>
    </FrameScreen>
  );
}
window.AdminSessions = AdminSessions;

function AdminLogs({ dark = false }) {
  const lines = [
    { ts: '10:26:14', lv: 'info',  msg: 'GET /api/events?start=2026-03-16 → 200 (44ms)' },
    { ts: '10:26:13', lv: 'info',  msg: 'sync feed:uni · 84 events fetched, 2 updated' },
    { ts: '10:26:12', lv: 'debug', msg: 'rrule expand: 12 occurrences from rule:weekly' },
    { ts: '10:26:08', lv: 'warn',  msg: 'feed:society returned 304 Not Modified · skipping' },
    { ts: '10:26:05', lv: 'info',  msg: 'POST /api/health/sync · 142 samples accepted' },
    { ts: '10:25:58', lv: 'err',   msg: 'feed:gym fetch failed: ECONNRESET · will retry' },
    { ts: '10:25:55', lv: 'info',  msg: 'GET /api/health/sleep/last7 → 200 (12ms)' },
    { ts: '10:25:42', lv: 'info',  msg: 'auth: session for lukas refreshed (29d TTL)' },
    { ts: '10:25:38', lv: 'debug', msg: 'cache hit: shared/aB7r2dHjK3pX9q' },
    { ts: '10:25:30', lv: 'info',  msg: 'GET /s/aB7r2… · 192.168.1.42 · 200' },
    { ts: '10:25:14', lv: 'warn',  msg: 'slow query 412ms · events range 12mo' },
    { ts: '10:25:02', lv: 'info',  msg: 'GET /api/calendars → 200 (8ms)' },
    { ts: '10:24:48', lv: 'info',  msg: 'cron: bedtime-generate · 1 user · 1 event written' },
    { ts: '10:24:30', lv: 'info',  msg: 'GET /api/auth/status → 200 (4ms)' },
  ];

  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Admin" title="Logs"/>

      <div style={{ padding: '8px 16px 0' }}>
        <SegControl items={['All', 'Info', 'Warn', 'Error']} active="All"/>
      </div>
      <div style={{ padding: '8px 16px 0' }}>
        <div style={{
          background: 'var(--io-fill-tertiary)', borderRadius: 10,
          padding: '7px 10px', display: 'flex', alignItems: 'center', gap: 8,
          color: 'var(--io-label-tertiary)', fontSize: 14, letterSpacing: -0.4,
        }}>
          <Icon name="search" size={14} stroke={2.2}/>
          <span style={{ flex: 1, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }}>filter:feed=uni</span>
          <span className="row" style={{ gap: 4, color: 'var(--io-green)' }}>
            <span style={{ width: 6, height: 6, borderRadius: 50, background: 'var(--io-green)' }}/> Live
          </span>
        </div>
      </div>

      <div style={{ padding: '12px 16px 0' }}>
        <div className="log">
          {lines.map((l, i) => (
            <div key={i} className={'ln ' + l.lv}>
              <span className="ts">{l.ts}</span>
              <span className="lv">{l.lv.toUpperCase()}</span>
              <span className="msg">{l.msg}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '12px 16px 0' }}>
        <div className="set-group">
          <SetRow ti="Download last 1 000 lines"  chevron={false}/>
          <SetRow ti="Pause stream"               chevron={false}/>
        </div>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="settings"/>
    </FrameScreen>
  );
}
window.AdminLogs = AdminLogs;

function AdminDeploy({ dark = false }) {
  const releases = [
    { v: 'v2.4.1', d: 'Feb 6 · 14:22', s: 'Live',    sha: 'c1d7a8e' },
    { v: 'v2.4.0', d: 'Feb 4 · 11:01', s: 'Stable',  sha: '8b2c901' },
    { v: 'v2.3.9', d: 'Jan 28 · 09:42', s: 'Stable', sha: '4d1ee72' },
    { v: 'v2.3.8', d: 'Jan 22 · 17:08', s: 'Stable', sha: 'a09b314' },
    { v: 'v2.3.7', d: 'Jan 12 · 12:15', s: 'Stable', sha: '0e7d420' },
  ];
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Admin" title="Deployment"/>

      <div style={{ padding: '4px 20px 0' }}>
        <div className="eyebrow" style={{ color: 'var(--io-purple)' }}>portal.lukas.dev</div>
        <div className="t1" style={{ marginTop: 6, letterSpacing: -0.5 }}>
          Live · <span data-num>v2.4.1</span>
        </div>
        <div className="row" style={{ marginTop: 8, gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: 50, background: 'var(--io-green)' }}/>
          <span className="fn" style={{ color: 'var(--io-label-secondary)' }}>Healthy · last restart Feb 6, 14:22</span>
        </div>
      </div>

      <div style={{ padding: '20px 16px 0', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        <button style={{
          border: 'none', cursor: 'pointer',
          background: 'var(--io-bg-elev)', color: 'var(--io-blue)',
          borderRadius: 14, padding: '14px 8px',
          fontSize: 13, fontWeight: 500, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
        }}>
          <Icon name="refresh" size={20} stroke={2.2}/> Pull main
        </button>
        <button style={{
          border: 'none', cursor: 'pointer',
          background: 'var(--io-bg-elev)', color: 'var(--io-orange)',
          borderRadius: 14, padding: '14px 8px',
          fontSize: 13, fontWeight: 500, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
        }}>
          <Icon name="bolt" size={20} stroke={2.2}/> Restart
        </button>
        <button style={{
          border: 'none', cursor: 'pointer',
          background: 'var(--io-bg-elev)', color: 'var(--io-red)',
          borderRadius: 14, padding: '14px 8px',
          fontSize: 13, fontWeight: 500, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
        }}>
          <Icon name="chevron-left" size={20} stroke={2.4}/> Rollback
        </button>
      </div>

      <div className="set-section-hd">Release history</div>
      <div className="set-group">
        {releases.map((r, i) => (
          <div key={r.v} className="set-row">
            <div style={{ flex: 1 }}>
              <div className="ti" style={{ fontSize: 16 }}>
                <span data-num>{r.v}</span>
                <span style={{
                  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
                  fontWeight: 400, color: 'var(--io-label-tertiary)',
                  marginLeft: 8, fontSize: 13,
                }}>{r.sha}</span>
              </div>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>{r.d}</div>
            </div>
            <span className={'pill ' + (r.s === 'Live' ? 'low' : 'info')}>{r.s}</span>
            <div className="ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
        ))}
      </div>

      <div className="set-section-hd">Configuration</div>
      <div className="set-group">
        <SetRow ti="Branch"           de="main" chevron={false}/>
        <SetRow ti="Auto-pull"        de="Off"/>
        <SetRow ti="Backup before deploy" de="On"/>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="settings"/>
    </FrameScreen>
  );
}
window.AdminDeploy = AdminDeploy;