import { Plus, Trash2 } from 'lucide-react'
import { useChatStore } from '@/stores/chatStore'

export const ChatSidebar = () => {
  const { chats, currentChatId, createChat, deleteChat, selectChat } = useChatStore()

  const handleNewChat = () => {
    createChat()
  }

  return (
    <div className="w-[260px] h-full flex flex-col bg-[#262626] dark:bg-[#262626]">
      <button
        onClick={handleNewChat}
        className="flex items-center gap-2 px-3 py-2.5 mx-2 mt-2 rounded-md border border-gray-600 hover:bg-gray-700 transition-colors text-sm"
      >
        <Plus size={16} />
        <span>新对话</span>
      </button>

      <div className="flex-1 overflow-y-auto mt-3 px-2">
        {chats.map((chat) => (
          <div
            key={chat.id}
            onClick={() => selectChat(chat.id)}
            className={`group flex items-center justify-between px-3 py-2 rounded-md cursor-pointer text-sm mb-1 transition-colors ${
              currentChatId === chat.id
                ? 'bg-[#343541] text-white'
                : 'text-gray-300 hover:bg-[#343541]/50'
            }`}
          >
            <span className="truncate flex-1">{chat.title}</span>
            <button
              onClick={(e) => {
                e.stopPropagation()
                deleteChat(chat.id)
              }}
              className="opacity-0 group-hover:opacity-100 hover:text-red-400 transition-opacity p-1"
            >
              <Trash2 size={14} />
            </button>
          </div>
        ))}

        {chats.length === 0 && (
          <div className="text-gray-500 text-sm text-center py-8">
            暂无对话
          </div>
        )}
      </div>
    </div>
  )
}