// FRM-PROC-03 · Home — active requirements feed
const HomeReqCard = ({ r, onOpen, onRespond }) => {
  const { Ticker, Pill } = window.Fm;
  const Ic = window.Icons, FD = window.FD;
  const thumb = FD.VARIETY_THUMB[r.variety] || "";
  return (
    <div className={`fm-req ${r.responded ? "responded" : ""}`} onClick={onOpen}>
      {r.isNew && !r.responded && <span className="fm-newtag">New</span>}
      <div className="fm-req-top">
        <span className={`fm-req-thumb ${thumb}`}><Ic.Leaf size={22}/></span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="fm-req-id">{r.id}</div>
          <div className="fm-req-title">{r.title}</div>
          <div className="fm-req-meta">
            <span className={`badge badge-${thumb === "fuerte" ? "pulp" : thumb === "soil" ? "soil" : "avocado"}`}>{r.variety}</span>
            <span className="badge badge-outline">{r.grade}</span>
            {r.urgent && <Pill status="urgent"/>}
            {r.responded && <Pill status="responded"/>}
          </div>
        </div>
      </div>
      <div className="fm-req-grid">
        <div className="fm-req-cell"><div className="k">Quantity needed</div><div className="v">{Number(r.qty).toLocaleString("en-US")}<small> kg</small></div></div>
        <div className="fm-req-cell"><div className="k">Rate ceiling</div><div className="v">{FD.KES(r.ceiling)}<small> /kg</small></div></div>
      </div>
      <div className="fm-req-foot">
        <Ticker hrs={r.hrs}/>
        {r.responded
          ? <button className="fm-respond" style={{ background: "var(--surface)", color: "var(--foreground)", border: "1px solid var(--border)" }} onClick={(e) => { e.stopPropagation(); onOpen(); }}>Edit</button>
          : <button className="fm-respond" onClick={(e) => { e.stopPropagation(); onRespond(); }}>Respond</button>}
      </div>
    </div>
  );
};

const HomeScreen = ({ nav, t, offline }) => {
  const Ic = window.Icons, FD = window.FD;
  const [filter, setFilter] = useState("All");
  const state = t.homeState;

  const chips = ["All", "Hass", "Fuerte", "Pinkerton", "Urgent"];
  const feed = useMemo(() => {
    let list = FD.FEED;
    if (filter === "Urgent") list = list.filter(r => r.urgent || r.hrs < 24);
    else if (filter !== "All") list = list.filter(r => r.variety === filter);
    return list;
  }, [filter]);

  const showEmpty = state === "empty";
  const showNoResults = state === "noresults" || (state === "default" && feed.length === 0);
  const loading = state === "loading";

  return (
    <>
      <div className="fm-greet">
        <span className="fm-avatar-lg" style={{ width: 44, height: 44, fontSize: 17 }}>{FD.ME.initials}</span>
        <div className="fm-greet-text">
          <div className="fm-greet-hi">{offline ? "Showing cached feed" : "Karibu back,"}</div>
          <div className="fm-greet-name">Hello, {FD.ME.first}</div>
        </div>
        <button className="fm-iconbtn" aria-label="Notifications" onClick={() => nav.go("notifications")}>
          <Ic.Bell size={22}/><span className="fm-dot">2</span>
        </button>
      </div>

      <div className="fm-chips">
        {chips.map(c => (
          <button key={c} className={`fm-chip ${filter === c ? "on" : ""}`} onClick={() => setFilter(c)}>
            {c === "Urgent" && <Ic.Bolt size={13}/>}{c}
          </button>
        ))}
      </div>

      <div className="fm-body">
        {offline && (
          <div className="fm-scroll" style={{ paddingBottom: 0 }}>
            <div className="fm-banner fm-banner-neutral" style={{ marginBottom: 4 }}>
              <span className="fm-banner-ic"><Ic.WifiOff size={18}/></span>
              <div className="fm-banner-desc" style={{ color: "var(--muted-foreground)" }}>You're offline. Showing the last 20 cached requirements.</div>
            </div>
          </div>
        )}

        {loading ? (
          <div className="fm-scroll" style={{ paddingTop: 12 }}>
            {[0, 1, 2, 3].map(i => <div key={i} className="fm-sk fm-sk-card"/>)}
          </div>
        ) : showEmpty ? (
          <div className="fm-empty">
            <div className="fm-empty-art"><Ic.Sprout size={44}/></div>
            <div className="fm-empty-title">No active requirements</div>
            <div className="fm-empty-desc">We'll send you a notification when new opportunities match your products.</div>
            <button className="fm-btn fm-btn-outline fm-btn-sm fm-btn-pill" style={{ marginTop: 18 }} onClick={() => nav.go("profile")}>Update products you grow</button>
          </div>
        ) : showNoResults ? (
          <div className="fm-empty">
            <div className="fm-empty-art"><Ic.Filter size={40}/></div>
            <div className="fm-empty-title">No requirements match</div>
            <div className="fm-empty-desc">Nothing in “{filter}” right now. Try another filter.</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 }}>
            <div className="fm-sec" style={{ marginTop: 4 }}>
              <span className="fm-sec-title">{feed.length} open requirement{feed.length === 1 ? "" : "s"}</span>
              <span className="fm-sec-link" style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
                <Ic.Refresh size={13}/> Pull to refresh
              </span>
            </div>
            {feed.map(r => (
              <div key={r.id} style={{ opacity: offline ? 0.62 : 1 }}>
                <HomeReqCard r={r}
                  onOpen={() => nav.go("reqDetail", { id: r.id })}
                  onRespond={() => nav.go("submitResponse", { id: r.id })}/>
              </div>
            ))}
          </div>
        )}
      </div>
    </>
  );
};

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