// 06 — Activity ledger (filters + export)

function ScreenActivity({ onNav = () => {} }) {
  const [filter, setFilter] = React.useState('all');
  const [exporting, setExporting] = React.useState(false);

  const allTxs = [
    { agent:'Pi', to:'Anthropic API', tag:'compute', amt:80, dir:'out', date:'today · 14:08', status:'paid' },
    { agent:'Bia', to:'Spotify', tag:'subs', amt:12, dir:'out', date:'today · 11:02', status:'paid' },
    { agent:null, to:'lea.base', tag:'fund', amt:500, dir:'in', date:'today · 09:43', status:'paid' },
    { agent:'Atlas', to:'LATAM Airlines', tag:'travel', amt:340, dir:'out', date:'yesterday', status:'paid' },
    { agent:'Bia', to:'OpenAI', tag:'compute', amt:500, dir:'out', date:'yesterday', status:'approved' },
    { agent:'Pi', to:'Anthropic API', tag:'compute', amt:65, dir:'out', date:'2d ago', status:'paid' },
    { agent:'Bia', to:'Apple Music', tag:'subs', amt:10, dir:'out', date:'2d ago', status:'paid' },
    { agent:'Pi', to:'Vercel', tag:'infra', amt:20, dir:'out', date:'3d ago', status:'paid' },
    { agent:null, to:'lea.base', tag:'fund', amt:1000, dir:'in', date:'5d ago', status:'paid' },
    { agent:'Pi', to:'Stripe', tag:'fees', amt:8, dir:'out', date:'1w ago', status:'paid' },
  ];

  const txs = filter === 'all' ? allTxs :
    filter === 'in' ? allTxs.filter(t => t.dir === 'in') :
    filter === 'out' ? allTxs.filter(t => t.dir === 'out') :
    allTxs.filter(t => t.agent === filter);

  const grouped = React.useMemo(() => {
    const g = {};
    txs.forEach(t => {
      const day = t.date.split(' ·')[0];
      if (!g[day]) g[day] = [];
      g[day].push(t);
    });
    return g;
  }, [txs]);

  return (
    <div style={{
      position:'absolute', inset:0,
      background:'var(--bg)',
      display:'flex', flexDirection:'column',
      overflow:'hidden',
    }}>
      <StatusBar tint="light" />
      <div style={{
        flex:1, overflowY:'auto', padding:'4px 0 100px',
      }}>
        <ActHeader onExport={() => setExporting(true)} />
        <ActFilters filter={filter} setFilter={setFilter}/>
        <ActStats />
        {Object.keys(grouped).map(day => (
          <ActDay key={day} day={day} txs={grouped[day]}/>
        ))}
      </div>
      <TabBar active="activity" onNav={onNav}/>
      {exporting && <ExportSheet onClose={() => setExporting(false)}/>}
    </div>
  );
}

function ActHeader({ onExport }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'8px 22px 16px',
    }}>
      <div style={{
        fontFamily:'var(--display)', fontWeight:500, fontSize:28,
        letterSpacing:'-0.025em', color:'var(--ink)',
      }}>Activity</div>
      <button onClick={onExport} style={{
        padding:'6px 12px',
        background:'var(--card)', border:'1px solid var(--line-strong)',
        color:'var(--ink-soft)', borderRadius:6,
        fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.04em',
        cursor:'pointer',
        display:'flex', alignItems:'center', gap:6,
      }}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
        </svg>
        export
      </button>
    </div>
  );
}

function ActFilters({ filter, setFilter }) {
  const chips = [
    { id:'all', label:'all', count:48 },
    { id:'in', label:'in ↙', count:8, color:'var(--green)' },
    { id:'out', label:'out ↗', count:40 },
    { id:'Bia', label:'Bia', color:'#A78BDA' },
    { id:'Pi', label:'Pi', color:'#88C4E8' },
    { id:'Atlas', label:'Atlas', color:'#E0A561' },
  ];
  return (
    <div style={{
      padding:'0 22px 16px',
      display:'flex', gap:6, overflowX:'auto',
      scrollbarWidth:'none',
    }}>
      {chips.map(c => {
        const active = filter === c.id;
        return (
          <button key={c.id} onClick={() => setFilter(c.id)} style={{
            padding:'7px 12px',
            background: active ? (c.color ? `${c.color}22` : 'var(--green-soft)') : 'var(--card)',
            border:`1px solid ${active ? (c.color ? c.color : 'var(--green-line)') : 'var(--line)'}`,
            color: active ? (c.color || 'var(--green)') : 'var(--ink-soft)',
            borderRadius:6,
            fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.04em',
            cursor:'pointer', whiteSpace:'nowrap', flexShrink:0,
          }}>
            {c.label}
            {c.count != null && (
              <span style={{
                opacity:0.5, marginLeft:6, fontSize:10,
              }}>{c.count}</span>
            )}
          </button>
        );
      })}
    </div>
  );
}

function ActStats() {
  return (
    <div style={{
      margin:'0 22px 16px',
      display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:1,
      background:'var(--line)',
      border:'1px solid var(--line)', borderRadius:8, overflow:'hidden',
    }}>
      <ActStat k="in · 30d" v={<span><span style={{color:'var(--green)'}}>+$1,500</span></span>}/>
      <ActStat k="out · 30d" v="$1,035"/>
      <ActStat k="net" v={<span style={{color:'var(--green)'}}>+$465</span>}/>
    </div>
  );
}

function ActStat({ k, v }) {
  return (
    <div style={{padding:'10px 12px', background:'var(--bg)'}}>
      <div style={{
        fontFamily:'var(--mono)', fontSize:8.5, color:'var(--ink-mute)',
        letterSpacing:'0.18em', textTransform:'uppercase', marginBottom:4,
      }}>{k}</div>
      <div style={{
        fontFamily:'var(--display)', fontWeight:500, fontSize:14,
        color:'var(--ink)', letterSpacing:'-0.005em',
        fontVariantNumeric:'tabular-nums',
      }}>{v}</div>
    </div>
  );
}

function ActDay({ day, txs }) {
  return (
    <div style={{padding:'0 22px 6px'}}>
      <div style={{
        fontFamily:'var(--mono)', fontSize:9, color:'var(--ink-mute)',
        letterSpacing:'0.18em', textTransform:'uppercase',
        padding:'12px 0 6px',
      }}>— {day}</div>
      <div style={{
        background:'var(--card)', border:'1px solid var(--line)',
        borderRadius:10, overflow:'hidden',
      }}>
        {txs.map((t, i) => (
          <div key={i} style={{
            padding:'12px 14px',
            borderTop: i === 0 ? 'none' : '1px solid var(--line)',
            display:'flex', alignItems:'center', gap:12,
          }}>
            <div style={{
              width:30, height:30, borderRadius:'50%',
              background: t.dir === 'in' ? 'var(--green-soft)' : 'rgba(224,122,95,0.14)',
              color: t.dir === 'in' ? 'var(--green)' : 'var(--rust)',
              display:'flex',alignItems:'center',justifyContent:'center',
              fontFamily:'var(--mono)', fontSize:12, fontWeight:600,
              flexShrink:0,
            }}>{t.dir === 'in' ? '↙' : '↗'}</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{
                fontSize:13, color:'var(--ink)', fontWeight:500,
                letterSpacing:'-0.005em',
                overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
              }}>{t.to}</div>
              <div style={{
                fontFamily:'var(--mono)', fontSize:9.5, color:'var(--ink-mute)',
                letterSpacing:'0.06em', marginTop:1,
                display:'flex', gap:6, alignItems:'center',
              }}>
                {t.agent && (
                  <>
                    <span style={{color:AGENT_COLORS[t.agent].solid}}>{t.agent}</span>
                    <span style={{opacity:0.4}}>·</span>
                  </>
                )}
                <span>{t.tag}</span>
                <span style={{opacity:0.4}}>·</span>
                <span>{t.date.split(' · ')[1] || t.date}</span>
              </div>
            </div>
            <div style={{
              fontFamily:'var(--display)', fontWeight:500, fontSize:14,
              color: t.dir === 'in' ? 'var(--green)' : 'var(--ink)',
              fontVariantNumeric:'tabular-nums', letterSpacing:'-0.01em',
            }}>{t.dir === 'in' ? '+' : '-'}${t.amt}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ExportSheet({ onClose }) {
  return (
    <div style={{
      position:'absolute', inset:0, zIndex:50,
      background:'rgba(0,0,0,0.7)', backdropFilter:'blur(8px)',
      display:'flex', alignItems:'flex-end',
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width:'100%', background:'var(--bg-soft)',
        borderTop:'1px solid var(--line-strong)',
        borderRadius:'18px 18px 0 0',
        padding:'24px 22px 36px',
        animation:'fadeUp .3s',
      }}>
        <div style={{
          width:36, height:4, background:'var(--ink-mute)',
          opacity:0.4, borderRadius:2, margin:'0 auto 18px',
        }}/>
        <div style={{
          fontFamily:'var(--display)', fontWeight:500, fontSize:20,
          letterSpacing:'-0.015em', color:'var(--ink)', marginBottom:14,
        }}>export ledger</div>
        {[
          { l:'CSV · spreadsheet', s:'all txs · agent · scope · onchain ref' },
          { l:'JSON · raw', s:'full policy decisions + signatures' },
          { l:'Tax report (PDF)', s:'IRS / DGI form 1099-misc style' },
        ].map((o, i) => (
          <div key={i} style={{
            padding:'14px 0',
            borderTop:'1px solid var(--line)',
            display:'flex', alignItems:'center', gap:12, cursor:'pointer',
          }}>
            <div style={{flex:1}}>
              <div style={{
                fontFamily:'var(--display)', fontWeight:500, fontSize:15,
                color:'var(--ink)',
              }}>{o.l}</div>
              <div style={{
                fontFamily:'var(--mono)', fontSize:10.5, color:'var(--ink-mute)',
                letterSpacing:'0.04em', marginTop:2,
              }}>{o.s}</div>
            </div>
            <span style={{color:'var(--green)', fontSize:18}}>↓</span>
          </div>
        ))}
        <button onClick={onClose} style={{
          width:'100%', marginTop:14, padding:'14px',
          background:'transparent', color:'var(--ink-soft)',
          border:'1px solid var(--line-strong)', borderRadius:10,
          fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.04em',
          cursor:'pointer',
        }}>cancel</button>
      </div>
    </div>
  );
}

window.ScreenActivity = ScreenActivity;