/* HighDashboard.jsx — Home tab for the high-risk tier.
   Recurring engagement loop = the active CARE PLAN (dominates the dashboard).
   No gamification. Persona motivations (daughter's wedding) woven in. */

const { DEMO_HIGH, CARE_TEAM } = window.MunaHighConfig;

// ── Care-plan timeline row (compact, used inside the hero) ──────────────
function PlanRow({ n, when, who, pill, pillTone = 'soft', onClick }) {
  const tones = {
    strong: { bg: 'var(--clay-700)', fg: '#fff' },
    soft: { bg: 'rgba(255,255,255,0.22)', fg: '#fff' },
    done: { bg: 'var(--sage-500)', fg: '#fff' },
  };
  const p = tones[pillTone];
  return (
    <div onClick={onClick} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', cursor: onClick ? 'pointer' : 'default' }}>
      <div style={{ width: 22, height: 22, borderRadius: '50%', background: 'rgba(255,255,255,0.22)', color: '#fff', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 12px/1 var(--font-sans)' }}>{n}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: 'var(--type-caption)', color: 'rgba(255,255,255,0.82)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase' }}>{when}</div>
        <div style={{ font: 'var(--type-body)', color: '#fff', marginTop: 2, textWrap: 'pretty' }}>{who}</div>
      </div>
      <div style={{ background: p.bg, color: p.fg, font: '600 11px/1.3 var(--font-sans)', padding: '4px 9px', borderRadius: 'var(--radius-pill)', whiteSpace: 'nowrap', flexShrink: 0, marginTop: 2 }}>{pill}</div>
    </div>
  );
}

function SubScoreH({ 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>
  );
}

function HighDashboard({ booking, onViewCarePlan, onJoinCall, onBookClinic }) {
  const d = DEMO_HIGH;
  return (
    <div style={{ padding: '0 var(--gutter-screen)' }}>
      {/* Greeting strip — care plan active, bell with unread badge, no XP */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 58, paddingBottom: 18 }}>
        <Avatar initials={d.initials} size={48} bg="var(--clay-500)"/>
        <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 }}>Your care plan is active</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, position: 'relative' }}>
          <Icon name="bell" size={20}/>
          <span style={{ position: 'absolute', top: 9, right: 10, width: 8, height: 8, borderRadius: '50%', background: 'var(--clay-500)', border: '1.5px solid #fff' }}/>
        </button>
      </div>

      {/* Health score summary — confirmed/high in clay (strongest signal) */}
      <Card padding={18} style={{ marginBottom: 14, display: 'flex', alignItems: 'center', gap: 18 }}>
        <ScoreRing score={d.score} variant="high" size={92} animate={false}/>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <SubScoreH custom={<ToothIcon size={18}/>} label="Oral health" value={`${d.oral} / 100`}/>
          <SubScoreH icon="gauge" label="Diabetes risk" value="Confirmed" valueColor="var(--clay-700)"/>
          <SubScoreH icon="heart" label="Cardiovascular" value="High" valueColor="var(--clay-700)"/>
        </div>
      </Card>

      {/* CARE PLAN HERO — the centerpiece (clay gradient) */}
      <div style={{ background: 'var(--band-high)', borderRadius: 'var(--radius-l)', padding: 22, marginBottom: 14, color: '#fff', boxShadow: 'var(--shadow-m)' }}>
        <div style={{ font: 'var(--type-display-s)', color: '#fff', fontFamily: 'var(--font-serif)', letterSpacing: 'var(--tracking-tight)' }}>Your care plan is ready.</div>
        <div style={{ font: 'var(--type-body)', color: 'rgba(255,255,255,0.9)', marginTop: 4, marginBottom: 18 }}>Today, tomorrow, and the next 7 days.</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <PlanRow n="1" when="Today · 2:30 PM" who="Physician consultation with Dr. Adebayo Taiwo" pill="Join in 2 hours" pillTone="strong"/>
          <PlanRow n="2" when="Tomorrow · 11:00 AM" who="Dentist consultation with Dr. Folake Adeyemi" pill="Set reminder"/>
          {booking
            ? <PlanRow n="3" when="Within 7 days" who={`In-person clinic visit · ${booking.dateShort}, ${booking.slot}`} pill="Booked" pillTone="done" onClick={onBookClinic}/>
            : <PlanRow n="3" when="Within 7 days" who="In-person clinic visit for periodontal treatment" pill="Book when ready" onClick={onBookClinic}/>}
        </div>
        <div style={{ marginTop: 20 }}>
          <button onClick={onViewCarePlan} style={{ width: '100%', height: 50, borderRadius: 'var(--radius-pill)', border: 0, cursor: 'pointer', background: '#fff', color: 'var(--clay-700)', font: 'var(--type-button)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
            View full care plan <Icon name="arrow-right" size={17}/>
          </button>
        </div>
      </div>

      {/* Today's priority action — join call (amber active state) */}
      <Card padding={20} style={{ marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--clay-500)' }}/>
          <div className="overline" style={{ color: 'var(--clay-700)' }}>Today’s priority</div>
        </div>
        <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)', marginBottom: 6 }}>Your video consultation starts in 2 hours.</div>
        <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 16 }}>
          Dr. Adebayo Taiwo will review your screening, discuss next steps, and prescribe initial treatment.
        </p>
        <Button full variant="primary" leftIcon="video" onClick={onJoinCall}>Join now</Button>
      </Card>

      {/* Family context — persona motivation */}
      <Card padding={18} style={{ marginBottom: 8, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
        <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="calendar" size={20}/>
        </div>
        <p style={{ flex: 1, font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty' }}>
          Your daughter’s wedding is in 6 months. Your care plan is built around getting you healthy in time.
        </p>
      </Card>

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

window.MunaHighDashboard = { HighDashboard };