import React, { useState, useEffect } from 'react';
import axios from 'axios';

const BackgroundTasks: React.FC = () => {
  const [tasks, setTasks] = useState<string[]>([]);

  const pollTasks = async () => {
    try {
      const res = await axios.get('/api/agent/tasks');
      setTasks(res.data.tasks || []);
    } catch (e) {}
  };

  useEffect(() => {
    pollTasks();
    const interval = setInterval(pollTasks, 3000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ padding: 12 }}>
      <div style={{ fontWeight: 600, marginBottom: 8 }}>Background Agents</div>
      {tasks.length === 0 && <div style={{ color: 'var(--text-secondary)', fontSize: 12 }}>No running tasks</div>}
      {tasks.map(task => (
        <div key={task} style={{ background: 'var(--bg-tertiary)', padding: '4px 8px', borderRadius: 4, marginBottom: 4, fontSize: 12 }}>
          {task} – running
        </div>
      ))}
    </div>
  );
};

export default BackgroundTasks;