/* global React, KitChrome */
const { useState } = React;
const { StatusStrip, Nav, Footer, Eyebrow, MasterEquationArtifact, CrossLinkStrip, StatGrid } = KitChrome;
const PharmacySummary = window.PharmacySummary;

const RX = [];

Object.assign(window, { RX });

function App() {
  const [tab, setTab] = useState("My Meds");
  const [openRx, setOpenRx] = useState(null);

  const links = [];

  return (
    <div className="k-app">
      <StatusStrip right={<>
        <span>e-prescribing network · NCPDP-certified</span><span>·</span>
        <span>340B eligible</span><span>·</span>
        <span style={{ color: "var(--accent-guardian)" }}>● Pharmacist on duty</span>
      </>} />
      <Nav currentId="pharmacy" brand="Pharmacy" sub="pharmacy.conceptualhealth.com"
           links={links}
           tab={openRx ? "My Meds" : tab}
           setTab={(t) => { setOpenRx(null); setTab(t); }}
           primary="Order refills" secondary="Talk to pharmacist" />
      <main className="k-main" data-screen-label={`Pharmacy · ${openRx ? openRx.drug : tab}`}>

        {openRx && <window.RxDetail rx={openRx} onClose={() => setOpenRx(null)} />}

        {!openRx && tab === "My Meds" && (
          <>
            {PharmacySummary && <PharmacySummary />}
            <section className="k-hero" style={{ borderBottom: "1px solid var(--border-1-dark)" }}>
              <div>
                <Eyebrow axis="RX">Adherence-First Pharmacy</Eyebrow>
                <h1>Take it. <em>Earn it.</em></h1>
                <p>Every dose you take on time mints HCR (HEALTHCOIN™) on the Therapeutic Adherence axis. Skip a dose, the orb decays. A pharmacy that pays you to follow the plan that's keeping you alive.</p>
                <div className="k-hero-actions">
                  <button className="k-btn k-btn-primary">Order refills</button>
                  <button className="k-btn k-btn-ghost">Transfer prescriptions</button>
                </div>
              </div>
              <StatGrid paths={["pharmacy.activeRx", "pharmacy.adherence", "pharmacy.hcrEarned", "pharmacy.nextRefill"]} />
            </section>

            <section className="k-section-head">
              <div><Eyebrow axis="RX">Active Medications</Eyebrow><h2>The molecules keeping you here.</h2></div>
              <button className="k-btn k-btn-ghost">+ Add by name or photo</button>
            </section>

            <table className="k-table">
              <thead><tr>
                <th>Medication</th><th>Sig</th><th>Supply</th><th className="num">Refills</th><th>Adherence</th><th>Status</th><th></th>
              </tr></thead>
              <tbody>
                {RX.map((r, i) => (
                  <tr key={r.id} style={{ cursor: "pointer" }} onClick={() => setOpenRx(r)}>
                    <td>
                      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                        <div style={{ width: 32, height: 32, borderRadius: 8, background: "linear-gradient(135deg, #E5484D, #A8262A)", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontSize: 13, fontWeight: 600, color: "#fff" }}>Rx</div>
                        <div>
                          <div style={{ fontFamily: "var(--font-sans)", fontWeight: 500 }}>{r.drug}</div>
                          <div style={{ fontSize: 11, color: "var(--fg-3)" }}>NDC 0093-1029-01 · Generic for {r.brand}</div>
                        </div>
                      </div>
                    </td>
                    <td style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-2)" }}>{r.sig}</td>
                    <td style={{ color: "var(--fg-2)" }}>{r.supply}</td>
                    <td className="num">{r.refills}</td>
                    <td>
                      {r.adherence !== null ? (
                        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                          <div style={{ width: 70, height: 4, background: "var(--bg-steel)", borderRadius: 2, overflow: "hidden" }}>
                            <div style={{ width: r.adherence + "%", height: "100%", background: r.adherence >= 90 ? "var(--accent-guardian)" : r.adherence >= 80 ? "var(--accent-halo)" : "var(--accent-vital)" }}></div>
                          </div>
                          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>{r.adherence}%</span>
                        </div>
                      ) : <span style={{ color: "var(--fg-3)" }}>—</span>}
                    </td>
                    <td>
                      <span className={"k-pill " + (r.status === "Active" ? "green" : r.status === "New" ? "amber" : r.status === "Refill" ? "amber" : "red")}>{r.status}</span>
                    </td>
                    <td className="num"><button className="k-btn k-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }} onClick={(e) => { e.stopPropagation(); setOpenRx(r); }}>Open →</button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}

        {!openRx && tab === "Refills" && <window.RefillsView />}
        {!openRx && tab === "Mail Order" && <window.MailOrderView />}
        {!openRx && tab === "Transfer Rx" && <window.TransferView />}
        {!openRx && tab === "Adherence" && <window.AdherenceView />}
      </main>
      <CrossLinkStrip currentId="pharmacy" ids={["clinical","datavault","exchange"]} />
      <MasterEquationArtifact />
      <Footer name="Pharmacy" currentId="pharmacy" />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);