// Screen 3: Decision Review
const { useState: useS3 } = React;

function DecisionCard({ d, onOpenGuard, onResolve }) {
  const copy = window.GoldaDecisionCopy(d);
  const isLive = !!(window.GoldaData && window.GoldaData.__live);
  const [instruction, setInstruction] = useS3("");
  const [status, setStatus] = useS3(null); // 'saving' | 'saved' | 'error:<msg>'

  // Persist an operator decision to Golda (records it, re-evaluates the case, marks reviewed).
  // Mock/preview (no real case id) just resolves the card locally.
  async function postFeedback(comment) {
    if (!isLive || !(d.caseId || d.emailId)) { onResolve(d.id); return; }
    setStatus("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: d.caseId, emailId: d.emailId })
      });
      const out = await res.json().catch(() => ({}));
      if (res.ok && out.ok !== false) { setStatus("saved"); setTimeout(() => onResolve(d.id), 800); }
      else setStatus("error:" + (out.error || ("Request failed (" + res.status + ")")));
    } catch (e) { setStatus("error:Network error — not saved."); }
  }
  function saveInstruction() {
    const c = instruction.trim();
    if (isLive && (d.caseId || d.emailId) && !c) { setStatus("error:Type an instruction first."); return; }
    postFeedback(c);
  }
  function confirmDecision() {
    postFeedback("Operator confirmed Golda's recommendation: " + String(d.recommendation || d.confirmLabel || "the recommended next action").slice(0, 300));
  }
  return (
    <div className="dec-card">
      <div className="dec-head">
        <span className="tag" style={{ background: "var(--st-info-bg)", color: "var(--st-info-fg)", borderColor: "var(--st-info-border)" }}>{d.kind}</span>
        <span className="mono" style={{ fontWeight: 600, fontSize: 12.5 }}>{d.sho}</span>
        <span style={{ color: "var(--text-tertiary)" }}>·</span>
        <span style={{ fontSize: 12.5, color: "var(--text-secondary)" }}>{d.customer}</span>
        <RiskBadge risk={d.risk}/>
        <div className="spacer"/>
        <ConfidenceMeter value={d.confidence}/>
      </div>
      <div className="dec-body">
        <div className="dec-left">
          <div className="decision-copy-grid">
            <div><span className="copy-k">What is this email about?</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">What happens if you confirm?</span><p>{copy.willHappen}</p></div>
          </div>
          {d.kind === "Vendor email draft" && (
            <div className="draft" style={{ marginTop: 12 }}>
              <div className="draft-head">
                <div className="row"><span className="k">To</span><span>{d.to}</span></div>
                {d.cc && <div className="row"><span className="k">CC</span><span>{d.cc}</span></div>}
                <div className="row"><span className="k">Subject</span><span style={{ fontWeight: 600 }}>{d.subject}</span></div>
              </div>
              <div className="draft-body">{d.body}</div>
            </div>
          )}
          <label className="next-action-label">
            <span>Tell Golda a different next action</span>
            <textarea className="next-action-input" rows="3" placeholder={copy.guidancePrompt}
              value={instruction} onChange={e => setInstruction(e.target.value)}></textarea>
          </label>
          {status && (
            <div style={{ fontSize: 12, marginTop: 6, color: status === "saved" ? "var(--accent)" : status === "saving" ? "var(--text-secondary)" : "#c0392b" }}>
              {status === "saving" ? "Saving instruction to Golda…" : status === "saved" ? "Saved ✓ — Golda recorded your instruction." : status.slice(6)}
            </div>
          )}
        </div>
        <div className="dec-right">
          {isLive ? (
            <div style={{ fontSize: 12, color: "var(--text-secondary)" }}>
              <div className="evidence-head">Source</div>
              <p style={{ margin: "4px 0 0" }}>Based on the latest inbound email for {d.sho}. Use “Open source email” below to review the full thread.</p>
            </div>
          ) : (
            <React.Fragment>
              <div className="evidence-head">Evidence</div>
              <ul style={{ margin: "0 0 12px", paddingLeft: 18, fontSize: 12, color: "var(--text-secondary)" }}>
                {(d.evidence || []).map((x,i)=><li key={i} style={{ margin: "3px 0" }}>{x}</li>)}
              </ul>
              <div className="evidence-head">Guard layers</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
                {(d.guards || []).map(g => (
                  <span key={g.name} className={`guard-chip ${g.state}`} title={g.note || ""}>
                    {g.state === "pass" ? "✓" : g.state === "warn" ? "!" : "✕"} {g.name}
                  </span>
                ))}
              </div>
              <button className="btn btn-sm btn-ghost" onClick={() => onOpenGuard(d)} style={{ marginTop: 10, padding: 0 }}>See full guard panel →</button>
            </React.Fragment>
          )}
        </div>
      </div>
      <div className="dec-foot">
        {d.kind === "Vendor email draft" && <button className="btn btn-sm" title="Draft editing is not enabled in this preview" disabled>Edit draft</button>}
        <button className="btn btn-sm" onClick={() => window.GoldaOpenSource(d)}>{copy.openLabel}</button>
        <button className="btn btn-sm" disabled={status === "saving"} onClick={saveInstruction}>{status === "saving" ? "Saving…" : status === "saved" ? "Saved ✓" : "Save my instruction"}</button>
        <div className="spacer"/>
        <button className="btn btn-sm btn-danger" onClick={() => onResolve(d.id)}>Dismiss / not correct</button>
        <button className="btn btn-sm" onClick={() => onResolve(d.id)}>Remind me later</button>
        <button className="btn btn-sm btn-primary" disabled={status === "saving"} onClick={confirmDecision}>{copy.confirmLabel}</button>
      </div>
    </div>
  );
}

function Screen_DecisionReview({ onOpenGuard }) {
  const data = window.GoldaData;
  const [resolved, setResolved] = useS3({});
  const [filter, setFilter] = useS3("All");

  const filtered = data.decisions.filter(d => {
    if (resolved[d.id]) return false;
    if (filter === "All") return true;
    return d.kind === filter;
  });

  const counts = data.decisions.reduce((a, d) => (a[d.kind] = (a[d.kind]||0)+1, a), {});

  return (
    <div>
      <div className="sec-head">
        <h2>Decision Review</h2>
        <span className="sec-count">{filtered.length} pending</span>
        <div className="sec-actions">
          <button className="btn btn-sm" title="Custom sorting is not enabled in this preview" disabled>Sort: by risk</button>
        </div>
      </div>
      <div className="filterbar" style={{ borderRadius: 8, marginBottom: 14 }}>
        {[{l:"All",k:"All"},{l:"Vendor email drafts",k:"Vendor email draft"},{l:"Questions",k:"Operator question"},{l:"Conflicts",k:"Conflict"}].map(o=>(
          <button key={o.k} className={`chip ${filter===o.k?"active":""}`} onClick={()=>setFilter(o.k)}>
            {o.l} {o.k !== "All" && <span className="chip-count">{counts[o.k]||0}</span>}
          </button>
        ))}
        <span className="spacer"/>
        <span style={{ fontSize: 11.5, color: "var(--text-tertiary)" }}>
          Open the source email, confirm the exact action, or write what Golda should do instead
        </span>
      </div>
      {filtered.length === 0 ? (
        <div className="card"><div className="empty">
          <div className="empty-art"/>
          <h3>Inbox zero ✨</h3>
          <div>Golda has no pending decisions. New items will appear here as they need your input.</div>
        </div></div>
      ) : filtered.map(d => (
        <DecisionCard key={d.id} d={d} onOpenGuard={onOpenGuard} onResolve={id => setResolved({...resolved, [id]: true})}/>
      ))}
    </div>
  );
}
window.Screen_DecisionReview = Screen_DecisionReview;