/**
 * KRA - Dashboard Notice Component
 * 与GVA notice.vue 逻辑一致
 */
import React from 'react';
import { Card, Tag, Tooltip } from 'antd';

interface NoticeItem {
  type: 'primary' | 'success' | 'warning' | 'danger' | 'info';
  typeTitle: string;
  title: string;
}

const notices: NoticeItem[] = [
  {
    type: 'primary',
    typeTitle: '公告',
    title: '欢迎使用 Kratos Admin 管理系统。'
  },
  {
    type: 'success',
    typeTitle: '通知',
    title: '系统已完成最新版本升级。'
  },
  {
    type: 'warning',
    typeTitle: '警告',
    title: '请定期备份重要数据。'
  },
  {
    type: 'danger',
    typeTitle: '违规',
    title: '请勿在生产环境使用默认密码。'
  },
  {
    type: 'info',
    typeTitle: '信息',
    title: '感谢您对开源事业的支持。'
  },
  {
    type: 'primary',
    typeTitle: '公告',
    title: '让创意更有价值。'
  },
  {
    type: 'success',
    typeTitle: '通知',
    title: '让劳动更有意义。'
  },
  {
    type: 'warning',
    typeTitle: '警告',
    title: '让思维更有深度。'
  },
  {
    type: 'danger',
    typeTitle: '错误',
    title: '让生活更有趣味。'
  },
  {
    type: 'info',
    typeTitle: '信息',
    title: '让公司更有活力。'
  }
];

const typeColors: Record<string, string> = {
  primary: 'blue',
  success: 'green',
  warning: 'orange',
  danger: 'red',
  info: 'default',
};

const Notice: React.FC = () => {
  return (
    <Card title="公告" className="kra-dashboard-card" variant="borderless" extra={<a href="#">更多</a>}>
      <div style={{ maxHeight: '200px', overflow: 'auto' }}>
        {notices.map((item, index) => (
          <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '6px', gap: '12px' }}>
            <Tag color={typeColors[item.type]} style={{ margin: 0, flexShrink: 0 }}>
              {item.typeTitle}
            </Tag>
            <Tooltip title={item.title} placement="top">
              <div style={{ 
                fontSize: '12px', 
                color: '#666', 
                overflow: 'hidden', 
                textOverflow: 'ellipsis', 
                whiteSpace: 'nowrap' 
              }}>
                {item.title}
              </div>
            </Tooltip>
          </div>
        ))}
      </div>
    </Card>
  );
};

export default Notice;
