type PlayerSource = {
  id: string              // Unique identifier for the media
  src: string             // Media source URL
  type: string            // MIME type (e.g., 'video/mp4', 'application/x-mpegURL')
  title: string           // Media title displayed in player

  // Optional time-based data
  annotations?: PlayerTimeDataSource[]  // Annotations overlay
  chapters?: PlayerTimeDataSource[]     // Chapter markers
  cc?: PlayerTimeDataSource[]           // Closed captions/subtitles

  // Optional visual elements
  preview?: string | null       // Preview/thumbnail image URL
  poster?: string | null        // Poster image URL (before playback)
  thumbnails?: string | null    // Thumbnail sprite/VTT for scrubbing

  // Optional playback range
  clip?: [number, number] | null  // [startTime, endTime] in seconds
}

const media = {
  id: 'video-123',
  src: 'https://example.com/video.mp4',
  type: 'video/mp4',
  title: 'My Awesome Video',
  poster: 'https://example.com/poster.jpg',
  thumbnails: 'https://example.com/thumbnails.vtt',
  cc: [
    {
      src: 'https://example.com/captions-en.vtt',
      label: 'English',
      srclang: 'en',
      default: true
    }
  ],
  chapters: [
    {
      src: 'https://example.com/chapters.vtt',
      label: 'Chapters',
      srclang: 'en'
    }
  ],
  clip: [10, 300]  // Play from 10s to 300s
}

player.setup(media, options)

type PlayerTimeDataSource = {
  src: string              // URL to the time data file (VTT or JSON)
  label: string            // Display label for the track
  srclang: string          // Language code (e.g., 'en', 'es', 'fr')
  default?: boolean        // Whether this is the default track
  type?: 'json' | 'vtt'   // Format type (defaults to 'vtt')
  state?: 0 | 1 | 2       // Loading state (0: not loaded, 1: loading, 2: loaded)
}

const captions = [
  {
    src: 'https://example.com/captions-en.vtt',
    label: 'English',
    srclang: 'en',
    default: true
  },
  {
    src: 'https://example.com/captions-es.vtt',
    label: 'Español',
    srclang: 'es'
  }
]

type PlayerTimeData = {
  id: string               // Unique identifier
  from: number             // Start time in seconds
  to: number               // End time in seconds
  text: string             // Caption text or chapter content
  title?: string | null    // Optional title (used for chapters)
}

type PlayerStyles = {
  accentColor: string           // Primary accent color (buttons, progress)
  mainColor: string             // Main UI color
  submenuBgColor: string        // Submenu background color
  submenuColor: string          // Submenu text color
  chaptersBubbleColor: string   // Chapter marker bubble color
  pltHeight: string             // Playlist height
  rplaylistHeight: string       // Right playlist height
}

const customStyles = {
  accentColor: '#2196F3',
  mainColor: '#1976D2',
  submenuBgColor: '#37474F',
  submenuColor: '#FFFFFF',
  chaptersBubbleColor: '#FF9800',
  pltHeight: '200px',
  rplaylistHeight: '100%'
}

const player = new RavnurMediaPlayer(element, customStyles)

type PlayerLoggerFn = (...args: Array<unknown>) => void

type PlayerLogger = {
  debug: PlayerLoggerFn   // Debug level messages
  log: PlayerLoggerFn     // Info level messages
  warn: PlayerLoggerFn    // Warning level messages
  error: PlayerLoggerFn   // Error level messages
}

const customLogger = {
  debug: (...args) => console.debug('[Player Debug]', ...args),
  log: (...args) => console.log('[Player]', ...args),
  warn: (...args) => console.warn('[Player Warning]', ...args),
  error: (...args) => console.error('[Player Error]', ...args)
}

const options = {
  logger: customLogger,
  loggerLevel: 2  // 0: error, 1: warn, 2: log, 3: debug
}

// Partial translation example
const spanishTranslations = {
  'play': 'Reproducir',
  'pause': 'Pausar',
  'fullscreen': 'Pantalla completa',
  'exit-fullscreen': 'Salir de pantalla completa',
  'settings': 'Configuración',
  'quality': 'Calidad',
  'playback-rate': 'Velocidad de reproducción',
  'cc': 'Subtítulos',
  'chapters': 'Capítulos'
  // ... and 60+ more keys available
}

const options = {
  i18n: spanishTranslations
}

type PlayerPlaylistMode = 'auto' | 'right' | 'bottom'

type PlayerCrawlOptions = {
  text: string              // Text to display in the crawl
  speed: number             // Scroll speed (pixels per second)
  backgroundColor: string   // Background color (CSS color)
  textColor: string         // Text color (CSS color)
}

const options = {
  showCrawl: true,
  crawl: {
    text: 'Breaking News: Important announcement here!',
    speed: 10,
    backgroundColor: '#000000',
    textColor: '#FFFFFF'
  }
}

type PlayerCCColor =
  | '#F44336'  // Red
  | '#9C27B0'  // Purple
  | '#3F51B5'  // Indigo
  | '#2196F3'  // Blue
  | '#4CAF50'  // Green
  | '#FFEB3B'  // Yellow
  | '#FF9800'  // Orange
  | '#795548'  // Brown
  | '#9E9E9E'  // Grey
  | '#FFF'     // White
  | '#000'     // Black

type PlayerCCLocation = 'over' | 'below'
// 'over': Display captions over the video
// 'below': Display captions below the video

type PlayerState = {
  isFullScreen: boolean      // Whether player is in fullscreen mode
  isTheaterMode: boolean     // Whether player is in theater mode
  cc: PlayerStateCC          // Closed captions state
  toc: PlayerStateTOC        // Table of contents state
}

type PlayerStateCC = {
  color: PlayerCCColor              // Text color
  bgcolor: PlayerCCColor            // Background color
  fontSize: PlayerCCFontSize        // Font size
  fontFamily: PlayerCCFontFamily    // Font family
  location: PlayerCCLocation        // Display location
  lang: string | null               // Current language
  sources: PlayerTimeDataSource[]   // Available caption tracks
  loading?: boolean                 // Whether captions are loading
  timedata: PlayerTimeData[]        // Loaded caption data
  timedataLang: string              // Language of loaded timedata
}

type PlayerStateTOC = {
  lang: string | null               // Current language
  sources: PlayerTimeDataSource[]   // Available chapter tracks
  timedata: PlayerTimeData[]        // Loaded chapter data
  timedataLang: string              // Language of loaded timedata
}