/* Farmers — Brand theme, embedded read-only panel. No login, no actions besides tab/filter switching. */

function FarmerApp() {
  const store = useAsterStore();
  const [tab, setTab] = React.useState('national');
  const [domainFilter, setDomainFilter] = React.useState('all');
  const myRegion = 'Magway Region'; // illustrative — in production this is geofenced per farmer

  const scoped = store.farmerContent.filter(function (c) {
    return tab === 'national' ? c.scope === 'national' : (c.scope === 'regional' && c.region === myRegion);
  });
  const items = scoped.filter(function (c) { return domainFilter === 'all' || c.domain === domainFilter; });

  const nationalCount = store.farmerContent.filter(function (c) { return c.scope === 'national'; }).length;
  const regionalCount = store.farmerContent.filter(function (c) { return c.scope === 'regional' && c.region === myRegion; }).length;

  const domainCounts = { all: scoped.length };
  ['climate', 'economic', 'conflict'].forEach(function (d) {
    domainCounts[d] = scoped.filter(function (c) { return c.domain === d; }).length;
  });

  return (
    <div style={{ maxWidth: 560, margin: '0 auto', padding: 'var(--space-6) var(--space-5) var(--space-11)' }}>
      <div style={{ marginBottom: 'var(--space-5)' }}>
        <div style={{ font: '600 11px var(--font-text)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-subtle)' }}>Aster for Farmers</div>
        <h1 style={{ margin: '2px 0 0', font: '700 20px var(--font-display)', color: 'var(--text-strong)' }}>Signals that matter to you</h1>
        <div style={{ font: '12px var(--font-text)', color: 'var(--text-subtle)', marginTop: 4 }}>Embedded panel — read-only, no account needed. Shown here for {myRegion} (geofenced per farmer in production).</div>
      </div>

      <div style={{ display: 'flex', gap: 8, marginBottom: 'var(--space-4)' }} role="tablist">
        {[['national', 'National', nationalCount], ['regional', 'My region', regionalCount]].map(function (t) {
          const active = tab === t[0];
          return (
            <button key={t[0]} role="tab" aria-selected={active} className="ap-chip" onClick={function () { setTab(t[0]); }} style={{
              flex: 1, padding: '9px 0', borderRadius: 'var(--radius-pill)', cursor: 'pointer', font: (active ? '600 ' : '400 ') + '13px var(--font-text)',
              border: '1px solid ' + (active ? 'var(--brand)' : 'var(--border-default)'),
              background: active ? 'var(--surface-brand-soft)' : 'var(--surface-card)',
              color: active ? 'var(--brand)' : 'var(--text-body)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>
              {t[1]}
              <span style={{ font: '600 11px var(--font-mono)', opacity: 0.7 }}>{t[2]}</span>
            </button>
          );
        })}
      </div>

      <div style={{ marginBottom: 'var(--space-5)' }}>
        <FilterChips size="sm" active={domainFilter} onChange={setDomainFilter} items={[
          { id: 'all', label: 'All topics', count: domainCounts.all },
          { id: 'climate', label: 'Climate', count: domainCounts.climate },
          { id: 'economic', label: 'Prices & economy', count: domainCounts.economic },
          { id: 'conflict', label: 'Access & security', count: domainCounts.conflict },
        ]} />
      </div>

      {items.length === 0 && <EmptyState icon="leaf" text="No items in this view right now — try another topic." />}
      {items.map(function (c, i) {
        return (
          <Card key={c.id} padding="lg" elevation="sm" accent={c.level} className="ap-rise ap-hover-lift" style={{ marginBottom: 12, animationDelay: (i * 50) + 'ms' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, marginBottom: 6, alignItems: 'center' }}>
              <Badge tone={c.level}>{LEVEL_LABEL[c.level]}</Badge>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5, font: '11px var(--font-mono)', color: 'var(--text-subtle)' }}>
                {Ic(DOMAIN_ICON[c.domain], { width: 12, height: 12 })}{DOMAIN_LABEL[c.domain]} · {fmtDate(c.publishedAt)}
              </span>
            </div>
            <div style={{ font: '600 15px var(--font-text)', color: 'var(--text-strong)', marginBottom: 6 }}>{c.title}</div>
            <div style={{ font: '13px/1.6 var(--font-text)', color: 'var(--text-body)' }}>{c.body}</div>
            {c.scope === 'regional' && (
              <div style={{ marginTop: 8, font: '11px var(--font-text)', color: 'var(--text-subtle)', display: 'flex', alignItems: 'center', gap: 5 }}>
                {Ic('map-pin', { width: 12, height: 12 })}{c.region}
              </div>
            )}
          </Card>
        );
      })}
    </div>
  );
}