import React from 'react';
import { useQuery } from 'react-query';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { Tarefa } from '../../types/entities';
import { TarefaCard } from './TarefaCard';
import api from '../../services/api';

interface TarefaKanbanProps {
  onEdit: (tarefa: Tarefa) => void;
  onStatusChange: (id: string, status: string, progresso?: number) => void;
}

const colunas = [
  { id: 'PENDENTE', titulo: 'Pendentes' },
  { id: 'EM_ANDAMENTO', titulo: 'Em Andamento' },
  { id: 'CONCLUIDA', titulo: 'Concluídas' },
];

export const TarefaKanban: React.FC<TarefaKanbanProps> = ({ onEdit, onStatusChange }) => {
  const { data: tarefas = [], refetch } = useQuery('tarefas', async () => {
    const response = await api.get('/tarefas');
    return response.data;
  });

  const handleDragEnd = async (result: any) => {
    if (!result.destination) return;

    const { draggableId, source, destination } = result;
    
    if (source.droppableId !== destination.droppableId) {
      onStatusChange(draggableId, destination.droppableId);
    }
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {colunas.map((coluna) => (
          <div key={coluna.id} className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
              {coluna.titulo}
            </h3>
            
            <Droppable droppableId={coluna.id}>
              {(provided) => (
                <div
                  ref={provided.innerRef}
                  {...provided.droppableProps}
                  className="space-y-4 min-h-[200px]"
                >
                  {tarefas
                    .filter((tarefa: Tarefa) => tarefa.status === coluna.id)
                    .map((tarefa: Tarefa, index: number) => (
                      <TarefaCard
                        key={tarefa.id}
                        tarefa={tarefa}
                        index={index}
                        onEdit={onEdit}
                        onStatusChange={onStatusChange}
                      />
                    ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </div>
        ))}
      </div>
    </DragDropContext>
  );
};