/* Shared UI primitives — exported to window. */
(function () {
  const { fmtMoney, fmtMoneyK } = window.DATA;

  function Pill({ kind = "plain", children, className = "" }) {
    return <span className={`pill ${kind} ${className}`}><i className="dot"></i>{children}</span>;
  }

  // status → pill kind + label
  const STATUS = {
    pending: { kind: "pending", label: "Pending" },
    sent:    { kind: "sent",    label: "Sent" },
    approved:{ kind: "sent",    label: "Approved" },
    reject:  { kind: "reject",  label: "Rejected" },
    stale:   { kind: "stale",   label: "Stale" },
  };
  function StatusPill({ status }) {
    const s = STATUS[status] || STATUS.pending;
    return <Pill kind={s.kind}>{s.label}</Pill>;
  }

  function ChannelChip({ channel }) {
    return <span className={`chan ${channel}`}>{channel === "sms" ? "SMS" : "Email"}</span>;
  }

  function Avatar({ init, size = 30, gold }) {
    return (
      <div className="avatar" style={{ width: size, height: size, fontSize: size * 0.36,
        borderColor: gold ? "var(--gold-strong)" : "var(--gold-line)" }}>{init}</div>
    );
  }

  // Loan-context meta strip: type · amount · stage · source
  function LoanMeta({ lead, showSource = true }) {
    return (
      <div className="meta-row mono" style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.04em" }}>
        <span className="m">{lead.loan}</span>
        <i className="dotsep"></i>
        <span className="m" style={{ color: "var(--ink)" }}>{fmtMoney(lead.amount)}</span>
        <i className="dotsep"></i>
        <span className="m">{lead.stage}</span>
        {showSource && <><i className="dotsep"></i><span className="m" style={{ color: "var(--ink-faint)" }}>{lead.source}</span></>}
      </div>
    );
  }

  function DaysTag({ days }) {
    if (days === 0) return <Pill kind="sent">Today</Pill>;
    const stale = days >= 7;
    return <Pill kind={stale ? "reject" : "plain"} className="">{days}d since contact</Pill>;
  }

  function SecHead({ title, meta, eyebrow, children }) {
    return (
      <div className="sec-head">
        <div>
          {eyebrow && <div className="eyebrow" style={{ marginBottom: 8 }}>{eyebrow}</div>}
          <h1 className="display">{title}</h1>
        </div>
        <div className="sec-meta">
          {meta && <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)", letterSpacing: "0.06em" }}>{meta}</div>}
          {children}
        </div>
      </div>
    );
  }

  function Btn({ kind, sm, block, children, icon, k, arrow, ...rest }) {
    const I = icon;
    return (
      <button className={`btn ${kind || ""} ${sm ? "sm" : ""} ${block ? "block" : ""}`} {...rest}>
        {I && <I width={sm ? 13 : 15} height={sm ? 13 : 15} />}
        {children}
        {k && <span className="k">{k}</span>}
        {arrow && <span className="arrow-tail"></span>}
      </button>
    );
  }

  window.UI = { Pill, StatusPill, ChannelChip, Avatar, LoanMeta, DaysTag, SecHead, Btn, fmtMoney, fmtMoneyK };
})();