/* Calibrated Ascension HQ — Approvals UI (Phase 3).
 * Renders the place where work stops and waits for a human, across three
 * buckets: Needs Mel · Needs Team · Waiting on Client. Exports to window.
 */

const APPR_BUCKETS = [
  { key: "mel", label: "Needs Mel", hint: "Decisions only you can make" },
  { key: "team", label: "Needs Team", hint: "Internal work to action" },
  { key: "client", label: "Waiting on Client", hint: "Blocked pending the client" },
];
const APPR_TYPE_LABEL = {
  missing_assets: "Missing assets", client_feedback: "Client feedback",
  change_request: "Change request", build_plan: "Build plan", copy: "Copy",
  design: "Design", launch: "Launch", scope_change: "Scope change",
};
const APPR_STATUS_LABEL = {
  open: "Open", approved: "Approved", changes_requested: "Changes requested",
  resolved: "Resolved", declined: "Declined",
};

function apprIsOpen(a) { return a.status === "open" || a.status === "changes_requested"; }
function apprScoped(approvals, client) {
  return (approvals || []).filter((a) => (client && client.agency ? true : a.account_id === (client && client.id)));
}
function apprAgentName(data, id) {
  const a = (data.AGENTS || []).find((x) => x.id === id);
  return a ? a.name : (id || "—");
}
function dueLabel(due) {
  if (!due) return null;
  const d = new Date(due + "T00:00:00");
  if (isNaN(d.getTime())) return null;
  const today = new Date(); today.setHours(0, 0, 0, 0);
  const days = Math.round((d - today) / 86400000);
  const fmt = d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
  if (days < 0) return { txt: "overdue · " + fmt, tone: "over" };
  if (days === 0) return { txt: "due today", tone: "over" };
  if (days <= 2) return { txt: "due " + fmt, tone: "soon" };
  return { txt: "due " + fmt, tone: "ok" };
}

/* One approval card */
function ApprovalRow({ a, data, onResolve, showClient }) {
  const open = apprIsOpen(a);
  const due = dueLabel(a.due_date);
  const acts = [];
  if (open && onResolve) {
    if (a.assigned_to === "mel") {
      acts.push(<button key="ap" className="btn btn-primary btn-sm" onClick={() => onResolve(a.id, "approved")}>{I.check} Approve</button>);
      acts.push(<button key="cr" className="btn btn-ghost btn-sm" onClick={() => onResolve(a.id, "changes_requested")}>Request changes</button>);
    } else if (a.assigned_to === "client") {
      acts.push(<button key="rc" className="btn btn-primary btn-sm" onClick={() => onResolve(a.id, "resolved")}>{I.check} Mark received</button>);
    } else {
      acts.push(<button key="dn" className="btn btn-primary btn-sm" onClick={() => onResolve(a.id, "resolved")}>{I.check} Mark done</button>);
    }
  }
  return (
    <div className={`appr-card prio-${a.priority}`} data-status={a.status}>
      <div className="appr-top">
        <span className={`appr-prio ${a.priority}`} title={`${a.priority} priority`}></span>
        <div className="appr-title">{a.title}</div>
        {!open && <span className={`appr-status ${a.status}`}>{APPR_STATUS_LABEL[a.status] || a.status}</span>}
      </div>
      <div className="appr-meta">
        <span className="appr-chip">{APPR_TYPE_LABEL[a.type] || a.type}</span>
        {showClient && a.account_name && <span className="appr-chip muted">{a.account_name}</span>}
        {a.project_title && <span className="appr-proj">{a.project_title}</span>}
        {due && <span className={`appr-due ${due.tone}`}>{due.txt}</span>}
      </div>
      {a.notes && <div className="appr-why">{a.notes}</div>}
      <div className="appr-foot">
        <span className="appr-by">from {apprAgentName(data, a.requested_by)}</span>
        {acts.length > 0 && <span className="appr-acts">{acts}</span>}
      </div>
    </div>
  );
}

/* Command-Center triage: three buckets of open approvals */
function ApprovalsTriage({ approvals, client, data, onResolve }) {
  const scoped = apprScoped(approvals, client).filter(apprIsOpen);
  if (scoped.length === 0) return null;
  const showClient = !!(client && client.agency);
  return (
    <React.Fragment>
      <SectionHead title="Needs a human" n={`${scoped.length} open`} />
      <div className="appr-triage">
        {APPR_BUCKETS.map((b) => {
          const items = scoped.filter((a) => a.assigned_to === b.key);
          return (
            <div key={b.key} className={`appr-col ${b.key}`}>
              <div className="appr-col-head">
                <span className="appr-col-label">{b.label}</span>
                <span className="appr-col-n">{items.length}</span>
              </div>
              {items.length === 0
                ? <div className="appr-col-empty">All clear</div>
                : items.map((a) => <ApprovalRow key={a.id} a={a} data={data} onResolve={onResolve} showClient={showClient} />)}
            </div>
          );
        })}
      </div>
    </React.Fragment>
  );
}

Object.assign(window, {
  APPR_BUCKETS, APPR_TYPE_LABEL, APPR_STATUS_LABEL,
  apprIsOpen, apprScoped, apprAgentName, ApprovalRow, ApprovalsTriage,
});