// ADM-PROC-07 · Broadcast — select farmers (AMOMS Module 1)
// Admin Web · Procurement Manager · P0 · 1440×900
// Components: C-005 Select · C-009 Checkbox · C-010 Toggle · C-003 Text input
//             C-201 Data table · C-124 Stepper · C-001 Button · C-105 Empty state
// Registered as window.Pages.broadcastSelect

const Ic7 = window.Icons;
const REQ_07 = { id: "PR-2026-0184", product: "Hass", qty: 28000, rate: 95 };

// ── Derive a richer farmer roster from MD.FARMERS for the broadcast picker ──
const regionOf = (village) => village.includes(",") ? village.split(",")[1].trim() : village;
const tierOf = (r) => r >= 4.7 ? "A" : r >= 4.3 ? "B" : "C";
const CERTS = ["Organic", "GAP", "None", "GAP", "Organic", "None"];
const LANGS = ["Kikuyu", "Swahili", "English"];
const FARMERS_07 = window.MD.FARMERS.map((f, i) => ({
  id: f.id, name: f.name, region: regionOf(f.village), village: f.village,
  variety: f.variety, tier: tierOf(f.rating), cert: CERTS[i % CERTS.length],
  lang: LANGS[i % LANGS.length], lastActiveDays: [1, 3, 12, 2, 5, 28, 0, 9, 4, 40, 7, 2][i % 12],
  optOut: i === 9 ? "SMS" : null, whatsapp: i % 4 !== 3,
})).concat([
  { id: "F-2901", name: "Faith Wangari", region: "Murang'a", village: "Maragua, Murang'a", variety: "Hass", tier: "new", cert: "None", lang: "Kikuyu", lastActiveDays: 0, optOut: null, whatsapp: true },
  { id: "F-2902", name: "Brian Kiptoo", region: "Nakuru", village: "Njoro, Nakuru", variety: "Hass", tier: "new", cert: "GAP", lang: "Swahili", lastActiveDays: 1, optOut: null, whatsapp: false },
]);

const REGIONS_07 = [...new Set(FARMERS_07.map(f => f.region))];

// ── Filter chip group ──
const FilterGroup = ({ label, options, selected, onToggle, single }) => (
  <div className="bc-fgroup">
    <div className="bc-flabel">{label}</div>
    <div className="bc-fopts">
      {options.map(o => (
        <button key={o} className={`bc-fopt${selected.includes(o) ? " on" : ""}`} onClick={() => onToggle(o)}>{o}</button>
      ))}
    </div>
  </div>
);

const Check7 = ({ on }) => <span className={`proc-check${on ? " on" : ""}`}>{on && <Ic7.Check size={11} />}</span>;

// ── Page ──
const BroadcastSelect = ({ tweaks }) => {
  const toast = useToast();
  const go = window.makeGo(toast);
  const state = (tweaks && tweaks.selectState) || "default";

  const [region, setRegion] = useState([]);
  const [cert, setCert] = useState([]);
  const [tier, setTier] = useState([]);
  const [lang, setLang] = useState([]);
  const [spec, setSpec] = useState(["Hass"]);
  const [lastActive, setLastActive] = useState("90");
  const [includeNew, setIncludeNew] = useState(true);
  const toggleIn = (setter) => (v) => setter(arr => arr.includes(v) ? arr.filter(x => x !== v) : [...arr, v]);

  const [channels, setChannels] = useState(() => state === "nochannels" ? { App: false, SMS: false, WhatsApp: false } : { App: true, SMS: true, WhatsApp: false });
  const [tmplTab, setTmplTab] = useState("App");
  const defaultTmpl = `Hello {{farmer_name}}, AMOMS needs {{qty}} kg of {{product}} avocados at up to {{rate}}/kg. Respond by {{deadline}} to be considered.`;
  const [templates, setTemplates] = useState({ App: defaultTmpl, SMS: defaultTmpl, WhatsApp: defaultTmpl });

  // Filtering
  const filtered = useMemo(() => FARMERS_07.filter(f => {
    if (state === "nofarmers") return false;
    if (region.length && !region.includes(f.region)) return false;
    if (cert.length && !cert.includes(f.cert)) return false;
    if (tier.length && !tier.includes(f.tier === "new" ? "New" : f.tier)) return false;
    if (lang.length && !lang.includes(f.lang)) return false;
    if (spec.length && !spec.includes(f.variety)) return false;
    if (!includeNew && f.tier === "new") return false;
    return true;
  }), [region, cert, tier, lang, spec, includeNew, state]);

  const [selected, setSelected] = useState(() => new Set(FARMERS_07.filter(f => f.variety === "Hass").map(f => f.id)));
  const visibleIds = filtered.map(f => f.id);
  const allSelected = visibleIds.length > 0 && visibleIds.every(id => selected.has(id));
  const toggleFarmer = (id) => setSelected(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
  const selectAll = () => setSelected(s => { const n = new Set(s); allSelected ? visibleIds.forEach(id => n.delete(id)) : visibleIds.forEach(id => n.add(id)); return n; });

  const selCount = state === "large" ? 612 : [...selected].filter(id => visibleIds.includes(id)).length;
  const activeChannels = Object.entries(channels).filter(([, v]) => v).map(([k]) => k);
  const noChannels = activeChannels.length === 0;
  const noFarmers = selCount === 0;
  const canContinue = !noChannels && !noFarmers;

  const insertVar = (v) => setTemplates(t => ({ ...t, [tmplTab]: t[tmplTab] + ` {{${v}}}` }));
  const SMS_MAX = 160;
  const sampleLen = templates.SMS.replace("{{farmer_name}}", "Mary Wairimu").replace("{{qty}}", "28,000").replace("{{product}}", "Hass").replace("{{rate}}", "KSh 95").replace("{{deadline}}", "17 May").length;

  const onContinue = () => {
    if (!canContinue) { toast({ title: noChannels ? "Select at least one channel" : "Select at least one farmer", tone: "danger" }); return; }
    if (!templates[tmplTab].includes("{{product}}")) { toast({ title: "Template must include {{product}}", tone: "danger" }); return; }
    go("ADM-PROC-08.html");
  };

  const CHAN_META = {
    App: { icon: Ic7.Mobile, desc: "In-app push notification" },
    SMS: { icon: Ic7.Phone, desc: "SMS to registered phone" },
    WhatsApp: { icon: Ic7.Mail, desc: "WhatsApp Business API" },
  };

  return (
    <div className="page bc-page">
      {/* Header */}
      <div className="bc-head">
        <button className="btn btn-ghost btn-icon" aria-label="Back" onClick={() => go("ADM-PROC-05.html")}><Ic7.ChevronLeft size={18} /></button>
        <div className="bc-head-title">
          <h1 className="bc-title">Broadcast — <span className="mono" style={{ fontWeight: 600 }}>{REQ_07.id}</span></h1>
          <div className="bc-sub">{REQ_07.product} · {REQ_07.qty.toLocaleString("en-US")} kg target</div>
        </div>
        <div className="bc-steps">
          <span className="bc-stepi on"><span className="num">1</span>Select farmers</span>
          <span className="bc-step-line" />
          <span className="bc-stepi"><span className="num">2</span>Preview &amp; send</span>
        </div>
        <div className="bc-head-actions">
          <Button variant="outline" onClick={() => { toast({ title: "Broadcast config saved" }); go("ADM-PROC-05.html"); }}>Save &amp; exit</Button>
          <Button variant="primary" icon={Ic7.ArrowRight} onClick={onContinue} disabled={!canContinue}>Continue to preview</Button>
        </div>
      </div>

      {/* Validation banners */}
      {noChannels && (
        <div className="alert alert-soil" style={{ marginBottom: 14 }}>
          <span className="alert-icon"><Ic7.Warning size={16} /></span>
          <div className="alert-body"><div className="alert-title">Select at least one channel</div><div className="alert-desc">Turn on App, SMS or WhatsApp before continuing.</div></div>
        </div>
      )}
      {!noChannels && noFarmers && state !== "large" && (
        <div className="alert alert-soil" style={{ marginBottom: 14 }}>
          <span className="alert-icon"><Ic7.Warning size={16} /></span>
          <div className="alert-body"><div className="alert-title">Select at least one farmer</div><div className="alert-desc">Adjust your filters and tick farmers to broadcast to.</div></div>
        </div>
      )}
      {state === "large" && (
        <div className="alert alert-warning" style={{ marginBottom: 14 }}>
          <span className="alert-icon"><Ic7.Info size={16} /></span>
          <div className="alert-body"><div className="alert-title">Broadcasting to 500+ farmers</div><div className="alert-desc">612 farmers selected. Large broadcasts can take a few minutes and incur SMS costs — you'll confirm on the next step.</div></div>
        </div>
      )}

      <div className="bc-grid">
        {/* Filters */}
        <div className="bc-col bc-col-filters">
          <div className="bc-panel">
            <div className="bc-panel-head">Filters
              <button className="btn btn-ghost btn-xs" onClick={() => { setRegion([]); setCert([]); setTier([]); setLang([]); setSpec(["Hass"]); }}>Reset</button>
            </div>
            <div className="bc-panel-body">
              <FilterGroup label="Product specialization" options={["Hass", "Fuerte", "Pinkerton", "Local"]} selected={spec} onToggle={toggleIn(setSpec)} />
              <FilterGroup label="Region" options={REGIONS_07} selected={region} onToggle={toggleIn(setRegion)} />
              <FilterGroup label="Certification" options={["Organic", "GAP", "None"]} selected={cert} onToggle={toggleIn(setCert)} />
              <FilterGroup label="Performance tier" options={["A", "B", "C", "New"]} selected={tier} onToggle={toggleIn(setTier)} />
              <FilterGroup label="Language" options={["English", "Swahili", "Kikuyu"]} selected={lang} onToggle={toggleIn(setLang)} />
              <div className="bc-fgroup">
                <div className="bc-flabel">Last active</div>
                <select className="select" value={lastActive} onChange={(e) => setLastActive(e.target.value)}>
                  <option value="30">Last 30 days</option>
                  <option value="90">Last 90 days</option>
                  <option value="all">All time</option>
                </select>
              </div>
              <label className="bc-fgroup" style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", margin: 0 }} onClick={() => setIncludeNew(v => !v)}>
                <Check7 on={includeNew} /><span style={{ fontSize: 12.5 }}>Include new farmers (no history)</span>
              </label>
            </div>
          </div>
        </div>

        {/* Farmer list */}
        <div className="bc-col bc-col-list">
          <div className="bc-panel">
            <div className="bc-listhead">
              <button onClick={selectAll} style={{ display: "inline-flex", background: "none", border: "none", padding: 0, cursor: "pointer" }} aria-label="Select all"><Check7 on={allSelected} /></button>
              <div className="bc-count"><b>{selCount}</b> of {state === "large" ? "1,240" : FARMERS_07.length} selected</div>
              <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
                <button className="btn btn-ghost btn-xs" onClick={() => { const n = new Set(selected); visibleIds.forEach(id => n.add(id)); setSelected(n); }}>Select all matching</button>
                <button className="btn btn-ghost btn-xs" onClick={() => setSelected(new Set())}>Clear</button>
              </div>
            </div>
            {filtered.length === 0 ? (
              <div className="proc-inline-empty" style={{ flexDirection: "column", padding: "48px 20px", textAlign: "center" }}>
                <Ic7.Users size={26} />
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13.5, color: "var(--foreground)" }}>No farmers match these filters</div>
                  <div style={{ fontSize: 12.5, marginTop: 2 }}>Loosen a filter to widen your reach.</div>
                </div>
              </div>
            ) : (
              <div className="bc-list">
                {filtered.map(f => {
                  const on = selected.has(f.id);
                  return (
                    <div key={f.id} className="bc-farmer" onClick={() => toggleFarmer(f.id)}>
                      <Check7 on={on} />
                      <Avatar initials={f.name.split(" ").map(x => x[0]).join("")} size="sm" />
                      <div className="bc-farmer-main">
                        <div className="bc-farmer-name">{f.name}
                          <Badge tone={f.tier === "A" ? "avocado" : f.tier === "new" ? "outline" : "pulp"}>{f.tier === "new" ? "New" : `Tier ${f.tier}`}</Badge>
                          {f.optOut && <span className="bc-optout">Opted out of {f.optOut}</span>}
                        </div>
                        <div className="bc-farmer-meta">
                          <span className="mono">{f.id}</span><span>{f.region}</span><span>{f.cert}</span><span>{f.lang}</span>
                          <span>{f.lastActiveDays === 0 ? "active today" : `active ${f.lastActiveDays}d ago`}</span>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>

        {/* Channel + message */}
        <div className="bc-col bc-col-channel">
          <div className="bc-panel">
            <div className="bc-panel-head">Channels &amp; message</div>
            <div className="bc-panel-body">
              {Object.keys(CHAN_META).map(k => {
                const M = CHAN_META[k];
                return (
                  <div key={k} className={`bc-channel${channels[k] ? " on" : ""}`}>
                    <span className="bc-channel-ic"><M.icon size={15} /></span>
                    <div style={{ flex: 1 }}>
                      <div className="bc-channel-name">{k}</div>
                      <div className="bc-channel-desc">{M.desc}</div>
                    </div>
                    <Switch checked={channels[k]} onChange={(v) => setChannels(c => ({ ...c, [k]: v }))} />
                  </div>
                );
              })}

              {/* Template editor */}
              <div className="bc-tmpl-tabs">
                {Object.keys(CHAN_META).map(k => (
                  <button key={k} className={`bc-tmpl-tab${tmplTab === k ? " on" : ""}`} disabled={!channels[k]} onClick={() => setTmplTab(k)}>{k}</button>
                ))}
              </div>
              <textarea className="textarea" style={{ minHeight: 120 }} value={templates[tmplTab]} onChange={(e) => setTemplates(t => ({ ...t, [tmplTab]: e.target.value }))} />
              {tmplTab === "SMS" && <div className={`bc-charcount${sampleLen > SMS_MAX ? " over" : ""}`}>{sampleLen} / {SMS_MAX} chars (expanded sample · {Math.ceil(sampleLen / SMS_MAX)} SMS)</div>}
              <div className="bc-vars">
                {["farmer_name", "product", "qty", "rate", "deadline"].map(v => (
                  <button key={v} className="bc-var" onClick={() => insertVar(v)}>{`{{${v}}}`}</button>
                ))}
              </div>
              <div className="field-hint" style={{ marginTop: 10 }}>Templates must include <span className="mono">{`{{product}}`}</span>. Farmers only receive channels they've opted into.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { broadcastSelect: BroadcastSelect });