/**
 * 仪表盘页面
 * 参考 GVA 的 Dashboard 布局
 */
import React from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Col, Row, Statistic, Tag, List, Typography, Progress, Space, Tooltip } from 'antd';
import {
  UserOutlined,
  TeamOutlined,
  ApiOutlined,
  MenuOutlined,
  RiseOutlined,
  SettingOutlined,
  DatabaseOutlined,
  LinkOutlined,
  SafetyOutlined,
  CloudServerOutlined,
  CodeOutlined,
  FolderOutlined,
} from '@ant-design/icons';
import { history } from '@umijs/max';
import styles from './index.less';

const { Text } = Typography;

// 统计卡片数据
const statsData = [
  { title: '访问人数', value: 268500, icon: <UserOutlined />, trend: '+80%', color: '#1890ff', percent: 80 },
  { title: '新增客户', value: 12580, icon: <TeamOutlined />, trend: '+25%', color: '#52c41a', percent: 65 },
  { title: '解决数量', value: 8846, icon: <ApiOutlined />, trend: '+15%', color: '#722ed1', percent: 45 },
];

// 快捷功能 - 与GVA quickLinks.vue 一致
const shortcuts = [
  { icon: <MenuOutlined />, title: '菜单管理', path: '/admin/menu' },
  { icon: <LinkOutlined />, title: 'API管理', path: '/admin/api' },
  { icon: <SafetyOutlined />, title: '角色管理', path: '/admin/authority' },
  { icon: <UserOutlined />, title: '用户管理', path: '/admin/user' },
  { icon: <FolderOutlined />, title: '自动化包', path: '/systemTools/autoCodeAdmin' },
  { icon: <CodeOutlined />, title: '自动代码', path: '/systemTools/autoCode' },
];

// 公告数据
const notices = [
  { type: 'processing', typeTitle: '公告', title: 'Kratos Admin v1.0 正式发布，欢迎使用！' },
  { type: 'success', typeTitle: '通知', title: '系统已完成安全升级，请放心使用。' },
  { type: 'warning', typeTitle: '警告', title: '请定期修改密码，确保账户安全。' },
  { type: 'error', typeTitle: '重要', title: '数据库将于本周日凌晨进行维护。' },
  { type: 'default', typeTitle: '信息', title: '感谢您对 Kratos Admin 的支持！' },
];

// 内容数据
const contentData = [
  { name: '用户', value: 128, color: '#1890ff' },
  { name: '角色', value: 8, color: '#52c41a' },
  { name: 'API', value: 256, color: '#722ed1' },
  { name: '菜单', value: 32, color: '#faad14' },
  { name: '字典', value: 15, color: '#13c2c2' },
  { name: '部门', value: 12, color: '#eb2f96' },
];

// 文档链接
const docLinks = [
  { title: 'Kratos 官方文档', url: 'https://go-kratos.dev/' },
  { title: 'Ant Design Pro', url: 'https://pro.ant.design/' },
  { title: 'React 官方文档', url: 'https://react.dev/' },
  { title: 'Go 语言文档', url: 'https://go.dev/doc/' },
];

const Dashboard: React.FC = () => {
  return (
    <PageContainer
      header={{ title: '' }}
      className={styles.dashboard}
    >
      {/* 统计卡片行 */}
      <Row gutter={[16, 16]}>
        {statsData.map((item, index) => (
          <Col xs={24} sm={12} lg={8} key={index}>
            <Card className={styles.statCard} variant="borderless">
              <div className={styles.statContent}>
                <div className={styles.statInfo}>
                  <Text type="secondary">{item.title}</Text>
                  <div className={styles.statValue}>
                    <Statistic value={item.value} valueStyle={{ fontSize: 28, fontWeight: 600 }} />
                  </div>
                  <div className={styles.statTrend}>
                    <RiseOutlined style={{ color: '#52c41a' }} />
                    <Text style={{ color: '#52c41a', marginLeft: 4 }}>{item.trend}</Text>
                  </div>
                </div>
                <div className={styles.statChart}>
                  <Progress
                    type="circle"
                    percent={item.percent}
                    size={80}
                    strokeColor={item.color}
                    format={() => <span style={{ fontSize: 14 }}>{item.percent}%</span>}
                  />
                </div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      {/* 主内容区 */}
      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        {/* 左侧内容数据 */}
        <Col xs={24} lg={18}>
          <Card title="内容数据" variant="borderless" className={styles.chartCard}>
            <Row gutter={[16, 24]}>
              {contentData.map((item, index) => (
                <Col xs={12} sm={8} md={4} key={index}>
                  <div className={styles.dataItem}>
                    <div className={styles.dataValue} style={{ color: item.color }}>
                      {item.value}
                    </div>
                    <div className={styles.dataName}>{item.name}</div>
                    <Progress
                      percent={Math.min((item.value / 300) * 100, 100)}
                      showInfo={false}
                      strokeColor={item.color}
                      size="small"
                    />
                  </div>
                </Col>
              ))}
            </Row>
            <div className={styles.progressSection}>
              <div className={styles.progressTitle}>系统资源使用情况</div>
              <Row gutter={[32, 16]} style={{ marginTop: 16 }}>
                <Col xs={24} sm={12}>
                  <div className={styles.progressItem}>
                    <div className={styles.progressLabel}>
                      <CloudServerOutlined /> CPU 使用率
                    </div>
                    <Progress percent={45} strokeColor="#1890ff" />
                  </div>
                </Col>
                <Col xs={24} sm={12}>
                  <div className={styles.progressItem}>
                    <div className={styles.progressLabel}>
                      <DatabaseOutlined /> 内存使用率
                    </div>
                    <Progress percent={68} strokeColor="#52c41a" />
                  </div>
                </Col>
                <Col xs={24} sm={12}>
                  <div className={styles.progressItem}>
                    <div className={styles.progressLabel}>
                      <SafetyOutlined /> 磁盘使用率
                    </div>
                    <Progress percent={32} strokeColor="#722ed1" />
                  </div>
                </Col>
                <Col xs={24} sm={12}>
                  <div className={styles.progressItem}>
                    <div className={styles.progressLabel}>
                      <ApiOutlined /> API 调用量
                    </div>
                    <Progress percent={85} strokeColor="#faad14" />
                  </div>
                </Col>
              </Row>
            </div>
          </Card>
        </Col>

        {/* 右侧快捷功能 */}
        <Col xs={24} lg={6}>
          <Card title="快捷功能" variant="borderless" className={styles.quickCard}>
            <Row gutter={[8, 16]}>
              {shortcuts.map((item, index) => (
                <Col span={8} key={index}>
                  <div
                    className={styles.shortcutItem}
                    onClick={() => history.push(item.path)}
                  >
                    <div className={styles.shortcutIcon}>{item.icon}</div>
                    <Text className={styles.shortcutTitle}>{item.title}</Text>
                  </div>
                </Col>
              ))}
            </Row>
          </Card>
        </Col>
      </Row>

      {/* 底部区域 */}
      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        {/* 公告 */}
        <Col xs={24} md={12} lg={8}>
          <Card
            title="公告"
            variant="borderless"
            extra={<a>查看更多</a>}
            className={styles.noticeCard}
          >
            <List
              size="small"
              dataSource={notices}
              renderItem={(item) => (
                <List.Item style={{ padding: '8px 0', border: 'none' }}>
                  <Space>
                    <Tag color={item.type}>{item.typeTitle}</Tag>
                    <Tooltip title={item.title}>
                      <Text ellipsis style={{ maxWidth: 200 }}>{item.title}</Text>
                    </Tooltip>
                  </Space>
                </List.Item>
              )}
            />
          </Card>
        </Col>

        {/* 文档链接 */}
        <Col xs={24} md={12} lg={8}>
          <Card
            title="文档"
            variant="borderless"
            extra={<a>查看更多</a>}
            className={styles.docCard}
          >
            <List
              size="small"
              dataSource={docLinks}
              renderItem={(item) => (
                <List.Item style={{ padding: '8px 0', border: 'none' }}>
                  <a href={item.url} target="_blank" rel="noopener noreferrer">
                    <Space>
                      <LinkOutlined />
                      <Text>{item.title}</Text>
                    </Space>
                  </a>
                </List.Item>
              )}
            />
          </Card>
        </Col>

        {/* 系统信息 */}
        <Col xs={24} lg={8}>
          <Card title="系统信息" variant="borderless" className={styles.sysCard}>
            <div className={styles.sysItem}>
              <Text type="secondary">系统名称</Text>
              <Text strong>Kratos Admin</Text>
            </div>
            <div className={styles.sysItem}>
              <Text type="secondary">后端框架</Text>
              <Text strong>Go Kratos</Text>
            </div>
            <div className={styles.sysItem}>
              <Text type="secondary">前端框架</Text>
              <Text strong>React + Ant Design Pro</Text>
            </div>
            <div className={styles.sysItem}>
              <Text type="secondary">版本号</Text>
              <Text strong>v1.0.0</Text>
            </div>
            <div className={styles.sysItem}>
              <Text type="secondary">服务器状态</Text>
              <Tag color="success">运行中</Tag>
            </div>
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Dashboard;
