// ADM-PROC-18 · Farmer master
// Admin Web · Procurement · P0 · 1440×900
// Group farmers, add new (manual or app-registered), search/sort/filter the roster.
// Registered as window.Pages.farmers

const Ic18 = window.Icons;
const AMDATE18 = window.AMDATE;
const AMDT18 = window.AMDATETIME;

// Tier derived from rating; source = where the farmer record originated.
const tierOf = (r) => (r.rating >= 4.7 ? "A" : r.rating >= 4.3 ? "B" : "C");
const regionOf = (village) => (village.split(",").pop() || village).trim();

// Group model — a saved cohort used when broadcasting a requirement.
const GROUPS_18 = [
  { id: "G-01", name: "Murang'a core", region: "Murang'a", color: "avocado", note: "High-yield Hass belt · Kangema, Kandara, Gatanga" },
  { id: "G-02", name: "Nyeri highlands", region: "Nyeri", color: "soil", note: "Fuerte & Hass mix · Othaya, Mathira, Mukurweini" },
  { id: "G-03", name: "Eastern outgrowers", region: "Embu / Kirinyaga", color: "pulp", note: "Newer suppliers · Embu Central, Kerugoya" },
];
const groupFor = (village) => {
  const reg = regionOf(village);
  if (reg === "Murang'a") return "G-01";
  if (reg === "Nyeri") return "G-02";
  if (reg === "Embu Central" || reg === "Kirinyaga") return "G-03";
  return null;
};

// Farmers registered through the app, awaiting review before being added to a group.
const PENDING_18 = [
  { id: "F-2905", name: "Beatrice Nyambura", village: "Kangema, Murang'a", variety: "Hass", phone: "+254 720 445 118", registered: "2026-05-11 08:24" },
  { id: "F-2904", name: "Anthony Gitau", village: "Kandara, Murang'a", variety: "Fuerte", phone: "+254 733 902 671", registered: "2026-05-10 16:02" },
  { id: "F-2903", name: "Caroline Muthoni", village: "Mathira, Nyeri", variety: "Hass", phone: "+254 711 208 940", registered: "2026-05-10 09:47" },
];

const VARIETY_TONE_18 = { Hass: "avocado", Fuerte: "pulp", Pinkerton: "soil", Mixed: "secondary" };
const TIER_TONE_18 = { A: "success", B: "info", C: "secondary" };

const SortHead = ({ label, k, sort, setSort, num }) => {
  const on = sort.key === k;
  return (
    <th className={`th-sort ${num ? "num" : ""} ${on ? "on" : ""}`}
        onClick={() => setSort(s => ({ key: k, dir: s.key === k && s.dir === "asc" ? "desc" : "asc" }))}>
      <span className="th-sort-inner">{label}
        <Ic18.ChevronDown size={13} className="th-caret" style={{ transform: on && sort.dir === "asc" ? "rotate(180deg)" : "none", opacity: on ? 1 : 0.35 }}/>
      </span>
    </th>
  );
};

const AddFarmerModal = ({ open, onClose, onAdd }) => {
  const [f, setF] = useState({ name: "", village: "", variety: "Hass", acreage: "", phone: "", group: "G-01" });
  useEffect(() => { if (open) setF({ name: "", village: "", variety: "Hass", acreage: "", phone: "", group: "G-01" }); }, [open]);
  const set = (patch) => setF(p => ({ ...p, ...patch }));
  const valid = f.name.trim().length >= 3 && f.village.trim().length >= 2 && f.phone.trim().length >= 7;
  return (
    <Modal open={open} onClose={onClose} title="Add farmer" sub="Manually register a supplier and place them in a group."
      footer={<>
        <Button variant="ghost" onClick={onClose}>Cancel</Button>
        <div style={{ flex: 1 }} />
        <Button variant="primary" icon={Ic18.Plus} disabled={!valid} onClick={() => onAdd(f)}>Add farmer</Button>
      </>}>
      <div className="fmm-grid">
        <label className="fmm-field" style={{ gridColumn: "1 / -1" }}><span>Full name<b>*</b></span>
          <input className="input" placeholder="e.g. Jane Wanjiku" value={f.name} onChange={(e) => set({ name: e.target.value })}/></label>
        <label className="fmm-field"><span>Village / region<b>*</b></span>
          <input className="input" placeholder="e.g. Kangema, Murang'a" value={f.village} onChange={(e) => set({ village: e.target.value })}/></label>
        <label className="fmm-field"><span>Phone<b>*</b></span>
          <input className="input" placeholder="+254 7…" value={f.phone} onChange={(e) => set({ phone: e.target.value })}/></label>
        <label className="fmm-field"><span>Main variety</span>
          <select className="input" value={f.variety} onChange={(e) => set({ variety: e.target.value })}>
            {["Hass", "Fuerte", "Pinkerton", "Mixed"].map(v => <option key={v}>{v}</option>)}
          </select></label>
        <label className="fmm-field"><span>Acreage</span>
          <input className="input" inputMode="decimal" placeholder="0.0" value={f.acreage} onChange={(e) => set({ acreage: e.target.value.replace(/[^\d.]/g, "") })}/></label>
        <label className="fmm-field" style={{ gridColumn: "1 / -1" }}><span>Add to group</span>
          <select className="input" value={f.group} onChange={(e) => set({ group: e.target.value })}>
            {GROUPS_18.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
            <option value="">No group</option>
          </select></label>
      </div>
    </Modal>
  );
};

const FarmerMaster = ({ tweaks }) => {
  const toast = useToast();
  const base = (window.MD?.FARMERS || []).map(r => ({
    ...r, tier: tierOf(r), region: regionOf(r.village), source: "manual", group: groupFor(r.village),
  }));
  const [extra, setExtra] = useState([]);
  const [pending, setPending] = useState(PENDING_18);
  const [tab, setTab] = useState("farmers");
  const [search, setSearch] = useState("");
  const [regionF, setRegionF] = useState("all");
  const [varietyF, setVarietyF] = useState("all");
  const [sort, setSort] = useState({ key: "name", dir: "asc" });
  const [addOpen, setAddOpen] = useState(false);

  const rows = [...extra, ...base];
  const regions = ["all", ...Array.from(new Set(rows.map(r => r.region)))];

  const filtered = useMemo(() => {
    let out = rows.filter(r => {
      if (regionF !== "all" && r.region !== regionF) return false;
      if (varietyF !== "all" && r.variety !== varietyF) return false;
      if (search) { const q = search.toLowerCase(); if (!(`${r.name} ${r.id} ${r.village} ${r.variety}`.toLowerCase().includes(q))) return false; }
      return true;
    });
    const dir = sort.dir === "asc" ? 1 : -1;
    out = [...out].sort((a, b) => {
      let av = a[sort.key], bv = b[sort.key];
      if (sort.key === "lastDelivery") { av = new Date(av); bv = new Date(bv); }
      if (typeof av === "string" && typeof bv === "string") return av.localeCompare(bv) * dir;
      return (av > bv ? 1 : av < bv ? -1 : 0) * dir;
    });
    return out;
  }, [rows, regionF, varietyF, search, sort]);

  const groupCount = (gid) => rows.filter(r => r.group === gid).length;

  const addFarmer = (f) => {
    const id = "F-" + (2906 + extra.length);
    setExtra(prev => [{
      id, name: f.name.trim(), village: f.village.trim(), region: regionOf(f.village),
      variety: f.variety, acreage: Number(f.acreage) || 0, rating: 0, lastDelivery: null,
      lifetime: 0, phone: f.phone.trim(), tier: "C", source: "manual", group: f.group || null,
    }, ...prev]);
    setAddOpen(false);
    toast({ title: "Farmer added", desc: `${f.name.trim()} · ${f.group ? GROUPS_18.find(g => g.id === f.group).name : "no group"}` });
  };

  const approvePending = (p) => {
    setPending(prev => prev.filter(x => x.id !== p.id));
    setExtra(prev => [{
      id: p.id, name: p.name, village: p.village, region: regionOf(p.village), variety: p.variety,
      acreage: 0, rating: 0, lastDelivery: null, lifetime: 0, phone: p.phone, tier: "C",
      source: "app", group: groupFor(p.village),
    }, ...prev]);
    toast({ title: "Added to master", desc: `${p.name} · from app registration` });
  };

  return (
    <div className="page">
      {/* Header */}
      <div className="page-head">
        <div>
          <h1 className="page-title">Farmer master</h1>
          <p className="page-sub">Group your suppliers, add new farmers, and review those who registered through the app.</p>
        </div>
        <div className="page-actions">
          <Button variant="outline" icon={Ic18.Users}>New group</Button>
          <Button variant="primary" icon={Ic18.Plus} onClick={() => setAddOpen(true)}>Add farmer</Button>
        </div>
      </div>

      {/* Summary */}
      <div className="fmm-stats">
        <div className="fmm-stat"><div className="k"><Ic18.Users size={14}/>Total farmers</div><div className="v">{rows.length}</div></div>
        <div className="fmm-stat"><div className="k"><Ic18.Layers size={14}/>Groups</div><div className="v">{GROUPS_18.length}</div></div>
        <div className="fmm-stat"><div className="k"><Ic18.Bolt size={14}/>App registrations</div><div className="v">{pending.length}<small>pending</small></div></div>
        <div className="fmm-stat"><div className="k"><Ic18.CheckCircle size={14}/>Tier A suppliers</div><div className="v">{rows.filter(r => r.tier === "A").length}</div></div>
      </div>

      {/* Pending app registrations */}
      {pending.length > 0 && (
        <Card className="fmm-pending">
          <div className="card-body">
            <div className="fmm-pending-head">
              <div className="row" style={{ gap: 8, alignItems: "center" }}>
                <span className="fmm-pending-ic"><Ic18.Bolt size={15}/></span>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{pending.length} farmers registered through the app</div>
                  <div className="muted" style={{ fontSize: 12.5 }}>Review and add each to a group so they can receive broadcasts.</div>
                </div>
              </div>
            </div>
            <div className="fmm-pending-list">
              {pending.map(p => (
                <div key={p.id} className="fmm-pending-row">
                  <Avatar initials={p.name.split(" ").map(x => x[0]).join("").slice(0, 2)} size="sm"/>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{p.name}</div>
                    <div className="muted" style={{ fontSize: 12 }}>{p.village} · {p.variety}</div>
                  </div>
                  <div className="muted mono" style={{ fontSize: 11.5, marginLeft: "auto" }}>{AMDT18(p.registered)}</div>
                  <Button size="sm" variant="outline" icon={Ic18.Plus} onClick={() => approvePending(p)}>Add</Button>
                </div>
              ))}
            </div>
          </div>
        </Card>
      )}

      {/* Tabs */}
      <div className="fmm-tabs">
        <button className={`fmm-tab ${tab === "farmers" ? "on" : ""}`} onClick={() => setTab("farmers")}>All farmers <span className="fmm-tab-n">{rows.length}</span></button>
        <button className={`fmm-tab ${tab === "groups" ? "on" : ""}`} onClick={() => setTab("groups")}>Groups <span className="fmm-tab-n">{GROUPS_18.length}</span></button>
      </div>

      {tab === "groups" ? (
        <div className="fmm-groups">
          {GROUPS_18.map(g => (
            <Card key={g.id} className="fmm-group">
              <div className="card-body">
                <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div>
                    <div className="fmm-group-name">{g.name}</div>
                    <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>{g.region}</div>
                  </div>
                  <Badge tone={g.color}>{groupCount(g.id)} farmers</Badge>
                </div>
                <p className="muted" style={{ fontSize: 12.5, lineHeight: 1.5, margin: "12px 0 14px" }}>{g.note}</p>
                <div className="row" style={{ gap: 8 }}>
                  <Button size="sm" variant="outline" icon={Ic18.Bolt}>Broadcast to group</Button>
                  <Button size="sm" variant="ghost">Manage</Button>
                </div>
              </div>
            </Card>
          ))}
          <button className="fmm-group-add" onClick={() => toast({ title: "New group", desc: "Group builder is specced for a later flow." })}>
            <Ic18.Plus size={20}/><span>Create a new group</span>
          </button>
        </div>
      ) : (
        <>
          {/* Toolbar: search + filters */}
          <div className="fmm-toolbar">
            <div className="fmm-search">
              <Ic18.Search size={15}/>
              <input placeholder="Search name, ID, village, variety…" value={search} onChange={(e) => setSearch(e.target.value)}/>
            </div>
            <select className="input fmm-select" value={regionF} onChange={(e) => setRegionF(e.target.value)}>
              {regions.map(r => <option key={r} value={r}>{r === "all" ? "All regions" : r}</option>)}
            </select>
            <select className="input fmm-select" value={varietyF} onChange={(e) => setVarietyF(e.target.value)}>
              {["all", "Hass", "Fuerte", "Pinkerton"].map(v => <option key={v} value={v}>{v === "all" ? "All varieties" : v}</option>)}
            </select>
            <div className="muted" style={{ marginLeft: "auto", fontSize: 12.5 }}>{filtered.length} of {rows.length}</div>
          </div>

          <Card>
            <div className="card-body flush">
              <div className="tbl-wrap">
                <table className="tbl">
                  <thead>
                    <tr>
                      <SortHead label="Farmer" k="name" sort={sort} setSort={setSort}/>
                      <SortHead label="Region" k="region" sort={sort} setSort={setSort}/>
                      <th>Variety</th>
                      <SortHead label="Tier" k="tier" sort={sort} setSort={setSort}/>
                      <SortHead label="Acreage" k="acreage" sort={sort} setSort={setSort} num/>
                      <SortHead label="Rating" k="rating" sort={sort} setSort={setSort} num/>
                      <SortHead label="Last delivery" k="lastDelivery" sort={sort} setSort={setSort}/>
                      <SortHead label="Lifetime kg" k="lifetime" sort={sort} setSort={setSort} num/>
                      <th>Source</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filtered.length === 0 ? (
                      <tr><td colSpan={9}>
                        <div className="proc-inline-empty" style={{ justifyContent: "center" }}>
                          <Ic18.Search size={20}/>
                          <div>
                            <div style={{ fontWeight: 600, fontSize: 13.5 }}>No farmers match</div>
                            <div className="muted" style={{ fontSize: 12.5 }}>Try clearing the search or filters.</div>
                          </div>
                          <Button size="sm" variant="outline" onClick={() => { setSearch(""); setRegionF("all"); setVarietyF("all"); }} style={{ marginLeft: 8 }}>Clear</Button>
                        </div>
                      </td></tr>
                    ) : filtered.map(r => (
                      <tr key={r.id} className="proc-row">
                        <td>
                          <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
                            <Avatar initials={r.name.split(" ").map(x => x[0]).join("").slice(0, 2)} size="sm"/>
                            <span>
                              <span style={{ fontWeight: 600, fontSize: 13 }}>{r.name}</span>
                              <span className="muted mono" style={{ display: "block", fontSize: 11 }}>{r.id}</span>
                            </span>
                          </span>
                        </td>
                        <td>{r.region}</td>
                        <td><Badge tone={VARIETY_TONE_18[r.variety] || "outline"}>{r.variety}</Badge></td>
                        <td><Badge tone={TIER_TONE_18[r.tier]}>Tier {r.tier}</Badge></td>
                        <td className="num">{r.acreage ? r.acreage.toFixed(1) : "—"}</td>
                        <td className="num">{r.rating ? r.rating.toFixed(1) : "—"}</td>
                        <td className="mono">{r.lastDelivery ? AMDATE18(r.lastDelivery) : "—"}</td>
                        <td className="num">{r.lifetime ? r.lifetime.toLocaleString("en-US") : "—"}</td>
                        <td>{r.source === "app" ? <Badge tone="info" icon={Ic18.Bolt}>App</Badge> : <Badge tone="outline">Manual</Badge>}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </Card>
        </>
      )}

      <AddFarmerModal open={addOpen} onClose={() => setAddOpen(false)} onAdd={addFarmer}/>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { farmers: FarmerMaster });