'use client'

import { memo } from 'react';
import { XMarkIcon } from '@heroicons/react/24/solid';
import { useSentioPresentationStore } from '@/lib/store/sentio';
import { useChatWithAgent } from '../hooks/chat';
import clsx from 'clsx';

export const ExitPresentationButton = memo(() => {
    const { isPresentationMode, exitPresentationMode } = useSentioPresentationStore();
    const { abort } = useChatWithAgent();

    const handleExit = () => {
        console.log('用户点击退出展示模式按钮');
        
        // 停止数字人说话（如果正在说话）
        abort();
        
        // 退出展示模式
        exitPresentationMode();
        
        // 恢复录音和语音识别
        if (typeof window !== 'undefined') {
            console.log('发送恢复录音事件');
            window.dispatchEvent(new Event('sentio-resume-recording'));
        }
    };

    // 只在展示模式下显示
    if (!isPresentationMode) {
        return null;
    }

    return (
        <button
            onClick={handleExit}
            className={clsx(
                'fixed top-4 right-4 w-10 h-10 rounded-full',
                'flex items-center justify-center',
                'bg-red-500 hover:bg-red-600',
                'text-white shadow-lg',
                'transition-all duration-200',
                'z-50',
                'focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2',
                'backdrop-blur-sm'
            )}
            aria-label="退出展示模式"
            title="退出展示模式"
            style={{
                border: '2px solid rgba(255, 255, 255, 0.3)',
                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3), 0 0 8px rgba(239, 68, 68, 0.5)',
            }}
        >
            <XMarkIcon className="w-5 h-5" />
        </button>
    );
});

ExitPresentationButton.displayName = 'ExitPresentationButton';