/* global React, Icon, Pill, PROVIDERS, TASKS, ACTIVITY */
// Varick Health — Portal kit: Dashboard

const KPIS = [
  { ic: "users-round", n: "42", l: "Active providers", sub: "across 3 sites", c: "var(--vh-indigo)" },
  { ic: "timer", n: "21d", l: "Avg time-to-bill", sub: "▼ 9 days vs. Q1", c: "var(--vh-ok)" },
  { ic: "target", n: "98%", l: "First-pass approval", sub: "▲ 6 pts vs. Q1", c: "var(--vh-ok)" },
  { ic: "clock-alert", n: "7", l: "Expiring in 30 days", sub: "5 handled by Varick", c: "var(--vh-warn)" },
];

function KpiCard({ k }) {
  return (
    <div className="pt-kpi vh-card">
      <div className="pt-kpi-ic" style={{ color: k.c }}><Icon name={k.ic} size={20} color={k.c} /></div>
      <div className="pt-kpi-n">{k.n}</div>
      <div className="pt-kpi-l">{k.l}</div>
      <div className="pt-kpi-sub">{k.sub}</div>
    </div>
  );
}

function Pipeline() {
  const buckets = [
    { l: "Enrolled", c: "var(--vh-ok)", v: 28 },
    { l: "In progress", c: "var(--vh-indigo)", v: 9 },
    { l: "Action needed", c: "var(--vh-warn)", v: 3 },
    { l: "Denied", c: "var(--vh-danger)", v: 1 },
    { l: "Not started", c: "var(--vh-idle)", v: 1 },
  ];
  const total = buckets.reduce((a, b) => a + b.v, 0);
  return (
    <div className="pt-card vh-card">
      <div className="pt-card-h"><h3>Enrollment pipeline</h3><span className="pt-card-meta">{total} providers</span></div>
      <div className="pt-bar">
        {buckets.map((b) => <span key={b.l} style={{ width: (b.v / total * 100) + "%", background: b.c }} title={b.l} />)}
      </div>
      <div className="pt-legend">
        {buckets.map((b) => (
          <div className="pt-legend-row" key={b.l}>
            <span className="pt-dot" style={{ background: b.c }} />
            <span className="pt-legend-l">{b.l}</span>
            <span className="pt-legend-v">{b.v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Tasks({ go }) {
  return (
    <div className="pt-card vh-card">
      <div className="pt-card-h">
        <h3>Attention needed</h3>
        <span className="pt-card-meta">{TASKS.length} open items</span>
      </div>
      <div className="pt-tasks">
        {TASKS.map((t, i) => (
          <button className="pt-task" key={i} onClick={() => go("roster")}>
            <Pill s={t.s} />
            <div className="pt-task-body">
              <div className="pt-task-t">{t.t}</div>
              <div className="pt-task-meta"><span className="pt-task-p">{t.p}</span> · Due {t.due}</div>
            </div>
            <span className={"pt-owner" + (t.who === "You" ? " is-you" : "")}>{t.who}</span>
            <Icon name="chevron-right" size={16} color="var(--vh-text-faint)" />
          </button>
        ))}
      </div>
    </div>
  );
}

function Activity() {
  return (
    <div className="pt-card vh-card">
      <div className="pt-card-h"><h3>Recent activity</h3></div>
      <div className="pt-activity">
        {ACTIVITY.map((a, i) => (
          <div className="pt-act" key={i}>
            <span className="pt-act-ic"><Icon name={a.ic} size={16} color={a.c} /></span>
            <div className="pt-act-body"><div className="pt-act-t">{a.t}</div><div className="pt-act-time">{a.time}</div></div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Dashboard({ go }) {
  return (
    <div className="pt-view">
      <div className="pt-view-head">
        <div>
          <h1 className="pt-view-title">Good morning, Riverside Behavioral.</h1>
          <p className="pt-view-sub">Here's where your roster stands today — Thursday, May 29.</p>
        </div>
        <div className="pt-view-actions">
          <button className="vh-btn vh-btn--secondary"><Icon name="download" size={16} />Export report</button>
          <button className="vh-btn vh-btn--primary"><Icon name="user-plus" size={16} />Add provider</button>
        </div>
      </div>
      <div className="pt-kpis">{KPIS.map((k) => <KpiCard k={k} key={k.l} />)}</div>
      <div className="pt-grid">
        <Tasks go={go} />
        <div className="pt-stack">
          <Pipeline />
          <Activity />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });