/* ModerateSecondary.jsx — Learn, Care, and Profile tabs for the moderate tier.
   Learn = the centerpiece education surface (segmented filter + module cards).
   Care = two consultations (one schedulable, one locked until Day 30).
   Profile = reversal-journey stats + locked milestone progression (no XP/Level). */

// ─── Learn tab ──────────────────────────────────────────────────────────
const MODULES = [
  { id: 'signs', title: 'Learn the signs', mins: '5 min', desc: 'Understand what’s happening in your body.', cat: 'understanding', from: 'var(--amber-200)', to: 'var(--amber-400)' },
  { id: 'consequences', title: 'See the consequences', mins: '5 min', desc: 'What happens with action — and without it.', cat: 'understanding', from: 'var(--terracotta-200)', to: 'var(--terracotta-400)' },
  { id: 'toolkit', title: 'Your reversal toolkit', mins: '4 min', desc: 'The daily habits that move the numbers.', cat: 'reversing', from: 'var(--sage-300)', to: 'var(--sage-500)' },
  { id: 'family', title: 'Family history and you', mins: '6 min', desc: 'Why your father’s diabetes matters for your own risk.', cat: 'understanding', from: 'var(--stone-300)', to: 'var(--stone-500)' },
];
const FILTERS = [
  { id: 'all', label: 'All' },
  { id: 'understanding', label: 'Understanding your health' },
  { id: 'reversing', label: 'Reversing the signs' },
];

function Segmented({ options, value, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 4, WebkitOverflowScrolling: 'touch' }}>
      {options.map(o => {
        const sel = value === o.id;
        return (
          <button key={o.id} onClick={() => onChange(o.id)} style={{
            flexShrink: 0, padding: '8px 14px', borderRadius: 'var(--radius-pill)', cursor: 'pointer', whiteSpace: 'nowrap',
            border: sel ? '0' : '1px solid var(--border-default)',
            background: sel ? 'var(--amber-500)' : '#fff', color: sel ? '#fff' : 'var(--fg-2)',
            font: 'var(--type-label)',
          }}>{o.label}</button>
        );
      })}
    </div>
  );
}

function LearnModuleCard({ m, onOpen }) {
  return (
    <Card padding={0} onClick={() => onOpen(m)} style={{ overflow: 'hidden' }}>
      <div style={{ display: 'flex', gap: 0 }}>
        <div style={{ width: 108, flexShrink: 0, background: `linear-gradient(140deg, ${m.from}, ${m.to})`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', color: 'var(--amber-700)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="play" size={20}/>
          </div>
        </div>
        <div style={{ flex: 1, padding: '14px 16px' }}>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)', textWrap: 'pretty' }}>{m.title}</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-2)', marginTop: 3, textWrap: 'pretty' }}>{m.desc}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 8, font: 'var(--type-caption)', color: 'var(--fg-3)' }}>
            <Icon name="clock" size={13}/> {m.mins}
          </div>
        </div>
      </div>
    </Card>
  );
}

function LearnTab({ onOpenModule }) {
  const [filter, setFilter] = React.useState('all');
  const shown = MODULES.filter(m => filter === 'all' || m.cat === filter);
  return (
    <div style={{ padding: '58px var(--gutter-screen) 0' }}>
      <h1 style={{ font: 'var(--type-display-m)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', marginBottom: 6 }}>Learn</h1>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', marginBottom: 16, textWrap: 'pretty' }}>Short, plain explanations of what your screening found.</p>
      <div style={{ marginBottom: 18 }}><Segmented options={FILTERS} value={filter} onChange={setFilter}/></div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {shown.map(m => <LearnModuleCard key={m.id} m={m} onOpen={onOpenModule}/>)}
      </div>
      <div style={{ height: 24 }}/>
    </div>
  );
}

// ─── Care tab ───────────────────────────────────────────────────────────
function CareTabM({ onSchedule, onFindLab }) {
  return (
    <div style={{ padding: '58px var(--gutter-screen) 0' }}>
      <h1 style={{ font: 'var(--type-display-m)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', marginBottom: 18 }}>Care</h1>

      <div className="overline" style={{ marginBottom: 10 }}>Your consultations</div>
      {/* Consultation 1 — schedulable */}
      <Card padding={0} onClick={onSchedule} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', marginBottom: 10 }}>
        <div style={{ width: 40, height: 40, borderRadius: 'var(--radius-s)', background: 'var(--amber-50)', color: 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="video" size={20}/></div>
        <div style={{ flex: 1 }}>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Consultation 1</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-2)', marginTop: 1 }}>Review bloodwork results</div>
          <div style={{ marginTop: 6 }}><StatPill bg="var(--amber-50)" fg="var(--amber-700)">Schedule when ready</StatPill></div>
        </div>
        <Icon name="chevron-right" size={20} color="var(--fg-4)"/>
      </Card>
      {/* Consultation 2 — locked */}
      <Card padding={0} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', marginBottom: 16, opacity: 0.62 }}>
        <div style={{ width: 40, height: 40, borderRadius: 'var(--radius-s)', background: 'var(--stone-100)', color: 'var(--stone-400)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="lock" size={20}/></div>
        <div style={{ flex: 1 }}>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-2)' }}>Consultation 2</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>30-day progress review</div>
          <div style={{ marginTop: 6 }}><StatPill bg="var(--stone-100)" fg="var(--stone-500)">Unlocks Day 30</StatPill></div>
        </div>
      </Card>

      <div className="overline" style={{ marginBottom: 10 }}>Past consultations</div>
      <Card padding={26} style={{ marginBottom: 16, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 10 }}>
        <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--stone-100)', color: 'var(--stone-400)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="calendar" size={24}/></div>
        <p style={{ font: 'var(--type-body)', color: 'var(--fg-3)', maxWidth: 240, textWrap: 'pretty' }}>No past consultations yet. Yours will appear here.</p>
      </Card>

      <Card padding={0} onClick={onFindLab} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px' }}>
        <div style={{ width: 38, height: 38, borderRadius: 'var(--radius-s)', background: 'var(--amber-50)', color: 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="map-pin" size={20}/></div>
        <div style={{ flex: 1 }}>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Find a partner lab</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>Book baseline bloodwork near you</div>
        </div>
        <Icon name="chevron-right" size={20} color="var(--fg-4)"/>
      </Card>
      <div style={{ height: 24 }}/>
    </div>
  );
}

// ─── Profile tab ─────────────────────────────────────────────────────────
const MILESTONES = [
  { id: 'first7', title: 'First 7 days', desc: 'Complete a full week', earned: false },
  { id: 'half', title: 'Halfway point — Day 15', desc: 'Reach the midpoint', earned: false },
  { id: 'done', title: 'Reversal complete — Day 30', desc: 'Finish the program', earned: false },
];

function ProfileTabM() {
  const d = DEMO_MOD;
  return (
    <div style={{ padding: '58px var(--gutter-screen) 0' }}>
      {/* Identity */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: 22 }}>
        <Avatar initials={d.initials} size={84}/>
        <div style={{ font: 'var(--type-h1)', color: 'var(--fg-1)', marginTop: 14 }}>{d.name} {d.last}</div>
        <div style={{ marginTop: 8 }}>
          <StatPill icon="flame" bg="var(--amber-50)" fg="var(--amber-700)">Moderate · Day {d.reversalDay} of {d.reversalTotal}</StatPill>
        </div>
      </div>

      {/* Reversal journey stats */}
      <div className="overline" style={{ marginBottom: 10 }}>Your reversal journey</div>
      <Card padding={20} style={{ marginBottom: 16 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, textAlign: 'center' }}>
          <StatTile value={d.reversalDay} label="Days in" accent="var(--amber-600)"/>
          <StatTile value={d.actionsCompletedAllTime} label="Actions done" accent="var(--sage-600)"/>
          <StatTile value={`${d.adherentDays}/${d.adherentDays}`} label="Days adherent"/>
        </div>
      </Card>

      {/* Milestones — same locked-progression pattern as healthy, different copy */}
      <div className="overline" style={{ marginBottom: 10 }}>Milestones</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16 }}>
        {MILESTONES.map(m => (
          <Card key={m.id} padding={16} style={{ display: 'flex', alignItems: 'center', gap: 14, opacity: m.earned ? 1 : 0.6 }}>
            <div style={{ width: 46, height: 46, borderRadius: '50%', background: m.earned ? 'var(--sage-50)' : 'var(--stone-100)', color: m.earned ? 'var(--sage-600)' : 'var(--stone-400)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name={m.earned ? 'award' : 'lock'} size={22}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ font: 'var(--type-h3)', color: m.earned ? 'var(--fg-1)' : 'var(--fg-3)' }}>{m.title}</div>
              <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>{m.earned ? 'Earned · ' + m.desc : 'Locked · ' + m.desc}</div>
            </div>
          </Card>
        ))}
      </div>

      {/* Settings row */}
      <Card padding={0} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px' }}>
        <div style={{ width: 38, height: 38, borderRadius: 'var(--radius-s)', background: 'var(--stone-100)', color: 'var(--fg-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="settings" size={20}/></div>
        <div style={{ flex: 1, font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Settings & notifications</div>
        <Icon name="chevron-right" size={20} color="var(--fg-4)"/>
      </Card>
      <div style={{ height: 24 }}/>
    </div>
  );
}

window.MunaModerateSecondary = { LearnTab, CareTabM, ProfileTabM };