/* global React, Icon, Pill, PROVIDERS, PAYERS, STATUS */
// Varick Health — Portal kit: Roster + Provider detail
const { useState } = React;

function enrolledCount(p) { return p.payers.filter((x) => x.status === "enrolled" || x.status === "verified").length; }

function PayerMeter({ p }) {
  const n = enrolledCount(p), t = p.payers.length;
  return (
    <div className="pt-meter">
      <div className="pt-meter-bar"><span style={{ width: (n / t * 100) + "%" }} /></div>
      <span className="pt-meter-l">{n}/{t}</span>
    </div>
  );
}

const FILTERS = ["All", "Therapy", "Psychiatry", "Clinic"];

function RosterTable({ onOpen }) {
  const [q, setQ] = useState("");
  const [f, setF] = useState("All");
  const rows = PROVIDERS.filter((p) =>
    (f === "All" || p.icp === f) &&
    (q === "" || (p.name + p.cred + p.npi).toLowerCase().includes(q.toLowerCase())));
  return (
    <div className="pt-view">
      <div className="pt-view-head">
        <div>
          <h1 className="pt-view-title">Provider roster</h1>
          <p className="pt-view-sub">{PROVIDERS.length} providers · 7 payers tracked</p>
        </div>
        <div className="pt-view-actions">
          <button className="vh-btn vh-btn--primary"><Icon name="user-plus" size={16} />Add provider</button>
        </div>
      </div>
      <div className="pt-toolbar">
        <div className="pt-search">
          <Icon name="search" size={16} color="var(--vh-text-faint)" />
          <input placeholder="Search by name, credential, or NPI…" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <div className="pt-filters">
          {FILTERS.map((x) => <button key={x} className={"pt-fchip" + (x === f ? " is-active" : "")} onClick={() => setF(x)}>{x}</button>)}
        </div>
      </div>
      <div className="pt-table vh-card">
        <div className="pt-tr pt-th">
          <span>Provider</span><span>NPI</span><span>Payers enrolled</span><span>Status</span><span></span>
        </div>
        {rows.map((p) => (
          <button className="pt-tr pt-row" key={p.id} onClick={() => onOpen(p.id)}>
            <span className="pt-prov">
              <span className="pt-avatar">{p.name.split(" ").map((s) => s[0]).join("")}</span>
              <span><span className="pt-prov-n">{p.name}, {p.cred}</span><span className="pt-prov-s">{p.icp} · {p.site}</span></span>
            </span>
            <span className="pt-mono">{p.npi}</span>
            <span><PayerMeter p={p} /></span>
            <span><Pill s={p.status} /></span>
            <span className="pt-chev"><Icon name="chevron-right" size={16} color="var(--vh-text-faint)" /></span>
          </button>
        ))}
        {rows.length === 0 && <div className="pt-empty">No providers match your filters.</div>}
      </div>
    </div>
  );
}

function ProviderDetail({ p, onBack }) {
  return (
    <div className="pt-view">
      <button className="pt-back" onClick={onBack}><Icon name="arrow-left" size={16} />Roster</button>
      <div className="pt-detail-head">
        <span className="pt-avatar pt-avatar--lg">{p.name.split(" ").map((s) => s[0]).join("")}</span>
        <div className="pt-detail-id">
          <h1 className="pt-view-title">{p.name}, {p.cred}</h1>
          <p className="pt-view-sub">{p.icp} · {p.site}</p>
          <div className="pt-detail-ids">
            <span><label>NPI</label><b>{p.npi}</b></span>
            <span><label>CAQH</label><b>{p.caqh}</b></span>
            <span><label>Time-to-bill</label><b>{p.ttb ? p.ttb + " days" : "—"}</b></span>
          </div>
        </div>
        <div className="pt-detail-status">
          <Pill s={p.status} />
          <button className="vh-btn vh-btn--secondary" style={{ marginTop: 14 }}><Icon name="message-square" size={15} />Message Varick</button>
        </div>
      </div>
      <div className="pt-detail-grid">
        <div className="pt-card vh-card">
          <div className="pt-card-h"><h3>Payer enrollment</h3><span className="pt-card-meta">{enrolledCount(p)}/{p.payers.length} active</span></div>
          <div className="pt-payers">
            {p.payers.map((x) => (
              <div className="pt-payer" key={x.payer}>
                <span className="pt-payer-n">{x.payer}</span>
                <Pill s={x.status} />
              </div>
            ))}
          </div>
        </div>
        <div className="pt-card vh-card">
          <div className="pt-card-h"><h3>Credentials &amp; expirations</h3></div>
          <div className="pt-creds">
            {p.exps.map((e) => (
              <div className="pt-cred" key={e.t}>
                <span className="pt-cred-ic"><Icon name={e.s === "expiring" ? "clock-alert" : "shield-check"} size={17} color={e.s === "expiring" ? "var(--vh-warn)" : "var(--vh-ok)"} /></span>
                <div className="pt-cred-body"><div className="pt-cred-t">{e.t}</div><div className="pt-cred-d">Valid through <span className="pt-mono">{e.d}</span></div></div>
                <Pill s={e.s} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Roster() {
  const [sel, setSel] = useState(null);
  const p = PROVIDERS.find((x) => x.id === sel);
  return p ? <ProviderDetail p={p} onBack={() => setSel(null)} /> : <RosterTable onOpen={setSel} />;
}

Object.assign(window, { Roster });