/**
 * KRA - Dashboard Plugin Table Component
 * 与GVA pluginTable.vue 逻辑一致 - 最新插件表格
 */
import React from 'react';
import { Card, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface PluginItem {
  ranking: number;
  title: string;
  click_num: number;
  hot: number;
  link: string;
}

const tableData: PluginItem[] = [
  {
    ranking: 1,
    title: '组织管理插件：更方便管理组织，分配资源权限。',
    click_num: 523,
    hot: 263,
    link: 'https://go-kratos.dev/'
  },
  {
    ranking: 2,
    title: 'Kubernetes容器管理：Kubernetes 原生资源管理，提供炫酷的YAML编辑，Pod终端。',
    click_num: 416,
    hot: 223,
    link: 'https://go-kratos.dev/'
  },
  {
    ranking: 3,
    title: '定时任务配置化管理：本插件用于对系统内部的定时任务进行配置化管理。',
    click_num: 337,
    hot: 176,
    link: 'https://go-kratos.dev/'
  },
  {
    ranking: 4,
    title: '官网CMS系统：基于Kratos开发的企业官网类（CMS）系统。',
    click_num: 292,
    hot: 145,
    link: 'https://go-kratos.dev/'
  },
  {
    ranking: 5,
    title: '微信支付插件：提供扫码支付功能（需自行对接业务）。',
    click_num: 173,
    hot: 110,
    link: 'https://go-kratos.dev/'
  }
];

const columns: ColumnsType<PluginItem> = [
  {
    title: '排名',
    dataIndex: 'ranking',
    width: 80,
    align: 'center',
  },
  {
    title: '插件标题',
    dataIndex: 'title',
    ellipsis: true,
    render: (text, record) => (
      <a 
        href={record.link} 
        target="_blank" 
        rel="noopener noreferrer"
        style={{ color: '#1890ff' }}
      >
        {text}
      </a>
    ),
  },
  {
    title: '关注度',
    dataIndex: 'click_num',
    width: 100,
  },
  {
    title: '热度值',
    dataIndex: 'hot',
    width: 100,
  },
];

const PluginTable: React.FC = () => {
  return (
    <Card title="最新插件" className="kra-dashboard-card" variant="borderless">
      <Table
        columns={columns}
        dataSource={tableData}
        rowKey="ranking"
        pagination={false}
        size="small"
      />
    </Card>
  );
};

export default PluginTable;
