import { useState, useRef, useEffect } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { getUserTodos, addUserTodo, toggleUserTodo, deleteUserTodo } from "../../lib/commands";

export function UserTodoPanel({ projectId }: { projectId: string }) {
  const qc = useQueryClient();
  const [input, setInput] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  const { data: todos = [] } = useQuery({
    queryKey: ["user-todos", projectId],
    queryFn: () => getUserTodos(projectId),
  });

  const addMut = useMutation({
    mutationFn: (content: string) => addUserTodo(projectId, content),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["user-todos", projectId] });
      setInput("");
    },
  });

  const toggleMut = useMutation({
    mutationFn: (id: number) => toggleUserTodo(id),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["user-todos", projectId] }),
  });

  const deleteMut = useMutation({
    mutationFn: (id: number) => deleteUserTodo(id),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["user-todos", projectId] }),
  });

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" && input.trim()) {
      addMut.mutate(input.trim());
    }
  };

  const pending = todos.filter((t) => !t.done);
  const done    = todos.filter((t) => t.done);

  return (
    <div className="mt-2 border-t border-gray-50 pt-3">
      {/* 输入框 */}
      <input
        ref={inputRef}
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder="记点什么… 回车确认"
        className="w-full text-xs px-2 py-1.5 rounded border border-gray-200 bg-gray-50
                   placeholder-gray-300 focus:outline-none focus:border-gray-400 mb-2"
      />

      {/* 待办列表 */}
      {pending.length === 0 && done.length === 0 && (
        <p className="text-xs text-gray-300 text-center py-1">暂无备忘</p>
      )}

      <ul className="flex flex-col gap-0.5">
        {pending.map((t) => (
          <li key={t.id} className="flex items-center gap-2 group">
            <button
              onClick={() => toggleMut.mutate(t.id)}
              className="w-3.5 h-3.5 rounded border border-gray-300 shrink-0
                         hover:border-blue-400 transition-colors"
            />
            <span className="text-xs text-gray-600 flex-1 leading-relaxed">{t.content}</span>
            <button
              onClick={() => deleteMut.mutate(t.id)}
              className="text-gray-200 hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100 text-xs shrink-0"
            >
              ×
            </button>
          </li>
        ))}

        {/* 已完成的条目折叠在末尾 */}
        {done.map((t) => (
          <li key={t.id} className="flex items-center gap-2 group">
            <button
              onClick={() => toggleMut.mutate(t.id)}
              className="w-3.5 h-3.5 rounded border border-gray-200 bg-gray-100 shrink-0
                         flex items-center justify-center hover:border-gray-400 transition-colors"
            >
              <span className="text-gray-400 text-[9px] leading-none">✓</span>
            </button>
            <span className="text-xs text-gray-300 line-through flex-1 leading-relaxed">{t.content}</span>
            <button
              onClick={() => deleteMut.mutate(t.id)}
              className="text-gray-200 hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100 text-xs shrink-0"
            >
              ×
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}