import React, { useState } from 'react';
import { message } from 'antd';
import { AppCard } from '@/components/common';
import { getAppsByPageType } from '@/mock';
import './AppPlaza.scss';

/**
 * 应用广场（AppPlaza）- H5 移动端
 * 
 * 根据分类 Tab 显示不同的应用列表
 * 复用主系统的 AppCard 组件，使用移动端样式
 */
const AppPlaza: React.FC = () => {
    // 分类 Tab
    const categories = ['推荐', '收藏', '专业知识', '职能管理', '项目级应用', '其他'];
    const [activeCategory, setActiveCategory] = useState('推荐');

    // 页面类型映射
    const pageTypeMap: Record<string, string> = {
        '推荐': 'appPlaza',
        '收藏': 'myApps',  // 收藏的应用
        '专业知识': 'professional',
        '职能管理': 'functional',
        '项目级应用': 'project',
        '其他': 'otherApps',
    };

    // 获取应用数据
    const pageType = pageTypeMap[activeCategory] || 'appPlaza';
    const apps = getAppsByPageType(pageType as any).slice(0, 10);

    // 处理卡片点击
    const handleCardClick = (appId: string) => {
        console.log('点击应用:', appId);
        message.info('打开应用');
    };

    return (
        <div className="app-plaza">
            {/* 分类 Tab */}
            <div className="category-tabs">
                {categories.map((cat) => (
                    <button
                        key={cat}
                        className={`category-tab ${activeCategory === cat ? 'active' : ''}`}
                        onClick={() => setActiveCategory(cat)}
                    >
                        {cat}
                    </button>
                ))}
            </div>

            {/* 2 列卡片网格 */}
            <div className="app-grid">
                {apps.map((app) => (
                    <div
                        key={app.id}
                        className="app-card-wrapper"
                        onClick={() => handleCardClick(app.id)}
                    >
                        <AppCard
                            {...app}
                            showCreator={false}
                            showTags={false}
                            showCertification={false}
                            showViewCount={false}
                            showFavoriteCount={false}
                            showCreateTime={false}
                            showOperations={false}
                            className="mobile-app-card"
                        />
                    </div>
                ))}
            </div>
        </div>
    );
};

export default AppPlaza;