import React from 'react'
import { resolveExerciseMediaFileUrl } from '../utils/exerciseMediaUrl'

/**
 * Ein ausgeliefertes exercise_media für Übungslisten (Liste + Inline gleiche Darstellung).
 * @param {{ media: object, exerciseId: number }} props
 */
export default function ExerciseMediaEmbed({ exerciseId, media }) {
  if (!media || exerciseId == null) return null
  if (media.embed_url) {
    return (
      <div style={{ marginTop: '0.5rem' }}>
        <a href={media.embed_url} target="_blank" rel="noreferrer">
          {media.embed_url}
        </a>
        {media.embed_platform && (
          <span style={{ color: 'var(--text2)', marginLeft: '0.5rem', fontSize: '0.8rem' }}>
            ({media.embed_platform})
          </span>
        )}
      </div>
    )
  }
  const src = resolveExerciseMediaFileUrl(exerciseId, media)
  if (!src) return null
  if (media.media_type === 'image' || (media.mime_type && media.mime_type.startsWith('image/'))) {
    return (
      <img
        src={src}
        alt={media.title || media.original_filename || ''}
        style={{ maxWidth: '100%', borderRadius: '8px', marginTop: '0.5rem' }}
      />
    )
  }
  if (media.media_type === 'video' || (media.mime_type && media.mime_type.startsWith('video/'))) {
    return <video src={src} controls style={{ width: '100%', marginTop: '0.5rem', borderRadius: '8px' }} />
  }
  return (
    <a href={src} target="_blank" rel="noreferrer" style={{ display: 'inline-block', marginTop: '0.5rem' }}>
      {media.title || media.original_filename || 'Datei öffnen'}
    </a>
  )
}