// Screen 8: SHO Report Inbox (Phase 2 placeholder)
function Screen_SHOInbox() {
  return (
    <div>
      <div className="sec-head">
        <h2>SHO Report Inbox</h2>
        <span className="tag" style={{ background: "var(--st-warn-bg)", color: "var(--st-warn-fg)", borderColor: "var(--st-warn-border)" }}>Phase 2 · preview</span>
        <span className="sec-count">Ingesting daily Unifreight reports</span>
      </div>

      <div className="banner warn">
        <span style={{ fontSize: 16 }}>⏳</span>
        <div>
          <div><strong>Not active in Phase 1.</strong> When enabled, Golda will read the daily Unifreight SHO report and create engagements automatically.</div>
          <div style={{ fontWeight: 400, fontSize: 11.5, marginTop: 2 }}>This preview shows what the workflow will look like.</div>
        </div>
      </div>

      <div className="stat-grid">
        <div className="stat"><div className="stat-label">Today's rows</div><div className="stat-value">142</div><div className="stat-trend muted">06-May 09:12 received</div></div>
        <div className="stat"><div className="stat-label">Created</div><div className="stat-value">128</div><div className="stat-trend">+128 engagements</div></div>
        <div className="stat"><div className="stat-label">Updated</div><div className="stat-value">11</div><div className="stat-trend muted">Existing engagements</div></div>
        <div className="stat"><div className="stat-label">Conflicts</div><div className="stat-value">3</div><div className="stat-trend bad">Need resolution</div></div>
      </div>

      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-header">
          <h3 className="card-title">Conflicts to resolve</h3>
          <span className="card-sub">3 rows differ from existing engagements</span>
        </div>
        <table className="tbl">
          <thead><tr><th>SHO</th><th>Field</th><th>Existing value</th><th>Report value</th><th style={{ width: 220 }}></th></tr></thead>
          <tbody>
            <tr>
              <td className="mono">SHO-24819</td><td>ETD</td>
              <td className="mono">2026-05-22</td><td className="mono">2026-05-24</td>
              <td><button className="btn btn-sm" title="Phase 2 preview — not enabled" disabled>Keep existing</button> <button className="btn btn-sm btn-primary" title="Phase 2 preview — not enabled" disabled>Use report</button></td>
            </tr>
            <tr>
              <td className="mono">SHO-24771</td><td>Gross weight</td>
              <td className="mono">18,420 kg</td><td className="mono">18,240 kg</td>
              <td><button className="btn btn-sm" title="Phase 2 preview — not enabled" disabled>Keep existing</button> <button className="btn btn-sm btn-primary" title="Phase 2 preview — not enabled" disabled>Use report</button></td>
            </tr>
            <tr>
              <td className="mono">SHO-24803</td><td>Vessel</td>
              <td className="mono">ZIM USA / 037E</td><td className="mono">ZIM USA / 038E</td>
              <td><button className="btn btn-sm" title="Phase 2 preview — not enabled" disabled>Keep existing</button> <button className="btn btn-sm btn-primary" title="Phase 2 preview — not enabled" disabled>Use report</button></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div className="card">
        <div className="card-header">
          <h3 className="card-title">Newly created (not yet linked to a thread)</h3>
          <span className="card-sub">9 shipments — Golda is looking for vendor contact in inbox</span>
        </div>
        <table className="tbl">
          <thead><tr><th>SHO</th><th>Customer</th><th>Lane</th><th>Supplier</th><th>Created</th></tr></thead>
          <tbody>
            <tr><td className="mono">SHO-24827</td><td>Tnuva Food Industries</td><td className="lane">Genoa → Ashdod</td><td>Granarolo S.p.A.</td><td className="muted">09:12</td></tr>
            <tr><td className="mono">SHO-24828</td><td>Plasson Industries</td><td className="lane">Qingdao → Ashdod</td><td>—</td><td className="muted">09:12</td></tr>
            <tr><td className="mono">SHO-24829</td><td>Magal Security</td><td className="lane">Bremerhaven → Haifa</td><td>—</td><td className="muted">09:12</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}
window.Screen_SHOInbox = Screen_SHOInbox;