// OPT-GATE-05 · Manual gate entry
const ManualEntryScreen = ({ t, go }) => {
  const { Btn, Banner, OrderCard, Pill } = window.Op;
  const Ic = window.Icons, FD = window.OD;
  const state = t.manualEntry; // empty | matched | noOrder | errors | outbound
  const outbound = state === "outbound";
  const matched = state === "matched" || outbound;
  const errors = state === "errors";

  const order = outbound
    ? { ...FD.ORDER, id: "SO-2026-0413", dir: "out", who: "Karibu Foods", tier: "—", product: "Crude avocado oil", grade: "Bulk drums", qty: 18000, rate: 0, location: "Industrial Area, Nairobi", slotWindow: "10:00 – 11:00" }
    : FD.ORDER;

  const Field = ({ label, req, hint, err, children }) => (
    <div className="op-field">
      <div className="op-label">{label}{req && <span className="req">*</span>}</div>
      {children}
      {err ? <div className="op-err"><Ic.Warning size={13}/><span>{err}</span></div> : hint ? <div className="op-hint">{hint}</div> : null}
    </div>
  );

  return (
    <div className="op-body" style={{ display: "flex", flexDirection: "column" }}>
      <div className="op-pad" style={{ flex: 1 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.45fr 1fr", gap: 20, alignItems: "start" }}>
          {/* Form */}
          <div>
            <div className="op-sec"><span className="op-sec-title">1 · Order lookup</span></div>
            <div className="op-card op-card-pad" style={{ marginBottom: 18 }}>
              <Field label="Direction" req>
                <div className="op-chips">
                  <span className={`op-chip ${!outbound ? "on" : ""}`}><Ic.ArrowDown size={15}/> Inbound (delivery)</span>
                  <span className={`op-chip ${outbound ? "on" : ""}`}><Ic.ArrowUp size={15}/> Outbound (dispatch)</span>
                </div>
              </Field>
              <Field label={outbound ? "Buyer" : "Supplier / farmer"} req hint="Type-ahead from the approved list.">
                <div className="op-search"><span className="op-search-ic"><Ic.Search size={17}/></span>
                  <input className="op-input" defaultValue={matched ? order.who : ""} placeholder={outbound ? "Search buyer name" : "Search farmer or buyer name"}/>
                </div>
              </Field>
              <Field label="Open order" req err={errors ? "Select an order to continue." : null} hint={!errors ? `Orders with slot date today ±1 (${outbound ? "dispatches" : "procurement"}).` : null}>
                <div className="op-select-wrap">
                  <select className={`op-select ${errors ? "err" : ""}`} defaultValue={matched ? "1" : ""}>
                    <option value="" disabled>Select an open order</option>
                    <option value="1">{order.id} · {order.product} · {FD.KG(order.qty)}</option>
                  </select>
                  <span className="op-select-chev"><Ic.ChevronDown size={18}/></span>
                </div>
              </Field>
              {state === "noOrder" && <Banner tone="warning" icon={Ic.Info} title="No open orders for this supplier today" desc="They may not be scheduled. Create an incident to flag the unexpected arrival."><div style={{ marginTop: 10 }}><Btn variant="outline" size="sm" icon={Ic.Plus}>Create incident</Btn></div></Banner>}
            </div>

            <div className="op-sec"><span className="op-sec-title">2 · Truck & driver</span></div>
            <div className="op-card op-card-pad">
              <div className="op-grid-2">
                <Field label="Truck plate number" req err={errors ? "Plate is required." : null} hint={!errors ? "Uppercase, e.g. KCB 412G. Validated loosely." : null}>
                  <input className={`op-input op-mono ${errors ? "err" : ""}`} defaultValue={matched ? order.truck : ""} placeholder="e.g. KCB 412G" style={{ textTransform: "uppercase", letterSpacing: "0.04em" }}/>
                </Field>
                <Field label="Driver name" req>
                  <input className="op-input" defaultValue={matched ? order.driver : ""} placeholder="Full name"/>
                </Field>
                <Field label="Driver ID / license" hint="Optional. Photo encouraged next step.">
                  <input className="op-input" placeholder="ID or license number"/>
                </Field>
                <Field label="Driver phone" hint="For coordination.">
                  <input className="op-input" placeholder="+254 7…"/>
                </Field>
              </div>
            </div>
          </div>

          {/* Live preview */}
          <div>
            <div className="op-sec"><span className="op-sec-title">Matched order</span></div>
            {matched
              ? <OrderCard order={order}/>
              : <div className="op-card op-card-pad" style={{ textAlign: "center", padding: 32 }}>
                  <span className="op-empty-art" style={{ width: 72, height: 72, borderRadius: 20 }}><Ic.ClipboardList size={30}/></span>
                  <div style={{ fontSize: 15, fontWeight: 600, marginTop: 14 }}>No order selected</div>
                  <div className="op-muted" style={{ fontSize: 12.5, marginTop: 6, lineHeight: 1.5 }}>Search a supplier and pick an open order to preview it here.</div>
                </div>}
          </div>
        </div>
      </div>

      <div className="op-actionbar">
        <Btn variant="outline" icon={Ic.Download} onClick={() => go("dashboard")}>Save &amp; exit</Btn>
        <div className="op-ab-grow"/>
        <Btn variant="primary" iconRight={Ic.ChevronRight} disabled={!matched} onClick={() => go("captureDriver")}>Continue to verification</Btn>
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  manualEntry: { chrome: "flow", title: "Manual gate-in", sub: "Farmer arrived without a confirmed gate-in", back: "dashboard", render: (ctx) => <ManualEntryScreen {...ctx}/> },
});