/* ═══════════════════════════════════════════════════════════════════════════
   QA Review kit — shared presentational + logic components for the three QA
   pages (Nutrition Review · Nutrition Requests · Urgent Review).

   Exposes on window: QAKpiRow, QAToolbar, QAScopeChips, QAQueueTable, QACards,
   QAEmpty, QAInsightPanel, UrgencyBadge, SlaBadge, ReviewerCell, ConfidenceBadge,
   qaReviewerWorkload, qaSlaState. Depends on Icon (components.jsx) + USERS (data.js).
   ═══════════════════════════════════════════════════════════════════════════ */
(function () {
  const { useState, useMemo } = React;
  const REVIEW_STATUSES = ["pending-review", "compliance-review", "changes-requested"];

  /* ── SLA: derive a due window per urgency and a state (ok/risk/breach) ── */
  function qaSlaState(submittedAt, urgency) {
    const WINDOW = { critical: 4, high: 12, medium: 24, null: 48, undefined: 48 };
    const hrs = WINDOW[urgency] != null ? WINDOW[urgency] : 48;
    const due = (submittedAt || Date.now()) + hrs * 3600e3;
    const left = due - Date.now();
    const state = left < 0 ? "breach" : left < hrs * 0.35 * 3600e3 ? "risk" : "ok";
    const label = left < 0 ? "Overdue" : left < 3600e3 ? Math.max(1, Math.round(left / 60000)) + "m left" : Math.round(left / 3600e3) + "h left";
    return { state, label, due };
  }

  /* ── Reviewer workload across live recipes + ingredients + submitted store ── */
  function qaReviewerWorkload() {
    const roles = ["dietitian", "compliance", "manager", "admin", "super-admin"];
    let people = [];
    try { people = (window.USERS || []).filter((u) => roles.indexOf(u.role) >= 0); } catch (e) {}
    const pool = []
      .concat(window.RECIPES || [], window.INGREDIENT_ITEMS || [],
        (window.loadSubmittedItems ? window.loadSubmittedItems("recipe") : []),
        (window.loadSubmittedItems ? window.loadSubmittedItems("ingredient") : []));
    return people.map((p) => {
      const load = pool.filter((x) => { const rv = x && x.reviewer; const ii = rv && (rv.initials || rv); return ii === p.initials && REVIEW_STATUSES.indexOf(x.status) >= 0; }).length;
      return {
        initials: p.initials,
        name: p.name,
        role: p.role,
        photo: p.profilePictureUrl || p.profile_picture_url || "",
        load
      };
    }).sort((a, b) => b.load - a.load);
  }

  /* ── Small badges ── */
  function UrgencyBadge({ urgency }) {
    if (!urgency) return <span className="qa-badge neutral">Standard</span>;
    const map = { critical: ["crit", "Critical"], high: ["high", "High"], medium: ["med", "Medium"] };
    const [cls, label] = map[urgency] || ["neutral", urgency];
    return <span className={"qa-badge " + cls}><Icon name={urgency === "critical" ? "alert-triangle" : "flag"} size={11} stroke={2.4} /> {label}</span>;
  }
  function SlaBadge({ submittedAt, urgency }) {
    const s = qaSlaState(submittedAt, urgency);
    return <span className={"qa-sla " + s.state}><i /> {s.label}</span>;
  }
  function ConfidenceBadge({ loraa }) {
    if (!loraa || !loraa.prescreened) return <span style={{ fontSize: 12, color: "var(--gray-400)" }}>—</span>;
    return (
      <span className="qa-conf" title={(loraa.flags || []).join(", ") || "No flags"}>
        <span className="qa-conf-bar"><span style={{ width: (loraa.confidence || 0) + "%" }} /></span>
        {loraa.confidence}%
      </span>
    );
  }
  function ReviewerCell({ reviewer, me, onClaim }) {
    if (!reviewer) return <button className="qa-btn claim" onClick={(e) => { e.stopPropagation(); onClaim && onClaim(); }}><Icon name="hand" size={12} /> Claim</button>;
    const isMe = me && reviewer.initials === me.initials;
    return (
      <span className="qa-rev">
        <span className={"qa-rev-av" + (isMe ? " me" : "")}>{reviewer.initials}</span>
        <span style={{ fontSize: 13 }}>{isMe ? "You" : reviewer.name}</span>
      </span>
    );
  }

  /* ── KPI row ── */
  function QAKpiRow({ items }) {
    return (
      <div className="qa-kpis">
        {items.map((k, i) => (
          <div key={i} className={"qa-kpi " + (k.tone || "")}>
            <div className="qa-kpi-top">
              <span className="qa-kpi-ic"><Icon name={k.icon} size={16} stroke={2.2} /></span>
              {k.delta && <span className={"qa-kpi-delta " + (k.deltaDir || "up")}>{k.delta}</span>}
            </div>
            <div className="qa-kpi-val">{k.value}</div>
            <div className="qa-kpi-label">{k.label}</div>
          </div>
        ))}
      </div>
    );
  }

  /* ── Toolbar: search + optional selects + right-aligned count ── */
  function QAToolbar({ search, setSearch, selects, count }) {
    return (
      <div className="qa-toolbar">
        <div className="qa-search">
          <Icon name="search" size={16} />
          <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search by name, ref, contributor…" />
        </div>
        {(selects || []).map((s, i) => (
          <select key={i} className="qa-select" value={s.value} onChange={(e) => s.onChange(e.target.value)}>
            {s.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
          </select>
        ))}
        {count != null && <span className="qa-count">{count} {count === 1 ? "item" : "items"}</span>}
      </div>
    );
  }

  /* ── Scope chips ── */
  function QAScopeChips({ scope, setScope, chips }) {
    return (
      <div className="qa-chips">
        {chips.map((c) => (
          <button key={c.id} className={"qa-chip" + (scope === c.id ? " on" : "")} onClick={() => setScope(c.id)}>
            {c.label} <span className="qa-chip-n">· {c.count}</span>
          </button>
        ))}
      </div>
    );
  }

  /* ── Empty state ── */
  function QAEmpty({ icon, title, sub, actions }) {
    return (
      <div className="qa-empty">
        <div className="qa-empty-ic"><Icon name={icon || "clipboard-check"} size={26} stroke={1.8} /></div>
        <h3>{title}</h3>
        <p>{sub}</p>
        {actions && actions.length > 0 && (
          <div className="qa-empty-actions">
            {actions.map((a, i) => <button key={i} className={"qa-btn" + (i === 0 ? " primary" : "")} onClick={a.onClick}>{a.icon && <Icon name={a.icon} size={13} />} {a.label}</button>)}
          </div>
        )}
      </div>
    );
  }

  /* ── Insight panel: metrics + workload + Loraa nudge ── */
  function QAInsightPanel({ metrics, workload, me, footer }) {
    const maxLoad = Math.max(1, ...(workload || []).map((w) => w.load));
    return (
      <aside className="qa-insight">
        {metrics && (
          <div className="qa-ins-card">
            <div className="qa-ins-h"><Icon name="activity" size={13} /> Today</div>
            {metrics.map((m, i) => (
              <div key={i} className="qa-ins-row"><span style={{ color: "var(--gray-600)" }}>{m.label}</span><b>{m.value}</b></div>
            ))}
          </div>
        )}
        {workload && workload.length > 0 && (
          <div className="qa-ins-card">
            <div className="qa-ins-h"><Icon name="users" size={13} /> Reviewer workload</div>
            <div className="qa-ins-people">
              {workload.slice(0, 5).map((w) => {
                const isMe = me && w.initials === me.initials;
                let photo = ""; try {
                  const profile = window.NutriIdentityAssets && window.NutriIdentityAssets.profile ? window.NutriIdentityAssets.profile() : null;
                  photo = isMe ? ((profile && profile.photoDataUrl) || "") : (w.photo || "");
                } catch (e) {}
                return (
                <div key={w.initials} className="qa-ins-person" title={w.name + " · " + w.load + " open"}>
                  {photo
                    ? <span className="qa-rev-av photo" style={{ backgroundImage: `url("${photo}")` }} />
                    : <span className={"qa-rev-av" + (isMe ? " me" : "")}>{w.initials}</span>}
                  <span className="qa-ins-pname">{isMe ? "You" : w.name}</span>
                  <span className="qa-ins-loadbar"><span style={{ width: (w.load / maxLoad * 100) + "%" }} /></span>
                  <span className="qa-ins-load">{w.load}</span>
                </div>
                );
              })}
            </div>
          </div>
        )}
        {footer}
      </aside>
    );
  }

  Object.assign(window, {
    QAKpiRow, QAToolbar, QAScopeChips, QAEmpty, QAInsightPanel,
    UrgencyBadge, SlaBadge, ConfidenceBadge, ReviewerCell,
    qaReviewerWorkload, qaSlaState, QA_REVIEW_STATUSES: REVIEW_STATUSES,
  });
})();