import React from 'react';
import { Descriptions, Divider, Card, Tag } from 'antd';
import { useIntl } from 'umi';
import { PolicyStatusText, PolicyStatusColor, PolicyStatus } from '@/dicts/policyManageDict';

interface PolicyManageInfoProps {
  data: API.PolicyRecord | null;
}

const PolicyManageInfo: React.FC<PolicyManageInfoProps> = ({ data }) => {
  const intl = useIntl();

  // 获取状态标签
  const getStatusTag = (status: string) => {
    const statusKey = status as PolicyStatus;
    const color = PolicyStatusColor[statusKey] || 'default';
    const getText = PolicyStatusText[statusKey];
    const text = typeof getText === 'function' ? getText() : intl.formatMessage({ id: 'policyManage.status.unknown' });
    return <Tag color={color}>{text}</Tag>;
  };

  if (!data) return null;

  return (
    <div className="policy-detail-view">
      <Descriptions bordered column={2} size="small">
        <Descriptions.Item label={intl.formatMessage({ id: 'policyManage.detail.title' })} span={2}>
          {data.title}
        </Descriptions.Item>
        {data.titleEn && (
          <Descriptions.Item label={intl.formatMessage({ id: 'policyManage.detail.titleEn' })} span={2}>
            {data.titleEn}
          </Descriptions.Item>
        )}
        <Descriptions.Item label={intl.formatMessage({ id: 'policyManage.detail.isTop' })}>
          {data.isTop === '1'
            ? intl.formatMessage({ id: 'policyManage.detail.yes' })
            : intl.formatMessage({ id: 'policyManage.detail.no' })}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'policyManage.detail.status' })}>
          {getStatusTag(data.status)}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'policyManage.detail.creator' })}>
          {data.createBy}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'policyManage.detail.createTime' })}>
          {data.createTime}
        </Descriptions.Item>
        {data.updateTime && (
          <Descriptions.Item label={intl.formatMessage({ id: 'policyManage.detail.updateTime' })} span={2}>
            {data.updateTime}
          </Descriptions.Item>
        )}
      </Descriptions>

      <Divider orientation="left">{intl.formatMessage({ id: 'policyManage.detail.contentZh' })}</Divider>
      <Card size="small" bordered={false} className="content-card">
        <div className="policy-content" dangerouslySetInnerHTML={{ __html: data.content }} />
      </Card>

      {data.contentEn && (
        <>
          <Divider orientation="left">{intl.formatMessage({ id: 'policyManage.detail.contentEn' })}</Divider>
          <Card size="small" bordered={false} className="content-card">
            <div className="policy-content" dangerouslySetInnerHTML={{ __html: data.contentEn }} />
          </Card>
        </>
      )}
    </div>
  );
};

export default PolicyManageInfo;
