XCDesktop/src/modules/todo/TodoPage.tsx

import React, { useState, useEffect, useRef, useCallback } from 'react'
import { Plus, Trash2, ChevronLeft, ChevronRight, ListTodo } from 'lucide-react'
import { getTodoData, addTodoItem, toggleTodoItem, updateTodoItem, deleteTodoItem } from './api'
import { WEEK_DAYS } from '@shared/constants'
import { getTodayDate, getTomorrowDate } from '@shared/utils/date'
import type { DayTodo } from './types'

const formatDateDisplay = (dateStr: string): string => {
  const [year, month, day] = dateStr.split('-')
  const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day))
  const weekDay = WEEK_DAYS[date.getDay()]
  return `${parseInt(month)}月${parseInt(day)}日 ${weekDay}`
}

const isToday = (dateStr: string): boolean => {
  return dateStr === getTodayDate()
}

const isTomorrow = (dateStr: string): boolean => {
  return dateStr === getTomorrowDate()
}

const isEditable = (dateStr: string): boolean => {
  const today = getTodayDate()
  return dateStr >= today
}

export const TodoPage: React.FC = () => {
  const [dayTodos, setDayTodos] = useState<DayTodo[]>([])
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth() + 1)
  const [loading, setLoading] = useState(true)
  const [editingItem, setEditingItem] = useState<{ date: string; index: number } | null>(null)
  const [editContent, setEditContent] = useState('')
  const [addingDate, setAddingDate] = useState<string | null>(null)
  const [newTodoContent, setNewTodoContent] = useState('')
  const [isInitialLoad, setIsInitialLoad] = useState(true)
  const inputRef = useRef<HTMLTextAreaElement>(null)
  const editInputRef = useRef<HTMLTextAreaElement>(null)

  const adjustTextAreaHeight = (el: HTMLTextAreaElement) => {
    const baseHeight = 28 // 1.75rem = 28px
    el.style.height = baseHeight + 'px'
    el.style.height = Math.max(el.scrollHeight, baseHeight) + 'px'
  }

  const loadTodoData = useCallback(async (year: number, month: number, isInitial: boolean = false) => {
    if (isInitial) {
      setLoading(true)
    }
    try {
      const data = await getTodoData(year, month)
      setDayTodos(data.dayTodos)
    } catch (error) {
      console.error('Failed to load TODO:', error)
      setDayTodos([])
    } finally {
      if (isInitial) {
        setLoading(false)
        setIsInitialLoad(false)
      }
    }
  }, [])

  useEffect(() => {
    loadTodoData(currentYear, currentMonth, isInitialLoad)
  }, [currentYear, currentMonth, loadTodoData, isInitialLoad])

  useEffect(() => {
    if (addingDate && inputRef.current) {
      inputRef.current.focus()
      adjustTextAreaHeight(inputRef.current)
    }
  }, [addingDate])

  useEffect(() => {
    if (editingItem && editInputRef.current) {
      adjustTextAreaHeight(editInputRef.current)
    }
  }, [editingItem])

  const handlePrevMonth = () => {
    if (currentMonth === 1) {
      setCurrentMonth(12)
      setCurrentYear(currentYear - 1)
    } else {
      setCurrentMonth(currentMonth - 1)
    }
  }

  const handleNextMonth = () => {
    if (currentMonth === 12) {
      setCurrentMonth(1)
      setCurrentYear(currentYear + 1)
    } else {
      setCurrentMonth(currentMonth + 1)
    }
  }

  const handleStartAdd = (date: string) => {
    setAddingDate(date)
    setNewTodoContent('')
  }

  const handleCancelAdd = () => {
    setAddingDate(null)
    setNewTodoContent('')
  }

  const handleAddTodo = async (date: string, continueAdding: boolean = false) => {
    const content = newTodoContent.trim()
    if (!content) {
      setAddingDate(null)
      setNewTodoContent('')
      return
    }

    try {
      const data = await addTodoItem(currentYear, currentMonth, date, content)
      setDayTodos(data.dayTodos)
      if (continueAdding) {
        setNewTodoContent('')
      } else {
        setAddingDate(null)
        setNewTodoContent('')
      }
    } catch (error) {
      console.error('Failed to add TODO:', error)
    }
  }

  const handleToggleTodo = async (date: string, itemIndex: number, completed: boolean) => {
    try {
      const data = await toggleTodoItem(currentYear, currentMonth, date, itemIndex, completed)
      setDayTodos(data.dayTodos)
    } catch (error) {
      console.error('Failed to toggle TODO:', error)
    }
  }

  const handleStartEdit = (date: string, index: number, content: string) => {
    setEditingItem({ date, index })
    setEditContent(content)
    setAddingDate(null)
  }

  const handleSaveEdit = async () => {
    if (!editingItem) return
    const { date, index } = editingItem
    const newContent = editContent.trim()
    if (!newContent) {
      try {
        const data = await deleteTodoItem(currentYear, currentMonth, date, index)
        setDayTodos(data.dayTodos)
      } catch (error) {
        console.error('Failed to delete TODO:', error)
      } finally {
        setEditingItem(null)
        setEditContent('')
      }
      return
    }

    try {
      const data = await updateTodoItem(currentYear, currentMonth, date, index, newContent)
      setDayTodos(data.dayTodos)
    } catch (error) {
      console.error('Failed to update TODO:', error)
    } finally {
      setEditingItem(null)
      setEditContent('')
    }
  }

  const handleCancelEdit = () => {
    setEditingItem(null)
    setEditContent('')
  }

  const handleDeleteTodo = async (date: string, itemIndex: number) => {
    try {
      const data = await deleteTodoItem(currentYear, currentMonth, date, itemIndex)
      setDayTodos(data.dayTodos)
    } catch (error) {
      console.error('Failed to delete TODO:', error)
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent, date: string) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleAddTodo(date, true)
    } else if (e.key === 'Escape') {
      handleCancelAdd()
    }
  }

  const handleEditKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSaveEdit()
    } else if (e.key === 'Escape') {
      handleCancelEdit()
    }
  }

  const todayDate = getTodayDate()
  const tomorrowDate = getTomorrowDate()

  const now = new Date()
  const isCurrentMonth = currentYear === now.getFullYear() && currentMonth === now.getMonth() + 1

  const allDates = [...new Set([
    ...dayTodos.map(d => d.date),
    ...(isCurrentMonth ? [todayDate, tomorrowDate] : [])
  ])].sort()

  return (
    <div className="max-w-4xl mx-auto w-full px-14 py-12 pb-40">
      <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-8 flex items-center gap-2">
        <ListTodo className="w-8 h-8" />
        TODO
      </h1>

      <div className="flex items-center justify-center mb-6">
        <div className="flex items-center gap-2">
          <button
            onClick={handlePrevMonth}
            className="p-1.5 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
          >
            <ChevronLeft size={18} />
          </button>
          <span className="text-base font-medium text-gray-700 dark:text-gray-300 min-w-[80px] text-center">
            {currentYear}年{currentMonth}月
          </span>
          <button
            onClick={handleNextMonth}
            className="p-1.5 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
          >
            <ChevronRight size={18} />
          </button>
        </div>
      </div>

      {loading && isInitialLoad ? (
        <div className="text-center text-gray-500 dark:text-gray-400 py-12">
          加载中...
        </div>
      ) : allDates.length === 0 ? (
        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
          <ListTodo size={48} className="mx-auto mb-4 opacity-30" />
          <p>暂无计划</p>
        </div>
      ) : (
        <div className="space-y-4 pb-8">
          {allDates.map((date) => {
            const dayTodo = dayTodos.find(d => d.date === date)
            const isTodayDate = isToday(date)
            const isTomorrowDate = isTomorrow(date)
            const canEdit = isEditable(date)

            return (
              <div key={date} className="pt-4 space-y-2">
                <div className="flex items-center gap-2">
                  <h3 className={`text-lg font-semibold ${isTodayDate
                      ? 'text-gray-900 dark:text-gray-100'
                      : isTomorrowDate
                        ? 'text-gray-700 dark:text-gray-300'
                        : 'text-gray-500 dark:text-gray-500'
                    }`}>
                    {formatDateDisplay(date)}
                  </h3>
                  {isTodayDate && (
                    <span className="px-2 py-0.5 text-xs bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded-full">
                      今天
                    </span>
                  )}
                  {isTomorrowDate && (
                    <span className="px-2 py-0.5 text-xs bg-gray-400 dark:bg-gray-600 text-white rounded-full">
                      明天
                    </span>
                  )}
                  {canEdit && (
                    <button
                      onClick={() => handleStartAdd(date)}
                      className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                      title="添加任务"
                    >
                      <Plus size={16} />
                    </button>
                  )}
                </div>

                <div className="pl-2 space-y-2">
                  {dayTodo?.items.map((item, index) => (
                    <div
                      key={item.id}
                      className="flex items-center gap-3 group"
                    >
                      <button
                        onClick={() => canEdit && handleToggleTodo(date, index, !item.completed)}
                        disabled={!canEdit}
                        className={`w-4 h-4 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors ${item.completed
                            ? 'bg-gray-600 dark:bg-gray-400 border-gray-600 dark:border-gray-400 text-white'
                            : 'border-gray-400 dark:border-gray-500'
                          } ${canEdit ? 'hover:border-gray-600 dark:hover:border-gray-400 cursor-pointer' : 'cursor-default'}`}
                      >
                        {item.completed && (
                          <svg className="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                          </svg>
                        )}
                      </button>

                      {editingItem?.date === date && editingItem?.index === index ? (
                        <textarea
                          ref={editInputRef}
                          value={editContent}
                          onChange={(e) => {
                            setEditContent(e.target.value)
                            adjustTextAreaHeight(e.target)
                          }}
                          onKeyDown={handleEditKeyDown}
                          onBlur={handleSaveEdit}
                          autoFocus
                          rows={1}
                          className="flex-1 px-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 text-gray-800 dark:text-gray-200 resize-none overflow-hidden align-top"
                          style={{ height: '1.75rem' }}
                        />
                      ) : (
                        <span
                          onDoubleClick={() => canEdit && !item.completed && handleStartEdit(date, index, item.content)}
                          className={`flex-1 px-2 ${canEdit ? 'cursor-pointer' : 'cursor-default'}
                            } ${item.completed
                              ? 'text-gray-400 dark:text-gray-500 line-through'
                              : 'text-gray-700 dark:text-gray-200'
                            }`}
                        >
                          {item.content}
                        </span>
                      )}

{canEdit && !item.completed && (
                        <button
                          onClick={() => handleDeleteTodo(date, index)}
                          className="p-1 opacity-0 group-hover:opacity-100 hover:bg-red-100 dark:hover:bg-red-900/30 rounded transition-all text-red-500"
                        >
                          <Trash2 size={14} />
                        </button>
                      )}
                    </div>
                  ))}

                  {canEdit && addingDate === date && (
                    <div className="flex items-center gap-3">
                      <div className="w-4 h-4 rounded-full border-2 border-gray-400 dark:border-gray-500 shrink-0" />
                      <textarea
                        ref={inputRef}
                        value={newTodoContent}
                        onChange={(e) => {
                          setNewTodoContent(e.target.value)
                          adjustTextAreaHeight(e.target)
                        }}
                        onKeyDown={(e) => handleKeyDown(e, date)}
                        onBlur={() => {
                          handleAddTodo(date, false)
                        }}
                        placeholder="输入任务内容..."
                        rows={1}
                        className="flex-1 px-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 text-gray-800 dark:text-gray-200 placeholder-gray-400 resize-none overflow-hidden align-top"
                        style={{ height: '1.75rem' }}
                      />
                    </div>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}