// assets/screen_health.jsx
function ScreenHealth({ t }) {
  const [tick, setTick] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setTick(x => x + 1), 30000);
    return () => clearInterval(id);
  }, [paused]);

  // Active sessions = running ones
  const active = SESSIONS.filter(s => s.status === 'running').slice(0, 6);

  const totalQueueDepth = HEALTH.queues.reduce((s, q) => s + q.depth, 0);
  const dbConnsUsed = 42;

  return (
    <div className="page">
      <div className="page-head">
        <h1>System health</h1>
        <span className="page-sub live-pulse" style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--success)' }} /> live · poll 30s · tick {tick}
        </span>
        <div className="page-actions">
          <button className="btn" onClick={() => setPaused(p => !p)}>
            <Icon name={paused ? 'play' : 'pause'} size={12} />
            {paused ? 'Resume' : 'Pause'}
          </button>
          <button className="btn"><Icon name="refresh" size={12} /> Refresh now</button>
        </div>
      </div>

      {/* Health cards grid */}
      <div className="grid cols-4" style={{ marginBottom: 12 }}>
        <HealthSummary label="Celery workers" 
          status={HEALTH.workers.some(w => w.status === 'err') ? 'err' : HEALTH.workers.some(w => w.status === 'warn') ? 'warn' : 'ok'}
          metric={`${HEALTH.workers.filter(w => w.status !== 'idle').length}/${HEALTH.workers.length}`}
          sub={`${HEALTH.workers.reduce((s, w) => s + w.active, 0)} active tasks · 1 idle`} />
        <HealthSummary label="Queue depth" 
          status={totalQueueDepth > 30 ? 'warn' : 'ok'}
          metric={totalQueueDepth}
          sub={`${HEALTH.queues.length} queues · oldest 28s`} />
        <HealthSummary label="DB pool" status="ok" metric={`${dbConnsUsed}/100`} sub="postgres-rds · idle 58 · waiters 0" />
        <HealthSummary label="Redis" status="ok" metric="0.8ms" unit="" sub="elasticache · 99.99% uptime" />
      </div>

      <div className="grid cols-4" style={{ marginBottom: 14 }}>
        <HealthSummary label="S3 sq-projects" status="ok"  metric="38ms" sub="us-east-1 · 14k req/h" />
        <HealthSummary label="CloudFront"     status="ok"  metric="12ms" sub="E2QWXJ1ABCDE · 94% hit" />
        <HealthSummary label="AWS Bedrock"    status="warn" metric="184ms" sub="3 rate-limits/min · sonnet" />
        <HealthSummary label="Stripe & Brevo" status="ok"  metric="92ms"  sub="webhooks ok · brevo 124ms" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1.4fr 1fr', gap: 12, marginBottom: 14 }}>
        {/* Workers table */}
        <div className="card">
          <div className="card-head"><h3>Celery workers</h3><span className="sub">9 nodes · default · build · priority · canary</span></div>
          <div className="card-body flush">
            <table className="tbl">
              <thead><tr>
                <th>Worker</th>
                <th>Host</th>
                <th>Status</th>
                <th className="num">Load</th>
                <th className="num">Active</th>
                <th className="num">Processed</th>
              </tr></thead>
              <tbody>
                {HEALTH.workers.map(w => (
                  <tr key={w.name}>
                    <td><Mono>{w.name}</Mono></td>
                    <td className="dim"><Mono>{w.host}</Mono></td>
                    <td><Badge kind={w.status === 'ok' ? 'success' : w.status === 'warn' ? 'warning' : 'neutral'} dot>{w.status}</Badge></td>
                    <td className="num">
                      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ width: 60, height: 4, background: 'var(--bg-elevated)', borderRadius: 2, overflow: 'hidden' }}>
                          <div style={{ width: `${w.load * 100}%`, height: '100%', background: w.load > 0.8 ? 'var(--danger)' : w.load > 0.6 ? 'var(--warning)' : 'var(--success)' }} />
                        </div>
                        <Mono>{(w.load * 100).toFixed(0)}%</Mono>
                      </div>
                    </td>
                    <td className="num"><Mono>{w.active}</Mono></td>
                    <td className="num dim"><Mono>{w.processed.toLocaleString()}</Mono></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Queues */}
        <div className="card">
          <div className="card-head"><h3>Queues</h3><span className="sub">depth · oldest age</span></div>
          <div className="card-body flush">
            <table className="tbl">
              <thead><tr><th>Queue</th><th className="num">Depth</th><th className="num">Oldest age</th><th className="num">Workers</th></tr></thead>
              <tbody>
                {HEALTH.queues.map(q => (
                  <tr key={q.name}>
                    <td><Mono>{q.name}</Mono></td>
                    <td className="num"><Mono className={q.depth > 30 ? 'text-warning' : ''}>{q.depth}</Mono></td>
                    <td className="num"><Mono className={q.age > 20 ? 'text-warning' : ''}>{q.age}s</Mono></td>
                    <td className="num"><Mono>{q.workers}</Mono></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* Integrations */}
      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-head"><h3>External integrations</h3></div>
        <div className="card-body">
          <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {HEALTH.integrations.map(it => (
              <div key={it.name} style={{ padding: 10, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius)', background: 'var(--bg-base)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, fontWeight: 500 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: it.status === 'ok' ? 'var(--success)' : it.status === 'warn' ? 'var(--warning)' : 'var(--danger)' }} className={it.status !== 'ok' ? 'live-pulse' : ''} />
                  {it.name}
                </div>
                <div style={{ fontSize: 18, fontWeight: 600, marginTop: 4, fontFamily: 'var(--font-mono)' }}>{it.latency}ms</div>
                <div className="dim fs-11 mono">{it.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1.4fr 1fr', gap: 12 }}>
        {/* Recent errors */}
        <div className="card">
          <div className="card-head">
            <h3>Recent errors stream</h3>
            <span className="sub">level=ERROR · last 50</span>
            <div className="actions" style={{ display: 'flex', gap: 6 }}>
              <button className={`btn xs ${paused ? 'primary' : 'ghost'}`} onClick={() => setPaused(p => !p)}>
                <Icon name={paused ? 'play' : 'pause'} size={11} /> {paused ? 'Resume' : 'Pause'}
              </button>
              <input className="input" placeholder="search…" style={{ width: 120 }} />
            </div>
          </div>
          <div className="card-body flush">
            <div className="code-block" style={{ borderRadius: 0, border: 0, maxHeight: 280, padding: '6px 0' }}>
              {HEALTH.recent_errors.map((e, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '70px 70px 120px 1fr', gap: 8, padding: '3px 14px', borderBottom: '1px solid var(--border-subtle)' }}>
                  <span className="dim mono fs-11">{formatRel(e.ts)}</span>
                  <span style={{ color: e.level === 'ERROR' ? 'var(--danger)' : 'var(--warning)', fontSize: 10, fontWeight: 600 }}>{e.level}</span>
                  <Mono dim>{e.source}</Mono>
                  <span className={e.level === 'ERROR' ? 'text-danger' : ''}>{e.msg}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Active sessions */}
        <div className="card">
          <div className="card-head">
            <h3>Active sessions</h3>
            <span className="sub">running now · {active.length}</span>
          </div>
          <div className="card-body flush">
            <table className="tbl">
              <tbody>
                {active.map(s => (
                  <tr key={s.id} className="clickable" onClick={() => location.hash = '/sessions/' + s.id}>
                    <td><span className="live-pulse" style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'var(--info)', marginRight: 4 }} /><span className="id">{shortId(s.id)}</span></td>
                    <td className="dim2">{s.project_name}</td>
                    <td className="num"><Mono>{formatDur(s.duration)}</Mono></td>
                    <td><Mono className="dim fs-11">{s.tool_calls} tools</Mono></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

function HealthSummary({ label, status, metric, unit, sub }) {
  return (
    <div className="card health-card">
      <div className="row1">
        <span className={`dot ${status}`} />
        {label}
      </div>
      <div className="metric">
        {metric}{unit && <span className="unit"> {unit}</span>}
      </div>
      <div className="sub">{sub}</div>
    </div>
  );
}

Object.assign(window, { ScreenHealth });