// Screen 1: Active Engagements — daily driver
const { useState: useS1 } = React;

function goldaExportCsv(rows) {
  const headers = ["SHO", "Customer", "Agent", "Supplier", "Origin", "Destination", "Vessel", "Stage", "ETD", "ETA", "Risk", "Updated"];
  const esc = (v) => '"' + String(v == null ? "" : v).replace(/"/g, '""') + '"';
  const lines = [headers.join(",")].concat((rows || []).map(e =>
    [e.sho, e.customer, e.agent, e.supplier, e.origin, e.destination, e.vessel, e.stage, e.etd, e.eta, e.risk, e.lastUpdate].map(esc).join(",")));
  const url = URL.createObjectURL(new Blob([lines.join("\n")], { type: "text/csv;charset=utf-8" }));
  const a = document.createElement("a");
  a.href = url; a.download = "golda-shipments.csv";
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

function Screen_ActiveEngagements({ onOpenShipment, search }) {
  const data = window.GoldaData;
  const [riskFilter, setRiskFilter] = useS1("All");
  const [stageFilter, setStageFilter] = useS1("All");
  const [dismissed, setDismissed] = useS1({});
  const [instructions, setInstructions] = useS1({});
  const [qrStatus, setQrStatus] = useS1({}); // per-card: 'saving' | 'saved' | 'error:<msg>'

  // Persist an operator decision to Golda via /api/public/operator-feedback (records the comment,
  // re-evaluates the case, marks it operator-reviewed). In mock/preview (no real case id) it just
  // dismisses the card so the design preview still behaves. Both the primary "confirm" button and
  // "Save my instruction" route through here.
  async function postFeedback(card, comment) {
    const live = !!(window.GoldaData && window.GoldaData.__live);
    if (!live || !(card.caseId || card.emailId)) { setDismissed(d => ({ ...d, [card.id]: true })); return; }
    setQrStatus(s => ({ ...s, [card.id]: "saving" }));
    try {
      const res = await fetch("/api/public/operator-feedback", {
        method: "POST", headers: { "content-type": "application/json" }, cache: "no-store",
        body: JSON.stringify({ comment, caseId: card.caseId, emailId: card.emailId })
      });
      const out = await res.json().catch(() => ({}));
      if (res.ok && out.ok !== false) {
        setQrStatus(s => ({ ...s, [card.id]: "saved" }));
        setTimeout(() => setDismissed(d => ({ ...d, [card.id]: true })), 800);
      } else {
        setQrStatus(s => ({ ...s, [card.id]: "error:" + (out.error || ("Request failed (" + res.status + ")")) }));
      }
    } catch (e) {
      setQrStatus(s => ({ ...s, [card.id]: "error:Network error — not saved." }));
    }
  }

  // "Save my instruction" — the operator's written next-action.
  async function saveInstruction(card) {
    const live = !!(window.GoldaData && window.GoldaData.__live);
    const comment = String(instructions[card.id] || "").trim();
    if (live && (card.caseId || card.emailId) && !comment) { setQrStatus(s => ({ ...s, [card.id]: "error:Type an instruction first." })); return; }
    await postFeedback(card, comment);
  }

  // Primary button — confirm/accept Golda's recommendation as the operator decision.
  async function confirmDecision(card) {
    const rec = String(card.recommendation || card.confirmLabel || "the recommended next action").slice(0, 300);
    await postFeedback(card, "Operator confirmed Golda's recommendation: " + rec);
  }

  const q = String(search || "").trim().toLowerCase();
  const filtered = data.engagements.filter(e => {
    if (riskFilter !== "All" && e.risk !== riskFilter) return false;
    if (stageFilter !== "All" && e.stage !== stageFilter) return false;
    if (q) {
      const hay = [e.sho, e.customer, e.agent, e.supplier, e.vessel, e.origin, e.destination, e.note]
        .map(v => String(v || "").toLowerCase()).join(" ");
      if (!hay.includes(q)) return false;
    }
    return true;
  });

  const riskCounts = data.engagements.reduce((a, e) => (a[e.risk] = (a[e.risk]||0)+1, a), {});
  const visibleQRs = data.quickReplies.filter(q => !dismissed[q.id]);

  return (
    <div>
      {visibleQRs.length > 0 && (
        <>
          <div className="sec-head">
            <h2>Waiting for your action</h2>
            <span className="sec-count">{visibleQRs.length} {visibleQRs.length === 1 ? "decision" : "decisions"}</span>
            <span className="tag" style={{ marginLeft: 6 }}>Quick reply</span>
            <div className="sec-actions">
              <button className="btn btn-sm btn-ghost" onClick={() => window.GoldaGoto("decisions")}>Open Decision Review →</button>
            </div>
          </div>
          <div className="qr-stack" style={{ marginBottom: 18 }}>
            {visibleQRs.map(q => {
              const copy = window.GoldaDecisionCopy(q);
              return (
              <div key={q.id} className={`qr-card ${q.kind}`}>
                <div>
                  <div className="qr-meta">
                    <span className="mono" style={{ fontWeight: 600, fontSize: 12 }}>{q.sho}</span>
                    <span style={{ color: "var(--text-tertiary)", fontSize: 12 }}>·</span>
                    <span style={{ fontSize: 12, color: "var(--text-secondary)" }}>{q.customer}</span>
                    <GoldaPill/>
                  </div>
                  <div className="qr-title">{q.title}</div>
                  <div className="decision-copy-grid compact">
                    <div><span className="copy-k">Email summary</span><p>{copy.summary}</p></div>
                    <div><span className="copy-k">Recommended next action</span><p>{copy.recommended}</p></div>
                    <div><span className="copy-k">If you confirm</span><p>{copy.willHappen}</p></div>
                  </div>
                  <textarea className="next-action-input" rows="2" placeholder={copy.guidancePrompt}
                    value={instructions[q.id] || ""}
                    onChange={e => setInstructions({ ...instructions, [q.id]: e.target.value })}></textarea>
                  {qrStatus[q.id] && (
                    <div className="qr-status" style={{ fontSize: 12, marginTop: 6, color: qrStatus[q.id] === "saved" ? "var(--accent)" : qrStatus[q.id] === "saving" ? "var(--text-secondary)" : "#c0392b" }}>
                      {qrStatus[q.id] === "saving" ? "Saving instruction to Golda…"
                        : qrStatus[q.id] === "saved" ? "Saved ✓ — Golda recorded your instruction."
                        : qrStatus[q.id].slice(6)}
                    </div>
                  )}
                </div>
                <div className="qr-actions decision-actions">
                  <button className="btn btn-sm" onClick={() => window.GoldaOpenSource(q)}>{copy.openLabel}</button>
                  <button className="btn btn-sm btn-primary" disabled={qrStatus[q.id] === "saving"} onClick={() => confirmDecision(q)}>{copy.confirmLabel}</button>
                  <button className="btn btn-sm" disabled={qrStatus[q.id] === "saving"} onClick={() => saveInstruction(q)}>{qrStatus[q.id] === "saving" ? "Saving…" : qrStatus[q.id] === "saved" ? "Saved ✓" : "Save my instruction"}</button>
                  <button className="icon-btn" title="Dismiss" onClick={() => setDismissed({...dismissed, [q.id]: true})}>✕</button>
                </div>
              </div>
              );
            })}
          </div>
        </>
      )}

      <div className="sec-head">
        <h2>Active engagements</h2>
        <span className="sec-count">{filtered.length} of {data.engagements.length}</span>
        <div className="sec-actions">
          <button className="btn btn-sm" onClick={() => goldaExportCsv(filtered)}>Export CSV</button>
          <button className="btn btn-sm btn-primary" title="Manual thread editing is not enabled in this preview" disabled>+ Add to thread</button>
        </div>
      </div>

      <div className="filterbar" style={{ borderRadius: "8px 8px 0 0" }}>
        <span style={{ fontSize: 11, color: "var(--text-tertiary)", textTransform: "uppercase", letterSpacing: ".04em", fontWeight: 600 }}>Risk</span>
        {["All","Critical","High","Normal","Low"].map(r => (
          <button key={r} className={`chip ${riskFilter === r ? "active" : ""}`} onClick={() => setRiskFilter(r)}>
            {r} {r !== "All" && <span className="chip-count">{riskCounts[r] || 0}</span>}
          </button>
        ))}
        <span style={{ width: 1, height: 18, background: "var(--border)", margin: "0 6px" }}/>
        <span style={{ fontSize: 11, color: "var(--text-tertiary)", textTransform: "uppercase", letterSpacing: ".04em", fontWeight: 600 }}>Stage</span>
        <select value={stageFilter} onChange={e => setStageFilter(e.target.value)} className="chip" style={{ padding: "4px 9px" }}>
          <option>All</option><option>REO</option><option>PICKUP</option>
          <option>BOOKED</option><option>ON BOARD</option><option>ATD</option>
        </select>
        <span className="spacer"/>
        <span style={{ fontSize: 11.5, color: "var(--text-tertiary)" }}>Sorted by risk · then stale time</span>
      </div>

      <div style={{ background: "var(--bg-canvas)", border: "1px solid var(--border)", borderTop: 0, borderRadius: "0 0 8px 8px", overflow: "hidden", boxShadow: "var(--shadow-card)" }}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 110 }}>SHO</th>
              <th>Customer / Agent</th>
              <th>Lane</th>
              <th style={{ width: 130 }}>Stage</th>
              <th style={{ width: 100 }}>ETA</th>
              <th style={{ width: 90 }}>Risk</th>
              <th style={{ width: 110 }}>Updated</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(e => (
              <React.Fragment key={e.sho}>
                <tr className="row-with-sub" onClick={() => onOpenShipment(e.sho)}>
                  <td className="mono" style={{ fontWeight: 600 }}>{e.sho}</td>
                  <td>
                    <div style={{ fontWeight: 500 }}>{e.customer}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{e.agent}</div>
                  </td>
                  <td className="lane">{e.origin} → {e.destination}</td>
                  <td><StageBadge stage={e.stage}/></td>
                  <td className="num">{e.eta}</td>
                  <td><RiskBadge risk={e.risk}/></td>
                  <td className={e.stale ? "danger num" : "muted num"} style={{ fontWeight: e.stale ? 600 : 400 }}>{e.lastUpdate}</td>
                </tr>
                <tr className="sub">
                  <td className="sub-cell"></td>
                  <td colSpan="6" className="sub-cell">
                    <div className="row" style={{ gap: 14, flexWrap: "wrap" }}>
                      <span><span className="muted">Supplier · </span>{e.supplier}</span>
                      <span><span className="muted">AM · </span>{e.manager}</span>
                      <span><span className="muted">Vessel · </span><span className="mono">{e.vessel}</span></span>
                      <span style={{
                        color: e.noteKind === "danger" ? "var(--danger)" :
                               e.noteKind === "warn" ? "var(--warn-text)" :
                               e.noteKind === "ok" ? "var(--success)" : "var(--text-tertiary)",
                        fontWeight: 500
                      }}>{e.note}</span>
                    </div>
                  </td>
                </tr>
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.Screen_ActiveEngagements = Screen_ActiveEngagements;