// Screen 2 — Baseline
// Shows personal health baseline: 7-day trend chart + 3 indicator rows + CTA.
// No diagnostic copy — strictly "you vs your own history".

const T2 = window.TOKEN;

// 7-day trend chart with subtle area fill and amber stroke
const TrendChart = ({ width = 354, height = 140 }) => {
  // 7 points — normalized 0..1 for chart space
  const pts = [0.48, 0.62, 0.55, 0.72, 0.58, 0.45, 0.66];
  const pad = { l: 4, r: 4, t: 18, b: 22 };
  const innerW = width - pad.l - pad.r;
  const innerH = height - pad.t - pad.b;
  const xs = pts.map((_, i) => pad.l + (innerW * i) / (pts.length - 1));
  const ys = pts.map((v) => pad.t + innerH - innerH * v);

  // Smooth path via mid-point cubic
  let d = `M ${xs[0]} ${ys[0]}`;
  for (let i = 1; i < pts.length; i++) {
    const xc = (xs[i - 1] + xs[i]) / 2;
    d += ` C ${xc} ${ys[i - 1]}, ${xc} ${ys[i]}, ${xs[i]} ${ys[i]}`;
  }
  const area = d + ` L ${xs[xs.length - 1]} ${pad.t + innerH} L ${xs[0]} ${pad.t + innerH} Z`;

  const labels = ['M','T','W','T','F','S','S'];
  const todayIdx = 6;

  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: 'block' }}>
      <defs>
        <linearGradient id="panChartFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={T2.signal} stopOpacity="0.22" />
          <stop offset="100%" stopColor={T2.signal} stopOpacity="0" />
        </linearGradient>
      </defs>

      {/* faint horizontal guide */}
      <line x1={pad.l} x2={width - pad.r} y1={height - pad.b} y2={height - pad.b}
            stroke={T2.border} strokeWidth="1" />

      {/* area + line */}
      <path d={area} fill="url(#panChartFill)" />
      <path d={d} fill="none" stroke={T2.signal} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />

      {/* today dot */}
      <circle cx={xs[todayIdx]} cy={ys[todayIdx]} r="4" fill={T2.signal} />
      <circle cx={xs[todayIdx]} cy={ys[todayIdx]} r="9" fill="none" stroke={T2.signal} strokeWidth="1" opacity="0.4" />

      {/* x-axis labels */}
      {labels.map((l, i) => (
        <text key={i} x={xs[i]} y={height - 6} fill={i === todayIdx ? T2.signal : T2.fg4}
          fontSize="10" textAnchor="middle"
          fontFamily={T2.fontMono} letterSpacing="0.04em">{l}</text>
      ))}
    </svg>
  );
};

// Color-coded indicator row
const BaselineRow = ({ label, value, unit, deltaLabel, accent, accentLabel }) => (
  <div style={{
    background: T2.bgRaised,
    borderRadius: 10,
    padding: '14px 16px',
    boxShadow: `0 0 0 1px ${T2.border} inset`,
    display: 'grid',
    gridTemplateColumns: '1fr auto',
    rowGap: 4,
    columnGap: 12,
    alignItems: 'baseline',
  }}>
    <div style={{
      fontFamily: T2.fontMono, fontSize: 10, color: T2.fg4,
      textTransform: 'uppercase', letterSpacing: '0.12em',
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent }} />
      {label}
    </div>
    <div style={{
      fontFamily: T2.fontMono, fontSize: 11, color: accent,
      textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 500,
      justifySelf: 'end',
    }}>{accentLabel}</div>

    <div style={{
      fontFamily: T2.fontSans, fontWeight: 500, fontSize: 26, letterSpacing: '-0.02em',
      color: T2.fg1, fontVariantNumeric: 'tabular-nums', lineHeight: 1.05,
    }}>
      {value}
      <span style={{
        marginLeft: 6, fontFamily: T2.fontMono, fontSize: 12,
        color: T2.fg3, fontWeight: 400, letterSpacing: '0.01em',
      }}>{unit}</span>
    </div>
    <div style={{
      justifySelf: 'end',
      fontFamily: T2.fontSans, fontSize: 12, color: T2.fg3, letterSpacing: '-0.005em',
    }}>{deltaLabel}</div>
  </div>
);

const BaselineScreen = () => (
  <div style={{
    width: '100%', height: '100%',
    background: T2.bgCanvas, color: T2.fg1,
    fontFamily: T2.fontSans,
    display: 'flex', flexDirection: 'column',
    overflow: 'hidden',
  }}>
    {/* Header */}
    <div style={{
      padding: '18px 24px 12px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: '50%',
        background: T2.bgRaised, boxShadow: `0 0 0 1px ${T2.border} inset`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: T2.fg2, fontSize: 14,
      }}>‹</div>
      <window.PanMarkApp size={20} uid="bh" />
      <div style={{
        width: 32, height: 32, borderRadius: '50%',
        background: 'transparent',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: T2.fg3, fontSize: 16, letterSpacing: '0.1em',
      }}>···</div>
    </div>

    <div style={{
      padding: '4px 24px 0',
      display: 'flex', flexDirection: 'column', gap: 6,
    }}>
      <div style={{
        fontFamily: T2.fontMono, fontSize: 11, color: T2.fg4,
        textTransform: 'uppercase', letterSpacing: '0.16em',
      }}>YOU · 7-DAY WINDOW</div>
      <h1 style={{
        margin: 0,
        fontFamily: T2.fontSans, fontSize: 28, fontWeight: 500,
        letterSpacing: '-0.025em', color: T2.fg1, lineHeight: 1.1,
      }}>Your Health<br />Baseline</h1>
    </div>

    {/* Chart panel */}
    <div style={{
      margin: '20px 20px 12px',
      background: T2.bgSurface,
      borderRadius: 14,
      boxShadow: `0 0 0 1px ${T2.border} inset`,
      padding: '14px 14px 4px',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '0 4px 8px',
      }}>
        <div style={{
          fontFamily: T2.fontMono, fontSize: 10, color: T2.fg4,
          textTransform: 'uppercase', letterSpacing: '0.12em',
          whiteSpace: 'nowrap',
        }}>HRV · 7 DAYS</div>
        <div style={{
          fontFamily: T2.fontMono, fontSize: 11, color: T2.signal,
          letterSpacing: '0.04em',
        }}>↑ 6%</div>
      </div>
      <TrendChart width={326} height={130} />
    </div>

    {/* Indicator rows */}
    <div style={{
      padding: '4px 20px',
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <BaselineRow
        label="HRV"
        value="38"
        unit="ms"
        deltaLabel="vs your 7-day avg"
        accent={T2.danger}
        accentLabel="↓ 12%"
      />
      <BaselineRow
        label="SLEEP"
        value="7.2"
        unit="h"
        deltaLabel="vs your range"
        accent={T2.success}
        accentLabel="Within range"
      />
      <BaselineRow
        label="BLOOD GLUCOSE"
        value="5.8"
        unit="mmol/L"
        deltaLabel="vs your 7-day avg"
        accent={T2.warn}
        accentLabel="↑ 8%"
      />
    </div>

    <div style={{ flex: 1, minHeight: 12 }} />

    {/* CTA */}
    <div style={{ padding: '12px 20px 24px' }}>
      <button style={{
        width: '100%', height: 52,
        background: T2.signal, color: '#000', border: 'none', borderRadius: 12,
        fontFamily: T2.fontSans, fontWeight: 600, fontSize: 15, letterSpacing: '-0.005em',
        cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      }}>
        Contribute to Data Pool <span style={{ transform: 'translateY(-1px)' }}>→</span>
      </button>
      <div style={{
        textAlign: 'center', marginTop: 10,
        fontFamily: T2.fontMono, fontSize: 10, color: T2.fg5,
        letterSpacing: '0.1em', textTransform: 'uppercase',
      }}>EARN · CONTROL · STAY ANONYMOUS</div>
    </div>
  </div>
);

window.BaselineScreen = BaselineScreen;