// ADM-PROC-21 · Farmer master — detail  (Addendum Update A)
// Admin Web · Procurement Manager / Officer · P0 · 1440×900
// Full supplier profile: hero, tabs, source-farmers, KPIs, activity, state banners.
// Registered as window.Pages.farmerDetail.
// States (Tweak fmDetailState): active · middleman · lead · flagged · archived

const F21 = window.FM;
const Ic21 = window.Icons;
const D21 = window.AMDATE;
const KES21 = F21.KES;

const TYPE_TONE_21 = { farmer: "avocado", middleman: "pulp", cooperative: "soil", agent: "info" };
const tierTone21 = (t) => (t === "A" ? "success" : t === "B" ? "info" : t === "C" ? "secondary" : "outline");

// Pick a representative farmer for each state.
const pickFarmer = (state) => {
  const F = F21.FARMERS;
  if (state === "middleman") return F.find(f => f.type === "middleman");
  if (state === "lead") return F.find(f => f.lead);
  if (state === "flagged") return F.find(f => f.flagged);
  if (state === "archived") return { ...F.find(f => f.type === "cooperative"), archived: true };
  return F.find(f => f.id === "F-2731");
};

const FEED_21 = [
  { ic: "Truck", tone: "info", t: "Delivery received — 6,200 kg Hass", d: "GPN-26851 · QC pass · 2026-05-08" },
  { ic: "CheckCircle", tone: "success", t: "Response accepted on PR-2026-0184", d: "6,200 kg @ KSh 92/kg · 2026-05-08" },
  { ic: "Bolt", tone: "avocado", t: "Received broadcast — Hass May Week 3", d: "App + SMS · 2026-05-06" },
  { ic: "Wallet", tone: "soil", t: "Payment settled — KSh 570,400", d: "Mobile Money · 2026-05-05" },
  { ic: "Layers", tone: "pulp", t: "Added to group 'Preferred 2026'", d: "by David Onyango · 2026-04-28" },
];

const TabDeliveries = ({ f }) => (
  <Card><div className="card-body flush"><div className="tbl-wrap"><table className="tbl">
    <thead><tr><th>GRN</th><th>Date</th><th className="num">Weight</th><th>QC</th><th className="num">Rate</th><th className="num">Value</th></tr></thead>
    <tbody>
      {[["GRN-26851","2026-05-08",6200,"pass",92],["GRN-26702","2026-04-30",6100,"pass",90],["GRN-26588","2026-04-19",5400,"pass",89],["GRN-26401","2026-04-08",5900,"hold",88]].map(([g,d,w,q,r]) => (
        <tr key={g}><td className="mono" style={{fontSize:12}}>{g}</td><td className="mono" style={{fontSize:12}}>{D21(d)}</td>
          <td className="num" style={{fontWeight:600}}>{w.toLocaleString("en-US")}<span className="muted" style={{fontWeight:400}}> kg</span></td>
          <td><StatusBadge status={q}/></td><td className="num">{KES21(r)}</td><td className="num">{KES21(w*r)}</td></tr>
      ))}
    </tbody>
  </table></div></div></Card>
);

const FarmerDetail = ({ tweaks }) => {
  const toast = useToast();
  const go = window.makeGo(toast);
  const state = tweaks?.fmDetailState || "active";
  const f = pickFarmer(state);
  const [tab, setTab] = useState("overview");
  const typeLabel = F21.TYPES[f.type]?.label || "Farmer";
  const isMidCoop = f.type === "middleman" || f.type === "cooperative";

  const TABS = ["Overview", "Deliveries", "Responses", "Groups & tags", "Financial", "Documents", "Notes", "Activity"];

  return (
    <div className="page">
      {/* Header */}
      <div className="page-head" style={{ alignItems: "flex-start" }}>
        <div className="row" style={{ gap: 14, alignItems: "center" }}>
          <IconButton variant="ghost" icon={Ic21.ArrowLeft} onClick={() => go("ADM-PROC-20.html")}/>
          <Avatar initials={F21.initials(f.name)} size="lg"/>
          <div>
            <div className="row" style={{ gap: 9, alignItems: "center", flexWrap: "wrap" }}>
              <h1 className="page-title" style={{ margin: 0 }}>{f.name}</h1>
              <Badge tone={TYPE_TONE_21[f.type]}>{typeLabel}</Badge>
              <Badge tone={tierTone21(f.tier)}>{f.tier === "Unrated" ? "Unrated" : "Tier " + f.tier}</Badge>
            </div>
            <p className="page-sub" style={{ marginTop: 3 }}>{f.id}{f.altName ? " · " + f.altName : ""} · {f.village}</p>
          </div>
        </div>
        <div className="page-actions">
          <Button variant="ghost" icon={Ic21.ArrowRight} onClick={() => toast({ title: "Direct message", desc: "Uses the same channels as a broadcast." })}>Message</Button>
          <Button variant="outline" icon={Ic21.Edit} onClick={() => go("ADM-PROC-22.html")}>Edit</Button>
          <Button variant="outline" icon={Ic21.More} onClick={() => toast({ title: f.name, desc: "Add to group · Add tag · Change tier · Flag · Archive · Print card" })}>Actions</Button>
        </div>
      </div>

      {/* State banners */}
      {state === "lead" && (
        <div className="fm-banner info"><Ic21.Bolt size={16} className="bi"/><div>This is a captured <b>Lead</b>. Journey state: <b>{f.journey || "growing"}</b>. Promote to an active farmer to enable broadcasts.
          <div style={{ marginTop: 8 }}><Button size="sm" variant="primary" icon={Ic21.CheckCircle} onClick={() => toast({ title: "Promoted", desc: `${f.name} is now an active farmer.` })}>Promote to farmer</Button></div></div></div>
      )}
      {state === "flagged" && f.flagged && (
        <div className="fm-banner warn"><Ic21.Flag size={16} className="bi"/><div>Flagged by <b>{f.flagged.by}</b> on {D21(f.flagged.on)}. Reason: {f.flagged.reason}</div></div>
      )}
      {state === "archived" && (
        <div className="fm-banner danger"><Ic21.Box size={16} className="bi"/><div>This supplier is <b>archived</b> — excluded from broadcasts and default filters. History is preserved.
          <div style={{ marginTop: 8 }}><Button size="sm" variant="outline" onClick={() => toast({ title: "Unarchived", desc: f.name })}>Unarchive</Button></div></div></div>
      )}

      {/* Hero strip */}
      <Card style={{ marginBottom: 16 }}>
        <div className="fm-hero">
          <div className="fm-hero-meta">
            <div><div className="k">Primary phone</div><div className="v"><Ic21.Phone size={13}/>{f.phone}</div></div>
            <div><div className="k">Email</div><div className="v"><Ic21.Mail size={13}/>{f.email || "—"}</div></div>
            <div><div className="k">Region</div><div className="v"><Ic21.MapPin size={13}/>{f.region}</div></div>
            <div><div className="k">Language</div><div className="v">{f.language}</div></div>
            <div><div className="k">Joined</div><div className="v"><Ic21.Calendar size={13}/>{D21(f.joinDate)}</div></div>
            <div><div className="k">Main variety</div><div className="v">{f.variety}</div></div>
          </div>
        </div>
      </Card>

      {/* Source farmers (middleman / cooperative) */}
      {isMidCoop && f.sources.length > 0 && (
        <Card style={{ marginBottom: 16 }}>
          <div className="card-body">
            <div className="row" style={{ justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
              <div><div style={{ fontWeight: 600, fontSize: 14 }}>{f.type === "cooperative" ? "Member / source farmers" : "Source farmers"}</div>
                <div className="muted" style={{ fontSize: 12.5 }}>{f.sources.length} linked records — quality issues trace back to origin.{f.coopReg ? " Co-op reg " + f.coopReg + "." : ""}</div></div>
              <Button size="sm" variant="outline" icon={Ic21.Plus} onClick={() => toast({ title: "Add source farmer", desc: "Link an existing farmer record." })}>Add source</Button>
            </div>
            <div className="fm-src">
              {f.sources.map(sid => { const s = F21.byId(sid); if (!s) return null; return (
                <div key={sid} className="fm-src-row" onClick={() => go("ADM-PROC-21.html")}>
                  <Avatar initials={F21.initials(s.name)} size="sm"/>
                  <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontWeight: 600, fontSize: 13 }}>{s.name}</div><div className="muted mono" style={{ fontSize: 11 }}>{s.id} · {s.region}</div></div>
                  <span className="muted" style={{ fontSize: 12 }}>{s.variety}</span>
                  <Ic21.ChevronRight size={15} style={{ color: "var(--muted-foreground)" }}/>
                </div>
              ); })}
            </div>
          </div>
        </Card>
      )}

      {/* Tabs */}
      <div className="fm-tabs">
        {TABS.map(tName => { const key = tName.toLowerCase().replace(/[^a-z]/g, ""); return (
          <button key={key} className={`fm-tab ${tab === key ? "on" : ""}`} onClick={() => setTab(key)}>{tName}</button>
        ); })}
      </div>

      {tab === "overview" && (
        <div className="fm-split rail">
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <Card><div className="card-body">
              <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 12 }}>Performance</div>
              <div className="fm-kpis">
                <div className="fm-kpi"><div className="k"><Ic21.Truck size={12}/>Deliveries</div><div className="v">{f.lifetime ? Math.round(f.lifetime / 5800) : 0}</div></div>
                <div className="fm-kpi"><div className="k"><Ic21.Box size={12}/>Total volume</div><div className="v">{f.lifetime ? (f.lifetime / 1000).toFixed(0) : 0}<small>t</small></div></div>
                <div className="fm-kpi"><div className="k"><Ic21.CheckCircle size={12}/>Avg QC pass</div><div className="v">{f.avgQc}<small>%</small></div></div>
                <div className="fm-kpi"><div className="k"><Ic21.Clock size={12}/>Avg response</div><div className="v">{f.avgResponseHrs}<small>h</small></div></div>
                <div className="fm-kpi"><div className="k"><Ic21.Star size={12}/>Tier score</div><div className="v">{f.rating ? f.rating.toFixed(1) : "—"}</div></div>
              </div>
            </div></Card>
            <Card><div className="card-body">
              <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 12 }}>Groups & tags</div>
              <div className="fm-chips" style={{ marginBottom: 12 }}>
                {f.groups.map(gid => { const g = F21.groupById(gid); return g ? <span key={gid} className="fm-chip"><Ic21.Layers size={12}/>{g.name}<button className="rm"><Ic21.X size={12}/></button></span> : null; })}
                <button className="fm-chip-add"><Ic21.Plus size={12}/>Add to group</button>
              </div>
              <div className="fm-chips">
                {f.tags.map(t => <span key={t} className="fm-chip tag"><Ic21.Tag size={11}/>{t}<button className="rm"><Ic21.X size={12}/></button></span>)}
                <button className="fm-chip-add"><Ic21.Plus size={12}/>Add tag</button>
              </div>
            </div></Card>
          </div>
          <Card><div className="card-body">
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 14 }}>Recent activity</div>
            <div className="fm-feed">
              {FEED_21.map((e, i) => { const Icn = Ic21[e.ic] || Ic21.Info; return (
                <div key={i} className="fm-feed-row"><span className={`fm-feed-ic tone-${e.tone}`}><Icn size={13}/></span>
                  <div><div className="fm-feed-t">{e.t}</div><div className="fm-feed-d">{e.d}</div></div></div>
              ); })}
            </div>
          </div></Card>
        </div>
      )}

      {tab === "deliveries" && <TabDeliveries f={f}/>}

      {tab === "responses" && (
        <Card><div className="card-body flush"><div className="tbl-wrap"><table className="tbl">
          <thead><tr><th>Requirement</th><th className="num">Offered</th><th className="num">Rate</th><th>Status</th><th>Date</th></tr></thead>
          <tbody>
            {[["PR-2026-0184",6200,92,"approved","2026-05-08"],["PR-2026-0182",5800,91,"approved","2026-04-30"],["PR-2026-0179",4200,76,"declined","2026-04-19"]].map(([p,q,r,s,d]) => (
              <tr key={p}><td className="mono" style={{fontSize:12.5}}>{p}</td><td className="num">{q.toLocaleString("en-US")} kg</td><td className="num">{KES21(r)}</td><td><StatusBadge status={s}/></td><td className="mono" style={{fontSize:12}}>{D21(d)}</td></tr>
            ))}
          </tbody>
        </table></div></div></Card>
      )}

      {tab === "groupstags" && (
        <Card><div className="card-body">
          <div className="fm-chips" style={{ marginBottom: 16 }}>
            <span className="muted" style={{ fontSize: 12.5, width: "100%", fontWeight: 600 }}>Groups</span>
            {f.groups.map(gid => { const g = F21.groupById(gid); return g ? <span key={gid} className="fm-chip"><Ic21.Layers size={12}/>{g.name}<button className="rm"><Ic21.X size={12}/></button></span> : null; })}
            <button className="fm-chip-add"><Ic21.Plus size={12}/>Add to group</button>
          </div>
          <div className="fm-chips">
            <span className="muted" style={{ fontSize: 12.5, width: "100%", fontWeight: 600 }}>Tags</span>
            {f.tags.map(t => <span key={t} className="fm-chip tag"><Ic21.Tag size={11}/>{t}<button className="rm"><Ic21.X size={12}/></button></span>)}
            <button className="fm-chip-add"><Ic21.Plus size={12}/>Add tag</button>
          </div>
        </div></Card>
      )}

      {tab === "financial" && (
        <Card><div className="card-body">
          <div className="fm-banner info" style={{ marginBottom: 16 }}><Ic21.Wallet size={16} className="bi"/><div>Financial data requires the <b>Finance</b> role. Showing summary only.</div></div>
          <div className="fm-kpis">
            <div className="fm-kpi"><div className="k">Lifetime paid</div><div className="v">{KES21((f.lifetime || 0) * 90)}</div></div>
            <div className="fm-kpi"><div className="k">Outstanding</div><div className="v">{KES21(0)}</div></div>
            <div className="fm-kpi"><div className="k">Method</div><div className="v" style={{ fontSize: 15 }}>M-Money</div></div>
          </div>
        </div></Card>
      )}

      {tab === "documents" && (
        <Card><div className="card-body">
          <div className="fm-src">
            {[["National ID scan","PDF · 240 KB"],["Supply agreement 2026","PDF · 1.1 MB"],f.type === "cooperative" && ["Cooperative registration","PDF · 380 KB"]].filter(Boolean).map(([n,m]) => (
              <div key={n} className="fm-src-row"><span className="fm-feed-ic tone-info"><Ic21.File size={13}/></span>
                <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 13 }}>{n}</div><div className="muted" style={{ fontSize: 11.5 }}>{m}</div></div>
                <Button size="sm" variant="ghost" icon={Ic21.Download}>Download</Button></div>
            ))}
          </div>
          <Button variant="outline" size="sm" icon={Ic21.Upload} style={{ marginTop: 12 }} onClick={() => toast({ title: "Upload document", desc: "Audit-logged on save." })}>Upload document</Button>
        </div></Card>
      )}

      {tab === "notes" && (
        <Card><div className="card-body">
          <div className="fm-banner info" style={{ marginBottom: 14 }}><Ic21.Info size={16} className="bi"/><div>Manager-only relationship notes. Not visible to the farmer.</div></div>
          <textarea className="textarea" placeholder="Add a note about this supplier…" style={{ minHeight: 120 }}/>
          <div style={{ marginTop: 10 }}><Button variant="primary" size="sm">Save note</Button></div>
        </div></Card>
      )}

      {tab === "activity" && (
        <Card><div className="card-body">
          <div className="fm-feed">
            {[...FEED_21, { ic: "User", tone: "soil", t: "Record created", d: "by David Onyango · " + D21(f.joinDate) }].map((e, i) => { const Icn = Ic21[e.ic] || Ic21.Info; return (
              <div key={i} className="fm-feed-row"><span className={`fm-feed-ic tone-${e.tone}`}><Icn size={13}/></span>
                <div><div className="fm-feed-t">{e.t}</div><div className="fm-feed-d">{e.d}</div></div></div>
            ); })}
          </div>
        </div></Card>
      )}
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { farmerDetail: FarmerDetail });