import React, { useState } from "react";
import todoApi from "../../api/todoApi";

const TodoForm = ({ onTaskCreated }) => {
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    due_date: "",
    tags: "",
  });

  const [expanded, setExpanded] = useState(false);

  const handleChange = (e) => {
    setFormData((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const tagList =
      formData.tags.trim() !== ""
        ? formData.tags.split(",").map((tag) => tag.trim())
        : [];

    try {
      await todoApi.post("/api/todo/tasks/", {
        title: formData.title,
        description: formData.description,
        due_date: formData.due_date === "" ? null : formData.due_date,
        tags: tagList,
      });

      setFormData({ title: "", description: "", due_date: "", tags: "" });
      setExpanded(false);
      onTaskCreated();
    } catch (err) {
      console.error("등록 실패:", err.response?.data || err.message);
      alert("등록 실패: " + JSON.stringify(err.response?.data));
    }
  };

  const handleCancel = () => {
    setFormData({ title: "", description: "", due_date: "", tags: "" });
    setExpanded(false);
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="bg-white p-4 rounded-lg shadow mb-6 border border-gray-200"
    >
      <input
        type="text"
        name="title"
        value={formData.title}
        onFocus={() => setExpanded(true)}
        onChange={handleChange}
        placeholder="➕ 작업 추가하기..."
        required
        className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 mb-2"
      />

      {expanded && (
        <>
          <textarea
            name="description"
            value={formData.description}
            onChange={handleChange}
            placeholder="설명 (선택)"
            className="w-full px-3 py-2 border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-300 mb-2"
            rows="2"
          />

          <div className="flex gap-4 mb-2">
            <div className="flex-1">
              <label className="block text-sm text-gray-600 mb-1">📅 마감일</label>
              <input
                type="date"
                name="due_date"
                value={formData.due_date}
                onChange={handleChange}
                className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300"
              />
            </div>

            <div className="flex-1">
              <label className="block text-sm text-gray-600 mb-1">🏷 태그</label>
              <input
                type="text"
                name="tags"
                value={formData.tags}
                onChange={handleChange}
                placeholder="예: 중요, 오늘, 업무"
                className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300"
              />
            </div>
          </div>

          <div className="flex justify-end space-x-2">
            <button
              type="button"
              onClick={handleCancel}
              className="px-4 py-2 border border-gray-300 rounded-md text-gray-600 hover:bg-gray-100 transition"
            >
              취소
            </button>
            <button
              type="submit"
              className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition"
            >
              등록
            </button>
          </div>
        </>
      )}
    </form>
  );
};

export default TodoForm;