/* ModerateDashboard.jsx — Home tab for the moderate tier.
   Recurring engagement loop = the 30-day reversal program (sits directly below
   the score summary per the system dashboard hierarchy rule). No XP/Level/Badges.
   Also exports ConsultationCard (reused on the Care tab) + the reversal segment bar. */

// ── 30-segment reversal progress strip ──────────────────────────────────
function ReversalSegments({ day, total = 30, filledColor = '#fff', track = 'rgba(255,255,255,0.28)' }) {
  return (
    <div style={{ display: 'flex', gap: 2 }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{ flex: 1, height: 6, borderRadius: 1.5, background: i < day ? filledColor : track }}/>
      ))}
    </div>
  );
}

// ── Follow-up consultation card (shared: dashboard + care tab) ──────────
function ConsultationCard({ onSchedule }) {
  return (
    <Card padding={20} style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', top: 16, right: 16 }}>
        <StatPill bg="var(--sage-50)" fg="var(--sage-700)">Free</StatPill>
      </div>
      <SectionHeading style={{ marginBottom: 8, paddingRight: 48 }}>Schedule your follow-up consultation</SectionHeading>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 18 }}>
        Two 30-minute calls included: one to walk through your bloodwork results with both clinicians, and one to review your reversal progress after 30 days.
      </p>
      <Button full variant="primary" leftIcon="video" onClick={onSchedule}>Schedule consultation 1</Button>
    </Card>
  );
}

function SubScoreM({ icon, custom, label, value, valueColor = 'var(--fg-1)' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{ width: 32, height: 32, borderRadius: 'var(--radius-s)', background: 'var(--stone-100)', color: 'var(--fg-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        {custom || <Icon name={icon} size={18}/>}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)' }}>{label}</div>
        <div style={{ font: 'var(--type-h3)', color: valueColor }}>{value}</div>
      </div>
    </div>
  );
}

const DAYS_M = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const LEARN_PREVIEWS = [
  { id: 'signs', title: 'Learn the signs', mins: '5 min', from: 'var(--amber-200)', to: 'var(--amber-400)', icon: 'eye' },
  { id: 'consequences', title: 'See the consequences', mins: '5 min', from: 'var(--terracotta-200)', to: 'var(--terracotta-400)', icon: 'git-branch' },
];

function ModerateDashboard({ todayDone = 0, onOpenReversal, onSchedule, onOpenLearn, onOpenActions }) {
  const d = DEMO_MOD;
  return (
    <div style={{ padding: '0 var(--gutter-screen)' }}>
      {/* Greeting strip — no XP chip (gamification deprioritized for moderate) */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 58, paddingBottom: 18 }}>
        <Avatar initials={d.initials} size={48}/>
        <div style={{ flex: 1 }}>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Hi {d.name}</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 2 }}>Day {d.reversalDay} of your 30-day reversal</div>
        </div>
        <button aria-label="Notifications" style={{ width: 42, height: 42, borderRadius: '50%', background: '#fff', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-xs)', color: 'var(--fg-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}>
          <Icon name="bell" size={20}/>
        </button>
      </div>

      {/* Health score summary — tier-aware sub-score labels */}
      <Card padding={18} style={{ marginBottom: 14, display: 'flex', alignItems: 'center', gap: 18 }}>
        <ScoreRing score={d.score} variant="moderate" size={92} animate={false}/>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <SubScoreM custom={<ToothIcon size={18}/>} label="Oral health" value={`${d.oral} / 100`}/>
          <SubScoreM icon="gauge" label="Diabetes risk" value="Pre-diabetes" valueColor="var(--amber-700)"/>
          <SubScoreM icon="heart" label="Cardiovascular" value="Watch" valueColor="var(--amber-700)"/>
        </div>
      </Card>

      {/* 30-day reversal hero — THE recurring engagement loop, directly below score */}
      <div onClick={onOpenReversal} style={{ background: 'var(--band-moderate)', borderRadius: 'var(--radius-l)', padding: 20, marginBottom: 14, color: '#fff', cursor: 'pointer', boxShadow: 'var(--shadow-m)' }}>
        <div style={{ font: 'var(--type-display-s)', color: '#fff', fontFamily: 'var(--font-serif)', letterSpacing: 'var(--tracking-tight)' }}>Your 30-day reversal.</div>
        <div style={{ font: 'var(--type-body)', color: 'rgba(255,255,255,0.92)', marginTop: 4, marginBottom: 16 }}>Day {d.reversalDay} of {d.reversalTotal}. Small daily actions, real change.</div>
        <ReversalSegments day={d.reversalDay} total={d.reversalTotal}/>
        <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ font: 'var(--type-body-s)', color: 'rgba(255,255,255,0.92)' }}>{3 - todayDone === 0 ? 'All actions done today' : `${3 - todayDone} actions today`}</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, font: 'var(--type-button)', color: '#fff' }}>Open <Icon name="arrow-right" size={16}/></span>
        </div>
      </div>

      {/* Follow-up consultation — one-time event CTA, below the engagement loop */}
      <div style={{ marginBottom: 14 }}><ConsultationCard onSchedule={onSchedule}/></div>

      {/* Learn modules card */}
      <Card padding={20} style={{ marginBottom: 14 }}>
        <SectionHeading style={{ marginBottom: 4 }}>Understand what’s happening</SectionHeading>
        <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 16 }}>Two short videos to help you see what your screening found — and how to reverse it.</p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {LEARN_PREVIEWS.map(v => (
            <div key={v.id} onClick={onOpenLearn} style={{ cursor: 'pointer' }}>
              <div style={{ borderRadius: 'var(--radius-s)', height: 84, background: `linear-gradient(140deg, ${v.from}, ${v.to})`, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.18)', opacity: 0.5 }}/>
                <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', color: 'var(--amber-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                  <Icon name="play" size={18}/>
                </div>
              </div>
              <div style={{ font: 'var(--type-label)', color: 'var(--fg-1)', marginTop: 8 }}>{v.title}</div>
              <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>{v.mins}</div>
            </div>
          ))}
        </div>
      </Card>

      {/* Adherence streak strip — the ONLY gamification, framed around the program */}
      <Card padding={18} style={{ marginBottom: 14 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14, gap: 8 }}>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Reversal program</div>
          <StatPill icon="flame" bg="var(--sage-50)" fg="var(--sage-700)">{d.adherentDays} days completed</StatPill>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
          {DAYS_M.map((day, i) => {
            const filled = i < d.adherentDays;
            return (
              <div key={day} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <div style={{ width: '100%', aspectRatio: '1', maxWidth: 38, borderRadius: '50%', background: filled ? 'var(--sage-500)' : 'var(--stone-100)', color: filled ? '#fff' : 'var(--stone-300)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="flame" size={16} strokeWidth={2}/>
                </div>
                <div style={{ font: 'var(--type-caption)', color: filled ? 'var(--fg-2)' : 'var(--fg-4)' }}>{day[0]}</div>
              </div>
            );
          })}
        </div>
      </Card>

      {/* Two-up: Today's actions / Resources */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 8 }}>
        <div onClick={onOpenActions} style={{ background: 'var(--amber-50)', borderRadius: 'var(--radius-m)', padding: 16, cursor: 'pointer' }}>
          <div style={{ width: 36, height: 36, borderRadius: 'var(--radius-s)', background: '#fff', color: 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}><Icon name="check-circle" size={20}/></div>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Today’s actions</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 2 }}>{todayDone}/3 done</div>
        </div>
        <div onClick={onOpenLearn} style={{ background: 'var(--sage-50)', borderRadius: 'var(--radius-m)', padding: 16, cursor: 'pointer' }}>
          <div style={{ width: 36, height: 36, borderRadius: 'var(--radius-s)', background: '#fff', color: 'var(--sage-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}><Icon name="book-open" size={20}/></div>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Resources</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 2 }}>Articles & videos</div>
        </div>
      </div>

      <div style={{ height: 24 }}/>
    </div>
  );
}

window.MunaModerateDashboard = { ModerateDashboard, ConsultationCard, ReversalSegments };