/* HealthyResult.jsx — result + recommended-next-step + partner-lab placeholder.
   The result screen is a TEMPLATE INSTANCE driven by TIER config, so the
   moderate/high files reuse <ResultScreen tier={TIER_MODERATE}/> etc.
   Reads ScoreRing / ScoreBreakdownBars / Chip / Card / Button from the kit. */

// ── Tier config (healthy). Moderate/high files define their own object. ──
const TIER_HEALTHY = {
  key: 'healthy',
  band: 'var(--band-healthy)',
  overline: 'Great news',
  title: 'You’re healthy',
  score: 92,
  paragraph: 'Your screening shows no immediate health concerns. Your oral health is excellent and your overall health indicators are in the optimal range.',
  breakdown: { oral: 86, general: 90, lifestyle: 91 },
  cta: 'See your recommended next step',
};

// ─── ResultScreen — long-scroll single page. TEMPLATE: tier config drives all
//   copy + optional tier-conditional blocks (riskFactors, goodNews). ─────────
function ResultScreen({ tier = TIER_HEALTHY, onPrimary }) {
  return (
    <Screen>
      {/* Hero band — full bleed, tier gradient, locked tier→band token */}
      <div style={{ background: tier.band, padding: '78px var(--gutter-screen) 34px', borderRadius: '0 0 var(--radius-xl) var(--radius-xl)', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
        <div className="overline" style={{ color: '#fff', opacity: 0.92, marginBottom: 20 }}>{tier.overline}</div>
        <div style={{ background: '#fff', borderRadius: '50%', padding: 12, boxShadow: 'var(--shadow-m)' }}>
          <ScoreRing score={tier.score} variant={tier.key} size={176} animate={false}/>
        </div>
        <div style={{ marginTop: 18 }}><Chip variant={tier.key}>{OS_HRS.tiers[tier.key].label}</Chip></div>
        <h1 style={{ font: 'var(--type-display-l)', color: '#fff', letterSpacing: 'var(--tracking-tight)', marginTop: 18 }}>{tier.title}</h1>
        <p style={{ font: 'var(--type-body-l)', color: 'rgba(255,255,255,0.92)', marginTop: 12, textWrap: 'pretty' }}>{tier.paragraph}</p>
      </div>

      {/* Tier-conditional: Risk factors identified (moderate / high) */}
      {tier.riskFactors && (
        <div style={{ padding: '24px var(--gutter-screen) 0' }}>
          <Card padding={20}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 'var(--radius-s)', background: 'var(--clay-50)', color: 'var(--clay-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="alert-triangle" size={20}/>
              </div>
              <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>{tier.riskFactors.title || 'Risk factors identified'}</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {tier.riskFactors.items.map((it, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--clay-500)', flexShrink: 0, marginTop: 7 }}/>
                  <div style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty' }}>{it}</div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      )}

      {/* Tier-conditional: Good news / hope card (moderate / high) */}
      {tier.goodNews && (
        <div style={{ padding: '14px var(--gutter-screen) 0' }}>
          <div style={{ background: 'var(--sage-50)', borderRadius: 'var(--radius-m)', padding: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <div style={{ width: 36, height: 36, borderRadius: 'var(--radius-s)', background: '#fff', color: 'var(--sage-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="heart" size={20}/>
              </div>
              <div style={{ font: 'var(--type-h3)', color: 'var(--sage-700)' }}>{tier.goodNews.title}</div>
            </div>
            <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty' }}>{tier.goodNews.body}</p>
          </div>
        </div>
      )}

      {/* Breakdown card */}
      <div style={{ padding: '26px var(--gutter-screen) 0' }}>
        <div className="overline" style={{ marginBottom: 12 }}>Health score breakdown</div>
        <Card padding={20}>
          <ScoreBreakdownBars oral={tier.breakdown.oral} general={tier.breakdown.general} lifestyle={tier.breakdown.lifestyle} tier={tier.key}/>
        </Card>
      </div>

      {/* Single primary CTA (in-flow, glow — it is the single primary action) */}
      <div style={{ padding: '28px var(--gutter-screen) 0' }}>
        <Button full variant="primary" glow rightIcon="arrow-right" onClick={onPrimary}>{tier.cta}</Button>
      </div>

      {/* Trust footer */}
      <TrustFooter style={{ padding: '24px 0 40px' }}/>
    </Screen>
  );
}

// ─── Recommended next step (bloodwork follow-on) ────────────────────────
const WHY_REASONS = [
  { title: 'Establish your baseline', desc: 'A reference point for every future screening.' },
  { title: 'Catch issues early', desc: 'Blood markers shift before symptoms do.' },
  { title: 'Complete confirmation', desc: 'Pairs your photo screening with lab-grade data.' },
  { title: 'Track over time', desc: 'See how your habits move the numbers, year on year.' },
];
const TESTS = [
  { icon: 'test-tube', title: 'Blood glucose & HbA1c', purpose: 'Diabetes screening', tone: 'sage' },
  { icon: 'heart', title: 'Lipid panel', purpose: 'Cholesterol & heart health', tone: 'amber' },
  { icon: 'shield', title: 'Kidney & liver function', purpose: 'Overall organ health', tone: 'sage' },
  { icon: 'activity', title: 'Complete blood count', purpose: 'Immune system & blood cells', tone: 'amber' },
];
const TINTS = { sage: { bg: 'var(--sage-50)', fg: 'var(--sage-600)' }, amber: { bg: 'var(--amber-50)', fg: 'var(--amber-600)' } };

const NEXTSTEP_HEALTHY = {
  title: 'Let’s confirm your excellent health with baseline bloodwork.',
  paragraph: 'Your AI screening gave you excellent results, but blood work provides the complete picture — and establishes your health baseline for years to come.',
  cadence: 'Once yearly for healthy individuals like you. We’ll send you a reminder when it’s time for your next annual screening.',
};

function RecommendedNextStep({ onBack, onFindLab, onLater, copy = NEXTSTEP_HEALTHY }) {
  return (
    <Screen footer={
      <div style={{ padding: '12px var(--gutter-screen) 30px', display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center', background: 'linear-gradient(180deg, rgba(250,248,245,0) 0%, var(--bg) 26%)' }}>
        <Button full variant="primary" glow onClick={onFindLab}>Find a partner lab</Button>
        <button onClick={onLater} style={{ background: 'none', border: 0, cursor: 'pointer', font: 'var(--type-button)', color: 'var(--fg-2)', padding: '4px 8px' }}>{copy.laterLabel || 'I’ll do this later'}</button>
      </div>
    }>
      <HNav title="Recommended next step" onBack={onBack}/>
      <div style={{ padding: '8px var(--gutter-screen) 0' }}>
        {/* Header */}
        <h1 style={{ font: 'var(--type-display-m)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', textWrap: 'pretty', marginBottom: 12 }}>{copy.title}</h1>
        <p style={{ font: 'var(--type-body-l)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 24 }}>{copy.paragraph}</p>

        {/* Why blood work */}
        <Card padding={20} style={{ marginBottom: 16 }}>
          <SectionHeading>Why blood work?</SectionHeading>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {(copy.reasons || WHY_REASONS).map(r => (
              <div key={r.title} style={{ display: 'flex', gap: 12 }}>
                <CheckCircle size={26} tone="sage"/>
                <div style={{ flex: 1 }}>
                  <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>{r.title}</div>
                  <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 2, textWrap: 'pretty' }}>{r.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* What we'll test */}
        <Card padding={20} style={{ marginBottom: 16 }}>
          <SectionHeading>What we’ll test</SectionHeading>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {TESTS.map(t => {
              const c = TINTS[t.tone];
              return (
                <div key={t.title} style={{ display: 'flex', alignItems: 'center', gap: 12, background: c.bg, borderRadius: 'var(--radius-m)', padding: '13px 14px' }}>
                  <div style={{ width: 38, height: 38, borderRadius: 'var(--radius-s)', background: '#fff', color: c.fg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={t.icon} size={20}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ font: 'var(--type-label)', color: 'var(--fg-1)' }}>{t.title}</div>
                    <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>{t.purpose}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        {/* How often */}
        <Card padding={20} style={{ marginBottom: 16 }}>
          <SectionHeading>How often?</SectionHeading>
          <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty' }}>{copy.cadence}</p>
        </Card>

        {/* Partner labs */}
        <Card padding={20} style={{ marginBottom: 4 }}>
          <SectionHeading>Our partner labs</SectionHeading>
          <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 18 }}>
            We’ve partnered with trusted labs across the country for convenient, affordable blood work.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, textAlign: 'center' }}>
            {[['50+', 'Lab locations'], ['4.8★', 'Avg rating'], ['24hr', 'Fast results']].map(([v, l]) => (
              <div key={l} style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }}>
                <div style={{ font: '600 24px/1 var(--font-serif)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)' }}>{v}</div>
                <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)' }}>{l}</div>
              </div>
            ))}
          </div>
        </Card>

        <TrustFooter style={{ padding: '22px 0 150px' }}/>
      </div>
    </Screen>
  );
}

// ─── Partner-lab placeholder (scope: finder not built in prototype) ─────
function PartnerLabComingSoon({ onBack }) {
  return (
    <Screen>
      <HNav title="Partner labs" onBack={onBack}/>
      <div style={{ position: 'absolute', inset: 0, top: 96, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 var(--gutter-screen)', textAlign: 'center' }}>
        <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'var(--amber-50)', color: 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}>
          <Icon name="map-pin" size={36} strokeWidth={1.6}/>
        </div>
        <h2 style={{ font: 'var(--type-display-s)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-snug)', marginBottom: 10 }}>Partner lab finder coming soon</h2>
        <p style={{ font: 'var(--type-body-l)', color: 'var(--fg-2)', maxWidth: 290, textWrap: 'pretty' }}>
          We’re adding labs near you. You’ll be able to book and compare locations here.
        </p>
        <div style={{ marginTop: 28 }}>
          <Button variant="secondary" onClick={onBack}>Back</Button>
        </div>
      </div>
    </Screen>
  );
}

window.MunaHealthyResult = { ResultScreen, RecommendedNextStep, PartnerLabComingSoon, TIER_HEALTHY, NEXTSTEP_HEALTHY };