YG-Datasets/easy-dataset-main/app/projects/[projectId]/image-datasets/components/MetadataInfo.js

'use client';

import { Box, Typography, Chip, alpha, Divider } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { useTheme } from '@mui/material/styles';

/**
 * 元数据信息展示组件 - Chip 形式（参考 DatasetMetadata）
 */
export default function MetadataInfo({ dataset }) {
  const { t } = useTranslation();
  const theme = useTheme();

  // 解析标签
  const parsedTags = (() => {
    try {
      if (typeof dataset.tags === 'string' && dataset.tags) {
        return JSON.parse(dataset.tags);
      }
      return Array.isArray(dataset.tags) ? dataset.tags : [];
    } catch {
      return [];
    }
  })();

  // 格式化文件大小
  const formatFileSize = bytes => {
    if (!bytes) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
  };

  return (
    <Box sx={{ mb: 3 }}>
      {/* 数据集信息 */}
      <Typography variant="subtitle1" color="text.secondary" sx={{ mb: 1 }}>
        {t('common.detailInfo', '详细信息')}
      </Typography>
      <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap', mb: 2 }}>
        {/* 使用模型 */}
        {dataset.model && (
          <Chip
            label={`${t('imageDatasets.modelInfo', '使用模型')}: ${dataset.model}`}
            variant="outlined"
            size="small"
          />
        )}

        {/* 标签数量 */}
        {parsedTags.length > 0 && (
          <Chip
            label={`${t('imageDatasets.tags', '标签')}: ${parsedTags.length} ${t('common.items', '项')}`}
            color="primary"
            variant="outlined"
            size="small"
          />
        )}

        {/* 创建时间 */}
        <Chip
          label={`${t('imageDatasets.createdAt', '创建时间')}: ${new Date(dataset.createAt).toLocaleString('zh-CN', {
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          })}`}
          variant="outlined"
          size="small"
        />

        {/* 文本块信息 */}
        {dataset.questionTemplate?.description && (
          <Chip
            label={`${t('imageDatasets.description', '描述')}: ${dataset.questionTemplate.description}`}
            variant="outlined"
            size="small"
            sx={{ maxWidth: '100%' }}
          />
        )}

        {/* 确认状态 */}
        {dataset.confirmed && (
          <Chip
            label={t('datasets.confirmed', '已确认')}
            size="small"
            sx={{
              backgroundColor: alpha(theme.palette.success.main, 0.1),
              color: theme.palette.success.dark,
              fontWeight: 'medium'
            }}
          />
        )}
      </Box>

      {/* 图片信息 */}
      {dataset.image && (
        <>
          <Divider sx={{ my: 2 }} />
          <Typography variant="subtitle1" color="text.secondary" sx={{ mb: 1 }}>
            {t('images.imageInfo', '图片信息')}
          </Typography>
          <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
            {/* 图片尺寸 */}
            {dataset.image.width && dataset.image.height && (
              <Chip
                label={`${t('images.resolution', '分辨率')}: ${dataset.image.width}×${dataset.image.height}`}
                variant="outlined"
                size="small"
              />
            )}

            {/* 文件大小 */}
            {dataset.image.size && (
              <Chip
                label={`${t('images.fileSize', '文件大小')}: ${formatFileSize(dataset.image.size)}`}
                variant="outlined"
                size="small"
              />
            )}

            {/* 图片创建时间 */}
            {dataset.image.createAt && (
              <Chip
                label={`${t('images.uploadTime', '上传时间')}: ${new Date(dataset.image.createAt).toLocaleString(
                  'zh-CN',
                  {
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit'
                  }
                )}`}
                variant="outlined"
                size="small"
              />
            )}

            {/* 图片名称 */}
            {dataset.image.imageName && (
              <Chip
                label={`${t('images.fileName', '文件名')}: ${dataset.image.imageName}`}
                variant="outlined"
                size="small"
                sx={{ maxWidth: '100%' }}
              />
            )}
          </Box>
        </>
      )}
    </Box>
  );
}