import React, { useEffect, useState } from 'react';
import { useAuth } from '../../contexts/AuthContext';

interface Tarefa {
  id: string;
  titulo: string;
  status: string;
}

export const WorkflowTarefas: React.FC = () => {
  const { token } = useAuth();
  const [tarefas, setTarefas] = useState<Tarefa[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchTarefas() {
      try {
        setLoading(true);
        setError(null);
        const res = await fetch('/api/tarefas', {
          headers: {
            Authorization: `Bearer ${token}`,
            'Content-Type': 'application/json',
          },
        });
        if (!res.ok) throw new Error('Erro ao buscar tarefas');
        const data = await res.json();
        setTarefas(data);
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    fetchTarefas();
  }, [token]);

  if (loading) return <div>Carregando tarefas...</div>;
  if (error) return <div className="text-red-600">{error}</div>;

  return (
    <div className="flex flex-col gap-4">
      {tarefas.map((tarefa) => (
        <div key={tarefa.id} className="border rounded p-4 shadow flex justify-between items-center">
          <span className="font-medium">{tarefa.titulo}</span>
          <span className={`px-2 py-1 rounded text-xs ${
            tarefa.status === 'Concluída' ? 'bg-green-100 text-green-700' : tarefa.status === 'Em andamento' ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-700'
          }`}>
            {tarefa.status}
          </span>
        </div>
      ))}
    </div>
  );
};