import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
import { createFileRoute } from '@tanstack/react-router'
import type { ChangeEventHandler, FormEventHandler } from 'react'
import { useState } from 'react'
import { orpc } from '@/client/query-client'

export const Route = createFileRoute('/')({
  component: Todos,
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(orpc.todo.list.queryOptions())
  },
})

function Todos() {
  const [newTodoTitle, setNewTodoTitle] = useState('')

  const listQuery = useSuspenseQuery(orpc.todo.list.queryOptions())
  const createMutation = useMutation(orpc.todo.create.mutationOptions())
  const updateMutation = useMutation(orpc.todo.update.mutationOptions())
  const deleteMutation = useMutation(orpc.todo.remove.mutationOptions())

  const handleCreateTodo: FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault()
    if (newTodoTitle.trim()) {
      createMutation.mutate({ title: newTodoTitle.trim() })
      setNewTodoTitle('')
    }
  }

  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
    setNewTodoTitle(e.target.value)
  }

  const handleToggleTodo = (id: string, currentCompleted: boolean) => {
    updateMutation.mutate({
      id,
      data: { completed: !currentCompleted },
    })
  }

  const handleDeleteTodo = (id: string) => {
    deleteMutation.mutate({ id })
  }

  const todos = listQuery.data
  const completedCount = todos.filter((todo) => todo.completed).length
  const totalCount = todos.length
  const progress = totalCount > 0 ? (completedCount / totalCount) * 100 : 0

  return (
    <div className="min-h-screen bg-slate-50 py-12 px-4 sm:px-6 font-sans">
      <div className="max-w-2xl mx-auto space-y-8">
        {/* Header */}
        <div className="flex items-end justify-between">
          <div>
            <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
              我的待办
            </h1>
            <p className="text-slate-500 mt-1">保持专注，逐个击破</p>
          </div>
          <div className="text-right">
            <div className="text-2xl font-semibold text-slate-900">
              {completedCount}
              <span className="text-slate-400 text-lg">/{totalCount}</span>
            </div>
            <div className="text-xs font-medium text-slate-400 uppercase tracking-wider">
              已完成
            </div>
          </div>
        </div>

        {/* Add Todo Form */}
        <form onSubmit={handleCreateTodo} className="relative group z-10">
          <div className="relative transform transition-all duration-200 focus-within:-translate-y-1">
            <input
              type="text"
              value={newTodoTitle}
              onChange={handleInputChange}
              placeholder="添加新任务..."
              className="w-full pl-6 pr-32 py-5 bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border-0 ring-1 ring-slate-100 focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all placeholder:text-slate-400 text-lg text-slate-700"
              disabled={createMutation.isPending}
            />
            <button
              type="submit"
              disabled={createMutation.isPending || !newTodoTitle.trim()}
              className="absolute right-3 top-3 bottom-3 px-6 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-all shadow-md shadow-indigo-200 disabled:opacity-50 disabled:shadow-none hover:shadow-lg hover:shadow-indigo-300 active:scale-95"
            >
              {createMutation.isPending ? '添加中' : '添加'}
            </button>
          </div>
        </form>

        {/* Progress Bar (Only visible when there are tasks) */}
        {totalCount > 0 && (
          <div className="h-1.5 w-full bg-slate-200 rounded-full overflow-hidden">
            <div
              className="h-full bg-indigo-500 transition-all duration-500 ease-out rounded-full"
              style={{ width: `${progress}%` }}
            />
          </div>
        )}

        {/* Todo List */}
        <div className="space-y-3">
          {todos.length === 0 ? (
            <div className="py-20 text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-100 mb-4">
                <svg
                  className="w-8 h-8 text-slate-400"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  aria-hidden="true"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={1.5}
                    d="M12 6v6m0 0v6m0-6h6m-6 0H6"
                  />
                </svg>
              </div>
              <p className="text-slate-500 text-lg font-medium">没有待办事项</p>
              <p className="text-slate-400 text-sm mt-1">
                输入上方内容添加您的第一个任务
              </p>
            </div>
          ) : (
            todos.map((todo) => (
              <div
                key={todo.id}
                className={`group relative flex items-center p-4 bg-white rounded-xl border border-slate-100 shadow-sm transition-all duration-200 hover:shadow-md hover:border-slate-200 ${
                  todo.completed ? 'bg-slate-50/50' : ''
                }`}
              >
                <button
                  type="button"
                  onClick={() => handleToggleTodo(todo.id, todo.completed)}
                  className={`flex-shrink-0 w-6 h-6 rounded-full border-2 transition-all duration-200 flex items-center justify-center mr-4 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${
                    todo.completed
                      ? 'bg-indigo-500 border-indigo-500'
                      : 'border-slate-300 hover:border-indigo-500 bg-white'
                  }`}
                >
                  {todo.completed && (
                    <svg
                      className="w-3.5 h-3.5 text-white"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={3}
                      aria-hidden="true"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                  )}
                </button>

                <div className="flex-1 min-w-0">
                  <p
                    className={`text-lg transition-all duration-200 truncate ${
                      todo.completed
                        ? 'text-slate-400 line-through decoration-slate-300 decoration-2'
                        : 'text-slate-700'
                    }`}
                  >
                    {todo.title}
                  </p>
                </div>

                <div className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute right-4 pl-4 bg-gradient-to-l from-white via-white to-transparent sm:static sm:bg-none">
                  <span className="text-xs text-slate-400 mr-3 hidden sm:inline-block">
                    {new Date(todo.createdAt).toLocaleDateString('zh-CN')}
                  </span>
                  <button
                    type="button"
                    onClick={() => handleDeleteTodo(todo.id)}
                    className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors focus:outline-none"
                    title="删除"
                  >
                    <svg
                      className="w-5 h-5"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={1.5}
                      aria-hidden="true"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                      />
                    </svg>
                  </button>
                </div>
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  )
}