/* ============================================================
   Beacon CS — shared UI helpers (exported to window)
   ============================================================ */
function Badge({ tone = "gray", dot, children }) {
  return <span className={"badge " + tone}>{dot ? <span className="dot" style={{ background: dot }}></span> : null}{children}</span>;
}

function Redline({ children }) {
  const L = window.Icons.lock;
  return <span className="redline"><L s={11} sw={2} />{children}</span>;
}

/* chrome-less status: colored dot + text (no pill) — for dense list/table rows */
function Status({ tone = "var(--ink-4)", children, ico }) {
  const Ico = ico ? window.Icons[ico] : null;
  return (
    <span className="status">
      {Ico ? <Ico s={12} className="status-ico" /> : <span className="status-dot" style={{ background: tone }}></span>}
      <span>{children}</span>
    </span>
  );
}

function PageHead({ title, sub, right }) {
  return (
    <div className="page-head spread">
      <div>
        <h1 className="page-h1">{title}</h1>
        {sub ? <div className="page-sub">{sub}</div> : null}
      </div>
      {right ? <div className="row">{right}</div> : null}
    </div>
  );
}

function Stat({ label, val, unit, delta, up, bar, hint, ico }) {
  const Ico = ico ? window.Icons[ico] : null;
  return (
    <div className="stat">
      <div className="stat-label">{Ico ? <Ico s={14} /> : null}{label}</div>
      <div className="stat-val">{val}{unit ? <span className="unit">{unit}</span> : null}</div>
      {delta ? <div className={"stat-delta " + (up ? "up" : "")} style={!up ? { color: "var(--ink-3)" } : null}>{delta}</div> : null}
      {bar != null ? <div className="stat-bar"><i style={{ width: bar + "%" }}></i></div> : null}
      {hint ? <div className="muted" style={{ fontSize: 11.5, marginTop: 8 }}>{hint}</div> : null}
    </div>
  );
}

function Meter({ pct, color = "var(--blue)" }) {
  return <div className="meter"><i style={{ width: pct + "%", background: color }}></i></div>;
}

function Spark({ data, color }) {
  const max = Math.max(...data);
  return (
    <div className="spark">
      {data.map((v, i) => (
        <i key={i} className={i === data.length - 1 ? "hi" : ""}
           style={{ height: (v / max * 100) + "%", background: i === data.length - 1 ? (color || "var(--blue)") : undefined }}></i>
      ))}
    </div>
  );
}

function Gate({ tone, ico = "shield", title, children, action }) {
  const Ico = window.Icons[ico];
  return (
    <div className={"gate" + (tone ? " " + tone : "")}>
      <div className="gate-ico"><Ico s={18} sw={2} /></div>
      <div style={{ flex: 1 }}>
        {title ? <div style={{ fontWeight: 600, marginBottom: 2 }}>{title}</div> : null}
        <div style={{ fontWeight: 500 }}>{children}</div>
      </div>
      {action || null}
    </div>
  );
}

function Avatar({ name, ai, sm }) {
  const initials = ai ? "A" : (name || "?").split(" ").map(x => x[0]).slice(0, 2).join("");
  const colors = ["#03B2BD", "#13C287", "#F19D1E", "#FA3B61", "#363636", "#787878"];
  const c = ai ? "var(--purple)" : colors[(name || "").charCodeAt(0) % colors.length];
  return <div className={"av" + (ai ? " ai" : "") + (sm ? " sm" : "")} style={{ background: c }}>{initials}</div>;
}

function Tabs({ tabs, active, onChange }) {
  return (
    <div className="tabs">
      {tabs.map(t => (
        <button
          key={t.id}
          className={"tab" + (active === t.id ? " active" : "")}
          aria-label={t.count != null ? `${t.label}，${t.count} 项待处理` : t.label}
          onClick={() => onChange(t.id)}
        >
          <span>{t.label}</span>
          {t.count != null ? <span className="tab-count" aria-hidden="true">{t.count}</span> : null}
        </button>
      ))}
    </div>
  );
}

function Pills({ items, active, onChange }) {
  return (
    <div className="pills">
      {items.map(t => (
        <button key={t.id} className={"pill" + (active === t.id ? " active" : "")} onClick={() => onChange(t.id)}>{t.label}</button>
      ))}
    </div>
  );
}

function EmptyState({ ico = "inbox", title, sub, action }) {
  const Ico = window.Icons[ico];
  return (
    <div className="empty">
      <div className="empty-ico"><Ico s={22} /></div>
      <div className="empty-title">{title}</div>
      {sub ? <div className="empty-sub">{sub}</div> : null}
      {action ? <div style={{ marginTop: 16 }}>{action}</div> : null}
    </div>
  );
}

function SectionSkeleton() {
  return (
    <div className="content-pad" style={{ opacity: .9 }}>
      <div className="sk sk-line" style={{ width: 180, height: 22 }}></div>
      <div className="sk sk-line" style={{ width: 320, height: 13, marginBottom: 22 }}></div>
      <div className="sec-grid-4" style={{ marginBottom: 16 }}>
        {[0,1,2,3].map(i => <div key={i} className="sk sk-card"></div>)}
      </div>
      <div className="sec-2col">
        <div className="sk sk-card" style={{ height: 260 }}></div>
        <div className="sk sk-card" style={{ height: 260 }}></div>
      </div>
    </div>
  );
}

Object.assign(window, { Badge, Redline, Status, PageHead, Stat, Meter, Spark, Gate, Avatar, Tabs, Pills, EmptyState, SectionSkeleton });