/**
 * KRA - About Page
 * System information and credits
 */
import React from 'react';
import { Card, Row, Col, Descriptions, Tag, Typography, Space, Divider, Button } from 'antd';
import {
  GithubOutlined,
  BookOutlined,
  TeamOutlined,
  CodeOutlined,
  CloudServerOutlined,
  DatabaseOutlined,
  ApiOutlined,
  SafetyOutlined,
} from '@ant-design/icons';
import { Helmet } from '@umijs/max';
import Logo from '@/components/Logo/Logo';
import { createStyles } from 'antd-style';

const { Title, Paragraph, Text, Link } = Typography;

const useStyles = createStyles(({ token }) => ({
  container: {
    padding: '24px',
    minHeight: '100vh',
    background: '#f5f5f5',
  },
  headerCard: {
    borderRadius: '16px',
    marginBottom: '24px',
    textAlign: 'center',
    padding: '48px 24px',
  },
  logoWrapper: {
    marginBottom: '24px',
  },
  title: {
    fontSize: '32px',
    fontWeight: 700,
    marginBottom: '8px',
  },
  subtitle: {
    fontSize: '16px',
    color: token.colorTextSecondary,
    marginBottom: '24px',
  },
  infoCard: {
    borderRadius: '12px',
    height: '100%',
  },
  featureItem: {
    display: 'flex',
    alignItems: 'flex-start',
    gap: '16px',
    padding: '16px 0',
    borderBottom: `1px solid ${token.colorBorderSecondary}`,
    '&:last-child': {
      borderBottom: 'none',
    },
  },
  featureIcon: {
    width: '48px',
    height: '48px',
    borderRadius: '12px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '24px',
    flexShrink: 0,
  },
  featureTitle: {
    fontWeight: 600,
    marginBottom: '4px',
  },
  featureDesc: {
    color: token.colorTextSecondary,
    fontSize: '13px',
  },
}));

const features = [
  {
    icon: <CloudServerOutlined />,
    title: 'Go Kratos 框架',
    desc: '基于 Go Kratos 微服务框架，支持 gRPC 和 HTTP 双协议',
    color: '#1890ff',
    bg: '#e6f7ff',
  },
  {
    icon: <CodeOutlined />,
    title: 'React 19',
    desc: '采用最新 React 19 + TypeScript，提供现代化开发体验',
    color: '#52c41a',
    bg: '#f6ffed',
  },
  {
    icon: <DatabaseOutlined />,
    title: '多数据库支持',
    desc: '支持 MySQL、PostgreSQL、SQLite、Oracle、SQL Server',
    color: '#722ed1',
    bg: '#f9f0ff',
  },
  {
    icon: <ApiOutlined />,
    title: 'RESTful API',
    desc: '规范的 RESTful API 设计，支持 OpenAPI 文档生成',
    color: '#faad14',
    bg: '#fffbe6',
  },
  {
    icon: <SafetyOutlined />,
    title: 'RBAC 权限',
    desc: '完善的角色权限管理，支持菜单、按钮、API 级别控制',
    color: '#eb2f96',
    bg: '#fff0f6',
  },
  {
    icon: <TeamOutlined />,
    title: '多租户支持',
    desc: '支持多租户架构，数据隔离安全可靠',
    color: '#13c2c2',
    bg: '#e6fffb',
  },
];

const AboutPage: React.FC = () => {
  const { styles } = useStyles();

  return (
    <div className={styles.container}>
      <Helmet>
        <title>关于 - Kratos Admin</title>
      </Helmet>

      {/* 头部信息 */}
      <Card className={styles.headerCard} variant="borderless">
        <div className={styles.logoWrapper}>
          <Logo size="large" />
        </div>
        <Title level={2} className={styles.title}>
          Kratos Admin
        </Title>
        <Paragraph className={styles.subtitle}>
          基于 Go Kratos + React 19 的全栈后台管理系统
        </Paragraph>
        <Space size="middle">
          <Button
            type="primary"
            icon={<GithubOutlined />}
            href="https://github.com/go-kratos/kratos"
            target="_blank"
          >
            GitHub
          </Button>
          <Button
            icon={<BookOutlined />}
            href="https://go-kratos.dev/"
            target="_blank"
          >
            官方文档
          </Button>
        </Space>
      </Card>

      <Row gutter={[24, 24]}>
        {/* 系统信息 */}
        <Col xs={24} lg={12}>
          <Card title="系统信息" className={styles.infoCard} variant="borderless">
            <Descriptions column={1} labelStyle={{ width: '120px' }}>
              <Descriptions.Item label="系统名称">Kratos Admin</Descriptions.Item>
              <Descriptions.Item label="当前版本">
                <Tag color="blue">v1.0.0</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="后端框架">
                <Space>
                  <Tag color="cyan">Go Kratos</Tag>
                  <Tag color="green">Golang</Tag>
                </Space>
              </Descriptions.Item>
              <Descriptions.Item label="前端框架">
                <Space>
                  <Tag color="blue">React 19</Tag>
                  <Tag color="purple">TypeScript</Tag>
                  <Tag color="orange">Ant Design</Tag>
                </Space>
              </Descriptions.Item>
              <Descriptions.Item label="构建工具">
                <Tag color="geekblue">UMI</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="状态管理">
                <Tag color="volcano">Zustand</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="开源协议">
                <Tag color="green">MIT License</Tag>
              </Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>

        {/* 技术栈 */}
        <Col xs={24} lg={12}>
          <Card title="技术栈" className={styles.infoCard} variant="borderless">
            <Descriptions column={1} labelStyle={{ width: '120px' }}>
              <Descriptions.Item label="后端语言">Go 1.21+</Descriptions.Item>
              <Descriptions.Item label="微服务框架">Kratos v2</Descriptions.Item>
              <Descriptions.Item label="ORM 框架">GORM / Ent</Descriptions.Item>
              <Descriptions.Item label="缓存">Redis</Descriptions.Item>
              <Descriptions.Item label="消息队列">Kafka / RabbitMQ</Descriptions.Item>
              <Descriptions.Item label="服务发现">Consul / Nacos / Etcd</Descriptions.Item>
              <Descriptions.Item label="链路追踪">Jaeger / Zipkin</Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>

        {/* 核心特性 */}
        <Col xs={24}>
          <Card title="核心特性" className={styles.infoCard} variant="borderless">
            <Row gutter={[24, 0]}>
              {features.map((feature, index) => (
                <Col xs={24} md={12} lg={8} key={index}>
                  <div className={styles.featureItem}>
                    <div
                      className={styles.featureIcon}
                      style={{ background: feature.bg, color: feature.color }}
                    >
                      {feature.icon}
                    </div>
                    <div>
                      <div className={styles.featureTitle}>{feature.title}</div>
                      <div className={styles.featureDesc}>{feature.desc}</div>
                    </div>
                  </div>
                </Col>
              ))}
            </Row>
          </Card>
        </Col>

        {/* 鸣谢 */}
        <Col xs={24}>
          <Card title="鸣谢" className={styles.infoCard} variant="borderless">
            <Paragraph>
              Kratos Admin 的开发离不开以下优秀的开源项目：
            </Paragraph>
            <Space wrap size={[8, 8]}>
              <Link href="https://go-kratos.dev/" target="_blank">
                <Tag color="blue">Go Kratos</Tag>
              </Link>
              <Link href="https://react.dev/" target="_blank">
                <Tag color="cyan">React</Tag>
              </Link>
              <Link href="https://ant.design/" target="_blank">
                <Tag color="blue">Ant Design</Tag>
              </Link>
              <Link href="https://umijs.org/" target="_blank">
                <Tag color="purple">UMI</Tag>
              </Link>
              <Link href="https://gorm.io/" target="_blank">
                <Tag color="green">GORM</Tag>
              </Link>
              <Link href="https://redis.io/" target="_blank">
                <Tag color="red">Redis</Tag>
              </Link>
              <Link href="https://www.typescriptlang.org/" target="_blank">
                <Tag color="blue">TypeScript</Tag>
              </Link>
              <Link href="https://zustand-demo.pmnd.rs/" target="_blank">
                <Tag color="orange">Zustand</Tag>
              </Link>
            </Space>
            <Divider />
            <Paragraph type="secondary" style={{ textAlign: 'center', marginBottom: 0 }}>
              © 2024 Kratos Admin Team. All rights reserved.
            </Paragraph>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default AboutPage;
