/* Prescription.jsx — prescription tracking detail (high-risk tier).
   Core component: the vertical status timeline. Also pharmacy info, what-to-
   expect, and a reminder setup card. Reached from Care or the consult summary. */

const RX_STATES = [
  { label: 'Prescribed', when: 'Today, 2:45 PM', state: 'done' },
  { label: 'Sent to pharmacy', when: 'Today, 2:46 PM', state: 'done' },
  { label: 'Being prepared', when: 'In progress', state: 'active' },
  { label: 'Ready for pickup', when: 'Pending', state: 'pending' },
  { label: 'Picked up', when: 'Pending', state: 'pending' },
];

function RxStep({ s, last }) {
  const ring = s.state === 'done' ? 'var(--sage-500)' : s.state === 'active' ? 'var(--amber-500)' : 'var(--stone-200)';
  return (
    <div style={{ display: 'flex', gap: 14 }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
        <div style={{ width: 28, height: 28, borderRadius: '50%', background: s.state === 'pending' ? '#fff' : ring, border: s.state === 'pending' ? '2px solid var(--stone-300)' : '0', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {s.state === 'done' && <Icon name="check" size={15} strokeWidth={3}/>}
          {s.state === 'active' && <span style={{ display: 'block', width: 16, height: 16, borderRadius: '50%', border: '2px solid rgba(255,255,255,0.55)', borderTopColor: '#fff', animation: 'mh-spin 0.9s linear infinite' }}/>}
          {s.state === 'pending' && <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--stone-300)' }}/>}
        </div>
        {!last && <div style={{ width: 2, flex: 1, minHeight: 26, background: s.state === 'done' ? 'var(--sage-300)' : 'var(--stone-200)', marginTop: 4, marginBottom: 4 }}/>}
      </div>
      <div style={{ flex: 1, paddingBottom: last ? 0 : 14 }}>
        <div style={{ font: 'var(--type-h3)', color: s.state === 'pending' ? 'var(--fg-3)' : 'var(--fg-1)' }}>{s.label}</div>
        <div style={{ font: 'var(--type-body-s)', color: s.state === 'active' ? 'var(--amber-700)' : 'var(--fg-3)', marginTop: 1 }}>{s.when}</div>
      </div>
    </div>
  );
}

function Prescription({ onBack }) {
  const [reminderSet, setReminderSet] = React.useState(false);
  return (
    <Screen>
      <HNav title="Prescription" onBack={onBack}/>
      <div style={{ padding: '4px var(--gutter-screen) 40px' }}>
        {/* Header card */}
        <Card padding={20} style={{ marginBottom: 16 }}>
          <div style={{ font: '600 28px/1.1 var(--font-serif)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)' }}>Metformin 500mg</div>
          <div style={{ font: 'var(--type-body)', color: 'var(--fg-2)', marginTop: 4 }}>Twice daily, with food.</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 8 }}>Prescribed by Dr. Adebayo Taiwo · Today</div>
        </Card>

        {/* Status timeline */}
        <div className="overline" style={{ marginBottom: 12 }}>Status</div>
        <Card padding={20} style={{ marginBottom: 16 }}>
          {RX_STATES.map((s, i) => <RxStep key={s.label} s={s} last={i === RX_STATES.length - 1}/>)}
        </Card>

        {/* Pharmacy info */}
        <div className="overline" style={{ marginBottom: 12 }}>Pharmacy</div>
        <Card padding={18} style={{ marginBottom: 16 }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <div style={{ width: 40, height: 40, borderRadius: 'var(--radius-s)', background: 'var(--sage-50)', color: 'var(--sage-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)' }}>MedPlus — Kano branch</div>
              <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 2 }}>14 Murtala Mohammed Way · 1.8 km away</div>
            </div>
          </div>
          <div style={{ marginTop: 14 }}>
            <Button full variant="secondary" leftIcon="phone">Call pharmacy</Button>
          </div>
        </Card>

        {/* What to expect */}
        <Card padding={18} style={{ marginBottom: 16, display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <div style={{ color: 'var(--amber-600)', flexShrink: 0, marginTop: 1 }}><Icon name="clock" size={20}/></div>
          <p style={{ flex: 1, font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty' }}>
            Most prescriptions are ready within 2 hours. We’ll notify you when yours is ready to collect.
          </p>
        </Card>

        {/* Reminder setup */}
        <div className="overline" style={{ marginBottom: 12 }}>First dose reminder</div>
        <Card padding={18}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div style={{ font: 'var(--type-body)', color: 'var(--fg-2)' }}>Set a reminder for your first dose.</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--stone-50)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-m)', padding: '12px 16px', marginBottom: 14 }}>
            <Icon name="clock" size={20} color="var(--fg-3)"/>
            <div style={{ flex: 1, font: 'var(--type-h3)', color: 'var(--fg-1)', fontVariantNumeric: 'tabular-nums' }}>8:00 AM</div>
            <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)' }}>Daily</div>
          </div>
          <Button full variant={reminderSet ? 'secondary' : 'primary'} leftIcon={reminderSet ? 'check' : 'bell'} onClick={() => setReminderSet(true)} style={reminderSet ? { color: 'var(--sage-700)', borderColor: 'var(--sage-300)' } : {}}>
            {reminderSet ? 'Reminder set' : 'Set reminder'}
          </Button>
        </Card>
      </div>
    </Screen>
  );
}

window.MunaPrescription = { Prescription };