/* NutriDMS, Product compliance command-center UI (Product Offering PRD)
   Tabs added to the Product detail: Compliance Summary · Audit Trail ·
   Label & Export (Label Studio integration + approval/lock/export state). */

const { useState: usePcState } = React;

function pcCanApprove(role) { return role === "admin" || role === "super-admin" || role === "compliance" || role === "manager"; }

/* ── Product-level status badge (used on cards + detail header) ── */
function ProdStatusBadge({ offering, size }) {
  if (!offering || offering.type !== "product" || typeof prodComplianceSummary !== "function") return null;
  const sum = prodComplianceSummary(offering);
  const tone = { "Export Ready": "success", "Locked": "success", "Compliance Approved": "brand", "Review Required": "warning", "Draft": "neutral" }[sum.overall] || "neutral";
  return <span className={`pill ${tone}`} style={{ fontSize: size === "sm" ? 10 : 11 }}>{sum.overall}</span>;
}

/* ── Compliance Summary tab, the single readiness decision + blocking reasons ── */
function PcSummary({ offering, role, onChange, setPage }) {
  const sum = prodComplianceSummary(offering);
  const canApprove = pcCanApprove(role);
  const rec = sum.rec;
  const stTone = (st) => ({ Pass: "ok", Approved: "ok", Locked: "ok", Ready: "ok", "Symbol Applied": "ok", Warning: "warn", Pending: "warn", "Not Locked": "warn", "Symbol Required": "warn", "Review Required": "warn", Fail: "bad", Blocked: "bad", "Missing Symbol": "bad" }[st] || "na");

  return (
    <div className="pc-wrap">
      <div className={`pc-overall ${sum.exportReady ? "ok" : "blocked"}`}>
        <div className="pc-overall-l">
          <Icon name={sum.exportReady ? "shield-check" : "shield-alert"} size={26} />
          <div><span className="pc-overall-k">Product status</span><b>{sum.overall}</b></div>
        </div>
        <div className={`pc-overall-export ${sum.exportReady ? "ok" : "bad"}`}>{sum.exportReady ? "Export Ready" : "Export Blocked"}</div>
      </div>

      {sum.blocking.length > 0 && (
        <div className="pc-blocking">
          <div className="pc-blocking-h"><Icon name="alert-triangle" size={14} /> What's blocking export</div>
          <ul>{sum.blocking.map((b, i) => <li key={i}><Icon name="circle-dot" size={11} /> {b}</li>)}</ul>
        </div>
      )}

      <div className="pc-rows">
        {sum.rows.map((r) => (
          <div key={r.k} className="pc-row"><span>{r.k}</span><span className={`pc-st ${stTone(r.st)}`}>{r.st}</span></div>
        ))}
      </div>

      {/* approval / lock / export workflow */}
      <div className="pc-flow-card">
        <div className="pc-flow-steps">
          {["Draft", "Compliance Review", "Approved", "Locked", "Export Ready"].map((s, i) => {
            const idx = rec.locked && sum.exportReady ? 4 : rec.locked ? 3 : rec.approvedBy ? 2 : rec.stage === "review" ? 1 : 0;
            return <div key={s} className={`pc-flow-step ${i < idx ? "done" : i === idx ? "now" : ""}`}><span className="pc-flow-dot">{i < idx ? <Icon name="check" size={11} stroke={3} /> : i + 1}</span><span>{s}</span></div>;
          })}
        </div>
        <div className="pc-flow-actions">
          {rec.stage === "draft" && <button className="btn secondary sm" onClick={() => { prodSubmitReview(offering.id); onChange(); }}><Icon name="send" size={14} /> Submit for review</button>}
          {canApprove && !rec.approvedBy && rec.stage === "review" && <button className="btn secondary sm" onClick={() => { prodApprove(offering.id); onChange(); }}><Icon name="stamp" size={14} /> Approve</button>}
          {canApprove && rec.approvedBy && !rec.locked && <button className="btn secondary sm" onClick={() => { prodLock(offering.id); onChange(); }}><Icon name="lock" size={14} /> Lock version</button>}
          <button className="btn ghost sm" onClick={() => { const r = prodExport(offering.id, "draft"); }}><Icon name="file-text" size={14} /> Draft export</button>
          <button className="btn primary sm" disabled={!sum.exportReady} onClick={() => { const r = prodExport(offering.id, "production"); }}><Icon name="download" size={14} /> Production export</button>
        </div>
        {!sum.exportReady && <div className="pc-flow-note"><Icon name="info" size={12} /> Draft export carries a “DRAFT, NOT APPROVED FOR PRODUCTION” watermark. Production export unlocks when all checks pass.</div>}
      </div>

      <button className="btn ghost sm pc-open-ls" onClick={() => { try { window.labelStudioSetEnabled && window.labelStudioSetEnabled(true); window.__lsRecipeId = offering.single && offering.single.recipeId; } catch (e) {} setPage("label-studio"); }}>
        <Icon name="tag" size={14} /> Open in CFIA Label Studio
      </button>
    </div>
  );
}

/* ── Audit Trail tab ── */
function PcAudit({ offering }) {
  const rec = prodCompGet(offering.id);
  const events = rec.audit || [];
  return (
    <div className="pc-wrap">
      <div className="pc-audit-h"><Icon name="history" size={15} /> Product audit trail</div>
      {events.length === 0 && <div className="pc-empty">No actions recorded yet. Submitting, approving, locking and exporting are all logged here.</div>}
      <div className="pc-audit">
        {events.map((e) => (
          <div key={e.id} className="pc-audit-row">
            <span className="pc-audit-dot" />
            <div className="pc-audit-tx"><b>{e.action}</b>{e.detail && <span>{e.detail}</span>}</div>
            <div className="pc-audit-meta">{e.who}<br /><small>{e.at}</small></div>
          </div>
        ))}
      </div>
    </div>
  );
}

if (typeof window !== "undefined") Object.assign(window, { ProdStatusBadge, PcSummary, PcAudit });