'use client';

import { useState } from 'react';
import { Bot, X } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
import { AIAssistantDialog } from './AIAssistantDialog';

/**
 * AI 助手悬浮按钮
 * 显示在侧边栏底部，反馈按钮下方
 */
export function AIAssistantButton() {
  const { t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      {/* 扁平按钮 - 与侧边栏风格一致 */}
      <button
        onClick={() => setIsOpen(true)}
        className="fixed bottom-32 left-3 z-50 w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200"
        aria-label={t.aiAssistant.fab.tooltip}
        title={t.aiAssistant.fab.tooltip}
      >
        <Bot className="w-5 h-5 text-purple-600" />
      </button>

      {/* AI 对话框 */}
      <AIAssistantDialog open={isOpen} onOpenChange={setIsOpen} />
    </>
  );
}

export default AIAssistantButton;