// ============================================================
// SystemInfoSetting — 系统信息区块（只读展示）
// ============================================================

import { Card, Tag, Typography } from 'antd';
import {
   WindowsOutlined,
   AppleOutlined,
   InfoCircleOutlined,
   EnvironmentOutlined,
} from '@ant-design/icons';
import { useAppContext } from '@/components/AppProvider';
import { getPlatformName } from '@/utils/platform';
import { APP_VERSION } from '@shared/constants/version';
import { getEditionName } from '@shared/constants/app';

const { Text } = Typography;

export function SystemInfoSetting() {
   const { platform, edition, isDevMode } = useAppContext();

   const platformIcon =
      platform === 'darwin' ? (
         <AppleOutlined />
      ) : platform === 'win32' ? (
         <WindowsOutlined />
      ) : (
         <InfoCircleOutlined />
      );

   const infoItems = [
      { label: '运行平台', value: getPlatformName(), icon: platformIcon, color: 'purple' },
      { label: '应用版本', value: `V${APP_VERSION}`, icon: <InfoCircleOutlined />, color: 'blue' },
      {
         label: '版本类型',
         value: getEditionName(edition),
         icon: <InfoCircleOutlined />,
         color: edition === 'enterprise' ? 'gold' : 'green',
      },
      {
         label: '运行环境',
         value: isDevMode ? '开发模式' : '生产模式',
         icon: <EnvironmentOutlined />,
         color: isDevMode ? 'orange' : 'green',
      },
   ];

   return (
      <Card size="small" title="系统信息（开发显示信息）" className="rounded-md!">
         <div className="flex flex-col gap-2">
            {infoItems.map((item) => (
               <div key={item.label} className="flex items-center gap-2">
                  <span style={{ color: 'var(--color-primary, #4F46E5)', fontSize: 14 }}>
                     {item.icon}
                  </span>
                  <Text type="secondary" className="text-sm min-w-16">
                     {item.label}：
                  </Text>
                  <Tag color={item.color}>{item.value}</Tag>
               </div>
            ))}
         </div>
      </Card>
   );
}