// FRM-PROC-06 · My responses
const ResponseCard = ({ resp, onOpen }) => {
  const { Pill } = window.Fm;
  const Ic = window.Icons, FD = window.FD;
  return (
    <div className="fm-req" style={{ marginBottom: 12 }} onClick={onOpen}>
      <div className="fm-req-top" style={{ marginBottom: 12 }}>
        <span className={`fm-req-thumb ${resp.variety === "Fuerte" ? "fuerte" : ""}`}><Ic.Leaf size={20}/></span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="fm-req-id">{resp.reqId}</div>
          <div className="fm-req-title" style={{ fontSize: 14.5 }}>{resp.title}</div>
        </div>
        <Pill status={resp.status}/>
      </div>
      <div className="fm-req-grid" style={{ marginBottom: 10 }}>
        <div className="fm-req-cell"><div className="k">You offered</div><div className="v">{Number(resp.qty).toLocaleString("en-US")}<small> kg</small></div></div>
        <div className="fm-req-cell"><div className="k">Your rate</div><div className="v">{FD.KES(resp.rate)}<small> /kg</small></div></div>
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 12 }} className="muted">
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
          {resp.queued ? <><Ic.WifiOff size={13}/> Will sync when online</> : <><Ic.Clock size={13}/> Updated {resp.updated}</>}
        </span>
        <Ic.ChevronRight size={16}/>
      </div>
    </div>
  );
};

const MyResponsesScreen = ({ nav, t }) => {
  const { AppBar } = window.Fm;
  const Ic = window.Icons, FD = window.FD;
  const [filter, setFilter] = useState("All");
  const state = t.responsesState;

  const order = { accepted: 0, pending: 1, rejected: 2 };
  const all = useMemo(() => [...FD.RESPONSES].sort((a, b) => order[a.status] - order[b.status]), []);
  const list = filter === "All" ? all : all.filter(r => r.status === filter.toLowerCase());

  const route = (resp) => {
    const map = { pending: "responsePending", accepted: "responseAccepted", rejected: "responseRejected" };
    nav.go(map[resp.status], { id: resp.id });
  };

  const chips = ["All", "Pending", "Accepted", "Rejected"];
  const empty = state === "empty";
  const loading = state === "loading";
  const filteredEmpty = state === "filteredEmpty" || (!empty && !loading && list.length === 0);

  return (
    <>
      <AppBar title="My responses" align="left"/>
      <div className="fm-chips">
        {chips.map(c => {
          const n = c === "All" ? all.length : all.filter(r => r.status === c.toLowerCase()).length;
          return (
            <button key={c} className={`fm-chip ${filter === c ? "on" : ""}`} onClick={() => setFilter(c)}>
              {c}<span className="fm-chip-count">{n}</span>
            </button>
          );
        })}
      </div>

      <div className="fm-body">
        {loading ? (
          <div className="fm-scroll" style={{ paddingTop: 12 }}>{[0, 1, 2].map(i => <div key={i} className="fm-sk fm-sk-card"/>)}</div>
        ) : empty ? (
          <div className="fm-empty">
            <div className="fm-empty-art"><Ic.Handshake size={42}/></div>
            <div className="fm-empty-title">No responses yet</div>
            <div className="fm-empty-desc">You haven't responded to any requirements yet. Browse Home to find opportunities.</div>
            <button className="fm-btn fm-btn-outline fm-btn-sm fm-btn-pill" style={{ marginTop: 18 }} onClick={() => nav.tab("home")}>Browse Home</button>
          </div>
        ) : filteredEmpty ? (
          <div className="fm-empty">
            <div className="fm-empty-art"><Ic.Filter size={40}/></div>
            <div className="fm-empty-title">No responses in this status</div>
            <div className="fm-empty-desc">Try another filter to see your other responses.</div>
            <button className="fm-btn fm-btn-outline fm-btn-sm fm-btn-pill" style={{ marginTop: 18 }} onClick={() => setFilter("All")}>Show all</button>
          </div>
        ) : (
          <div className="fm-scroll" style={{ paddingTop: 12 }}>
            {list.map(resp => <ResponseCard key={resp.id} resp={resp} onOpen={() => route(resp)}/>)}
          </div>
        )}
      </div>
    </>
  );
};

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