Genarrative/src/components/image-editor/ImageCanvasMetadataModalView.tsx

import { UnifiedModal } from '../common/UnifiedModal';
import type { CanvasLayer } from './ImageCanvasEditorTypes';
import { formatTaskIdForDisplay } from './ImageCanvasExportModel';
import {
  formatEditorGenerationInputFieldValue,
  formatLayerImageType,
  getEditorLayerModelDisplayName,
  isEditorUserVisibleGenerationInputField,
} from './ImageCanvasGenerationModel';

export type ImageCanvasMetadataModalViewProps = {
  layer: CanvasLayer | null;
  onClose: () => void;
};

function formatReferenceType(refType: 'project-resource' | 'asset') {
  return refType === 'project-resource' ? '项目资源' : '素材';
}

export function ImageCanvasMetadataModalView({
  layer,
  onClose,
}: ImageCanvasMetadataModalViewProps) {
  const visibleGenerationInputFields =
    layer?.generationInputs?.fields.filter(
      isEditorUserVisibleGenerationInputField,
    ) ?? [];
  const generationInputReferences = layer?.generationInputs?.references ?? [];
  const mediaLabel =
    layer?.mediaType === 'audio'
      ? '音频'
      : layer?.mediaType === 'video'
        ? '视频'
        : layer?.mediaType === 'image-sequence'
          ? '序列帧'
          : '图片';

  // TODO: Remove this override after full dark style support.
  return (
    <UnifiedModal
      open={Boolean(layer)}
      title={`${mediaLabel}信息`}
      size="sm"
      portalTheme="light"
      closeLabel={`关闭${mediaLabel}信息`}
      onClose={onClose}
      panelClassName="image-canvas-editor__metadata-dialog"
      bodyClassName="image-canvas-editor__metadata-body"
    >
      {layer ? (
        <dl className="image-canvas-editor__metadata-grid">
          <dt>{mediaLabel}类型</dt>
          <dd>{formatLayerImageType(layer)}</dd>
          <dt>生成输入</dt>
          <dd className="image-canvas-editor__metadata-inputs">
            {visibleGenerationInputFields.length ||
            generationInputReferences.length ? (
              <>
                {visibleGenerationInputFields.map((field) => (
                  <div
                    key={`${field.title}-${field.value}`}
                    className="image-canvas-editor__metadata-input-field"
                  >
                    <span className="image-canvas-editor__metadata-input-title">
                      {field.title}
                    </span>
                    <span>{formatEditorGenerationInputFieldValue(field)}</span>
                  </div>
                ))}
                {generationInputReferences.length ? (
                  <div className="image-canvas-editor__metadata-reference-list">
                    {generationInputReferences.map((reference) => (
                      <div
                        key={`${reference.title}-${reference.label ?? ''}-${reference.refType}-${reference.refId}`}
                        className="image-canvas-editor__metadata-reference-card"
                      >
                        <span className="image-canvas-editor__metadata-reference-copy">
                          <span className="image-canvas-editor__metadata-input-title">
                            {reference.title}
                          </span>
                          <span>{reference.label?.trim() || '参考素材'}</span>
                          <span className="image-canvas-editor__metadata-reference-id">
                            {formatReferenceType(reference.refType)} ·{' '}
                            {reference.refId}
                          </span>
                        </span>
                      </div>
                    ))}
                  </div>
                ) : null}
              </>
            ) : (
              '-'
            )}
          </dd>
          <dt>Model</dt>
          <dd>{getEditorLayerModelDisplayName(layer.model)}</dd>
          {layer.mediaType !== 'audio' ? (
            <>
              <dt>Resolution</dt>
              <dd>
                {layer.originalWidth} x {layer.originalHeight} px
              </dd>
            </>
          ) : null}
          <dt>Task</dt>
          <dd>
            {layer.generationInputs?.soundEffect?.schemaVersion === 2
              ? layer.taskId || '-'
              : formatTaskIdForDisplay(layer.taskId)}
          </dd>
        </dl>
      ) : null}
    </UnifiedModal>
  );
}