/* Extras.jsx — secondary agronomist + agent views (Watch list, Tasks, Roster, Agent home). */
function farmById(id) { return window.RADA.FARMS.find(f => f.id === id); }

function WatchList({ t, lang, onOpenFarm }) {
  const R = window.RADA;
  return (
    <div className="scroll">
      <div className="phead">
        <div>
          <div className="eyebrow"><span className="eb-dot" style={{ background: 'var(--red)' }}></span>{t('nav_watch')}</div>
          <h1>{lang === 'sw' ? 'Nini kinabadilika kabla ya tatizo?' : "What's deviating before it's a crisis?"}</h1>
          <div className="psub">{lang === 'sw' ? 'Mashamba yanayoshuka haraka kuliko wenzao — onyo la mapema.' : 'Farms dropping faster than their cohort — early warning, before it shows on the ground.'}</div>
        </div>
      </div>
      <div className="triage">
        <div className="feed">
          {R.ANOMALIES.map((a, i) => {
            const f = farmById(a.farm);
            return (
              <div className="card card-pad" key={i} style={{ cursor: 'pointer' }} onClick={() => onOpenFarm(a.farm)}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                  <div style={{ width: 46, height: 46, borderRadius: 12, background: STATUS_SOFT[f.status], display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                    <span style={{ fontSize: 22 }}>{R.DRIVERS[f.driver].glyph}</span>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span className="card-title">{f.name}</span>
                      <span className="tag" style={{ background: a.magnitude === 'high' ? 'var(--red-soft)' : 'var(--amber-soft)', color: a.magnitude === 'high' ? 'var(--red-ink)' : 'var(--amber-ink)' }}>{a.magnitude === 'high' ? (lang === 'sw' ? 'KUBWA' : 'HIGH') : (lang === 'sw' ? 'WASTANI' : 'MEDIUM')}</span>
                      <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, color: 'var(--red)' }}>{a.dropPerWk}</span>
                    </div>
                    <div style={{ fontSize: 12.5, color: 'var(--ink-soft)', fontFamily: 'var(--font-mono)', marginTop: 4 }}>{a.signal} · {f.farmer} · {f.ward}</div>
                    <div style={{ fontSize: 13.5, marginTop: 8, color: 'var(--ink)' }}>
                      <b style={{ fontWeight: 600 }}>{lang === 'sw' ? 'Dhana:' : 'Hypothesis:'}</b> {a.hypothesis}
                    </div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-mute)', marginTop: 6, fontFamily: 'var(--font-mono)' }}>{lang === 'sw' ? 'Tangu' : 'Deviating for'} {a.since}</div>
                  </div>
                  <Icon d="chevron" size={18} color="var(--ink-mute)" />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function TasksView({ t, lang }) {
  const R = window.RADA;
  const cols = [['open', lang === 'sw' ? 'Wazi' : 'Open'], ['in_progress', lang === 'sw' ? 'Inaendelea' : 'In progress'], ['done', lang === 'sw' ? 'Imekamilika' : 'Done']];
  const kindGlyph = { scout: '🔍', sample: '🧪', treat: '💊', photograph: '📷' };
  return (
    <div className="scroll">
      <div className="phead">
        <div>
          <div className="eyebrow"><span className="eb-dot" style={{ background: 'var(--orange)' }}></span>{t('nav_tasks')}</div>
          <h1>{lang === 'sw' ? 'Panga na ugawe kazi' : 'Organize and hand out the work'}</h1>
          <div className="psub">{lang === 'sw' ? 'Tengeneza kazi, kabidhi kwa wakala, fuatilia hadi mwisho.' : 'Create tasks, assign to an agent, track to completion.'}</div>
        </div>
        <div className="pright"><button className="btn orange"><Icon d="plus" size={15} color="#3a2408" />{lang === 'sw' ? 'Kazi mpya' : 'New task'}</button></div>
      </div>
      <div className="triage">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, alignItems: 'start' }}>
          {cols.map(([k, lab]) => {
            const list = R.TASKS.filter(x => x.status === k);
            return (
              <div key={k}>
                <div className="eyebrow" style={{ marginBottom: 10, paddingLeft: 2 }}>{lab} · {list.length}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {list.map(task => {
                    const f = farmById(task.farm);
                    return (
                      <div className="card card-pad" key={task.id} style={{ padding: '14px 16px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 7 }}>
                          <span style={{ fontSize: 16 }}>{kindGlyph[task.kind]}</span>
                          <span className="tag">{task.due}</span>
                          {task.status === 'done' && <Icon d="check" size={15} color="var(--green)" style={{ marginLeft: 'auto' }} />}
                        </div>
                        <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.3 }}>{task.title}</div>
                        <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 5 }}>{f.name} · {f.farmer}</div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 9, paddingTop: 9, borderTop: '1px solid var(--line-soft)' }}>
                          <div style={{ width: 22, height: 22, borderRadius: 50, background: 'var(--forest)', color: 'var(--orange)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700, fontFamily: 'var(--font-mono)' }}>
                            {task.assignee === 'Self' ? '★' : task.assignee.split(' ').map(w => w[0]).join('')}
                          </div>
                          <span style={{ fontSize: 11.5, color: 'var(--ink-soft)' }}>{task.assignee}</span>
                          {task.photos > 0 && <span className="photo-chip" style={{ marginLeft: 'auto', marginTop: 0 }}><Icon d="camera" size={12} />{task.photos}</span>}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function Roster({ t, lang, onOpenFarm }) {
  const R = window.RADA;
  return (
    <div className="scroll">
      <div className="phead">
        <div>
          <div className="eyebrow"><span className="eb-dot" style={{ background: 'var(--green)' }}></span>{t('nav_roster')}</div>
          <h1>{lang === 'sw' ? 'Wakulima wangu' : 'Farmer roster'}</h1>
          <div className="psub">{lang === 'sw' ? 'Wakulima chini yako, mawasiliano, na mashamba yao.' : 'Farmers under you, their contact, and their farms.'}</div>
        </div>
      </div>
      <div className="triage">
        <div className="card card-pad">
          <table className="tbl">
            <thead><tr><th>{t('farmer')}</th><th>{lang === 'sw' ? 'Simu' : 'Phone'}</th><th>{lang === 'sw' ? 'Shamba' : 'Farm'}</th><th>{t('stage')}</th><th></th><th></th></tr></thead>
            <tbody>
              {R.FARMS.map(f => (
                <tr key={f.id}>
                  <td className="nm">{f.farmer}</td>
                  <td className="mono" style={{ color: 'var(--ink-soft)' }}>{f.phone}</td>
                  <td>{f.name}</td>
                  <td>{(R.STAGES.find(s => s.key === f.stage) || {})[lang] || f.stage}</td>
                  <td><StatusChip s={f.status} label={t('st_' + f.status)} /></td>
                  <td style={{ textAlign: 'right' }}>
                    <button className="btn ghost sm" onClick={() => onOpenFarm(f.id)}><Icon d="chat" size={13} />{lang === 'sw' ? 'Ushauri' : 'Advisory'}</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function AgentHome({ t, lang, onOpenFarm }) {
  const R = window.RADA;
  const mine = R.FARMS.filter(f => f.agent === 'Brian Kiptoo');
  const myTasks = R.TASKS.filter(x => x.assignee === 'Brian Kiptoo' && x.status !== 'done');
  return (
    <div className="scroll">
      <div className="phead">
        <div>
          <div className="eyebrow"><span className="eb-dot" style={{ background: 'var(--orange)' }}></span>{lang === 'sw' ? 'Wakala' : 'Field agent'} · Brian Kiptoo</div>
          <h1>{lang === 'sw' ? 'Mashamba na kazi zangu' : 'My farms & tasks'}</h1>
          <div className="psub">{lang === 'sw' ? 'Mwonekano rahisi wa shambani — sajili, kagua, kamilisha kazi.' : 'A simple field view — register, capture, complete tasks.'}</div>
        </div>
        <div className="pright"><button className="btn orange"><Icon d="plus" size={15} color="#3a2408" />{t('nav_capture')}</button></div>
      </div>
      <div className="triage">
        <div className="tsplit" style={{ gridTemplateColumns: '1fr 1fr' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>{t('nav_myfarms')} · {mine.length}</div>
            <div className="feed">
              {mine.map(f => (
                <div className="frow" 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>{f.ward}</span></div>
                  </div>
                  <Icon d="chevron" size={16} color="var(--ink-mute)" />
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>{t('nav_mytasks')} · {myTasks.length}</div>
            <div className="feed">
              {myTasks.map(task => {
                const f = farmById(task.farm);
                return (
                  <div className="card card-pad" key={task.id} style={{ padding: '14px 16px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span className="tag">{task.due}</span>
                      <span style={{ fontSize: 13.5, fontWeight: 600 }}>{task.title}</span>
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 5 }}>{f.name} · {f.ward}</div>
                    <button className="btn sm" style={{ marginTop: 10 }}><Icon d="camera" size={13} />{lang === 'sw' ? 'Kamilisha na picha' : 'Complete with photo'}</button>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Placeholder({ t, lang, label, icon }) {
  return (
    <div className="scroll">
      <div className="phead"><div><div className="eyebrow"><span className="eb-dot" style={{ background: 'var(--ink-mute)' }}></span>{label}</div><h1>{label}</h1></div></div>
      <div className="triage">
        <div className="card" style={{ padding: '60px 40px', textAlign: 'center' }}>
          <div style={{ width: 56, height: 56, borderRadius: 16, background: 'var(--bg-cream-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
            <Icon d={icon || 'layers'} size={26} color="var(--ink-mute)" />
          </div>
          <div style={{ fontSize: 15, fontWeight: 600 }}>{label}</div>
          <div style={{ fontSize: 13, color: 'var(--ink-mute)', marginTop: 6, maxWidth: 360, marginInline: 'auto' }}>
            {lang === 'sw' ? 'Skrini hii ipo kwenye ramani ya ujenzi — sehemu kuu tatu zimejengwa kwanza.' : 'This screen is on the roadmap — the three priority screens are built first.'}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WatchList, TasksView, Roster, AgentHome, Placeholder });