import React from "react";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import { useQuery } from "react-query";

import api from "../../services/api";
import { Tarefa } from "../../types/entities";

import { TarefaCard } from "./TarefaCard";

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>
  );
};