// FRM-PROC-17 · My groups & broadcasts  (Addendum Update A)
// Farmer Mobile · Farmer · P1 · 390×844
// Transparency: which groups the farmer belongs to & why they get broadcasts.
// Registered as window.FarmerPages.myGroups.  Tweak myGroupsState: has · empty

const MyGroupsScreen = ({ nav, t }) => {
  const { AppBar, Btn, Sheet, Banner } = window.Fm;
  const Ic = window.Icons;
  const state = t.myGroupsState || "has";

  // Groups the farmer belongs to that have communication implications
  // (internal-only groups such as "flagged-for-review" are hidden).
  const GROUPS = [
    { id: "G-01", name: "Murang'a core", desc: "High-yield Hass suppliers around Kangema, Kandara and Gatanga.", active: true, broadcasts: 3 },
    { id: "G-04", name: "Preferred 2026", desc: "Reliable farmers with a strong response rate this season.", active: true, broadcasts: 2 },
    { id: "G-05", name: "Organic-certified", desc: "Certified organic supply for the premium oil line.", active: false, broadcasts: 0 },
  ];

  const [detail, setDetail] = useState(null);
  const [leaveFor, setLeaveFor] = useState(null);
  const [toast, setToast] = useState("");

  const g = detail ? GROUPS.find(x => x.id === detail) : null;

  return (
    <>
      <AppBar title="My groups" onBack={() => nav.back()} align="center"/>
      <div className="fm-body">
        {state === "empty" ? (
          <div className="fm-empty">
            <div className="fm-empty-art"><Ic.Layers size={42}/></div>
            <div className="fm-empty-title">You're not in any groups yet</div>
            <div className="fm-empty-desc">Avogold will add you to a group when it's relevant. Groups decide which supply requests reach you.</div>
          </div>
        ) : (
          <div className="fm-scroll" style={{ paddingTop: 12, paddingBottom: 16 }}>
            <Banner tone="neutral" icon={Ic.Info} desc="You receive supply requests based on the groups you belong to. Avogold manages who is in each group."/>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 14 }}>
              {GROUPS.map(gr => (
                <button key={gr.id} className="fm-card fm-card-pad" style={{ textAlign: "left", cursor: "pointer", border: "1px solid var(--border)", width: "100%" }} onClick={() => setDetail(gr.id)}>
                  <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
                    <span style={{ width: 40, height: 40, borderRadius: 11, flexShrink: 0, display: "inline-flex", alignItems: "center", justifyContent: "center", background: "var(--avocado-soft)", color: "var(--avocado-fg)" }}><Ic.Layers size={19}/></span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <span style={{ fontSize: 15, fontWeight: 600 }}>{gr.name}</span>
                        <span className={`badge badge-${gr.active ? "approved" : "outline"}`}>{gr.active ? "Active" : "Inactive"}</span>
                      </div>
                      <div className="muted" style={{ fontSize: 12.5, marginTop: 3, lineHeight: 1.45 }}>{gr.desc}</div>
                      <div style={{ marginTop: 8, display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11.5, fontWeight: 600, color: "var(--muted-foreground)", background: "var(--muted)", padding: "3px 9px", borderRadius: 9999 }}>
                        <Ic.Bolt size={12}/>{gr.broadcasts} broadcast{gr.broadcasts === 1 ? "" : "s"} this month
                      </div>
                    </div>
                    <Ic.ChevronRight size={18} style={{ color: "var(--muted-foreground)", flexShrink: 0, marginTop: 4 }}/>
                  </div>
                </button>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Group detail (read-only) */}
      <Sheet open={!!g} onClose={() => setDetail(null)} title={g?.name}>
        {g && (<>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
            <span className={`badge badge-${g.active ? "approved" : "outline"}`}>{g.active ? "Active" : "Inactive"}</span>
            <span className="muted" style={{ fontSize: 12.5 }}>{g.broadcasts} broadcasts this month</span>
          </div>
          <div className="fm-sheet-text" style={{ marginBottom: 12 }}>{g.desc}</div>
          <div className="fm-card flush" style={{ marginBottom: 14 }}>
            <div className="fm-srow"><span className="k">How selection works</span></div>
            <div style={{ fontSize: 12.5, color: "var(--muted-foreground)", padding: "0 2px 4px", lineHeight: 1.5 }}>
              Avogold's procurement team curates this group. When they broadcast a supply request to it, you receive an app notification and SMS. You can't add yourself — but you can ask to leave.
            </div>
          </div>
          <Btn variant="outline" icon={Ic.ArrowRight} onClick={() => { setLeaveFor(g.id); setDetail(null); }}>Request to leave this group</Btn>
        </>)}
      </Sheet>

      {/* Leave request confirm */}
      <Sheet open={!!leaveFor} onClose={() => setLeaveFor(null)} title="Request to leave">
        <div className="fm-sheet-text" style={{ marginBottom: 14 }}>
          This sends a request to Avogold's procurement team. You'll only be removed after they approve it — you won't leave automatically.
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <Btn variant="primary" onClick={() => { setToast("Request sent to Avogold"); setLeaveFor(null); setTimeout(() => setToast(""), 2600); }}>Send request</Btn>
          <Btn variant="ghost" onClick={() => setLeaveFor(null)}>Cancel</Btn>
        </div>
      </Sheet>

      {window.Fm.Toast({ show: !!toast, children: toast })}
    </>
  );
};

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