/* global React, Icon, Pill, SrcChip, Field, DEPOTS, DEPOT_STOCK, DEPOT_MOVEMENTS */
const { useState } = React;

function OpsView({ flow, advanceFlow }) {
  return (
    <div className="view-inner">
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <h2 className="page-title">Operations · depot board</h2>
          <p className="page-sub">Stock across depots, today's movements, and off-hire detection from gate-ins.</p>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <Pill tone="info" noDot><SrcChip src="Cin7" /> synced 2m ago</Pill>
          <button className="btn"><Icon name="refresh" size={13} /> Refresh</button>
        </div>
      </div>

      {/* KPIs */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10, marginBottom: 16 }}>
        <K label="Available stock" v="232" sub="across 4 main + 2 regional" />
        <K label="On hire" v="99" sub="from Cin7" />
        <K label="In transit" v="18" sub="this week" />
        <K label="Today's gate-ins" v="2" sub="1 without off-hire" tone="warn" />
        <K label="Today's gate-outs" v="2" />
      </div>

      <div className="card mb-16">
        <div className="card-head">
          <h3>Stock board by depot</h3>
          <span className="count">· tiles show <span className="mono">available / on-hire</span></span>
        </div>
        <div style={{ padding: 14, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          {DEPOTS.filter(d => d.main).map(d => (
            <div key={d.id} style={{ border: "1px solid var(--line)", borderRadius: 10 }}>
              <div style={{ padding: "10px 12px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 13 }}>{d.name}</div>
                  <div className="muted" style={{ fontSize: 11 }}>{d.region}</div>
                </div>
                <Pill tone="ok" noDot>Staffed</Pill>
              </div>
              <div style={{ padding: 10, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
                {Object.entries(DEPOT_STOCK[d.id]).map(([type, s]) => {
                  const tight = s.available < 10;
                  return (
                    <div key={type} style={{ padding: "8px 10px", borderRadius: 6, background: tight ? "var(--warn-bg)" : "var(--ink-50)" }}>
                      <div style={{ fontSize: 10.5, fontWeight: 700, color: "var(--ink-500)", letterSpacing: "0.04em" }}>{type}</div>
                      <div className="mono" style={{ fontSize: 15, fontWeight: 600, color: tight ? "var(--warn)" : "var(--ink-900)" }}>{s.available}</div>
                      <div style={{ fontSize: 10.5, color: "var(--ink-500)" }}>on hire {s.onHire} · transit {s.transit}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16 }}>
        <div className="card">
          <div className="card-head">
            <h3>Today's movements</h3>
            <span className="count">· 5 · live from daily reports</span>
          </div>
          <table className="tbl">
            <thead><tr><th style={{width:60}}>Time</th><th style={{width:90}}>Type</th><th>Depot</th><th>Container</th><th>Customer</th><th>Flag</th></tr></thead>
            <tbody>
              {DEPOT_MOVEMENTS.map((m, i) => (
                <tr key={i}>
                  <td className="mono">{m.time}</td>
                  <td><Pill tone={m.type === "Gate-in" ? "info" : m.type === "Gate-out" ? "ok" : "warn"} noDot>{m.type}</Pill></td>
                  <td>{m.depot}</td>
                  <td className="mono">{m.container}</td>
                  <td>{m.customer}</td>
                  <td>
                    {m.flag === "off-hire-detected" && (
                      <button onClick={() => flow?.id === "off-hire-detected" && advanceFlow()} className="pill err no-dot" style={{ border: "none", cursor: "pointer" }}>
                        Off-hire not on file → notify CS
                      </button>
                    )}
                    {m.flag === "new-stock" && <Pill tone="info" noDot>New stock</Pill>}
                    {m.flag === "ok" && <Pill tone="ok" noDot>OK</Pill>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Friday forecast</h3>
            <span className="count">· suggested transfers</span>
          </div>
          <div style={{ padding: 14 }}>
            <ForecastRow from="AKL" to="TGA" type="40HC" qty={5} reason="TGA forecast stockout by Weds" />
            <ForecastRow from="CHC" to="PMR" type="20GP" qty={4} reason="PMR below min stock" />
            <ForecastRow from="AKL" to="CHC" type="40GP" qty={2} reason="Pipeline: 3 sales on 40GP next wk" />
            <button className="btn dark mt-12" style={{ width: "100%", justifyContent: "center" }}>
              <Icon name="check" size={13} /> Approve transfer plan
            </button>
            <div className="muted mt-8" style={{ fontSize: 11.5 }}>Replaces Brett's Friday email.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function K({ label, v, sub, tone }) {
  return (
    <div className="card" style={{ padding: "12px 14px" }}>
      <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 700, color: "var(--ink-500)" }}>{label}</div>
      <div className="mono" style={{ fontSize: 22, fontWeight: 600, color: tone === "warn" ? "var(--warn)" : "var(--ink-900)" }}>{v}</div>
      {sub && <div style={{ fontSize: 11, color: "var(--ink-500)" }}>{sub}</div>}
    </div>
  );
}

function ForecastRow({ from, to, type, qty, reason }) {
  return (
    <div style={{ padding: "10px 0", borderBottom: "1px solid var(--line-soft)", display: "flex", justifyContent: "space-between", gap: 12 }}>
      <div>
        <div style={{ fontSize: 13 }}><span className="mono" style={{ fontWeight: 600 }}>{qty}× {type}</span> · {from} → {to}</div>
        <div className="muted" style={{ fontSize: 11.5 }}>{reason}</div>
      </div>
      <Pill tone="info" noDot>Suggested</Pill>
    </div>
  );
}

window.OpsView = OpsView;