import React from 'react';
import { Descriptions, Divider, Card, Tag } from 'antd';
import { useIntl } from 'umi';
import { HelpStatus, HelpStatusText, HelpStatusColor } from '@/dicts/helpManageDict';
import styles from './helpManage.less';

interface HelpManageInfoProps {
  data: API.HelpRecord | null;
}

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

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

  if (!data) return null;

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

      <Divider orientation="left">{intl.formatMessage({ id: 'helpManage.detail.contentZh' })}</Divider>
      <Card size="small" bordered={false} className={styles.contentCard}>
        <div className={styles.helpContent} dangerouslySetInnerHTML={{ __html: data.content }} />
      </Card>

      {data.contentEn && (
        <>
          <Divider orientation="left">{intl.formatMessage({ id: 'helpManage.detail.contentEn' })}</Divider>
          <Card size="small" bordered={false} className={styles.contentCard}>
            <div className={styles.helpContent} dangerouslySetInnerHTML={{ __html: data.contentEn }} />
          </Card>
        </>
      )}

      {data.answerContent && (
        <>
          <Divider orientation="left">{intl.formatMessage({ id: 'helpManage.detail.answerContentZh' })}</Divider>
          <Card size="small" bordered={false} className={styles.contentCard}>
            <div className={styles.helpContent} dangerouslySetInnerHTML={{ __html: data.answerContent }} />
          </Card>
        </>
      )}

      {data.answerContentNe && (
        <>
          <Divider orientation="left">{intl.formatMessage({ id: 'helpManage.detail.answerContentEn' })}</Divider>
          <Card size="small" bordered={false} className={styles.contentCard}>
            <div className={styles.helpContent} dangerouslySetInnerHTML={{ __html: data.answerContentNe }} />
          </Card>
        </>
      )}
    </div>
  );
};

export default HelpManageInfo;
