// Screen: Patient Profile (reached only from patient-name links)
function PatientProfile({ patientId, nav }) {
  const p = PATIENTS[patientId] || PATIENTS.petersen;
  const medChip = (status) => {
    if (status === 'due') return <span className="badge warn">Due now</span>;
    if (status === 'expired') return <span className="badge bad">Expired — renewal sent</span>;
    return <span className="badge ok">Active</span>;
  };
  return (
    <div className="content" data-screen-label="Patient Profile">
      <div>
        <button className="backlink" onClick={() => nav.go('queue')}>← Back to Fill Queue</button>
      </div>

      {/* Identity */}
      <div className="card pt-head">
        <h2>{p.name}</h2>
        <div className="pt-meta">
          <span>{p.dob}</span>
          <span>{p.phone}</span>
          <span>Prefers {p.store}</span>
        </div>
        <div className="pt-badges">
          {p.vet ? <span className="badge neutral">Veterinary · Chuckanut Valley Vet</span> : null}
          {p.sync ? <span className="badge ok">Med sync · anchor {p.syncDate}</span> : null}
          {p.ar > 0
            ? <span className="badge bad">A/R balance ${p.ar.toFixed(2)}</span>
            : <span className="badge neutral">A/R $0.00</span>}
        </div>
      </div>

      {p.allergies.length > 0 ? (
        <div className="allergy-strip">
          <b>Allergies:</b>
          <span>{p.allergies.join(' · ')}</span>
        </div>
      ) : null}

      <div className="pt-grid">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {/* Active meds */}
          <div>
            <SectionHead title={'Active medications · ' + p.meds.length}></SectionHead>
            <div className="card" style={{ marginTop: 10, overflow: 'hidden' }}>
              <table className="data">
                <thead>
                  <tr><th>Medication</th><th>Sig</th><th className="num">Refills</th><th>Last filled</th><th>Next due</th><th>Status</th></tr>
                </thead>
                <tbody>
                  {p.meds.map((m, i) => (
                    <tr key={i}>
                      <td style={{ fontWeight: 600 }}>{m.drug}</td>
                      <td style={{ fontSize: 12.5, color: 'var(--ink-2)' }}>{m.sig}</td>
                      <td className="num">{m.refills}</td>
                      <td className="mono">{m.last}</td>
                      <td className="mono">{m.due}</td>
                      <td>{medChip(m.status)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Recent fills */}
          <div>
            <SectionHead title={'Recent fills · last ' + p.fills.length}></SectionHead>
            <div className="card" style={{ marginTop: 10, overflow: 'hidden' }}>
              <table className="data">
                <thead>
                  <tr><th>Date</th><th>Fill</th><th>Store</th><th className="num">Copay</th><th>Status</th></tr>
                </thead>
                <tbody>
                  {p.fills.map((f, i) => (
                    <tr key={i}>
                      <td className="mono">{f[0]}</td>
                      <td style={{ fontWeight: 600 }}>{f[1]}</td>
                      <td><span className="storetag">{f[2]}</span></td>
                      <td className="num mono">{f[3]}</td>
                      <td style={{ fontSize: 12.5, color: 'var(--ink-2)' }}>{f[4]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        {/* Notes */}
        <div>
          <SectionHead title="Notes"></SectionHead>
          <div className="card notes" style={{ marginTop: 10 }}>
            {p.notes.map((n, i) => (
              <div className="n-row" key={i}>
                <div className="n-meta">{n.date} · {n.by}</div>
                <div>{n.text}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PatientProfile });