import * as React from 'react';
import { TrendingUp, Cpu, ShieldCheck, Database } from 'lucide-react';
import './index.scss';

interface StatCardProps {
    icon: string;
    iconBgColor: string;
    title: string;
    value: string;
    trend?: string;
    trendColor?: string;
}

// icon 名称到 lucide 组件的映射
const iconMap: Record<string, React.ComponentType<any>> = {
    'solar:chart-bold-duotone': TrendingUp,
    'solar:cpu-bold-duotone': Cpu,
    'solar:shield-check-bold-duotone': ShieldCheck,
    'solar:database-bold-duotone': Database,
};

const StatCard: React.FC<StatCardProps> = (props) => {
    const { icon, iconBgColor, title, value, trend, trendColor = 'gray' } = props;
    const IconComponent = iconMap[icon] || TrendingUp;

    return (
        <div className='stat-card'>
            <div className='stat-card-header'>
                <div className={`stat-card-icon bg-${iconBgColor}`}>
                    <IconComponent size={20} className={`icon-${iconBgColor}`} />
                </div>
                {trend && (
                    <span className={`stat-card-trend text-${trendColor}`}>{trend}</span>
                )}
            </div>
            <p className='stat-card-label'>{title}</p>
            <h4 className='stat-card-value'>{value}</h4>
        </div>
    );
};

const StatsGrid: React.FC = () => {
    // Mock 数据 - 后续可以从 API 获取
    const stats = [
        {
            icon: 'solar:chart-bold-duotone',
            iconBgColor: 'blue',
            title: '接口调用总量',
            value: '1,284',
            trend: '+12% 上月',
            trendColor: 'green',
        },
        {
            icon: 'solar:cpu-bold-duotone',
            iconBgColor: 'indigo',
            title: '今日调用量',
            value: '45.2w',
            trend: '📈 较上日 +23',
            trendColor: 'blue',
        },
        {
            icon: 'solar:shield-check-bold-duotone',
            iconBgColor: 'green',
            title: '接口成功率',
            value: '99.9%',
            trend: '运行状态 • 正常',
            trendColor: 'gray',
        },
        {
            icon: 'solar:database-bold-duotone',
            iconBgColor: 'orange',
            title: '知识库空间使用率',
            value: '64.0%',
            trend: '空间总量：100G',
            trendColor: 'orange',
        },
    ];

    return (
        <section className='stats-grid'>
            {stats.map((stat, index) => (
                <StatCard key={index} {...stat} />
            ))}
        </section>
    );
};

export default StatsGrid;
