import { UnifiedModal } from '../common/UnifiedModal';
import type { CanvasLayer } from './ImageCanvasEditorTypes';
import { formatTaskIdForDisplay } from './ImageCanvasExportModel';
import {
  formatLayerImageType,
  getEditorImageModelDisplayName,
} from './ImageCanvasGenerationModel';
import { formatCanvasDurationMetric } from './ImageCanvasMediaModel';

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

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

function formatLayerDurationForDisplay(layer: CanvasLayer) {
  return formatCanvasDurationMetric(layer.durationSeconds).replace(
    /^时长\s*/u,
    '',
  );
}

export function ImageCanvasMetadataModalView({
  layer,
  onClose,
}: ImageCanvasMetadataModalViewProps) {
  const mediaLabel =
    layer?.mediaType === 'audio'
      ? '音频'
      : layer?.mediaType === 'video'
        ? '视频'
        : layer?.mediaType === 'image-sequence'
          ? '序列帧'
        : '图片';

  return (
    <UnifiedModal
      open={Boolean(layer)}
      title={`${mediaLabel}信息`}
      size="sm"
      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">
            {layer.generationInputs?.fields.length ||
            layer.generationInputs?.references.length ? (
              <>
                {layer.generationInputs.fields.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>{field.value}</span>
                  </div>
                ))}
                {layer.generationInputs.references.length ? (
                  <div className="image-canvas-editor__metadata-reference-list">
                    {layer.generationInputs.references.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}</span>
                          <span className="image-canvas-editor__metadata-reference-id">
                            {formatReferenceType(reference.refType)} ·{' '}
                            {reference.refId}
                          </span>
                        </span>
                      </div>
                    ))}
                  </div>
                ) : null}
              </>
            ) : (
              '-'
            )}
          </dd>
          <dt>Model</dt>
          <dd>{layer.model ? getEditorImageModelDisplayName(layer.model) : '-'}</dd>
          {layer.mediaType === 'audio' ? (
            <>
              <dt>时长</dt>
              <dd>
                {formatLayerDurationForDisplay(layer)}
              </dd>
            </>
          ) : (
            <>
              <dt>Resolution</dt>
              <dd>
                {layer.originalWidth} x {layer.originalHeight} px
              </dd>
            </>
          )}
          <dt>Task</dt>
          <dd>{formatTaskIdForDisplay(layer.taskId)}</dd>
        </dl>
      ) : null}
    </UnifiedModal>
  );
}