// FRM-PROC-12 · Delivery slot detail
const DeliverySlotScreen = ({ nav, t, params }) => {
  const { AppBar, Btn, QR, Banner } = window.Fm;
  const Ic = window.Icons, FD = window.FD;
  const resp = FD.RESP_BY_ID[params.id] || FD.RESPONSES.find(r => r.status === "accepted");
  const state = t.slotState; // daybefore | dayof | inprogress | past
  const [toast, setToast] = useState(false);
  const showToast = (msg) => { setToast(msg); setTimeout(() => setToast(false), 2000); };

  const checklist = [
    { label: "Agreement signed", done: true },
    { label: "National ID", done: true, note: "Bring physical ID" },
    { label: "Delivery list", done: false, note: "Optional" },
  ];

  return (
    <>
      <AppBar onBack={() => nav.back()} title="Delivery details" align="left"
        right={<button className="fm-iconbtn" aria-label="Save" onClick={() => showToast("Saved to phone")}><Ic.Download size={20}/></button>}/>
      <div className="fm-body">
        <div className="fm-scroll" style={{ paddingTop: 4 }}>
          {state === "dayof" && <div style={{ marginBottom: 16 }}><Banner tone="success" icon={Ic.Truck} title="Today's delivery" desc="Your slot opens in about 2 hours. Head to the gate in good time."/></div>}
          {state === "inprogress" && <div style={{ marginBottom: 16 }}><Banner tone="info" icon={Ic.CheckCircle} title="Truck verified at gate" desc="Your truck was scanned in at 08:42. Proceed to the weighbridge."/></div>}
          {state === "past" && <div style={{ marginBottom: 16 }}><Banner tone="neutral" icon={Ic.Clock} title="Slot window closed" desc="If you couldn't deliver, contact the buyer to arrange a new slot."/></div>}

          {/* QR hero */}
          <div className="fm-card" style={{ marginBottom: 16 }}>
            <div className="fm-qr-wrap">
              <QR value={resp.gpn} size={196}/>
              <div className="fm-qr-caption">{resp.gpn}</div>
              <div className="muted" style={{ fontSize: 12, marginTop: -6 }}>Show at the gate · valid ±2 hours</div>
            </div>
          </div>

          {/* Date/time */}
          <div className="fm-card fm-card-pad" style={{ marginBottom: 16, display: "flex", alignItems: "center", gap: 14 }}>
            <span className="fm-req-thumb" style={{ width: 48, height: 48, background: "var(--avocado)", color: "#fff" }}><Ic.Calendar size={22}/></span>
            <div>
              <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>{resp.slotDate}</div>
              <div className="muted" style={{ fontSize: 13.5 }}>{resp.slotWindow}</div>
            </div>
          </div>

          {/* Address + map */}
          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>Gate address</div>
          <div className="fm-card flush" style={{ marginBottom: 16, overflow: "hidden" }}>
            <div className="fm-map"><div className="fm-map-road"/><span className="fm-map-pin"><Ic.MapPin size={28}/></span></div>
            <div style={{ padding: "12px 16px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
              <span style={{ fontSize: 13.5, fontWeight: 500 }}>{resp.gate}</span>
              <button className="fm-btn fm-btn-outline fm-btn-sm" onClick={() => showToast("Opening maps…")}><Ic.MapPin size={15}/> Map</button>
            </div>
          </div>

          {/* Instructions */}
          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>Driver instructions</div>
          <div className="fm-card fm-card-pad" style={{ marginBottom: 16, fontSize: 13.5, lineHeight: 1.55 }}>
            Enter via Gate 2 (suppliers). Report to the weighbridge first for gross weight, then proceed to receiving bay C. Keep produce in shade until unloaded.
          </div>

          {/* Checklist */}
          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>What to bring</div>
          <div className="fm-card flush" style={{ marginBottom: 16 }}>
            {checklist.map(c => (
              <div className="fm-srow" key={c.label} style={{ alignItems: "center" }}>
                <span className="k" style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span className="fm-check-box" style={{ width: 20, height: 20, marginTop: 0, background: c.done ? "var(--success)" : "var(--card)", borderColor: c.done ? "var(--success)" : "var(--input)" }}>{c.done && <Ic.Check size={13}/>}</span>
                  <span style={{ color: "var(--foreground)", fontWeight: 500 }}>{c.label}</span>
                </span>
                {c.note && <span className="v" style={{ fontWeight: 400, color: "var(--muted-foreground)", fontSize: 12 }}>{c.note}</span>}
              </div>
            ))}
          </div>

          {/* Contact */}
          <div className="fm-card fm-card-pad" style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span className="fm-req-thumb" style={{ width: 40, height: 40 }}><Ic.Leaf size={18}/></span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{FD.BUYER.org}</div>
              <div className="muted" style={{ fontSize: 12 }}>Gate office</div>
            </div>
            <button className="fm-iconbtn" style={{ border: "1px solid var(--border)" }} aria-label="Call" onClick={() => showToast("Calling gate office…")}><Ic.Phone size={18}/></button>
          </div>
        </div>
      </div>

      {state !== "past" && (
        <div className="fm-actionbar">
          <button className="fm-btn fm-btn-ghost" onClick={() => nav.go("reschedule", { id: resp.id })}><Ic.Calendar size={18}/> Request reschedule</button>
        </div>
      )}

      {toast && <div className="fm-toast"><Ic.CheckCircle size={18}/>{toast}</div>}
    </>
  );
};

window.FarmerPages = Object.assign(window.FarmerPages || {}, {
  deliverySlot: { brandStatus: false, render: (ctx) => <DeliverySlotScreen {...ctx}/> },
});