import { PlusIcon, XMarkIcon, CheckIcon } from "@heroicons/react/24/outline";
import React, { useState } from "react";

import { SubTarefa } from "../../types/entities";

interface SubtarefasListProps {
  subtarefas: SubTarefa[];
  onChange: (subtarefas: SubTarefa[]) => void;
}

export const SubtarefasList: React.FC<SubtarefasListProps> = ({
  subtarefas,
  onChange,
}) => {
  const [novaTarefa, setNovaTarefa] = useState("");

  const adicionarSubtarefa = () => {
    if (!novaTarefa.trim()) return;

    onChange([
      ...subtarefas,
      {
        id: Math.random().toString(),
        titulo: novaTarefa,
        concluida: false,
        tarefaId: "",
      },
    ]);
    setNovaTarefa("");
  };

  return (
    <div className="space-y-4">
      <div className="flex space-x-2">
        <input
          type="text"
          value={novaTarefa}
          onChange={(e) => setNovaTarefa(e.target.value)}
          placeholder="Nova subtarefa"
          className="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          onKeyPress={(e) => e.key === "Enter" && adicionarSubtarefa()}
        />
        <button
          type="button"
          onClick={adicionarSubtarefa}
          className="p-2 text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/50 rounded-lg"
        >
          <PlusIcon className="h-5 w-5" />
        </button>
      </div>

      <ul className="space-y-2">
        {subtarefas.map((subtarefa, index) => (
          <li
            key={subtarefa.id}
            className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
          >
            <div className="flex items-center space-x-3">
              <button
                type="button"
                onClick={() => {
                  const novasSubtarefas = [...subtarefas];
                  novasSubtarefas[index].concluida =
                    !novasSubtarefas[index].concluida;
                  onChange(novasSubtarefas);
                }}
                className={`h-5 w-5 rounded border ${
                  subtarefa.concluida
                    ? "bg-blue-600 border-blue-600 text-white"
                    : "border-gray-300 dark:border-gray-600"
                }`}
              >
                {subtarefa.concluida && <CheckIcon className="h-4 w-4" />}
              </button>
              <span
                className={`text-gray-900 dark:text-white ${
                  subtarefa.concluida
                    ? "line-through text-gray-500 dark:text-gray-400"
                    : ""
                }`}
              >
                {subtarefa.titulo}
              </span>
            </div>
            <button
              type="button"
              onClick={() =>
                onChange(subtarefas.filter((s) => s.id !== subtarefa.id))
              }
              className="text-gray-400 hover:text-red-600 dark:text-gray-500 dark:hover:text-red-400"
            >
              <XMarkIcon className="h-5 w-5" />
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};