// Screen 5: Customer SOP
const { useState: useS5 } = React;

function Screen_SOP() {
  const data = window.GoldaData;
  const [customer, setCustomer] = useS5("Polytec Plastics Ltd.");
  const [lane, setLane] = useS5("All lanes");
  const [rows, setRows] = useS5(data.sop_fields);
  const [suggestions, setSuggestions] = useS5(data.sop_suggestions);

  const update = (i, key, val) => {
    const next = rows.slice();
    next[i] = { ...next[i], [key]: val };
    setRows(next);
  };

  return (
    <div>
      <div className="sec-head">
        <h2>Customer SOP</h2>
        <span className="sec-count">What matters for this customer</span>
        <div className="sec-actions">
          <button className="btn btn-sm" title="Not enabled in this preview" disabled>History</button>
          <button className="btn btn-sm btn-primary" title="Not enabled in this preview" disabled>Save changes</button>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-body" style={{ display: "flex", gap: 14, alignItems: "center" }}>
          <div>
            <div style={{ fontSize: 11, color: "var(--text-tertiary)", textTransform: "uppercase", letterSpacing: ".04em", fontWeight: 600, marginBottom: 4 }}>Customer</div>
            <select className="btn" value={customer} onChange={e => setCustomer(e.target.value)} style={{ minWidth: 240 }}>
              {[...new Set(data.engagements.map(e=>e.customer))].map(c => <option key={c}>{c}</option>)}
            </select>
          </div>
          <span style={{ color: "var(--text-tertiary)" }}>·</span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: "var(--text-tertiary)", textTransform: "uppercase", letterSpacing: ".04em", fontWeight: 600, marginBottom: 4 }}>Active engagements</div>
            <div style={{ fontSize: 12.5 }}>
              <span className="mono" style={{ fontWeight: 600 }}>3 open</span>
              <span className="muted"> · SHO-24819, SHO-24787, SHO-24748 · lanes: Ningbo→Ashdod, Shanghai→Ashdod, Busan→Ashdod</span>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 11, color: "var(--text-tertiary)", textTransform: "uppercase", letterSpacing: ".04em", fontWeight: 600, marginBottom: 4 }}>Default automation</div>
            <select className="btn"><option>Draft & ask</option><option>Auto-send</option><option>Observe</option></select>
          </div>
        </div>
      </div>

      <div className="lane-tabs">
        {["All lanes","Ningbo → Ashdod","Shanghai → Ashdod","Busan → Ashdod","+ Add lane"].map(l => (
          <button key={l} className={`lane-tab ${l === lane ? "active" : ""}`} onClick={() => l !== "+ Add lane" && setLane(l)}>{l}</button>
        ))}
      </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)", marginBottom: 18 }}>
        <table className="tbl">
          <thead>
            <tr>
              <th>Field</th>
              <th style={{ width: 160 }}>Rule</th>
              <th style={{ width: 140 }}>When needed</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={r.field} style={{ cursor: "default" }}>
                <td style={{ fontWeight: 500 }}>{r.field}</td>
                <td>
                  <select className="cell-select" value={r.rule} onChange={e => update(i, "rule", e.target.value)}>
                    <option>Required</option><option>Important</option><option>Useful</option><option>Optional</option><option>Not needed</option>
                  </select>
                </td>
                <td>
                  <select className="cell-select" value={r.when} onChange={e => update(i, "when", e.target.value)}>
                    <option>REO</option><option>Supply Date</option><option>PICKUP</option><option>BOOKED</option><option>ON BOARD</option><option>ATD</option>
                  </select>
                </td>
                <td>
                  <input className="cell-select" defaultValue={r.notes} placeholder="Add a note…" style={{ width: "100%" }}/>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="sec-head">
        <span className="golda-avatar">G</span>
        <h2>Rule suggestions from Golda</h2>
        <span className="sec-count">{suggestions.length} based on your recent decisions</span>
      </div>
      {suggestions.map(s => (
        <div key={s.id} className="suggest-card">
          <div>
            <div className="sg-title">{s.title}</div>
            <div className="sg-meta">{s.meta}</div>
            <div className="sg-scope">
              <span style={{ fontSize: 11, color: "var(--text-tertiary)", marginRight: 4, alignSelf: "center" }}>Scope:</span>
              {["this customer","this lane only","all customers"].map(sc => (
                <button key={sc} className={`chip ${sc === s.scope ? "active" : ""}`} title="Scope editing is not enabled in this preview" disabled>{sc}</button>
              ))}
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <button className="btn btn-sm btn-primary" title="Not enabled in this preview" disabled>Accept</button>
            <button className="btn btn-sm" title="Not enabled in this preview" disabled>Reject</button>
          </div>
        </div>
      ))}
    </div>
  );
}
window.Screen_SOP = Screen_SOP;