// fc-maintenance.jsx, no-deadline / maintenance mode (Logic & Flows §16, resolves F7).
// Weight-only. Replaces the countdown engine with: a maintenance BAND (self-set,
// with an evidence-based recommendation + reasoning), a READINESS readout (weeks
// to a safe cut), and a gentle, education-linked anti-cycling nudge.

// band math off the body target (division limit − gear). +8–15% recommended (ISSN 2024).
function _mBand(bodyTarget) {
  return { anchor: bodyTarget, lo: +(bodyTarget * 1.08).toFixed(1), hi: +(bodyTarget * 1.15).toFixed(1) };
}
function readinessWeeks(current, bodyTarget) {
  return Math.max(0, (current - bodyTarget) / (current * 0.01));   // at ≤1%/wk
}

// the band bar: at-weight → drifting, with the recommended green zone + ceiling.
function MaintenanceBand({ current, bodyTarget, width = 331 }) {
  const b = _mBand(bodyTarget);
  const W = width, H = 44, padL = 6, padR = 6, barY = 24, barH = 12;
  const lo = b.anchor, hi = +(b.anchor * 1.24).toFixed(1);          // bar domain: at-weight → +24%
  const xS = (kg) => padL + ((Math.max(lo, Math.min(hi, kg)) - lo) / (hi - lo)) * (W - padL - padR);
  const state = current > b.hi ? 'high' : current < b.lo ? 'below' : 'in';
  const dotCol = state === 'high' ? 'var(--mustard-deep)' : 'var(--t-green)';
  const mx = xS(current);
  const anchor = mx < padL + 34 ? 'start' : mx > W - padR - 34 ? 'end' : 'middle';
  const lx = anchor === 'start' ? padL : anchor === 'end' ? W - padR : mx;
  return (
    <div>
      <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} style={{ display: 'block' }} role="img"
        aria-label={`Maintenance band ${b.lo} to ${b.hi} kg; you are at ${current.toFixed(1)} kg.`}>
        {/* track */}
        <rect x={padL} y={barY} width={W - padL - padR} height={barH} rx={barH / 2} fill="var(--rule)" />
        {/* recommended band */}
        <rect x={xS(b.lo)} y={barY} width={xS(b.hi) - xS(b.lo)} height={barH} fill="var(--t-green)" opacity="0.5" />
        {/* at-weight + ceiling ticks */}
        <line x1={xS(b.anchor)} y1={barY - 3} x2={xS(b.anchor)} y2={barY + barH + 3} stroke="var(--ink)" strokeWidth="1.5" />
        <line x1={xS(b.hi)} y1={barY - 3} x2={xS(b.hi)} y2={barY + barH + 3} stroke="var(--mustard-deep)" strokeWidth="1.5" />
        {/* you marker + clamped value label */}
        <circle cx={mx} cy={barY + barH / 2} r="7" fill={dotCol} stroke="var(--paper)" strokeWidth="2.5" />
        <text x={lx} y={14} textAnchor={anchor} fontFamily="var(--mono)" fontSize="9" fill={dotCol} fontWeight="700">YOU {current.toFixed(1)}</text>
      </svg>
      {/* legend, HTML so it can never run off the SVG edge */}
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, marginTop: 8 }}>
        {[['At weight', `${b.anchor.toFixed(1)}`, 'var(--ink)'], ['Fight-ready', `${b.lo}–${b.hi}`, 'var(--t-green)'], ['Ceiling', `${b.hi.toFixed(1)}`, 'var(--mustard-deep)']].map(([lb, v, c]) => (
          <div key={lb} style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
            <span style={{ width: 7, height: 7, borderRadius: 2, background: c, flexShrink: 0 }} />
            <span style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.02em', color: 'var(--ink-3)', fontWeight: 600, whiteSpace: 'nowrap' }}>{lb} <span style={{ color: 'var(--ink-2)' }}>{v}</span></span>
          </div>
        ))}
      </div>
    </div>
  );
}

function MaintenanceCard({ current = 80.6, bodyTarget = 74.4, division = 'Lightweight', width = 331 }) {
  const b = _mBand(bodyTarget);
  const state = current > b.hi ? 'high' : current < b.lo ? 'below' : 'in';
  const tone = state === 'high' ? 'var(--mustard-deep)' : 'var(--t-green)';
  const head = state === 'high'
    ? `${current.toFixed(1)} kg, a bit above your fight-ready range.`
    : state === 'below'
      ? `${current.toFixed(1)} kg. Lean, sitting just under your range.`
      : `${current.toFixed(1)} kg, right in your fight-ready range.`;
  return (
    <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', padding: 20 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10 }}>
        <span style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: tone, fontWeight: 600 }}>Maintenance band</span>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.04em', color: 'var(--ink-3)', fontWeight: 600 }}>{division.toUpperCase()}</span>
      </div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 700, lineHeight: 1.28, color: 'var(--ink)', marginTop: 9, textWrap: 'balance' }}>{head}</div>
      <div style={{ marginTop: 14 }}><MaintenanceBand current={current} bodyTarget={bodyTarget} width={width - 0} /></div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', lineHeight: 1.5, marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--rule)', textWrap: 'pretty' }}>
        Most fighters sit <strong style={{ color: 'var(--ink-2)', fontWeight: 600 }}>8–15% over their class</strong> between camps, for you that’s <strong style={{ color: 'var(--ink-2)', fontWeight: 600 }}>{b.lo}–{b.hi} kg</strong>. High enough to train and build, low enough that the next cut isn’t a crash. <span style={{ color: 'var(--accent)', fontWeight: 600 }}>Set your target</span>
      </div>
    </div>
  );
}

function ReadinessCard({ current = 80.6, bodyTarget = 74.4, division = 'Lightweight', width = 331 }) {
  const wks = readinessWeeks(current, bodyTarget);
  return (
    <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', padding: 20 }}>
      <span style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>Readiness</span>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, marginTop: 12 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
          <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 44, letterSpacing: '-0.02em', color: 'var(--ink)' }}>{wks.toFixed(0)}</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-3)', fontWeight: 600 }}>WEEKS</span>
        </div>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.4, paddingBottom: 6, textWrap: 'pretty' }}>to safely make <strong style={{ fontWeight: 600 }}>{division}</strong> from here, at ≤1%/wk.</div>
      </div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', lineHeight: 1.5, marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--rule)', textWrap: 'pretty' }}>
        That’s your standing cost to get back to weight. Book a fight inside this window and the cut stays safe. Tighter than that, and we’d talk options.
      </div>
    </div>
  );
}

// gentle, education-linked anti-cycling nudge, only when drifting high (§16.4)
function AntiCycleNudge({ current = 84.6, bodyTarget = 74.4 }) {
  const b = _mBand(bodyTarget);
  if (current <= b.hi) return null;
  const over = (current - bodyTarget) / bodyTarget * 100;
  return (
    <div style={{ background: 'var(--t-amber-soft)', border: '1px solid var(--mustard-deep)', borderRadius: 'var(--radius)', padding: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <svg width="17" height="17" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8" stroke="var(--mustard-deep)" strokeWidth="1.6"/><path d="M10 6 V10.5 M10 13.5 h0.01" stroke="var(--mustard-deep)" strokeWidth="1.6" strokeLinecap="round"/></svg>
        <span style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--mustard-deep)', fontWeight: 700 }}>Worth a thought</span>
      </div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 16.5, fontWeight: 700, lineHeight: 1.3, color: 'var(--ink)', marginTop: 10, textWrap: 'balance' }}>You’re {over.toFixed(0)}% over your class. The next cut’s getting big.</div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 13, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 7, textWrap: 'pretty' }}>
        Ballooning between camps then crash-cutting is hard on your body and your performance. Reining it in now keeps the next cut gradual and safe. No pressure, just a heads-up.
      </div>
      <button style={{ marginTop: 13, fontFamily: 'var(--sans)', fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>Why ballooning backfires →</button>
    </div>
  );
}

Object.assign(window, { MaintenanceBand, MaintenanceCard, ReadinessCard, AntiCycleNudge, _mBand, readinessWeeks });