/* Coop.jsx — Cooperative / Association admin: org-wide portfolio overview. */
function Coop({ t, lang, onPickRegion }) {
  const R = window.RADA, O = R.ORG;
  const h = O.health, total = h.green + h.amber + h.red;
  const sLabel = (k) => { const s = R.STAGES.find(x => x.key === k); return s ? s[lang] || s.en : k; };
  const kpis = [
    ['total_farms', O.totals.farms, 'home'],
    ['total_ha', O.totals.hectares, 'layers'],
    ['total_agros', O.totals.agronomists, 'person'],
    ['total_agents', O.totals.agents, 'route'],
    ['total_farmers', O.totals.farmers, 'sprout'],
  ];
  // aggregate input demand (stage-driven, illustrative)
  const inputs = [
    { name: lang === 'sw' ? 'Mbolea ya CAN (kuongeza)' : 'CAN top-dress', qty: '14.2 t', note: lang === 'sw' ? 'mashamba 131 yanakaribia maua' : '131 farms nearing tasseling' },
    { name: lang === 'sw' ? 'Mbolea ya DAP' : 'DAP fertiliser', qty: '3.1 t', note: lang === 'sw' ? 'upandaji wa msimu wa pili' : 'second-season planting' },
    { name: lang === 'sw' ? 'Dawa ya viwavi' : 'Armyworm treatment', qty: '420 L', note: lang === 'sw' ? 'maeneo ya tahadhari' : 'watch-list blocks' },
    { name: lang === 'sw' ? 'Mbegu za mahindi' : 'Maize seed (H614)', qty: '1.8 t', note: lang === 'sw' ? 'kujaza mapengo' : 'gap-filling + new plots' },
  ];

  return (
    <div className="scroll">
      <div className="phead">
        <div>
          <div className="eyebrow"><span className="eb-dot" style={{ background: 'var(--orange)' }}></span>{O.name}</div>
          <h1>{t('coop_overview')}</h1>
          <div className="psub">{t('coop_sub')}</div>
        </div>
        <div className="pright">
          <button className="btn"><Icon d="filter" size={14} />{lang === 'sw' ? 'Chuja' : 'Filter'}</button>
          <button className="btn orange"><Icon d="download" size={15} color="#3a2408" />{t('export_pack')}</button>
        </div>
      </div>

      <div className="coop">
        <div className="kpis">
          {kpis.map(([k, v, ic]) => (
            <div className="kpi" key={k}>
              <div className="n">{v.toLocaleString()}</div>
              <div className="l"><Icon d={ic} size={14} color="var(--ink-mute)" />{t(k)}</div>
            </div>
          ))}
        </div>

        <div className="coop-grid">
          {/* LEFT: distributions */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="card card-pad">
              <span className="eyebrow"><span className="eb-dot" style={{ background: 'var(--green)' }}></span>{t('health_dist')}</span>
              <div className="stack" style={{ marginTop: 14 }}>
                <div style={{ width: (h.green / total * 100) + '%', background: 'var(--green)' }}></div>
                <div style={{ width: (h.amber / total * 100) + '%', background: 'var(--amber)' }}></div>
                <div style={{ width: (h.red / total * 100) + '%', background: 'var(--red)' }}></div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14 }}>
                {[['green', h.green, t('st_green')], ['amber', h.amber, t('st_amber')], ['red', h.red, t('st_red')]].map(([s, n, lab]) => (
                  <div key={s} style={{ textAlign: 'center', flex: 1 }}>
                    <div className="fig" style={{ fontSize: 24, color: STATUS_INK[s] }}>{n}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-soft)', display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center', marginTop: 3 }}>
                      <StatusDot s={s} size={8} />{lab} · {(n / total * 100).toFixed(0)}%
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="card card-pad">
              <span className="eyebrow"><span className="eb-dot" style={{ background: 'var(--green)' }}></span>{t('crop_mix')}</span>
              <div style={{ marginTop: 8 }}>
                {O.cropMix.map((c, i) => (
                  <div className="brow" key={i}>
                    <span className="bl">{c.crop}</span>
                    <div style={{ flex: 1 }}><Bar pct={c.pct} s={'var(--green)'} h={8} /></div>
                    <span className="bv">{c.ha} ha</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="card card-pad">
              <span className="eyebrow"><span className="eb-dot" style={{ background: 'var(--orange)' }}></span>{t('stage_dist')}</span>
              <div style={{ marginTop: 8 }}>
                {O.stageDist.map((s, i) => (
                  <div className="brow" key={i}>
                    <span className="bl">{sLabel(s.key)}</span>
                    <div style={{ flex: 1 }}><Bar pct={s.pct} s={'var(--orange)'} h={8} /></div>
                    <span className="bv">{s.pct}%</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* RIGHT: coverage map */}
          <div style={{ position: 'sticky', top: 8 }}>
            <RegionMap regions={O.regions} onPick={onPickRegion} height={560} />
          </div>
        </div>

        {/* agronomist coverage */}
        <div className="card card-pad">
          <span className="eyebrow"><span className="eb-dot" style={{ background: 'var(--orange)' }}></span>{t('agro_coverage')}</span>
          <table className="tbl" style={{ marginTop: 12 }}>
            <thead>
              <tr>
                <th>{t('total_agros').replace(/s$/, '')}</th>
                <th>{t('total_farms')}</th>
                <th>{t('total_ha')}</th>
                <th style={{ width: 180 }}>{t('responsiveness')}</th>
                <th>{t('unvisited')}</th>
              </tr>
            </thead>
            <tbody>
              {O.agronomists.map((a, i) => {
                const totalAlerts = a.openAlerts + a.actioned;
                const pct = totalAlerts ? (a.actioned / totalAlerts * 100) : 0;
                return (
                  <tr key={i} className={a.you ? 'you' : ''}>
                    <td className="nm">{a.name}{a.you && <span className="tag" style={{ marginLeft: 8 }}>{lang === 'sw' ? 'WEWE' : 'YOU'}</span>}</td>
                    <td className="mono">{a.farms}</td>
                    <td className="mono">{a.ha}</td>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                        <div style={{ flex: 1 }}><Bar pct={pct} s={pct > 70 ? 'green' : pct > 50 ? 'amber' : 'red'} h={7} /></div>
                        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)', width: 52 }}>{a.actioned}/{totalAlerts}</span>
                      </div>
                    </td>
                    <td className="mono" style={{ color: a.unvisited > 8 ? 'var(--red)' : a.unvisited > 5 ? 'var(--amber-ink)' : 'var(--ink-soft)' }}>{a.unvisited}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        {/* compliance + input planning */}
        <div className="coop-grid" style={{ gridTemplateColumns: '1fr 1fr' }}>
          <div className="card card-pad">
            <span className="eyebrow"><span className="eb-dot" style={{ background: 'var(--blue)' }}></span>{t('compliance_title')}</span>
            <div style={{ marginTop: 12 }}>
              {O.compliance.map((c, i) => {
                const pct = c.n / c.total * 100;
                return (
                  <div key={i} style={{ padding: '10px 0', borderBottom: i < O.compliance.length - 1 ? '1px solid var(--line-soft)' : 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 7 }}>
                      <span>{c.label}</span>
                      <span className="mono" style={{ color: 'var(--ink-soft)' }}>{c.n}/{c.total}</span>
                    </div>
                    <Bar pct={pct} s={pct > 80 ? 'green' : pct > 55 ? 'amber' : 'red'} h={7} />
                  </div>
                );
              })}
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-mute)', marginTop: 12, lineHeight: 1.5 }}>
              {lang === 'sw' ? 'Hakuna hali ya uzingatiaji inayothibitishwa bila rekodi halisi.' : 'No compliance status is asserted without a verified record behind it.'}
            </div>
          </div>

          <div className="card card-pad">
            <span className="eyebrow"><span className="eb-dot" style={{ background: 'var(--orange)' }}></span>{t('input_planning')}</span>
            <div style={{ marginTop: 10 }}>
              {inputs.map((inp, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 0', borderBottom: i < inputs.length - 1 ? '1px solid var(--line-soft)' : 0 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: 'var(--orange-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                    <Icon d="package" size={17} color="var(--orange-deep)" />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600 }}>{inp.name}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-mute)' }}>{inp.note}</div>
                  </div>
                  <div className="fig" style={{ fontSize: 16, color: 'var(--orange-deep)' }}>{inp.qty}</div>
                </div>
              ))}
            </div>
            <button className="btn" style={{ marginTop: 14, width: '100%', justifyContent: 'center' }}><Icon d="download" size={14} />{lang === 'sw' ? 'Pakua mpango wa ununuzi' : 'Export procurement plan'}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Coop = Coop;