/* PartnerLabs.jsx — credible, city-aware partner-lab list (replaces the
   "coming soon" placeholder across all three tiers). Persona's city selects
   the lab list. "Book bloodwork" + "Suggest a lab" open coming-soon sheets.
   Exports window.MunaPartnerLabs = { PartnerLabs }. */

const LAB_DATA = {
  Lagos: [
    { name: 'SynLab Nigeria — Victoria Island', dist: '1.4 km', hours: 'Open until 9 PM', badges: ['24hr results', 'Free pickup'], rating: '4.8', tel: '+2348000000001' },
    { name: 'Clina-Lancet Laboratories — Lekki Phase 1', dist: '3.2 km', hours: 'Open until 7 PM', badges: ['Same-day results', 'Walk-in welcome'], rating: '4.7', tel: '+2348000000002' },
    { name: 'PathCare Laboratories — Ikoyi', dist: '4.8 km', hours: 'Open until 8 PM', badges: ['48hr results', 'Home collection'], rating: '4.6', tel: '+2348000000003' },
  ],
  Abuja: [
    { name: 'Lifebridge Medical Diagnostic Centre — Wuse 2', dist: '0.8 km', hours: 'Open until 8 PM', badges: ['Same-day results', 'Walk-in welcome'], rating: '4.9', tel: '+2349000000001' },
    { name: 'MeCure Diagnostic Centre — Garki', dist: '2.1 km', hours: 'Open until 7 PM', badges: ['24hr results', 'Free pickup'], rating: '4.7', tel: '+2349000000002' },
    { name: 'Promise Medical Centre — Asokoro', dist: '3.6 km', hours: 'Open until 9 PM', badges: ['48hr results', 'Home collection'], rating: '4.6', tel: '+2349000000003' },
  ],
  Kano: [
    { name: 'Healing Stripes Diagnostic Centre — Nasarawa GRA', dist: '2.3 km', hours: 'Open until 6 PM', badges: ['24hr results', 'Free pickup'], rating: '4.7', tel: '+2347000000001' },
    { name: 'LASER Diagnostic Services — Sabon Gari', dist: '4.1 km', hours: 'Open until 7 PM', badges: ['Same-day results', 'Walk-in welcome'], rating: '4.6', tel: '+2347000000002' },
    { name: 'Kano Diagnostic Services — Bompai', dist: '1.9 km', hours: 'Open until 8 PM', badges: ['48hr results', 'Home collection'], rating: '4.8', tel: '+2347000000003' },
  ],
};

function LabSheet({ sheet, onClose }) {
  const open = !!sheet;
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 55, pointerEvents: open ? 'auto' : 'none' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'var(--bg-overlay)', opacity: open ? 1 : 0, transition: 'opacity var(--dur-slow) var(--ease-out)' }}/>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, background: '#fff', borderRadius: 'var(--radius-l) var(--radius-l) 0 0',
        padding: '10px 24px 38px', boxShadow: 'var(--shadow-l)', transform: open ? 'translateY(0)' : 'translateY(100%)', transition: 'transform var(--dur-slow) var(--ease-out)',
      }}>
        <div style={{ width: 38, height: 4, borderRadius: 2, background: 'var(--stone-300)', margin: '0 auto 20px' }}/>
        <div style={{ font: 'var(--type-display-s)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-snug)', marginBottom: 8 }}>{sheet ? sheet.title : ''}</div>
        <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 20 }}>{sheet ? sheet.body : ''}</p>
        {sheet && sheet.tel
          ? <a href={`tel:${sheet.tel}`} style={{ textDecoration: 'none' }}><Button full variant="primary" leftIcon="phone">Call lab</Button></a>
          : <Button full variant="secondary" onClick={onClose}>Close</Button>}
      </div>
    </div>
  );
}

function PartnerLabs({ city = 'Lagos', onBack }) {
  const [sheet, setSheet] = React.useState(null);
  const labs = LAB_DATA[city] || LAB_DATA.Lagos;
  return (
    <Screen>
      <HNav title="Partner labs" onBack={onBack}/>
      <div style={{ padding: '4px var(--gutter-screen) 40px' }}>
        <h1 style={{ font: 'var(--type-display-m)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', marginBottom: 8 }}>Partner labs near you.</h1>
        <p style={{ font: 'var(--type-body-l)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 22 }}>
          All accept Muna bloodwork referrals — your results come straight back to us.
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {labs.map(lab => (
            <Card key={lab.name} padding={18}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
                <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)', textWrap: 'pretty', flex: 1 }}>{lab.name}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 3, font: '600 13px/1 var(--font-sans)', color: 'var(--amber-700)', flexShrink: 0 }}>
                  <Icon name="star" size={13}/> {lab.rating}
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6, font: 'var(--type-body-s)', color: 'var(--fg-3)' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="map-pin" size={13}/> {lab.dist}</span>
                <span style={{ color: 'var(--stone-300)' }}>·</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="clock" size={13}/> {lab.hours}</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 12 }}>
                {lab.badges.map(b => (
                  <span key={b} style={{ font: 'var(--type-caption)', color: 'var(--fg-2)', background: 'var(--stone-100)', padding: '3px 9px', borderRadius: 'var(--radius-pill)' }}>{b}</span>
                ))}
              </div>
              <div style={{ marginTop: 14 }}>
                <Button full variant="secondary" onClick={() => setSheet({ title: 'Booking flow coming soon', body: 'In the full app you’ll book straight from here. For now, you can call the lab directly.', tel: lab.tel })}>Book bloodwork</Button>
              </div>
            </Card>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 18 }}>
          <button onClick={() => setSheet({ title: 'Suggest a lab', body: 'Tell us which lab you’d prefer and we’ll work on adding it to our partner network. Not built in the prototype yet.' })} style={{ background: 'none', border: 0, cursor: 'pointer', font: 'var(--type-button)', color: 'var(--fg-2)', padding: '6px 10px' }}>
            Don’t see your preferred lab?
          </button>
        </div>
      </div>
      <LabSheet sheet={sheet} onClose={() => setSheet(null)}/>
    </Screen>
  );
}

window.MunaPartnerLabs = { PartnerLabs };