/* Triage.jsx — Agronomist landing: "Where do I go today?" */
function Weather({ t, lang }) {
  const w = window.RADA.WEATHER;
  return (
    <div className="wx">
      <div className="wx-left">
        <div className="eyebrow"><span className="eb-dot" style={{ background: '#B47432' }}></span>{t('weather_outlook')}</div>
        <div className="hl">{lang === 'sw' ? w.headlineSw : w.headlineEn}</div>
        <div className="loc">{w.place} · {w.tmin}°–{w.tmax}°C</div>
      </div>
      <div className="wx-days">
        {w.days.map((d, i) => (
          <div className="wx-day" key={i}>
            <div className="d">{d.d}</div>
            <div className="g">{d.g}</div>
            <div className="t">{d.hi}°</div>
            {d.mm > 0 ? <div className="mm">{d.mm}mm</div> : <div className="mm" style={{ color: 'transparent' }}>·</div>}
          </div>
        ))}
      </div>
    </div>
  );
}

function Triage({ farms, t, lang, onOpenFarm }) {
  const R = window.RADA;
  const order = { red: 0, amber: 1, green: 2 };
  const [filter, setFilter] = useState('all');
  const counts = {
    red: farms.filter(f => f.status === 'red').length,
    amber: farms.filter(f => f.status === 'amber').length,
    green: farms.filter(f => f.status === 'green').length,
  };
  const openTasks = R.TASKS.filter(x => x.status !== 'done').length;
  const unvisited = farms.filter(f => f.daysVisit > 7).length;
  const shown = farms
    .filter(f => filter === 'all' || f.status === filter)
    .sort((a, b) => order[a.status] - order[b.status] || b.daysVisit - a.daysVisit);
  const sLabel = (k) => { const s = R.STAGES.find(x => x.key === k); return s ? s[lang] || s.en : k; };

  return (
    <div className="scroll">
      <div className="phead">
        <div>
          <div className="eyebrow"><span className="eb-dot" style={{ background: 'var(--orange)' }}></span>{t('nav_triage')} · {R.ME.name}</div>
          <h1>{t('triage_q')}</h1>
          <div className="psub">{t('triage_sub')}</div>
        </div>
        <div className="pright">
          <button className="btn"><Icon d="route" size={15} />{lang === 'sw' ? 'Panga njia' : 'Plan route'}</button>
          <button className="btn orange"><Icon d="plus" size={15} color="#3a2408" />{lang === 'sw' ? 'Ongeza shamba' : 'Add farm'}</button>
        </div>
      </div>

      <div className="triage">
        <Weather t={t} lang={lang} />

        <div className="counts">
          <div className="count" style={{ borderColor: counts.red ? 'var(--red)' : 'var(--line)' }}>
            <div className="n" style={{ color: 'var(--red)' }}>{counts.red}</div>
            <div className="l"><StatusDot s="red" />{t('counts_red')}</div>
          </div>
          <div className="count">
            <div className="n" style={{ color: 'var(--amber-ink)' }}>{counts.amber}</div>
            <div className="l"><StatusDot s="amber" />{t('counts_amber')}</div>
          </div>
          <div className="count">
            <div className="n" style={{ color: 'var(--green-deep)' }}>{counts.green}</div>
            <div className="l"><StatusDot s="green" />{t('counts_green')}</div>
          </div>
          <div className="count">
            <div className="n">{openTasks}</div>
            <div className="l"><Icon d="task" size={13} color="var(--ink-mute)" />{t('open_tasks')}</div>
          </div>
          <div className="count">
            <div className="n">{unvisited}</div>
            <div className="l"><Icon d="clock" size={13} color="var(--ink-mute)" />{t('unvisited')}</div>
          </div>
        </div>

        <div className="tsplit">
          <div>
            <div className="feed-head">
              <div className="eyebrow"><span className="eb-dot" style={{ background: 'var(--red)' }}></span>{t('priority_feed')} · {shown.length}</div>
              <div className="seg">
                {[['all', t('all_farms')], ['red', t('st_red')], ['amber', t('st_amber')], ['green', t('st_green')]].map(([k, lab]) => (
                  <button key={k} className={filter === k ? 'on' : ''} onClick={() => setFilter(k)}>
                    {k !== 'all' && <StatusDot s={k} size={8} />}{lab}
                  </button>
                ))}
              </div>
            </div>
            <div className="feed">
              {shown.map(f => {
                const dv = R.DRIVERS[f.driver];
                return (
                  <div className={'frow' + (f.status === 'red' ? ' pulse' : '')} key={f.id} onClick={() => onOpenFarm(f.id)}>
                    <span className="stripe" style={{ background: STATUS_COLOR[f.status] }}></span>
                    <div style={{ gridColumn: 2 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                        <span className="fname">{f.name}</span>
                        <StatusChip s={f.status} label={t('st_' + f.status)} />
                      </div>
                      <div className="fmeta">
                        <span>{f.farmer}</span><span>·</span><span>{lang === 'sw' ? 'Mahindi' : 'Maize'}</span><span>·</span>
                        <span>{sLabel(f.stage)}</span><span>·</span><span>{f.ward}</span>
                      </div>
                      <div className="fdriver">
                        <span className="gl">{dv.glyph}</span>
                        <span>{dv[lang] || dv.en}</span>
                      </div>
                    </div>
                    <div className="fright">
                      <span className="visit">{f.daysVisit === 0 ? t('today') : f.daysVisit + (lang === 'sw' ? ' siku' : 'd')}</span>
                      <Icon d="chevron" size={16} color="var(--ink-mute)" />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="mapwrap-host" style={{ position: 'sticky', top: 8 }}>
            <PortfolioMap farms={farms} onPick={onOpenFarm} height={620} t={t} />
          </div>
        </div>
      </div>
    </div>
  );
}

window.Triage = Triage;