// OPT-GATE-11 · Weight slip photo viewer  (full-screen)
const SlipViewerScreen = ({ t, go }) => {
  const { Btn } = window.Op;
  const Ic = window.Icons;
  const state = t.slipViewer; // single | multiple | disputed
  const slips = state === "multiple" || state === "disputed"
    ? [{ type: "Gross", value: "16,420 kg", at: "16 May · 08:34", by: "Ann Mwangi" }, { type: "Tare", value: "12,220 kg", at: "16 May · 10:12", by: "Ann Mwangi" }]
    : [{ type: "Gross", value: "16,420 kg", at: "16 May · 08:34", by: "Ann Mwangi" }];
  const [idx, setIdx] = useState(0);
  const [menu, setMenu] = useState(false);
  const cur = slips[idx];
  const multi = slips.length > 1;

  return (
    <div style={{ flex: 1, position: "relative", minHeight: 0 }}>
      <div className="op-viewer">
        <div className="op-viewer-top">
          <button className="op-iconbtn ghost" style={{ color: "#fff" }} aria-label="Close" onClick={() => go("movementLog")}><Ic.X size={22}/></button>
          <div className="op-vt-body">
            <div style={{ fontSize: 15.5, fontWeight: 600 }}><span className="op-gpn">GPN-20260516-0042</span> · {cur.type} weight slip</div>
            <div style={{ fontSize: 12.5, opacity: 0.85 }}>{cur.value} · captured {cur.at} · by {cur.by}</div>
          </div>
          <div style={{ position: "relative" }}>
            <button className="op-iconbtn ghost" style={{ color: "#fff" }} aria-label="More" onClick={() => setMenu(!menu)}><Ic.More size={22}/></button>
            {menu && (
              <>
                <div style={{ position: "fixed", inset: 0, zIndex: 4 }} onClick={() => setMenu(false)}/>
                <div className="op-card" style={{ position: "absolute", right: 0, top: "calc(100% + 6px)", zIndex: 5, padding: 5, minWidth: 200, boxShadow: "var(--shadow-2xl)" }}>
                  {[["Share to manager", Ic.Share], ["Download to device", Ic.Download], ["Mark as disputed", Ic.Flag]].map(([l, I2], i) => (
                    <button key={i} onClick={() => setMenu(false)} style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", border: "none", background: "transparent", padding: "10px 11px", borderRadius: "var(--radius-md)", cursor: "pointer", fontSize: 13.5, color: i === 2 ? "var(--destructive)" : "var(--foreground)", textAlign: "left" }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--accent)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                      {React.createElement(I2, { size: 16 })} {l}
                    </button>
                  ))}
                </div>
              </>
            )}
          </div>
        </div>

        <div className="op-viewer-stage">
          {multi && <button className="op-viewer-nav" style={{ position: "absolute", left: 22 }} onClick={() => setIdx(i => Math.max(0, i - 1))} disabled={idx === 0}><Ic.ChevronLeft size={24}/></button>}
          <div className="op-viewer-photo">
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 8, color: "oklch(0.45 0.01 90)" }}>
              <Ic.FileText size={40}/>
              <div className="op-mono" style={{ fontSize: 12, fontWeight: 600 }}>WEIGHBRIDGE TICKET</div>
              <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: "-0.02em", color: "oklch(0.28 0.01 90)" }}>{cur.value}</div>
            </div>
            <span style={{ position: "absolute", right: 12, top: 12, background: "oklch(0 0 0 / 0.5)", color: "#fff", borderRadius: 9999, padding: "5px 10px", fontSize: 11, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 5 }}><Ic.ZoomIn size={13}/> Pinch to zoom</span>
          </div>
          {multi && <button className="op-viewer-nav" style={{ position: "absolute", right: 22 }} onClick={() => setIdx(i => Math.min(slips.length - 1, i + 1))} disabled={idx === slips.length - 1}><Ic.ChevronRight size={24}/></button>}
        </div>

        <div className="op-viewer-meta">
          <div>
            {state === "disputed" && <div style={{ background: "var(--destructive)", color: "#fff", padding: "8px 13px", borderRadius: "var(--radius-md)", fontSize: 12.5, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 7, marginBottom: 10 }}><Ic.Flag size={14}/> Marked for review by F. Otieno on 16 May · downstream ops on this GPN are blocked</div>}
            {multi && <div style={{ fontSize: 12.5, opacity: 0.8 }}>Slip {idx + 1} of {slips.length}</div>}
          </div>
        </div>
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  slipViewer: { chrome: "bare", render: (ctx) => <SlipViewerScreen {...ctx}/> },
});