/* WellnessBooking.jsx — joint wellness-check booking + confirmation.
   Two clinicians shown as the care team; user picks one of 3 distinct slots
   (RadioOption from the kit). Confirm is disabled until a slot is chosen.
   Reads HNav / Screen / Avatar / Button / RadioOption. */

const CLINICIANS = [
  { initials: 'AT', name: 'Dr. Adebayo Taiwo', role: 'Physician', detail: 'Internal Medicine Specialist · 12 years', bg: 'var(--amber-500)' },
  { initials: 'FA', name: 'Dr. Folake Adeyemi', role: 'Dentist', detail: 'General & Preventive Dentistry · 10 years', bg: 'var(--stone-600)' },
];
// 3 DISTINCT slots (the Figma had three identical — fixed here).
const SLOTS = [
  { id: 's1', label: 'Tomorrow, 30 May', sub: '10:00 AM' },
  { id: 's2', label: 'Tomorrow, 30 May', sub: '2:30 PM' },
  { id: 's3', label: 'Saturday, 31 May', sub: '9:00 AM' },
];

function ClinicianCard({ c }) {
  return (
    <Card padding={16} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <Avatar initials={c.initials} size={48} bg={c.bg}/>
      <div style={{ flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>{c.name}</div>
        </div>
        <div style={{ font: 'var(--type-label)', color: 'var(--amber-700)', marginTop: 2 }}>{c.role}</div>
        <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>{c.detail}</div>
      </div>
    </Card>
  );
}

function WellnessBooking({ onBack, onConfirmed, title = 'Wellness check', heading = 'Your care team' }) {
  const [slot, setSlot] = React.useState(null);
  return (
    <Screen footer={
      <div style={{ padding: '12px var(--gutter-screen) 30px', background: 'linear-gradient(180deg, rgba(250,248,245,0) 0%, var(--bg) 26%)' }}>
        <Button full variant="primary" glow={!!slot} disabled={!slot} onClick={() => onConfirmed(slot)}>Confirm booking</Button>
      </div>
    }>
      <HNav title={title} onBack={onBack}/>
      <div style={{ padding: '8px var(--gutter-screen) 0' }}>
        <h1 style={{ font: 'var(--type-display-m)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', marginBottom: 8 }}>{heading}</h1>
        <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 16 }}>
          One 15-minute call, both clinicians together — to review your results and tailor your plan.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 26 }}>
          {CLINICIANS.map(c => <ClinicianCard key={c.initials} c={c}/>)}
        </div>

        <div className="overline" style={{ marginBottom: 12 }}>Select your preferred time</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingBottom: 130 }}>
          {SLOTS.map(s => (
            <RadioOption key={s.id} label={s.label} sub={s.sub} selected={slot === s.id} onClick={() => setSlot(s.id)}/>
          ))}
        </div>
      </div>
    </Screen>
  );
}

function BookingConfirmed({ slotId, onDone }) {
  const slot = SLOTS.find(s => s.id === slotId) || SLOTS[0];
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => { const t = setTimeout(() => setShown(true), 30); return () => clearTimeout(t); }, []);
  return (
    <Screen>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 var(--gutter-screen)', textAlign: 'center' }}>
        <div style={{ width: 92, height: 92, borderRadius: '50%', background: 'var(--sage-50)', color: 'var(--sage-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 26, transform: shown ? 'scale(1)' : 'scale(0.9)', opacity: shown ? 1 : 0, transition: 'transform var(--dur-reveal) var(--ease-out), opacity var(--dur-reveal) var(--ease-out)' }}>
          <Icon name="check" size={42} strokeWidth={2.4}/>
        </div>
        <h1 style={{ font: 'var(--type-display-m)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', marginBottom: 12 }}>Booked.</h1>
        <p style={{ font: 'var(--type-body-l)', color: 'var(--fg-2)', maxWidth: 300, textWrap: 'pretty' }}>
          We’ll send a reminder 15 minutes before your call — {slot.label.replace('Tomorrow, ', '')}, {slot.sub}.
        </p>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '12px var(--gutter-screen) 40px' }}>
        <Button full variant="primary" onClick={onDone}>Back to dashboard</Button>
      </div>
    </Screen>
  );
}

window.MunaWellnessBooking = { WellnessBooking, BookingConfirmed };