import { useNavigate } from 'react-router-dom'
import { useChatStore } from '../../store/chatStore'
import { api } from '../../api/client'

export default function Sidebar() {
  const navigate = useNavigate()
  const { currentSessionId, setSessionId, clearMessages } = useChatStore()

  const handleNewChat = async () => {
    try {
      const { session_id } = await api.sessions.create()
      setSessionId(session_id)
      clearMessages()
      navigate(`/chat/${session_id}`)
    } catch { /* ignore */ }
  }

  return (
    <aside className="w-60 bg-[var(--mx-surface)] border-r border-[var(--mx-divider)] shrink-0 flex flex-col">
      <div className="p-3">
        <button onClick={handleNewChat}
          className="w-full py-2.5 bg-[var(--mx-primary)] hover:bg-[var(--mx-primary-hover)] active:scale-[0.98] text-white font-medium text-sm rounded-full transition-all duration-200"
        >
          + 新对话
        </button>
      </div>

      <div className="flex-1 overflow-auto px-2 pb-2">
        {currentSessionId ? (
          <div className="px-3 py-2 bg-[var(--mx-bg)] rounded-[14px]">
            <p className="text-xs text-[var(--mx-text-dim)] truncate">{currentSessionId.slice(0, 12)}...</p>
          </div>
        ) : (
          <p className="px-3 py-2 text-xs text-[var(--mx-text-dim)] text-center">暂无对话</p>
        )}
      </div>
    </aside>
  )
}