/* HealthySecondary.jsx — Challenges, Care, and Profile tabs.
   Challenge completion is controlled (lifted to the app) so the dashboard's
   "today's progress" reflects it. Reads kit + DEMO. */

const CHALLENGES = [
  { id: 'brush', title: 'Brush twice today', xp: 50, have: 1, goal: 2, unit: '' },
  { id: 'floss', title: 'Floss your teeth', xp: 50, have: 0, goal: 1, tip: 'Curve the floss into a C-shape against each tooth — don’t snap it against the gum.' },
  { id: 'water', title: 'Drink 8 glasses of water', xp: 50, have: 6, goal: 8, unit: 'glasses' },
];

function ChallengeCard({ c, done, onComplete }) {
  const have = done ? c.goal : c.have;
  const hasProgress = c.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' : 'flame'} size={22} strokeWidth={done ? 2.6 : 1.9}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
            <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>{c.title}</div>
            <StatPill bg="var(--amber-50)" fg="var(--amber-700)">+{c.xp} XP</StatPill>
          </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}/{c.goal} {c.unit}</span>
              </div>
              <ProgressBar value={have} max={c.goal} color={done ? 'var(--sage-500)' : 'var(--amber-500)'}/>
            </div>
          )}
          {c.tip && !done && (
            <div style={{ marginTop: 12, background: 'var(--sage-50)', borderRadius: 'var(--radius-s)', padding: '10px 12px', display: 'flex', gap: 8 }}>
              <div style={{ color: 'var(--sage-600)', flexShrink: 0, marginTop: 1 }}><Icon name="sparkles" size={16}/></div>
              <div><span style={{ font: '600 13px/1.45 var(--font-sans)', color: 'var(--sage-700)' }}>Pro tip. </span><span style={{ font: 'var(--type-body-s)', color: 'var(--fg-2)' }}>{c.tip}</span></div>
            </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(c.id)}>Mark complete</Button>}
      </div>
    </Card>
  );
}

function ChallengesTab({ completed, onComplete }) {
  const doneCount = CHALLENGES.filter(c => completed[c.id]).length;
  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 }}>Today’s challenges</h1>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', marginBottom: 8 }}>{doneCount}/3 done · +{doneCount * 50} points earned today</p>
      <div style={{ marginBottom: 18 }}><ProgressBar value={doneCount} max={3} color="var(--amber-500)"/></div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {CHALLENGES.map(c => <ChallengeCard key={c.id} c={c} done={!!completed[c.id]} onComplete={onComplete}/>)}
      </div>
      <div style={{ height: 24 }}/>
    </div>
  );
}

// ─── Care tab ───────────────────────────────────────────────────────────
function CareTab({ 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 style={{ marginBottom: 16 }}><WellnessCheckCard onSchedule={onSchedule}/></div>

      <div className="overline" style={{ marginBottom: 10 }}>Your past consultations</div>
      <Card padding={28} 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 consultations yet. Your first wellness check 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 ACHIEVEMENTS = [
  { id: 'spark', title: 'Three day spark', desc: '3-day streak', earned: true, tone: 'sage' },
  { id: 'fortnight', title: 'Fortnight champion', desc: '14-day streak', earned: false },
  { id: 'monthly', title: 'Monthly master', desc: '30-day streak', earned: false },
];

function ProfileTab({ completed }) {
  const d = DEMO;
  const doneCount = 6; // completed all-time
  const inProgress = 3;
  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={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 14 }}>
          <div style={{ font: 'var(--type-h1)', color: 'var(--fg-1)' }}>{d.name} Okonkwo</div>
          <StatPill bg="var(--amber-50)" fg="var(--amber-700)">Lv. {d.level}</StatPill>
        </div>
        <div style={{ font: 'var(--type-body)', color: 'var(--fg-3)', marginTop: 2 }}>Level {d.level} {d.levelName}</div>
      </div>

      {/* Level progress */}
      <Card padding={18} style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', font: 'var(--type-body-s)', color: 'var(--fg-3)', marginBottom: 10 }}>
          <span>{d.xp.toLocaleString()} / {d.xpForNext.toLocaleString()} XP</span><span>{d.ptsToNext} pts to Level {d.level + 1}</span>
        </div>
        <ProgressBar value={d.xp} max={d.xpForNext} color="var(--amber-500)"/>
      </Card>

      {/* Stats grid */}
      <div className="overline" style={{ marginBottom: 10 }}>Your stats</div>
      <Card padding={20} style={{ marginBottom: 16 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', rowGap: 20, columnGap: 12 }}>
          <StatTile value={d.xp.toLocaleString()} label="Total XP"/>
          <StatTile value={`${d.streak} days`} label="Current streak" accent="var(--amber-600)"/>
          <StatTile value={doneCount} label="Challenges completed" accent="var(--sage-600)"/>
          <StatTile value={inProgress} label="In progress"/>
        </div>
      </Card>

      {/* Achievements */}
      <div className="overline" style={{ marginBottom: 10 }}>Achievements</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {ACHIEVEMENTS.map(a => (
          <Card key={a.id} padding={16} style={{ display: 'flex', alignItems: 'center', gap: 14, opacity: a.earned ? 1 : 0.6 }}>
            <div style={{ width: 46, height: 46, borderRadius: '50%', background: a.earned ? 'var(--sage-50)' : 'var(--stone-100)', color: a.earned ? 'var(--sage-600)' : 'var(--stone-400)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name={a.earned ? 'award' : 'lock'} size={22}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ font: 'var(--type-h3)', color: a.earned ? 'var(--fg-1)' : 'var(--fg-3)' }}>{a.title}</div>
              <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>{a.earned ? 'Earned · ' + a.desc : 'Locked · ' + a.desc}</div>
            </div>
            {a.earned && <CheckCircle size={26} tone="sage"/>}
          </Card>
        ))}
      </div>
      <div style={{ height: 24 }}/>
    </div>
  );
}

window.MunaHealthySecondary = { ChallengesTab, CareTab, ProfileTab };