// FRM-PROC-04 · Requirement detail
const DetailSection = ({ label, children }) => (
  <div className="fm-detail-sec">
    <div className="fm-ds-label">{label}</div>
    <div className="fm-card flush">{children}</div>
  </div>
);

const RequirementDetailScreen = ({ nav, t, params }) => {
  const { AppBar, Btn, Pill, Ticker, Sheet, Banner } = window.Fm;
  const Ic = window.Icons, FD = window.FD;
  const r = FD.FEED.find(x => x.id === params.id) || FD.FEED[0];
  const state = t.detailState;
  const [sheet, setSheet] = useState(false);
  const responded = state === "responded";
  const deadlinePassed = state === "deadline";
  const cancelled = state === "cancelled";
  const version = state === "version";
  const payout = (r.qty * r.ceiling).toLocaleString("en-US");

  return (
    <>
      <AppBar onBack={() => nav.back()} title={r.id} align="center"
        right={<>
          <button className="fm-iconbtn" aria-label="Bookmark"><Ic.Bookmark size={20}/></button>
          <button className="fm-iconbtn" aria-label="Share"><Ic.Share size={20}/></button>
        </>}/>

      <div className="fm-body">
        <div className="fm-scroll" style={{ paddingTop: 6 }}>
          {/* Hero */}
          <div className="fm-card fm-card-pad" style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 16, background: "var(--avocado-soft)", borderColor: "transparent" }}>
            <span className="fm-req-thumb" style={{ width: 52, height: 52, background: "var(--avocado)", color: "#fff" }}><Ic.Leaf size={26}/></span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: "-0.01em", lineHeight: 1.25 }}>{r.title}</div>
              <div style={{ display: "flex", gap: 6, marginTop: 6, flexWrap: "wrap" }}>
                <span className="badge badge-avocado">{r.variety}</span>
                <span className="badge badge-outline">{r.grade}</span>
                {r.urgent && <Pill status="urgent"/>}
                {responded && <Pill status="responded"/>}
              </div>
            </div>
          </div>

          {cancelled && <div style={{ marginBottom: 16 }}><Banner tone="danger" icon={Ic.XCircle} title="This requirement was cancelled" desc="The buyer withdrew this requirement. No further responses are accepted."/></div>}
          {deadlinePassed && <div style={{ marginBottom: 16 }}><Banner tone="neutral" icon={Ic.Clock} title="Response deadline passed" desc="You can no longer respond to this requirement."/></div>}
          {version && <div style={{ marginBottom: 16 }}><Banner tone="warning" icon={Ic.Info} title="Updated — review changes" desc="The quantity and rate ceiling changed since you last viewed."><div className="fm-link" style={{ marginTop: 6, display: "inline-flex", alignItems: "center", gap: 4 }}>See what changed <Ic.ChevronRight size={13}/></div></Banner></div>}
          {responded && !deadlinePassed && !cancelled && <div style={{ marginBottom: 16 }}><Banner tone="success" icon={Ic.CheckCircle} title="You've responded to this" desc="Offered 6,200 kg @ KSh 92/kg. You can edit until the deadline."/></div>}

          <DetailSection label="Product details">
            <div className="fm-srow"><span className="k">Variety</span><span className="v">{r.variety}</span></div>
            <div className="fm-srow" style={{ flexDirection: "column", alignItems: "stretch", gap: 6 }}>
              <span className="k">Specification</span>
              <span style={{ fontSize: 13.5, lineHeight: 1.5, color: "var(--foreground)" }}>{r.spec}</span>
            </div>
          </DetailSection>

          <DetailSection label="What we need">
            <div className="fm-srow"><span className="k">Quantity</span><span className="v">{FD.KG(r.qty)}</span></div>
            <div className="fm-srow"><span className="k">Accepted variance</span><span className="v">{r.variance}</span></div>
          </DetailSection>

          <DetailSection label="Rate">
            <div className="fm-srow">
              <span className="k">Ceiling
                <button className="fm-link" style={{ fontSize: 11.5, marginLeft: 2 }} onClick={() => setSheet(true)}>What's this?</button>
              </span>
              <span className="v" style={{ fontSize: 16 }}>{FD.KES(r.ceiling)}<small> /kg</small></span>
            </div>
            <div className="fm-srow"><span className="k">Est. value at ceiling</span><span className="v" style={{ fontWeight: 500, color: "var(--muted-foreground)" }}>KSh {payout}</span></div>
          </DetailSection>

          <DetailSection label="Timeline">
            <div className="fm-srow"><span className="k">Delivery window</span><span className="v">{r.deliveryStart.slice(5)} – {r.deliveryEnd.slice(5)}</span></div>
            <div className="fm-srow"><span className="k">Response closes</span><span className="v"><Ticker hrs={r.hrs} label=""/></span></div>
          </DetailSection>

          <DetailSection label={`From ${r.buyer.org}`}>
            <div className="fm-srow" style={{ alignItems: "center" }}>
              <span className="k" style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span className="fm-req-thumb" style={{ width: 38, height: 38, borderRadius: 11 }}><Ic.Leaf size={18}/></span>
                <span><span style={{ display: "block", fontWeight: 600, color: "var(--foreground)", fontSize: 14 }}>{r.buyer.org}</span><span style={{ fontSize: 12 }}>{r.buyer.plant}</span></span>
              </span>
              <span className="badge badge-success"><Ic.CheckCircle size={11}/> Verified</span>
            </div>
          </DetailSection>
        </div>
      </div>

      {!cancelled && (
        <div className="fm-actionbar">
          <Btn variant="primary" icon={responded ? Ic.Edit : Ic.Send} disabled={deadlinePassed}
               onClick={() => nav.go("submitResponse", { id: r.id, editing: responded })}>
            {responded ? "Edit my response" : "Respond"}
          </Btn>
        </div>
      )}

      <Sheet open={sheet} onClose={() => setSheet(false)} title="What does “ceiling” mean?">
        <div className="fm-sheet-text">
          The <b>rate ceiling</b> is the most the buyer is willing to pay per kilo for this requirement.
          You can offer at or below the ceiling. You may offer above it too — your response won't be
          rejected automatically, but a price at or under the ceiling is more likely to be accepted.
        </div>
        <div style={{ marginTop: 16 }}>
          <Btn variant="outline" onClick={() => setSheet(false)}>Got it</Btn>
        </div>
      </Sheet>
    </>
  );
};

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