// FRM-PROC-11 · Reschedule request
const RescheduleScreen = ({ nav, t, params }) => {
  const { AppBar, Btn, 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 noSlot = t.rescheduleState === "noslot";
  const [sent, setSent] = useState(false);
  const submitted = t.rescheduleState === "submitted" || sent;
  const [date, setDate] = useState("");
  const [slot, setSlot] = useState("");
  const [reason, setReason] = useState("");
  const valid = date && slot && reason.trim().length >= 10 && !noSlot;
  const slots = ["06:00 – 09:00", "09:00 – 12:00", "13:00 – 16:00"];
  const days = [["Wed", "14"], ["Thu", "15"], ["Fri", "16"], ["Sat", "17"]];

  if (submitted) {
    return (
      <>
        <div className="fm-splash">
          <div className="fm-splash-ring" style={{ background: "var(--info-soft)", color: "var(--info)" }}><Ic.Send size={42}/></div>
          <h2>Request sent</h2>
          <p>The buyer will respond within 24 hours. We'll notify you once they've reviewed your new slot.</p>
        </div>
        <div className="fm-actionbar">
          <Btn variant="primary" onClick={() => nav.go("responseAccepted", { id: resp.id })}>Back to order</Btn>
        </div>
      </>
    );
  }

  return (
    <>
      <AppBar onBack={() => nav.back()} title="Request reschedule" align="left"/>
      <div className="fm-body">
        <div className="fm-scroll" style={{ paddingTop: 4 }}>
          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>Current slot</div>
          <div className="fm-card flush" style={{ marginBottom: 18 }}>
            <div className="fm-srow"><span className="k">Date</span><span className="v">{resp.slotDate}</span></div>
            <div className="fm-srow"><span className="k">Time window</span><span className="v">{resp.slotWindow}</span></div>
          </div>

          <div className="fm-field">
            <label className="fm-label">New preferred date <span className="req">*</span></label>
            <div className="fm-chips wrap">
              {days.map(([d, n]) => (
                <button key={n} className={`fm-chip pick ${date === n ? "on" : ""}`}
                  style={{ flexDirection: "column", height: 56, width: 60, gap: 3, padding: "0 8px", justifyContent: "center", alignItems: "center" }}
                  onClick={() => setDate(n)}>
                  <span style={{ fontSize: 11, opacity: 0.7, lineHeight: 1 }}>{d}</span>
                  <span style={{ fontSize: 17, fontWeight: 700, lineHeight: 1 }}>{n}</span>
                </button>
              ))}
            </div>
            <div className="fm-hint">Within 7 days of your original slot.</div>
          </div>

          <div className="fm-field">
            <label className="fm-label">New time window <span className="req">*</span></label>
            {noSlot ? (
              <Banner tone="warning" icon={Ic.Warning} desc="No slots available on that date. Try another day."/>
            ) : (
              <div className="fm-radio-list">
                {slots.map(s => (
                  <button key={s} className={`fm-radio ${slot === s ? "on" : ""}`} onClick={() => setSlot(s)}>
                    <span className="fm-radio-dot"/>
                    <div className="fm-radio-label">{s}</div>
                  </button>
                ))}
              </div>
            )}
          </div>

          <div className="fm-field">
            <label className="fm-label">Reason <span className="req">*</span></label>
            <textarea className="fm-textarea" placeholder="Why do you need to reschedule?" value={reason} onChange={(e) => setReason(e.target.value)} maxLength={300}/>
            <div className="fm-hint">{reason.trim().length < 10 ? `${10 - reason.trim().length} more characters needed` : "Looks good"}</div>
          </div>
        </div>
      </div>

      <div className="fm-actionbar">
        <Btn variant="primary" icon={Ic.Send} disabled={!valid} onClick={() => setSent(true)}>Send request</Btn>
      </div>
    </>
  );
};

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