// fc-plan.jsx, plan-feasibility + plan-type UI (Logic & Flows §14.5/§14.6, F6).
//   FeasibilityCard, required rate vs the 1%/wk ceiling, with three coach-toned
//     outs when the timeline can't be hit safely (§14.6).
//   WalkItDownCard , the distinct same-day-weigh-in plan: no water buffer, the
//     whole gap is true weight (§14.5 / F6).
// Theme-aware; pure presentation driven by window.feasibility / window.FC_SPORTS.

function FeasibilityCard({ currentWeight, bodyTarget, weeksToWeighIn, width = 331 }) {
  const f = window.feasibility(currentWeight, bodyTarget, weeksToWeighIn);
  const ok = f.feasible;
  const tone = ok ? 'var(--t-green)' : 'var(--t-red)';
  const head = ok
    ? `${f.totalKg.toFixed(1)} kg in ${weeksToWeighIn} weeks is doable, about ${f.requiredPct.toFixed(2)}%/wk.`
    : `${f.totalKg.toFixed(1)} kg in ${weeksToWeighIn} weeks needs ${f.requiredPct.toFixed(2)}%/wk, past the safe ceiling.`;
  return (
    <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: ok ? 'var(--card-border)' : '1px solid var(--t-red)', padding: 20 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: tone, flexShrink: 0 }} />
        <span style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: tone, fontWeight: 700 }}>{ok ? 'Timeline checks out' : 'Timeline’s too short'}</span>
      </div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 700, lineHeight: 1.28, color: 'var(--ink)', marginTop: 11, textWrap: 'balance' }}>{head}</div>

      {/* required vs ceiling bar */}
      <div style={{ marginTop: 16 }}>
        <div style={{ position: 'relative', height: 8, background: 'var(--rule)', borderRadius: 4, overflow: 'visible' }}>
          <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${Math.min(100, (f.requiredPct / 1.3) * 100)}%`, background: tone, borderRadius: 4 }} />
          {/* 1%/wk ceiling marker */}
          <div style={{ position: 'absolute', left: `${(1.0 / 1.3) * 100}%`, top: -4, bottom: -4, width: 2, background: 'var(--ink)' }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 7 }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--ink-3)', fontWeight: 600 }}>NEEDS {f.requiredPct.toFixed(2)}%/WK</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--ink)', fontWeight: 700 }}>1.0% CEILING</span>
        </div>
      </div>

      {!ok && (
        <div style={{ marginTop: 16, paddingTop: 15, borderTop: '1px solid var(--rule)' }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5, textWrap: 'pretty' }}>Cutting faster than 1%/wk costs muscle and power. Three safer ways through:</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
            {[['Move up a division', 'Less to cut, same fight'], ['Push the fight date', `~${Math.ceil(f.totalKg / f.ceilingWeekly)} weeks does it safely`], ['Start now at 1%/wk', 'Begin today and we’ll reassess weekly']].map(([t, d], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, background: 'var(--paper-2)', borderRadius: 'var(--radius-ctl)', padding: '12px 14px' }}>
                <div><div style={{ fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 600, color: 'var(--ink)' }}>{t}</div><div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', marginTop: 1 }}>{d}</div></div>
                <svg width="7" height="12" viewBox="0 0 7 12" fill="none"><path d="M1 1 L6 6 L1 11" stroke="var(--rule-2)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            ))}
          </div>
        </div>
      )}
      {ok && f.veryHighCut && (
        <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--mustard-deep)', lineHeight: 1.5, marginTop: 13, paddingTop: 12, borderTop: '1px solid var(--rule)', textWrap: 'pretty' }}>That’s still a big total cut ({(f.totalKg / currentWeight * 100).toFixed(0)}% of body weight), fuel and recover carefully.</div>
      )}
    </div>
  );
}

// Same-day weigh-in → no rehydration window → no water buffer (§14.5 / F6)
function WalkItDownCard({ sportKey = 'Boxing', width = 331 }) {
  const s = window.FC_SPORTS[sportKey] || {};
  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.16em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 700 }}>Same-day weigh-in</span>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--ink)', fontWeight: 700, border: '1px solid var(--ink)', borderRadius: 100, padding: '2px 9px' }}>Walk-it-down plan</span>
      </div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 700, lineHeight: 1.28, color: 'var(--ink)', marginTop: 11, textWrap: 'balance' }}>You weigh in the day you fight, so there’s no water cut.</div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 8, textWrap: 'pretty' }}>
        With no rehydration window, sweating weight off would leave you depleted in the ring. Your whole cut is <strong style={{ fontWeight: 600 }}>real weight, walked down across camp</strong>. You step on the scale and into the cage at the same weight.
      </div>
      <div style={{ display: 'flex', marginTop: 16, paddingTop: 15, borderTop: '1px solid var(--rule)' }}>
        {[['Fight-week water', '0.0', 'kg', 'var(--ink-3)'], ['True-weight cut', '4.0', 'kg', 'var(--accent)'], ['Cut pace', '≤1.0', '%/wk', 'var(--ink)']].map(([lb, v, u, c], i) => (
          <div key={lb} style={{ flex: 1, paddingLeft: i ? 16 : 0, borderLeft: i ? '1px solid var(--rule)' : 'none' }}>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 10.5, fontWeight: 600, color: 'var(--ink-3)' }}>{lb}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 3, marginTop: 7 }}><span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 24, letterSpacing: '-0.02em', color: c }}>{v}</span><span style={{ fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--ink-3)', fontWeight: 600 }}>{u}</span></div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { FeasibilityCard, WalkItDownCard });