// ADM-PROC-24 · Groups — manage  (Addendum Update A)
// Admin Web · Procurement Manager · P0 · 1440×900
// Two-pane: groups list + selected-group detail (members / description / rules).
// Registered as window.Pages.groupsManage.  Tweak groupSel picks the group.

const F24 = window.FM;
const Ic24 = window.Icons;
const D24 = window.AMDATE;

const GroupsManage = ({ tweaks }) => {
  const toast = useToast();
  const go = window.makeGo(toast);
  const initSel = tweaks?.groupSel || "G-01";
  const [sel, setSel] = useState(initSel === "none" ? null : initSel);
  useEffect(() => { setSel(initSel === "none" ? null : initSel); }, [initSel]);
  const [search, setSearch] = useState("");

  const groups = F24.GROUPS.filter(g => g.name.toLowerCase().includes(search.toLowerCase()));
  const g = sel ? F24.groupById(sel) : null;
  const members = g ? F24.membersOf(g.id) : [];

  return (
    <div className="page">
      <div className="page-head">
        <div><h1 className="page-title">Groups</h1><p className="page-sub">Curated cohorts used for broadcast targeting. A farmer can belong to any number of groups.</p></div>
        <div className="page-actions">
          <Button variant="ghost" icon={Ic24.Tag} onClick={() => go("ADM-PROC-25.html")}>Manage tags</Button>
          <Button variant="primary" icon={Ic24.Plus} onClick={() => toast({ title: "Create group", desc: "Choose Manual or Smart." })}>Create group</Button>
        </div>
      </div>

      <div className="fm-2pane">
        {/* Left — groups list */}
        <div className="fm-2pane-l">
          <div style={{ padding: 12, borderBottom: "1px solid var(--border)" }}>
            <div className="proc-search"><Ic24.Search size={15}/><input className="input" placeholder="Search groups…" value={search} onChange={(e) => setSearch(e.target.value)}/></div>
          </div>
          <div className="fm-glist">
            {groups.map(gr => (
              <div key={gr.id} className={`fm-grow ${sel === gr.id ? "on" : ""}`} onClick={() => setSel(gr.id)}>
                <span className={`fm-feed-ic ${gr.kind === "smart" ? "tone-pulp" : "tone-avocado"}`} style={{ width: 30, height: 30 }}>{gr.kind === "smart" ? <Ic24.Sparkles size={14}/> : <Ic24.Layers size={14}/>}</span>
                <div style={{ flex: 1, minWidth: 0 }}><div className="gn">{gr.name}</div><div className="gm">{F24.membersOf(gr.id).length} members · used {D24(gr.lastUsed)}</div></div>
              </div>
            ))}
          </div>
        </div>

        {/* Right — detail */}
        <div className="fm-2pane-r">
          {!g ? (
            <div className="proc-inline-empty" style={{ flexDirection: "column", gap: 10, padding: "80px 20px" }}>
              <div style={{ width: 48, height: 48, borderRadius: 12, background: "var(--muted)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)" }}><Ic24.Layers size={22}/></div>
              <div style={{ textAlign: "center" }}><div style={{ fontWeight: 600, fontSize: 14 }}>Create or select a group</div><div className="muted" style={{ fontSize: 12.5 }}>Pick a group on the left to see its members and settings.</div></div>
            </div>
          ) : (
            <>
              <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start", marginBottom: 6, flexWrap: "wrap", gap: 10 }}>
                <div>
                  <div className="row" style={{ gap: 9, alignItems: "center" }}>
                    <h2 style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.02em", margin: 0 }}>{g.name}</h2>
                    <Badge tone={g.kind === "smart" ? "pulp" : "avocado"} icon={g.kind === "smart" ? Ic24.Sparkles : Ic24.Layers}>{g.kind === "smart" ? "Smart" : "Manual"}</Badge>
                  </div>
                  <p className="muted" style={{ fontSize: 13, marginTop: 5, maxWidth: 520 }}>{g.desc}</p>
                </div>
                <div className="row" style={{ gap: 6 }}>
                  <Button size="sm" variant="primary" icon={Ic24.Bolt} onClick={() => go("ADM-PROC-07.html")}>Broadcast</Button>
                  <IconButton size="sm" variant="outline" icon={Ic24.More} onClick={() => toast({ title: g.name, desc: "Rename · Duplicate · Archive" })}/>
                </div>
              </div>

              <div className="row" style={{ gap: 20, margin: "14px 0 18px" }}>
                <div><div className="muted" style={{ fontSize: 11.5 }}>Members</div><div style={{ fontSize: 18, fontWeight: 600 }}>{members.length}</div></div>
                <div><div className="muted" style={{ fontSize: 11.5 }}>Broadcasts sent</div><div style={{ fontSize: 18, fontWeight: 600 }}>{g.broadcasts}</div></div>
                <div><div className="muted" style={{ fontSize: 11.5 }}>Region focus</div><div style={{ fontSize: 14, fontWeight: 500, marginTop: 3 }}>{g.region}</div></div>
              </div>

              {g.kind === "smart" ? (
                <>
                  <div className="fm-banner info"><Ic24.Sparkles size={16} className="bi"/><div>Members are computed automatically from the rules below and re-evaluated hourly and before each broadcast. The member list is read-only.</div></div>
                  <div style={{ fontWeight: 600, fontSize: 13.5, marginBottom: 8 }}>Rules <span className="muted" style={{ fontWeight: 400 }}>(all must match)</span></div>
                  <div className="row" style={{ gap: 8, flexWrap: "wrap", marginBottom: 8 }}>
                    {(g.rules || []).map((r, i) => (
                      <span key={i} className="fm-rule"><span className="rf">{r.f}</span><span className="rop">{r.op}</span><span>{r.v}</span></span>
                    ))}
                    <button className="fm-chip-add"><Ic24.Plus size={12}/>Add rule</button>
                  </div>
                  <Button size="sm" variant="outline" icon={Ic24.Edit} style={{ marginTop: 6 }}>Edit rules</Button>
                </>
              ) : (
                <div className="row" style={{ justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                  <div style={{ fontWeight: 600, fontSize: 13.5 }}>Members</div>
                  <Button size="sm" variant="outline" icon={Ic24.Plus} onClick={() => toast({ title: "Add members", desc: "Multi-select farmer picker." })}>Add members</Button>
                </div>
              )}

              <Card style={{ marginTop: g.kind === "smart" ? 16 : 0 }}><div className="card-body flush"><div className="tbl-wrap"><table className="tbl">
                <thead><tr><th>Farmer</th><th>Type</th><th>Region</th><th className="num">Response</th>{g.kind === "manual" && <th className="actions"></th>}</tr></thead>
                <tbody>
                  {members.length === 0 ? (
                    <tr><td colSpan={5}><div className="proc-inline-empty" style={{ justifyContent: "center" }}><Ic24.Users size={18}/><div className="muted" style={{ fontSize: 12.5 }}>No members yet — broadcasting to an empty group is blocked.</div></div></td></tr>
                  ) : members.map(m => (
                    <tr key={m.id} className="proc-row">
                      <td><span style={{ display: "inline-flex", alignItems: "center", gap: 9 }}><Avatar initials={F24.initials(m.name)} size="sm"/><span><span style={{ fontWeight: 600, fontSize: 13 }}>{m.name}</span><span className="muted mono" style={{ display: "block", fontSize: 11 }}>{m.id}</span></span></span></td>
                      <td><Badge tone={F24.TYPES[m.type]?.tone}>{F24.TYPES[m.type]?.label}</Badge></td>
                      <td>{m.region}</td>
                      <td className="num">{m.responseRate}%</td>
                      {g.kind === "manual" && <td className="actions"><IconButton size="sm" variant="ghost" icon={Ic24.X} onClick={() => toast({ title: "Removed from group", desc: m.name })}/></td>}
                    </tr>
                  ))}
                </tbody>
              </table></div></div></Card>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { groupsManage: GroupsManage });