// screens/tasks.jsx — my tasks list with filter chips

function ScreenTasks({ role, scenario, onOpenTask, onBack }) {
  const [filter, setFilter] = useState('all'); // all / mine / active / done
  const tasks = tasksFor(role.id, scenario.id);

  const filtered = tasks.filter(t => {
    if (filter === 'all') return true;
    if (filter === 'mine') return t.pri === 'urgent' || t.pri === 'mine';
    if (filter === 'active') return t.pri === 'active' || t.pri === 'blocked';
    if (filter === 'done') return t.pri === 'done';
    return true;
  });

  // Group by node category
  const groups = [
    { id: 'now', label: '此刻执行', match: (t) => t.pri === 'urgent' || t.pri === 'mine' },
    { id: 'queue', label: '排队中', match: (t) => t.pri === 'active' || t.pri === 'pending' },
    { id: 'blocked', label: '异常 · 驳回', match: (t) => t.pri === 'blocked' },
    { id: 'done', label: '已完成', match: (t) => t.pri === 'done' },
  ];

  const counts = {
    all: tasks.length,
    mine: tasks.filter(t=>t.pri==='urgent'||t.pri==='mine').length,
    active: tasks.filter(t=>t.pri==='active'||t.pri==='blocked').length,
    done: tasks.filter(t=>t.pri==='done').length,
  };

  return (
    <div>
      <TopBar role={role} title="我的任务" subtitle={`${role.workbench} · ${tasks.length} 项 · 同步于 14:32`} />

      {/* Filter chips */}
      <div style={{
        padding: '6px 16px 4px', display:'flex', gap: 8, overflowX: 'auto',
      }}>
        {[
          { id: 'all', label: '全部' },
          { id: 'mine', label: '等我' },
          { id: 'active', label: '进行中' },
          { id: 'done', label: '已完成' },
        ].map(f => (
          <FilterChip key={f.id} active={filter===f.id} onClick={() => setFilter(f.id)} count={counts[f.id]}>
            {f.label}
          </FilterChip>
        ))}
        <div style={{ marginLeft: 'auto' }}>
          <FilterChip>
            <span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}>
              <I.Filter size={12}/> 节点
            </span>
          </FilterChip>
        </div>
      </div>

      {/* Task groups */}
      {groups.map(g => {
        const items = filtered.filter(g.match);
        if (items.length === 0) return null;
        return (
          <div key={g.id}>
            <SectionLabel right={`${items.length}`}>{g.label}</SectionLabel>
            <div style={{ padding: '0 16px', display:'flex', flexDirection:'column', gap: 10 }}>
              {items.map(t => <TaskCard key={t.id} task={t} onClick={() => onOpenTask(t)}/>)}
            </div>
          </div>
        );
      })}

      {filtered.length === 0 && (
        <div style={{ padding: '60px 24px', textAlign: 'center', color: 'var(--t3)' }}>
          <div style={{
            width: 60, height: 60, margin: '0 auto 14px',
            background: 'var(--bg-2)', borderRadius: 30,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <I.Check size={26}/>
          </div>
          <div style={{ fontSize: 15, color:'var(--t2)' }}>没有需要处理的任务</div>
          <div style={{ fontSize: 12, marginTop: 4 }}>新事件会自动推送到此处</div>
        </div>
      )}

      <div style={{ height: 110 }}/>
    </div>
  );
}

function FilterChip({ children, active, onClick, count }) {
  return (
    <button onClick={onClick} style={{
      flexShrink: 0,
      display:'inline-flex', alignItems:'center', gap: 5,
      padding: '6px 12px', borderRadius: 999,
      background: active ? 'var(--brand)' : '#fff',
      color: active ? '#fff' : 'var(--t1)',
      border: active ? '1px solid var(--brand)' : '1px solid var(--border)',
      fontSize: 13, fontWeight: 500, cursor: 'pointer',
    }}>
      {children}
      {typeof count === 'number' && count > 0 && (
        <span style={{
          fontSize: 11, fontWeight: 600,
          background: active ? 'rgba(255,255,255,0.22)' : 'var(--bg-2)',
          color: active ? '#fff' : 'var(--t2)',
          padding: '1px 6px', borderRadius: 10, minWidth: 16, textAlign: 'center',
        }} className="mono">{count}</span>
      )}
    </button>
  );
}

Object.assign(window, { ScreenTasks });