/* ReversalProgram.jsx — the 30-day reversal detail screen (moderate tier).
   Reached from the dashboard hero. Action cards tie to Bisola's persona barriers
   (poor diet → add a vegetable; rarely exercises → 10-min walk). Completion is
   lifted to the controller so the dashboard's "today's actions" stays in sync. */

const { ReversalSegments } = window.MunaModerateDashboard;

const REVERSAL_ACTIONS = [
  { id: 'brush', title: 'Brush thoroughly twice', note: 'Morning and night, two minutes each.', have: 1, goal: 2 },
  { id: 'veg', title: 'Add one vegetable to lunch', note: 'Even a small portion counts.', goal: 1 },
  { id: 'walk', title: '10-minute walk', note: 'Right after dinner is ideal.', goal: 1 },
];

function ReversalActionCard({ a, done, onComplete }) {
  const have = done ? a.goal : (a.have || 0);
  const hasProgress = a.goal > 1;
  return (
    <Card padding={18}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <div style={{ width: 42, height: 42, borderRadius: 'var(--radius-s)', background: done ? 'var(--sage-50)' : 'var(--amber-50)', color: done ? 'var(--sage-600)' : 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Icon name={done ? 'check' : 'circle'} size={done ? 22 : 20} strokeWidth={done ? 2.6 : 1.9}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>{a.title}</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 2, textWrap: 'pretty' }}>{a.note}</div>
          {hasProgress && (
            <div style={{ marginTop: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', font: 'var(--type-body-s)', color: 'var(--fg-3)', marginBottom: 6 }}>
                <span>Progress</span><span>{have}/{a.goal}</span>
              </div>
              <ProgressBar value={have} max={a.goal} color={done ? 'var(--sage-500)' : 'var(--amber-500)'}/>
            </div>
          )}
        </div>
      </div>
      <div style={{ marginTop: 14 }}>
        {done
          ? <Button full variant="secondary" leftIcon="check" onClick={() => {}} style={{ color: 'var(--sage-700)', borderColor: 'var(--sage-300)' }}>Completed</Button>
          : <Button full variant="primary" onClick={() => onComplete(a.id)}>Mark complete</Button>}
      </div>
    </Card>
  );
}

function ReversalProgram({ onBack, completed, onComplete, onWhy }) {
  const d = DEMO_MOD;
  const pct = Math.round((d.reversalDay / d.reversalTotal) * 100);
  return (
    <Screen>
      <HNav title="30-day reversal" onBack={onBack}/>
      <div style={{ padding: '8px var(--gutter-screen) 40px' }}>
        {/* Header card — amber gradient */}
        <div style={{ background: 'var(--band-moderate)', borderRadius: 'var(--radius-l)', padding: 22, color: '#fff', marginBottom: 22, boxShadow: 'var(--shadow-m)' }}>
          <div style={{ font: '600 34px/1.05 var(--font-serif)', letterSpacing: 'var(--tracking-tight)' }}>Day {d.reversalDay} of {d.reversalTotal}.</div>
          <div style={{ font: 'var(--type-body-l)', color: 'rgba(255,255,255,0.92)', marginTop: 6, marginBottom: 18 }}>You’re {pct}% in. Keep going.</div>
          <ReversalSegments day={d.reversalDay} total={d.reversalTotal}/>
        </div>

        {/* Today's actions */}
        <div className="overline" style={{ marginBottom: 12 }}>Today’s actions</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 16 }}>
          {REVERSAL_ACTIONS.map(a => <ReversalActionCard key={a.id} a={a} done={!!completed[a.id]} onComplete={onComplete}/>)}
        </div>

        {/* Why these three */}
        <Card padding={0} onClick={onWhy} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', marginBottom: 22 }}>
          <div style={{ width: 38, height: 38, borderRadius: 'var(--radius-s)', background: 'var(--sage-50)', color: 'var(--sage-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="help-circle" size={20}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Why these three?</div>
            <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1, textWrap: 'pretty' }}>Each one targets a marker your screening flagged. Tap to see how.</div>
          </div>
          <Icon name="chevron-right" size={20} color="var(--fg-4)"/>
        </Card>

        {/* Long-term progress — three milestone markers */}
        <div className="overline" style={{ marginBottom: 12 }}>Your progress</div>
        <Card padding={20}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', position: 'relative' }}>
            {/* connector line */}
            <div style={{ position: 'absolute', top: 13, left: '14%', right: '14%', height: 2, background: 'var(--stone-200)' }}/>
            {[
              { label: 'Where you started', sub: 'Score 65', tone: 'done', icon: 'flag' },
              { label: 'Where you are', sub: `Day ${d.reversalDay}`, tone: 'now', icon: 'map-pin' },
              { label: 'Where you’re going', sub: 'Day 30', tone: 'future', icon: 'target' },
            ].map((m, i) => {
              const bg = m.tone === 'future' ? 'var(--stone-100)' : m.tone === 'now' ? 'var(--amber-500)' : 'var(--sage-500)';
              const fg = m.tone === 'future' ? 'var(--stone-400)' : '#fff';
              return (
                <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, width: '32%', position: 'relative', zIndex: 1 }}>
                  <div style={{ width: 28, height: 28, borderRadius: '50%', background: bg, color: fg, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '3px solid var(--bg)' }}>
                    <Icon name={m.icon} size={14} strokeWidth={2.4}/>
                  </div>
                  <div style={{ textAlign: 'center' }}>
                    <div style={{ font: 'var(--type-caption)', fontWeight: 600, color: 'var(--fg-2)', textWrap: 'balance' }}>{m.label}</div>
                    <div style={{ font: 'var(--type-caption)', color: 'var(--fg-3)', marginTop: 2 }}>{m.sub}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>
    </Screen>
  );
}

window.MunaReversalProgram = { ReversalProgram, REVERSAL_ACTIONS };