// FRM-PROC-05 · Submit response
const SubmitResponseScreen = ({ nav, t, params, offline }) => {
  const { AppBar, Btn, Banner, Modal } = window.Fm;
  const Ic = window.Icons, FD = window.FD;
  const r = FD.FEED.find(x => x.id === params.id) || FD.FEED[0];
  const editing = t.submitState === "editing" || params.editing;
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState(false);
  const submitting = t.submitState === "submitting" || busy;
  const submitted = t.submitState === "submitted" || done;
  const isOffline = t.submitState === "offline" || offline;
  const doSubmit = () => { setBusy(true); setTimeout(() => { setBusy(false); setDone(true); }, 800); };

  const [qty, setQty] = useState(editing ? 6200 : 0);
  const [rate, setRate] = useState(editing ? 92 : r.ceiling);
  const [date, setDate] = useState(r.deliveryStart);
  const [altDate, setAltDate] = useState("");
  const [notes, setNotes] = useState(editing ? "Can deliver in two trips if needed." : "");
  const [withdraw, setWithdraw] = useState(false);

  const aboveCeiling = t.submitState === "aboveCeiling" || rate > r.ceiling;
  const outOfWindow = t.submitState === "outOfWindow";

  if (submitted) {
    return (
      <>
        <div className="fm-splash">
          <div className="fm-splash-ring"><Ic.CheckCircle size={48}/></div>
          <h2>{isOffline ? "Saved — will submit when online" : "Response submitted"}</h2>
          <p>{isOffline
            ? "Your offer is queued on your phone and will upload automatically once you reconnect."
            : `Your offer for ${r.title} is in. We'll notify you the moment the buyer decides.`}</p>
        </div>
        <div className="fm-actionbar">
          <Btn variant="primary" icon={Ic.Handshake} onClick={() => nav.tab("myResponses")}>View my responses</Btn>
        </div>
      </>
    );
  }

  return (
    <>
      <AppBar onBack={() => nav.back()} title={editing ? "Edit response" : "Respond"} align="left"/>
      <div className="fm-body">
        <div className="fm-scroll" style={{ paddingTop: 2 }}>
          <div className="fm-req-id" style={{ marginBottom: 14 }}>{r.id} · {r.title}</div>

          {isOffline && <div style={{ marginBottom: 16 }}><Banner tone="neutral" icon={Ic.WifiOff} desc="You're offline. This response will submit automatically when you're back online."/></div>}

          {/* Section 1: Your offer */}
          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>Your offer</div>
          <div className="fm-field">
            <label className="fm-label">Available quantity <span className="req">*</span></label>
            <div className="fm-stepper">
              <button className="fm-step-btn" onClick={() => setQty(q => Math.max(0, q - 100))}>−</button>
              <input className="fm-step-input" inputMode="numeric" value={qty.toLocaleString("en-US")}
                     onChange={(e) => setQty(Math.max(0, Number(e.target.value.replace(/\D/g, "")) || 0))}/>
              <span className="fm-step-suffix">kg</span>
              <button className="fm-step-btn" onClick={() => setQty(q => q + 100)}>+</button>
            </div>
            {qty > r.qty && <div className="fm-ok-note"><Ic.Info size={14}/><span>You're offering more than needed — that's fine.</span></div>}
            {qty > 0 && qty < 1 && <div className="fm-err"><Ic.Warning size={14}/><span>Minimum 1 kg.</span></div>}
          </div>

          <div className="fm-field">
            <label className="fm-label">Your rate <span className="req">*</span></label>
            <div className="fm-stepper">
              <span className="fm-step-suffix" style={{ borderLeft: "none", borderRight: "1px solid var(--border)" }}>KSh</span>
              <input className="fm-step-input" inputMode="decimal" value={rate}
                     onChange={(e) => setRate(Number(e.target.value.replace(/[^\d.]/g, "")) || 0)}/>
              <span className="fm-step-suffix">/kg</span>
            </div>
            {aboveCeiling
              ? <div className="fm-warn-note"><Ic.Warning size={14}/><span>Above the buyer's ceiling of {FD.KES(r.ceiling)} — you can still submit, but consider adjusting.</span></div>
              : <div className="fm-ok-note"><Ic.CheckCircle size={14}/><span>At or under the ceiling of {FD.KES(r.ceiling)}/kg.</span></div>}
          </div>

          <div className="fm-divider"/>

          {/* Section 2: Delivery */}
          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>Delivery</div>
          <div className="fm-field">
            <label className="fm-label">Preferred delivery date <span className="req">*</span></label>
            <button className={`fm-input ${outOfWindow ? "err" : ""}`} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", textAlign: "left" }}>
              <span>{date}</span><Ic.Calendar size={18} style={{ color: "var(--muted-foreground)" }}/>
            </button>
            {outOfWindow
              ? <div className="fm-err"><Ic.Warning size={14}/>Date must be within the delivery window ({r.deliveryStart.slice(5)}–{r.deliveryEnd.slice(5)}).</div>
              : <div className="fm-hint">Window: {r.deliveryStart.slice(5)} – {r.deliveryEnd.slice(5)}</div>}
          </div>
          <div className="fm-field">
            <label className="fm-label">Alternative date <span className="muted" style={{ fontWeight: 400 }}>(optional)</span></label>
            <button className="fm-input" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", textAlign: "left", color: altDate ? "var(--foreground)" : "var(--muted-foreground)" }}>
              <span>{altDate || "Add a backup date"}</span><Ic.Calendar size={18} style={{ color: "var(--muted-foreground)" }}/>
            </button>
          </div>

          <div className="fm-divider"/>

          {/* Section 3: Notes */}
          <div className="fm-field">
            <label className="fm-label">Notes to buyer <span className="muted" style={{ fontWeight: 400 }}>(optional)</span></label>
            <textarea className="fm-textarea" maxLength={500} placeholder="e.g. grade, packaging, harvest date" value={notes} onChange={(e) => setNotes(e.target.value)}/>
            <div className="fm-hint" style={{ textAlign: "right" }}>{notes.length}/500</div>
          </div>

          {editing && (
            <button className="fm-btn fm-btn-destructive" onClick={() => setWithdraw(true)} style={{ marginTop: 4 }}>
              <Ic.Trash size={17}/> Withdraw response
            </button>
          )}
        </div>
      </div>

      <div className="fm-actionbar">
        <Btn variant="primary" loading={submitting} icon={Ic.Send} disabled={qty < 1 || rate <= 0}
             onClick={doSubmit}>
          {submitting ? "Submitting…" : isOffline ? "Queue response" : editing ? "Update response" : "Submit response"}
        </Btn>
      </div>

      <Modal open={withdraw} onClose={() => setWithdraw(false)} title="Withdraw this response?"
        actions={<>
          <button className="fm-btn fm-btn-outline" onClick={() => setWithdraw(false)}>Keep it</button>
          <button className="fm-btn fm-btn-primary" style={{ background: "var(--destructive)" }} onClick={() => { setWithdraw(false); nav.tab("myResponses"); }}>Withdraw</button>
        </>}>
        <p>You can't re-submit on this requirement after withdrawing. The buyer will no longer see your offer.</p>
      </Modal>
    </>
  );
};

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