import React, { useState } from 'react';
import { SideBar } from '@/pages/universalChat/components/Sidebar';
import { ChatInterface } from '@/pages/universalChat/components/ChatInterface';
import AppPlaza from './components/AppPlaza';
import './styles/mobile.scss';
import './MobileH5.scss';

/**
 * H5 移动端整合页面
 * 
 * 复用 universalChat 和 appCenter 的组件
 * 通过 CSS 媒体查询实现 H5 特殊样式
 * 
 * 包含两个 Tab：
 * - 智能问答（复用 universalChat）
 * - 应用广场（复用 appCenter）
 */
const MobileH5: React.FC = () => {
    // 当前激活的 Tab
    const [activeTab, setActiveTab] = useState<'chat' | 'apps'>('chat');
    const [sidebarOpen, setSidebarOpen] = useState(false);

    // 处理 Tab 切换
    const handleTabChange = (tab: 'chat' | 'apps') => {
        setActiveTab(tab);
        console.log('Tab 切换:', tab);
    };

    // 处理新建对话
    const handleNewChat = () => {
        console.log('新建对话');
    };

    return (
        <div className="mobile-h5-container">
            {/* 内容区域 */}
            <div className="mobile-content">
                {activeTab === 'chat' ? (
                    <div className="chat-wrapper">
                        {/* 汉堡菜单按钮（仅在移动端显示） */}
                        <button
                            className="hamburger-toggle"
                            onClick={() => setSidebarOpen(!sidebarOpen)}
                        >
                            ☰
                        </button>
                        
                        {/* Sidebar（带遮罩） */}
                        <div className={`sidebar-wrapper ${sidebarOpen ? 'open' : ''}`}>
                            <SideBar onNewChat={handleNewChat} />
                        </div>
                        
                        {/* 遮罩层 */}
                        {sidebarOpen && (
                            <div
                                className="sidebar-overlay"
                                onClick={() => setSidebarOpen(false)}
                            />
                        )}
                        
                        {/* Chat Interface */}
                        <ChatInterface />
                    </div>
                ) : (
                    <AppPlaza />
                )}
            </div>

            {/* 底部 Tab 导航 */}
            <div className="bottom-tab-bar">
                <button
                    className={`tab-item ${activeTab === 'chat' ? 'active' : ''}`}
                    onClick={() => handleTabChange('chat')}
                >
                    <div className="tab-icon">💬</div>
                    <span className="tab-label">问小智</span>
                </button>

                <button
                    className={`tab-item ${activeTab === 'apps' ? 'active' : ''}`}
                    onClick={() => handleTabChange('apps')}
                >
                    <div className="tab-icon">✦</div>
                    <span className="tab-label">应用广场</span>
                </button>
            </div>
        </div>
    );
};

export default MobileH5;
