// Detailed view for one axis.  Reads live data from the parent
// (an `axis` row produced by deriveAxisRows() in index.html) and from
// the global CHVault for axis history + recent signal events.
const AxisDetail = ({ axis, onBack, onLog }) => {
  const A = axis;
  if (!A) return null;

  const [history, setHistory] = React.useState(null);   // [{date, score}]
  const [error,   setError]   = React.useState(null);

  React.useEffect(() => {
    let dead = false;
    (async () => {
      try {
        // /api/v1/health/axes returns history with combined CM/CH per day;
        // for per-axis trends we use the daily axis snapshot endpoint.
        const r = await fetch(window.CHVault.apiRoot + '/api/v1/health/axis/' + A.code + '/history?range=30D', {
          credentials: 'include',
          headers: { 'Accept': 'application/json' },
        });
        if (!r.ok) throw new Error('history-' + r.status);
        const j = await r.json();
        if (dead) return;
        const arr = (j.data || j.history || j.points || []).map(p => ({
          date:  p.date  || p.snapshot_date,
          score: typeof p.score === 'number' ? p.score : (typeof p.value === 'number' ? p.value : (p.axis_value || 0)),
        }));
        setHistory(arr);
      } catch (e) {
        if (dead) return;
        setError(e.message || String(e));
      }
    })();
    return () => { dead = true; };
  }, [A.code]);

  /* --- Trend chart (live, falls back to flat if no history yet)
         Canonical 0..100 scale.  Legacy /health/axis/.../history may
         return 0..10 values — detect via the global max and scale up
         so the chart and the score header agree.                       */
  const W = 720, H = 200, P = 12;
  let rawSeries = (history && history.length) ? history.map(h => Number(h.score) || 0) : null;
  if (rawSeries && rawSeries.length) {
    const seriesMax = Math.max(...rawSeries);
    const isLegacy10 = seriesMax <= 10;   // legacy endpoint returns 0..10
    rawSeries = rawSeries.map(v => Math.max(0, Math.min(100, isLegacy10 ? v * 10 : v)));
  }
  let series = rawSeries && rawSeries.length ? rawSeries : [A.value];
  const min = Math.min(...series);
  const max = Math.max(...series);
  const pts = series.map((v, i) => {
    const x = P + (series.length === 1 ? (W - P*2)/2 : (i / (series.length - 1)) * (W - P*2));
    const y = P + (1 - v / 100) * (H - P*2);
    return [x, y];
  });
  const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const area = pts.length > 1 ? `${path} L${pts[pts.length - 1][0]},${H - P} L${pts[0][0]},${H - P} Z` : '';

  /* --- Sub-signal contributions (live, from /master-equation/me/axes signal_scores) --- */
  const signalScores = A.signal_scores || {};
  const signalRows = Object.keys(signalScores).map(sid => ({
    id: sid, score: signalScores[sid],
  })).sort((a,b) => b.score - a.score);

  const decayColor = A.decay.status === 'decaying' ? 'var(--accent-coral)'
                   : A.decay.status === 'grace'    ? 'var(--bracket-poor)'
                   : A.decay.status === 'unknown'  ? 'var(--fg-3)'
                   : 'var(--accent-clinical)';

  const valueLabel = A.coverage > 0 ? A.value.toFixed(1) : '—';

  return (
    <div data-screen-label={`Axis · ${A.code}`}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
        <button onClick={onBack} style={{ background: 'transparent', border: 'none', color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', cursor: 'pointer', padding: 0 }}>← All axes</button>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 24 }}>
        <div>
          <div className="k-eyebrow" style={{ color: A.tint }}>Axis · {A.code}</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40, margin: '8px 0 0', letterSpacing: '-0.02em' }}>{A.name}</h1>
          <div style={{ fontSize: 14, color: 'var(--fg-2)', marginTop: 6 }}>{A.tagline}</div>
          <div style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 4, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>{A.role}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 88, lineHeight: 1, color: A.tint, letterSpacing: '-0.04em' }}>{valueLabel}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', color: decayColor, marginTop: 4 }}>● {A.decay.label.toUpperCase()}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)', marginTop: 4, letterSpacing: '0.12em' }}>{Math.round(A.coverage*100)}% COVERAGE</div>
        </div>
      </div>

      {/* Trend chart */}
      <div className="k-card" style={{ padding: 18, marginBottom: 18 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
          <div>
            <div className="k-eyebrow">Trend · 30 days</div>
            <h3 className="k-h3" style={{ marginTop: 4 }}>How the axis has moved</h3>
          </div>
          <div style={{ display: 'flex', gap: 16, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>
            <span>min {min.toFixed(1)}</span>
            <span>max {max.toFixed(1)}</span>
            <span style={{ color: A.tint }}>now {A.value.toFixed(1)} / 100</span>
          </div>
        </div>
        {history === null && !error && (
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', padding: '40px 0', textAlign: 'center' }}>loading axis history…</div>
        )}
        {history !== null && history.length === 0 && (
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 14, color: 'var(--fg-2)', padding: '40px 0', textAlign: 'center' }}>
            No historical snapshots yet for {A.name}. Log a few signals or sync your wearable and the trend will appear here within a day.
          </div>
        )}
        {history !== null && history.length > 0 && (
          <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 200 }}>
            <defs>
              <linearGradient id={`grad-${A.code}`} x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={A.tint} stopOpacity="0.28" />
                <stop offset="100%" stopColor={A.tint} stopOpacity="0" />
              </linearGradient>
            </defs>
            {[20, 40, 60, 80].map(y => {
              const yPos = P + (1 - y / 100) * (H - P * 2);
              return <line key={y} x1={P} x2={W - P} y1={yPos} y2={yPos} stroke="var(--border-1)" strokeWidth="1" strokeDasharray="2 4" />;
            })}
            {pts.length > 1 && <path d={area} fill={`url(#grad-${A.code})`} />}
            <path d={path} fill="none" stroke={A.tint} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
            {pts.length > 0 && <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="4" fill={A.tint} />}
          </svg>
        )}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 18 }}>
        {/* Sub-signal contributions */}
        <div className="k-card" style={{ padding: 18 }}>
          <div className="k-eyebrow">Sub-signals · live</div>
          <h3 className="k-h3" style={{ marginTop: 4, marginBottom: 12 }}>What this axis is built from</h3>
          {signalRows.length === 0 ? (
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 14, color: 'var(--fg-2)', padding: '12px 0' }}>
              No sub-signal data observed yet for {A.name}.
              Open the <a href="https://conceptualhealth.com/ui_kits/master-equation/sub-signals.yaml" style={{ color: 'var(--accent-clinical)' }}>sub-signal catalog</a> to see what's tracked.
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {signalRows.map((r, i) => {
                const pct = Math.max(0, Math.min(100, r.score));
                return (
                  <div key={r.id} style={{ padding: '10px 0', borderBottom: i < signalRows.length - 1 ? '1px solid var(--border-1)' : 'none' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                      <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--fg-1)', fontFamily: 'var(--font-mono)' }}>{r.id}</div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: A.tint, fontWeight: 600 }}>{pct.toFixed(0)}</div>
                    </div>
                    <div style={{ height: 4, background: 'var(--border-1)', borderRadius: 2, marginTop: 6, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: pct + '%', background: A.tint, borderRadius: 2 }} />
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* Axis context */}
        <div className="k-card" style={{ padding: 18 }}>
          <div className="k-eyebrow">Role · Master Equation</div>
          <h3 className="k-h3" style={{ marginTop: 4, marginBottom: 12 }}>Why {A.code} matters</h3>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, lineHeight: 1.6, color: 'var(--fg-2)', marginBottom: 14 }}>
            {A.code === 'PO' && 'PO is half of S (the somatic foundation).  Strong PO + strong NM gives the left wing its leverage.'}
            {A.code === 'NM' && 'NM is the other half of S.  Combined with PO it sets how much consistency the rest of your CH can rest on.'}
            {A.code === 'ER' && 'ER is one of the two resilience factors.  It enters the equation as (ER × RS)^(C/3) — so when consistency is high, resilience compounds.'}
            {A.code === 'SC' && 'SC is the coherence amplifier (Sp in the formula).  Strong social fabric multiplies everything else.'}
            {A.code === 'RS' && 'RS is the other resilience factor.  Together with ER it forms the resilience wing.'}
            {A.code === 'ES' && 'ES is the environmental addend.  Together with TA it forms the base of the right wing (T + E)^p.'}
            {A.code === 'TA' && 'TA is the technological addend in the right wing.  Healthy tooling and data hygiene compound your other axes.'}
            {A.code === 'PV' && 'PV is the right-wing exponent (p).  Stronger purpose makes T + E count for more.'}
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <button onClick={() => onLog && onLog()} style={{ padding: '10px 16px', borderRadius: 8, background: A.tint, color: '#062014', border: 'none', fontWeight: 600, fontSize: 13, cursor: 'pointer' }}>+ Log {A.code} action</button>
            <a href={(window.calculatorDeepLink ? window.calculatorDeepLink((window.useChData && window.useChData()) && (window.useChData()).bundle) : 'https://conceptualhealth.com/ui_kits/master-equation/') + '#' + A.code} style={{ padding: '10px 16px', borderRadius: 8, background: 'transparent', color: 'var(--fg-1)', border: '1px solid var(--border-1)', textDecoration: 'none', fontWeight: 500, fontSize: 13 }}>Explore in calculator →</a>
          </div>
        </div>
      </div>
    </div>
  );
};
window.AxisDetail = AxisDetail;