// FRM-PROC-09 · Response — rejected (tone-considered)
const ResponseRejectedScreen = ({ nav, t, params }) => {
  const { AppBar, Btn, OfferSummary } = window.Fm;
  const Ic = window.Icons, FD = window.FD;
  const resp = FD.RESP_BY_ID[params.id] || FD.RESPONSES.find(r => r.status === "rejected");
  const withReason = t.rejectedState !== "noreason" && resp.reason;

  return (
    <>
      <AppBar onBack={() => nav.back()} title="Your response" align="left"/>
      <div className="fm-body">
        <div className="fm-scroll" style={{ paddingTop: 4 }}>
          <div className="fm-card fm-card-pad" style={{ textAlign: "center", marginBottom: 16, background: "var(--surface)" }}>
            <span className="fm-req-thumb" style={{ width: 56, height: 56, margin: "0 auto 12px", background: "var(--muted)", color: "var(--muted-foreground)" }}><Ic.Info size={26}/></span>
            <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.01em" }}>Not selected this time</div>
            <div className="muted" style={{ fontSize: 13.5, marginTop: 6, lineHeight: 1.5 }}>
              Your offer for {resp.title} wasn't selected for this round.
            </div>
          </div>

          {withReason ? (
            <div className="fm-detail-sec">
              <div className="fm-ds-label">A note from the buyer</div>
              <div className="fm-card fm-card-pad" style={{ fontSize: 13.5, lineHeight: 1.55 }}>{resp.reason}</div>
            </div>
          ) : (
            <div className="fm-card fm-card-pad" style={{ fontSize: 13.5, lineHeight: 1.55, marginBottom: 14, color: "var(--muted-foreground)" }}>
              The buyer selected other suppliers this round. No specific reason was given.
            </div>
          )}

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

          <div className="fm-card fm-card-pad" style={{ marginTop: 16, display: "flex", gap: 12, alignItems: "center", background: "var(--avocado-soft)", borderColor: "transparent" }}>
            <span className="fm-req-thumb" style={{ width: 40, height: 40, background: "var(--avocado)", color: "#fff" }}><Ic.Sprout size={20}/></span>
            <div style={{ fontSize: 13.5, lineHeight: 1.45, color: "var(--avocado-fg)", fontWeight: 500 }}>
              Keep an eye on Home — new requirements for your produce arrive often.
            </div>
          </div>
        </div>
      </div>

      <div className="fm-actionbar">
        <Btn variant="primary" icon={Ic.Home} onClick={() => nav.tab("home")}>Browse other requirements</Btn>
      </div>
    </>
  );
};

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