'use client';

import { useState } from 'react';
import { MessageSquarePlus } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
import { FeedbackModal } from './FeedbackModal';

/**
 * 全局悬浮反馈按钮
 * 显示在侧边栏底部，折叠按钮上方
 */
export function FeedbackButton() {
  const { t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      {/* 扁平按钮 - 与侧边栏风格一致 */}
      <button
        onClick={() => setIsOpen(true)}
        data-testid="feedback-fab"
        className="fixed bottom-[188px] 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.feedback?.fab?.tooltip || 'Feedback'}
        title={t.feedback?.fab?.tooltip || 'Feedback'}
      >
        <MessageSquarePlus className="w-5 h-5 text-blue-600" />
      </button>

      {/* 反馈表单弹窗 */}
      <FeedbackModal open={isOpen} onOpenChange={setIsOpen} />
    </>
  );
}

export default FeedbackButton;