<script lang="ts">
  import type { VideoFormat } from '$lib/api/youtube';

  interface Props {
    formats: VideoFormat[];
    title: string;
  }

  let { formats, title }: Props = $props();

  let videoElement: HTMLVideoElement | undefined = $state();
  let currentQuality = $state('');

  const sortedFormats = $derived(
    [...formats]
      .filter(f => f.url && f.height)
      .sort((a, b) => (b.height || 0) - (a.height || 0))
  );

  const selectedFormat = $derived(
    currentQuality
      ? sortedFormats.find(f => f.qualityLabel === currentQuality) || sortedFormats[0]
      : sortedFormats[0]
  );

  function handleQualityChange(e: Event) {
    const select = e.target as HTMLSelectElement;
    const newQuality = select.value;
    const currentTime = videoElement?.currentTime || 0;
    const wasPlaying = videoElement && !videoElement.paused;

    currentQuality = newQuality;

    if (videoElement) {
      videoElement.load();
      videoElement.currentTime = currentTime;
      if (wasPlaying) {
        videoElement.play();
      }
    }
  }

  function handleKeydown(e: KeyboardEvent) {
    if (!videoElement) return;
    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;

    switch (e.key) {
      case ' ':
      case 'k':
        e.preventDefault();
        if (videoElement.paused) {
          videoElement.play();
        } else {
          videoElement.pause();
        }
        break;
      case 'f':
        e.preventDefault();
        if (document.fullscreenElement) {
          document.exitFullscreen();
        } else {
          videoElement.requestFullscreen();
        }
        break;
      case 'm':
        e.preventDefault();
        videoElement.muted = !videoElement.muted;
        break;
      case 'ArrowLeft':
        e.preventDefault();
        videoElement.currentTime -= 5;
        break;
      case 'ArrowRight':
        e.preventDefault();
        videoElement.currentTime += 5;
        break;
      case 'ArrowUp':
        e.preventDefault();
        videoElement.volume = Math.min(1, videoElement.volume + 0.1);
        break;
      case 'ArrowDown':
        e.preventDefault();
        videoElement.volume = Math.max(0, videoElement.volume - 0.1);
        break;
      case '0':
      case '1':
      case '2':
      case '3':
      case '4':
      case '5':
      case '6':
      case '7':
      case '8':
      case '9':
        e.preventDefault();
        videoElement.currentTime = (parseInt(e.key) / 10) * videoElement.duration;
        break;
    }
  }

  function getMimeType(ext: string): string {
    const types: Record<string, string> = {
      mp4: 'video/mp4',
      webm: 'video/webm',
      mkv: 'video/x-matroska'
    };
    return types[ext] || 'video/mp4';
  }
</script>

<svelte:window onkeydown={handleKeydown} />

<div class="player-container">
  {#if selectedFormat}
    <video
      bind:this={videoElement}
      controls
      autoplay
      {title}
    >
      <source src={selectedFormat.url} type={getMimeType(selectedFormat.ext)} />
      Your browser does not support the video tag.
    </video>
  {:else}
    <div class="no-video">
      <p>No playable video format found</p>
    </div>
  {/if}

  {#if sortedFormats.length > 1}
    <div class="quality-selector">
      <label for="quality">Quality:</label>
      <select id="quality" onchange={handleQualityChange} value={selectedFormat?.qualityLabel}>
        {#each sortedFormats as format}
          <option value={format.qualityLabel}>{format.qualityLabel || format.height + 'p'}</option>
        {/each}
      </select>
    </div>
  {/if}
</div>

<style>
  .player-container {
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
  }

  video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
  }

  .no-video {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
  }

  .quality-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
  }

  .quality-selector label {
    font-size: 0.9rem;
    color: var(--text-secondary);
  }

  .quality-selector select {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
  }
</style>
