/* Live platform health monitor — the daily auto-check feature */
const monitorStyles = {
  wrap: {
    background: 'var(--ink)',
    color: '#F2EFE5',
    borderRadius: 'var(--radius-lg)',
    overflow: 'hidden',
    border: '1px solid var(--ink)',
  },
  header: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '20px 28px',
    borderBottom: '1px solid rgba(255,255,255,0.08)',
  },
  title: {
    fontFamily: 'var(--font-mono)',
    fontSize: 12,
    letterSpacing: '0.12em',
    color: 'rgba(242,239,229,0.6)',
  },
  ts: {
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    color: 'rgba(242,239,229,0.4)',
    letterSpacing: '0.06em',
  },
  body: {
    padding: 28,
    display: 'grid',
    gridTemplateColumns: '1.4fr 1fr',
    gap: 32,
  },
  sectionTitle: {
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    color: 'rgba(242,239,229,0.45)',
    letterSpacing: '0.14em',
    marginBottom: 16,
    display: 'flex',
    justifyContent: 'space-between',
  },
};

function LiveMonitor() {
  const services = [
    { name: 'web.checkout',     status: 'pass', latency: 142, label: 'OPERATIONAL' },
    { name: 'api.payments',     status: 'pass', latency:  89, label: 'OPERATIONAL' },
    { name: 'api.auth',         status: 'pass', latency:  64, label: 'OPERATIONAL' },
    { name: 'web.dashboard',    status: 'warn', latency: 412, label: 'DEGRADED' },
    { name: 'api.webhooks',     status: 'pass', latency: 124, label: 'OPERATIONAL' },
    { name: 'workers.email',    status: 'pass', latency: 201, label: 'OPERATIONAL' },
    { name: 'api.search',       status: 'pass', latency: 156, label: 'OPERATIONAL' },
    { name: 'web.marketing',    status: 'pass', latency:  78, label: 'OPERATIONAL' },
  ];

  return (
    <section style={{ padding: '96px 0' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />03 — Daily health check</span>
          <h2>Your platform's <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>vitals</em>, every morning at&nbsp;06:00.</h2>
          <p>Every flow that matters, swept end-to-end on production. Latency, error rates, and visual diffs surfaced before standup — automatically filed as tickets if anything regresses.</p>
        </div>

        <div style={monitorStyles.wrap}>
          <div className="monitor-header" style={monitorStyles.header}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 12px var(--accent)' }} />
                <span style={monitorStyles.title}>QAFACTORY · DAILY HEALTH SWEEP</span>
              </span>
              <span style={{
                padding: '3px 8px', borderRadius: 4,
                background: 'rgba(107,18,32,0.25)',
                color: '#E89A8B', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em',
              }}>RUN #2,184 · 3 of 4 checks complete</span>
            </div>
            <span style={monitorStyles.ts} className="tabular">2026-04-30 · 06:14:08 UTC</span>
          </div>

          <div className="monitor-body" style={monitorStyles.body}>
            {/* services list */}
            <div>
              <div style={monitorStyles.sectionTitle}>
                <span>SERVICE · 24h SLA</span>
                <span>STATUS</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {services.map((s, i) => (
                  <ServiceRow key={s.name} {...s} delay={i * 80} />
                ))}
              </div>
            </div>

            {/* sparkline + summary */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
              <div>
                <div style={monitorStyles.sectionTitle}>
                  <span>OVERALL HEALTH</span>
                  <span style={{ color: '#E89A8B' }}>● 98.4</span>
                </div>
                <Sparkline />
              </div>

              <div>
                <div style={monitorStyles.sectionTitle}>
                  <span>TODAY'S FINDINGS</span>
                  <span>3 NEW</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <Finding tag="REGR" tagColor="#E8A33D" title="checkout: discount code field rejects ALL CAPS" loc="apps/checkout/cart.tsx:142" />
                  <Finding tag="PERF" tagColor="#7BBDE0" title="dashboard: p95 latency +180ms vs 7-day baseline" loc="api.dashboard / GET /v2/overview" />
                  <Finding tag="HEAL" tagColor="#E89A8B" title="self-healed: signup test (selector drift)" loc="e2e/signup.spec.ts:24" />
                </div>
              </div>

              <div style={{
                padding: 16, borderRadius: 8,
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.06)',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: 'rgba(242,239,229,0.5)', letterSpacing: '0.1em', marginBottom: 4 }}>
                    NEXT SWEEP
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, color: '#F2EFE5', letterSpacing: '-0.02em' }} className="tabular">
                    in 23h 45m
                  </div>
                </div>
                <span style={{ width: 40, height: 40, borderRadius: '50%', border: '1px dashed rgba(232,154,139,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#E89A8B', fontFamily: 'var(--font-mono)', fontSize: 16 }}>↻</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceRow({ name, status, latency, label, delay }) {
  const color = status === 'pass' ? '#E89A8B' : status === 'warn' ? '#E8A33D' : '#E07B7B';
  return (
    <div className="service-row" style={{
      display: 'grid',
      gridTemplateColumns: '1.4fr 80px 1fr 90px',
      alignItems: 'center',
      gap: 12,
      padding: '10px 12px',
      borderRadius: 6,
      background: 'rgba(255,255,255,0.02)',
      fontFamily: 'var(--font-mono)',
      fontSize: 12,
    }}>
      <span style={{ color: '#F2EFE5' }}>{name}</span>
      <span className="tabular" style={{ color: 'rgba(242,239,229,0.55)', fontSize: 11 }}>
        {latency}<span style={{ opacity: 0.6 }}>ms</span>
      </span>
      <BarChart status={status} delay={delay} />
      <span style={{ color, fontSize: 10, letterSpacing: '0.1em', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: color }} />
        {label}
      </span>
    </div>
  );
}

function BarChart({ status, delay }) {
  // generate 32 bars, mostly green, with a warn bar at index 24 if degraded
  const bars = Array.from({ length: 32 }, (_, i) => {
    if (status === 'warn' && (i === 22 || i === 23 || i === 24)) return { c: '#E8A33D', h: 0.85 };
    if (status === 'fail' && i > 24) return { c: '#E07B7B', h: 0.9 };
    return { c: 'rgba(232,154,139,0.7)', h: 0.4 + Math.sin(i * 0.7 + delay * 0.01) * 0.15 + Math.random() * 0.15 };
  });
  return (
    <div style={{ display: 'flex', gap: 1.5, height: 18, alignItems: 'flex-end' }}>
      {bars.map((b, i) => (
        <span key={i} style={{
          flex: 1,
          height: `${Math.max(0.15, b.h) * 100}%`,
          background: b.c,
          borderRadius: 0.5,
        }} />
      ))}
    </div>
  );
}

function Sparkline() {
  const points = [60, 62, 58, 65, 70, 68, 72, 75, 73, 78, 82, 80, 85, 88, 86, 90, 92, 95, 94, 98];
  const w = 320, h = 100;
  const max = 100, min = 50;
  const path = points.map((p, i) => {
    const x = (i / (points.length - 1)) * w;
    const y = h - ((p - min) / (max - min)) * h;
    return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
  }).join(' ');
  const area = `${path} L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }} preserveAspectRatio="none">
      <defs>
        <linearGradient id="spark" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#E89A8B" stopOpacity="0.4" />
          <stop offset="100%" stopColor="#E89A8B" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#spark)" />
      <path d={path} fill="none" stroke="#E89A8B" strokeWidth="1.5" />
      {points.map((p, i) => i === points.length - 1 && (
        <circle key={i} cx={(i / (points.length - 1)) * w} cy={h - ((p - min) / (max - min)) * h} r="3" fill="#E89A8B" />
      ))}
    </svg>
  );
}

function Finding({ tag, tagColor, title, loc }) {
  return (
    <div style={{
      padding: '10px 12px',
      borderRadius: 6,
      background: 'rgba(255,255,255,0.02)',
      border: '1px solid rgba(255,255,255,0.06)',
      display: 'flex', flexDirection: 'column', gap: 4,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.12em',
          color: tagColor,
          padding: '2px 6px',
          border: `1px solid ${tagColor}`,
          borderRadius: 3,
        }}>{tag}</span>
        <span style={{ fontSize: 12, color: '#F2EFE5' }}>{title}</span>
      </div>
      <span className="mono" style={{ fontSize: 10, color: 'rgba(242,239,229,0.45)' }}>{loc}</span>
    </div>
  );
}

Object.assign(window, { LiveMonitor });
