/* ==========================================================
   YAPPY. — e-Prescription document + simulated email
   Used by the Doctor panel (preview/issue) and the customer
   order page (view). Prototype: watermarked, not a valid Rx.
   ========================================================== */

function RxDocument({ rx, compact }) {
  const d = rx.doctor || {};
  const blank = (v, l = 'Not set') => v ? v : <span style={{ color: '#9E2A1B', fontStyle: 'italic' }}>{l}</span>;
  const cell = { padding: '8px 10px', borderBottom: '1px solid #d9cbb0', verticalAlign: 'top', textAlign: 'left' };
  return (
    <div className="rxdoc" style={{ position: 'relative', background: '#FFFDF8', color: '#0E2A17', borderRadius: 6, padding: compact ? 22 : 36, fontSize: 13.5, lineHeight: 1.45, boxShadow: '0 20px 50px rgba(14,42,23,.18)', overflow: 'hidden', fontFamily: 'var(--f-body)' }}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', pointerEvents: 'none' }}>
        <div style={{ transform: 'rotate(-28deg)', fontFamily: 'var(--f-head)', fontWeight: 700, fontSize: compact ? 34 : 52, letterSpacing: '.1em', color: 'rgba(245,82,26,.11)', whiteSpace: 'nowrap' }}>PROTOTYPE · NOT VALID</div>
      </div>
      {/* header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 20, alignItems: 'flex-start', borderBottom: '3px solid #0E2A17', paddingBottom: 14 }}>
        <div>
          <div style={{ fontFamily: 'var(--f-head)', fontWeight: 700, fontSize: 19, textTransform: 'uppercase' }}>{blank(d.name ? 'Dr. ' + d.name : '', 'Doctor name not set')}</div>
          <div>{blank(d.qual, 'Qualification not set')}</div>
          <div style={{ fontSize: 12.5 }}>Reg. No: {blank(d.reg)} · {blank(d.council, 'Council not set')}</div>
        </div>
        <div style={{ textAlign: 'right', fontSize: 12.5 }}>
          <img src="assets/logo-forest.png" alt="YAPPY." style={{ width: 92, marginLeft: 'auto', marginBottom: 6 }} />
          <div>{d.clinic || 'Clinic TBC'}</div>
          <div>{d.phone || 'Contact TBC'}</div>
        </div>
      </div>
      {/* meta */}
      <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, padding: '10px 0', fontSize: 12.5 }}>
        <span><b>Rx ID:</b> {rx.id}</span><span><b>Date:</b> {rx.date}</span><span><b>Consultation:</b> Tele-consultation ({rx.mode || 'Video'})</span>
      </div>
      {/* patient */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(150px,1fr))', gap: '6px 18px', background: '#F3E3C7', borderRadius: 6, padding: '12px 14px' }}>
        <span><b>Patient:</b> {rx.patient.name}</span>
        <span><b>Age / Sex:</b> {rx.patient.age || '—'} / {rx.patient.sex || '—'}</span>
        <span><b>Mobile:</b> {rx.patient.phone}</span>
        <span style={{ overflowWrap: 'anywhere' }}><b>Email:</b> {rx.patient.email || '—'}</span>
      </div>
      {/* clinical */}
      <div style={{ display: 'grid', gap: 8, padding: '14px 0' }}>
        {rx.complaints && <div><b>Chief complaints:</b> {rx.complaints}</div>}
        {rx.history && <div><b>Relevant history / allergies:</b> {rx.history}</div>}
        {rx.diagnosis && <div><b>Provisional diagnosis:</b> {rx.diagnosis}</div>}
      </div>
      {/* Rx table */}
      <div style={{ fontFamily: 'var(--f-display)', fontWeight: 900, fontSize: 30, lineHeight: 1 }}>℞</div>
      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 6, minWidth: 460 }}>
          <thead><tr style={{ background: '#0E2A17', color: '#F3E3C7' }}>{['#', 'Product', 'Instructions', 'Duration', 'Qty'].map((h) => <th key={h} style={{ ...cell, fontFamily: 'var(--f-head)', textTransform: 'uppercase', fontSize: 11, letterSpacing: '.06em', borderBottom: 0 }}>{h}</th>)}</tr></thead>
          <tbody>
            {rx.items.map((it, i) => (
              <tr key={i}>
                <td style={cell}>{i + 1}</td>
                <td style={cell}><b>YAPPY. {PRODUCTS[it.sku].name}.</b><br /><span style={{ fontSize: 12 }}>{PACK.descriptor} · {PRODUCTS[it.sku].pct} variant</span></td>
                <td style={cell}>{it.instructions || '—'}</td>
                <td style={cell}>{it.duration || '—'}</td>
                <td style={cell}>{it.qty} pouch{it.qty > 1 ? 'es' : ''}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {rx.advice && <div style={{ marginTop: 12 }}><b>Advice:</b> {rx.advice}</div>}
      {rx.followup && <div style={{ marginTop: 4 }}><b>Follow-up:</b> {rx.followup}</div>}
      {/* signature */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20, marginTop: 26, flexWrap: 'wrap' }}>
        <div style={{ fontSize: 11, maxWidth: 340, opacity: .75 }}>Issued following a tele-consultation. Valid for the patient named above only. Final format to be aligned with applicable telemedicine practice guidelines.</div>
        <div style={{ textAlign: 'right', minWidth: 200 }}>
          <div style={{ height: 38, borderBottom: '1px solid #0E2A17', display: 'grid', placeItems: 'center', fontSize: 11, color: '#6F8F63', fontStyle: 'italic' }}>{rx.issued ? 'Digital signature — integration TBC' : 'Signed on issue'}</div>
          <div style={{ fontSize: 12, marginTop: 4 }}>{d.name ? 'Dr. ' + d.name : 'Doctor'}{d.reg ? ' · Reg. ' + d.reg : ''}</div>
        </div>
      </div>
    </div>
  );
}

function EmailPreview({ rx, onClose }) {
  return (
    <div className="scrim" style={{ display: 'grid', placeItems: 'center', padding: 16, zIndex: 120 }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} role="dialog" aria-label="Email preview" style={{ background: '#fff', color: '#0E2A17', width: 'min(720px,100%)', maxHeight: '92vh', overflow: 'auto', borderRadius: 18, boxShadow: '0 30px 80px rgba(0,0,0,.35)' }}>
        <div style={{ padding: '14px 20px', borderBottom: '1px solid #eee', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
          <span className="label">Email preview · simulated — not sent</span>
          <button onClick={onClose} aria-label="Close" style={{ width: 40, height: 40, display: 'grid', placeItems: 'center' }}><Icon name="close" /></button>
        </div>
        <div style={{ padding: '14px 20px', fontSize: 14, borderBottom: '1px solid #eee', display: 'grid', gap: 4 }}>
          <div><b>From:</b> Yappy Care &lt;care@yappy.demo&gt;</div>
          <div><b>To:</b> {rx.patient.name} &lt;{rx.patient.email || 'no email'}&gt;</div>
          <div><b>Subject:</b> Your Yappy prescription · {rx.id}</div>
          <div><b>Attachment:</b> 📎 {rx.id}.pdf</div>
        </div>
        <div style={{ background: '#F3E3C7', padding: 24 }}>
          <div style={{ background: '#0E2A17', color: '#F3E3C7', borderRadius: 14, padding: '22px 24px' }}>
            <img src="assets/logo-cream.png" alt="YAPPY." style={{ width: 110, marginBottom: 16 }} />
            <div className="h3">Hi {rx.patient.name.split(' ')[0]},</div>
            <p style={{ marginTop: 10, fontSize: 15, opacity: .9 }}>Thanks for your consultation. Your prescription from {rx.doctor?.name ? 'Dr. ' + rx.doctor.name : 'our doctor'} is attached{rx.orderRef ? <> and has been added to order <b>{rx.orderRef}</b> — we’ll start preparing it now</> : ''}.</p>
            <div className="line" style={{ marginTop: 18, fontSize: 11 }}>The world is loud. <span className="dot">Find your quiet.</span></div>
          </div>
          <div style={{ marginTop: 18 }}><RxDocument rx={rx} compact /></div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RxDocument, EmailPreview });