/**
 * KRA - Dashboard Quick Links Component
 * 与GVA quickLinks.vue 逻辑一致
 */
import React from 'react';
import { Card, Row, Col } from 'antd';
import {
  MenuOutlined,
  LinkOutlined,
  SafetyOutlined,
  UserOutlined,
  FolderOutlined,
  CodeOutlined,
  ReadOutlined,
  AppstoreOutlined,
} from '@ant-design/icons';
import { history } from '@umijs/max';

interface ShortcutItem {
  icon: React.ReactNode;
  title: string;
  path: string;
  isExternal?: boolean;
}

// 内部快捷功能
const shortcuts: ShortcutItem[] = [
  { icon: <MenuOutlined />, title: '菜单管理', path: '/system/menu' },
  { icon: <LinkOutlined />, title: 'API管理', path: '/system/api' },
  { icon: <SafetyOutlined />, title: '角色管理', path: '/system/authority' },
  { icon: <UserOutlined />, title: '用户管理', path: '/system/user' },
  { icon: <FolderOutlined />, title: '自动化包', path: '/systemTools/autoCodeAdmin' },
  { icon: <CodeOutlined />, title: '自动代码', path: '/systemTools/autoCode' },
];

// 外部链接
const externalLinks: ShortcutItem[] = [
  { icon: <ReadOutlined />, title: 'Kratos文档', path: 'https://go-kratos.dev/', isExternal: true },
  { icon: <AppstoreOutlined />, title: 'GitHub', path: 'https://github.com/go-kratos/kratos', isExternal: true },
];

const QuickLinks: React.FC = () => {
  const handleClick = (item: ShortcutItem) => {
    if (item.isExternal) {
      window.open(item.path, '_blank');
    } else {
      history.push(item.path);
    }
  };

  const renderItem = (item: ShortcutItem, index: number) => (
    <Col span={8} key={index}>
      <div
        onClick={() => handleClick(item)}
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          marginBottom: '12px',
          cursor: 'pointer',
        }}
        className="quick-link-item"
      >
        <div
          style={{
            width: '32px',
            height: '32px',
            borderRadius: '4px',
            background: '#f0f0f0',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            transition: 'all 0.2s',
          }}
          className="quick-link-icon"
        >
          {item.icon}
        </div>
        <div style={{ fontSize: '12px', marginTop: '8px', color: '#666' }}>
          {item.title}
        </div>
      </div>
    </Col>
  );

  return (
    <Card title="快捷功能" className="kra-dashboard-card" variant="borderless" extra={<a href="#">更多</a>}>
      <div style={{ marginTop: '32px' }}>
        <Row>{shortcuts.map(renderItem)}</Row>
        <Row style={{ marginTop: '32px' }}>{externalLinks.map(renderItem)}</Row>
      </div>
      <style>{`
        .quick-link-item:hover .quick-link-icon {
          background: #1890ff !important;
          color: #fff;
        }
      `}</style>
    </Card>
  );
};

export default QuickLinks;
