// FRM-PROC-07 · Response — pending state
const ResponsePendingScreen = ({ nav, t, params }) => {
  const { AppBar, Btn, Banner, Modal, OfferSummary } = window.Fm;
  const Ic = window.Icons, FD = window.FD;
  const resp = FD.RESP_BY_ID[params.id] || FD.RESPONSES.find(r => r.status === "pending");
  const deadlinePassed = t.pendingState === "deadline";
  const [withdraw, setWithdraw] = useState(false);
  const hrs = resp.decisionHrs || 24;

  return (
    <>
      <AppBar onBack={() => nav.back()} title="Your response" align="left"/>
      <div className="fm-body">
        <div className="fm-scroll" style={{ paddingTop: 4 }}>
          <div style={{ marginBottom: 16 }}>
            {deadlinePassed
              ? <Banner tone="neutral" icon={Ic.Clock} title="Deadline passed — awaiting decision"
                        desc="The response window has closed. The buyer is reviewing all offers."/>
              : <Banner tone="warning" icon={Ic.Clock} title="Awaiting buyer decision"
                        desc={`Decision expected in about ${hrs} hours. We'll notify you the moment it's made.`}/>}
          </div>

          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>Requirement</div>
          <div className="fm-card flush" style={{ marginBottom: 16 }}>
            <div className="fm-srow"><span className="k">{resp.reqId}</span><span className="v" style={{ fontWeight: 500 }}>{resp.variety}</span></div>
            <div className="fm-srow" style={{ flexDirection: "column", alignItems: "stretch", gap: 4 }}>
              <span style={{ fontSize: 14, fontWeight: 600 }}>{resp.title}</span>
              <span className="fm-link" style={{ fontSize: 12.5 }} onClick={() => nav.go("reqDetail", { id: resp.reqId })}>View full requirement →</span>
            </div>
          </div>

          <div className="fm-ds-label" style={{ margin: "0 2px 8px" }}>Your offer</div>
          <OfferSummary resp={resp}/>
        </div>
      </div>

      <div className="fm-actionbar">
        <Btn variant="primary" icon={Ic.Edit} disabled={deadlinePassed}
             onClick={() => nav.go("submitResponse", { id: resp.reqId, editing: true })}>Edit response</Btn>
        <button className="fm-btn fm-btn-destructive fm-btn-sm" style={{ flexShrink: 0, whiteSpace: "nowrap" }} onClick={() => setWithdraw(true)}>
          <Ic.Trash size={15}/> Withdraw
        </button>
      </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. This can't be undone.</p>
      </Modal>
    </>
  );
};

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