/* HighCare.jsx — the Care tab (high-risk centerpiece) + shared bits.
   Dense but ordered: NOW / TOMORROW consults → care timeline → prescriptions
   (empty until the consult, then active) → partner labs.
   `prescribed` (lifted to controller) flips the prescriptions section. */

const { CARE_TEAM } = window.MunaHighConfig;

// ── Section overline header ─────────────────────────────────────────────
function SectionOverline({ children }) {
  return <div className="overline" style={{ marginBottom: 12, marginTop: 4 }}>{children}</div>;
}

// ── Consultation card — active (clay CTA) or scheduled (stone) ──────────
function ConsultCard({ clinician, title, time, focus, active, onJoin, onRemind }) {
  return (
    <Card padding={20}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
        <Avatar initials={clinician.initials} size={44} bg={clinician.bg}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)', textWrap: 'pretty' }}>{title}</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 2 }}>{time}</div>
        </div>
      </div>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 16 }}>{focus}</p>
      {active ? (
        <React.Fragment>
          <Button full variant="primary" leftIcon="video" onClick={onJoin}>Join call now</Button>
          <div style={{ textAlign: 'center', marginTop: 8 }}>
            <button onClick={onRemind} style={{ background: 'none', border: 0, cursor: 'pointer', font: 'var(--type-button)', color: 'var(--fg-3)', padding: '4px 8px' }}>Set a reminder</button>
          </div>
        </React.Fragment>
      ) : (
        <Button full variant="secondary" leftIcon="bell" onClick={onRemind}>Set reminder</Button>
      )}
    </Card>
  );
}

// ── Timeline step ────────────────────────────────────────────────────────
function TimelineStep({ when, label, sub, dotTone, done, last, onClick }) {
  const dot = dotTone === 'clay' ? 'var(--clay-500)' : 'var(--stone-300)';
  return (
    <div onClick={onClick} style={{ display: 'flex', gap: 12, cursor: onClick ? 'pointer' : 'default' }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
        {done
          ? <div style={{ width: 14, height: 14, borderRadius: '50%', background: 'var(--sage-500)', color: '#fff', marginTop: 3, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={9} strokeWidth={3.5}/></div>
          : <div style={{ width: 14, height: 14, borderRadius: '50%', background: dot, marginTop: 3 }}/>}
        {!last && <div style={{ width: 2, flex: 1, background: 'var(--stone-200)', marginTop: 4, marginBottom: 4, minHeight: 24 }}/>}
      </div>
      <div style={{ flex: 1, paddingBottom: last ? 0 : 18 }}>
        <div style={{ font: 'var(--type-caption)', color: 'var(--fg-3)', letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase' }}>{when}</div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 2 }}>
          <div style={{ font: 'var(--type-body)', color: 'var(--fg-1)', textWrap: 'pretty' }}>{label}</div>
          {onClick && <Icon name="chevron-right" size={18} color="var(--fg-4)"/>}
        </div>
        {sub && <div style={{ font: 'var(--type-body-s)', color: 'var(--sage-700)', marginTop: 3, textWrap: 'pretty' }}>{sub}</div>}
      </div>
    </div>
  );
}

function HighCare({ prescribed, booking, onJoin, onBookClinic, onFindLab, onTrackRx, onRemind }) {
  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>

      <SectionOverline>Now</SectionOverline>
      <div style={{ marginBottom: 18 }}>
        <ConsultCard clinician={CARE_TEAM.physician} active
          title="Physician consultation with Dr. Adebayo Taiwo"
          time="Today · 2:30 PM – 3:00 PM · 30 minutes"
          focus="Focus: review results, discuss systemic health risks, prescribe initial treatment."
          onJoin={onJoin} onRemind={onRemind}/>
      </div>

      <SectionOverline>Tomorrow</SectionOverline>
      <div style={{ marginBottom: 18 }}>
        <ConsultCard clinician={CARE_TEAM.dentist}
          title="Dentist consultation with Dr. Folake Adeyemi"
          time="Tomorrow · 11:00 AM – 11:30 AM · 30 minutes"
          focus="Focus: assess gum disease, discuss treatment options, coordinate with your physician’s plan."
          onRemind={onRemind}/>
      </div>

      <SectionOverline>Your care timeline</SectionOverline>
      <Card padding={20} style={{ marginBottom: 18 }}>
        <TimelineStep when="Today" label="Physician consultation" dotTone="clay"/>
        <TimelineStep when="Tomorrow" label="Dentist consultation" dotTone="clay"/>
        {booking
          ? <TimelineStep when="Within 7 days" label="Partner clinic visit" sub={`${booking.clinicName} · ${booking.dateShort}, ${booking.slot}`} done last onClick={onBookClinic}/>
          : <TimelineStep when="Within 7 days" label="Partner clinic visit — book now" dotTone="stone" last onClick={onBookClinic}/>}
      </Card>

      <SectionOverline>Prescriptions</SectionOverline>
      {prescribed ? (
        <Card padding={0} onClick={onTrackRx} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', marginBottom: 18 }}>
          <div style={{ width: 42, height: 42, borderRadius: 'var(--radius-s)', background: 'var(--amber-50)', color: 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="pill" size={20}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Metformin 500mg</div>
            <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>Twice daily, with food</div>
            <div style={{ marginTop: 6 }}><StatPill bg="var(--amber-50)" fg="var(--amber-700)">Awaiting pickup</StatPill></div>
          </div>
          <Icon name="chevron-right" size={20} color="var(--fg-4)"/>
        </Card>
      ) : (
        <Card padding={22} style={{ marginBottom: 18, 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="pill" size={24}/></div>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-2)' }}>You don’t have any prescriptions yet.</div>
          <p style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', maxWidth: 280, textWrap: 'pretty' }}>
            Dr. Adebayo will prescribe what you need during today’s consultation. You’ll be able to track it here once it’s sent to your pharmacy.
          </p>
        </Card>
      )}

      <SectionOverline>Partner labs</SectionOverline>
      <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 bloodwork near you</div>
        </div>
        <Icon name="chevron-right" size={20} color="var(--fg-4)"/>
      </Card>

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

window.MunaHighCare = { HighCare };