<script lang="ts">
  import {
    SkipBack, SkipForward, Play, Pause, Loader2,
    Shuffle, Repeat, Repeat1,
    Volume2, Volume1, VolumeX,
    ListMusic
  } from 'lucide-svelte';
  import {
    player,
    togglePlay, skipNext, skipPrev, seekTo, setVolume,
    toggleShuffle, cycleRepeat, playQueue,
    toggleQueueDrawer
  } from '$lib/player/store.svelte';
  import { formatDuration } from '$lib/media/duration';
  import { FALLBACK_COVER, coverUrl } from '$lib/media/covers';
  import LikeButton from './LikeButton.svelte';
  import TrackMenu from './TrackMenu.svelte';

  const current = $derived(player.current);

  const skipPrevDisabled = $derived(player.index === 0 && player.position < 3);
  const skipNextDisabled = $derived(
    player.index === player.queue.length - 1 && player.repeat === 'off'
  );

  const repeatLabel = $derived(
    player.repeat === 'off' ? 'Repeat off' :
    player.repeat === 'all' ? 'Repeat all' : 'Repeat one'
  );

  const VolumeIcon = $derived(
    player.volume === 0 ? VolumeX :
    player.volume < 0.5 ? Volume1 : Volume2
  );

  function onSeekInput(e: Event) {
    const v = Number((e.currentTarget as HTMLInputElement).value);
    seekTo(v);
  }
  function onVolumeInput(e: Event) {
    const v = Number((e.currentTarget as HTMLInputElement).value);
    setVolume(v);
  }
  function onCoverError(e: Event) {
    (e.currentTarget as HTMLImageElement).src = FALLBACK_COVER;
  }
</script>

{#if current}
  <!--
    COMPACT view (below md). Layout per operator design:
      ┌─────────┬───────────┬───────────────────┐
      │ art     │ ♥   ⋮     │ 🔀 🔁 ☰            │  ← short sub-row
      │ title   │           │                   │
      │ artist  │ ⏮  ⏯  ⏭   │ volume slider     │  ← play row at full size
      ├─────────┴───────────┴───────────────────┤
      │ 0:42 ━━━━━●━━━━━━━━━━━━━━━━━━━━━━ 3:21 │
      └─────────────────────────────────────────┘
    Play controls maintain 40/48/40 size; like+kebab and column-3 sub-rows
    are shorter so column 2's bottom edge aligns with column 3's bottom.
  -->
  <div
    data-testid="player-bar-compact"
    class="md:hidden flex flex-col gap-1.5 border-t border-border bg-surface px-3 py-2"
  >
    {#if player.state === 'error'}
      <div role="alert" class="flex items-center justify-center gap-3 text-sm text-text-primary">
        <span>{player.error ?? 'Playback failed.'}</span>
        <button
          type="button"
          class="rounded bg-accent px-3 py-1.5 text-sm text-text-primary"
          onclick={() => playQueue(player.queue, player.index)}
        >
          Try again
        </button>
      </div>
    {:else}
      <!-- Top row: 3 columns -->
      <div class="flex items-stretch gap-3">
        <!-- Column 1: art + title + artist -->
        <a
          href={`/albums/${current.album_id}`}
          aria-label="Open album"
          class="flex min-w-0 items-center gap-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
          style="flex: 1 1 35%;"
        >
          <img
            src={coverUrl(current.album_id)}
            alt=""
            class="h-12 w-12 shrink-0 rounded-md object-cover"
            onerror={onCoverError}
          />
          <div class="min-w-0">
            <div class="truncate text-sm font-medium text-text-primary">{current.title}</div>
            <div class="truncate text-xs text-text-secondary">{current.artist_name}</div>
          </div>
        </a>

        <!-- Column 2: like+kebab (top), play controls (bottom) -->
        <div class="flex flex-col items-center justify-between gap-1 shrink-0">
          <div class="flex items-center gap-0.5">
            <LikeButton entityType="track" entityId={current.id} />
            <TrackMenu track={current} direction="up" hideQueueActions />
          </div>
          <div class="flex items-center gap-1.5">
            <button
              type="button"
              aria-label="Previous"
              disabled={skipPrevDisabled}
              onclick={skipPrev}
              class="flex h-10 w-10 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary disabled:opacity-40 disabled:hover:bg-transparent"
            >
              <SkipBack size={18} strokeWidth={1.5} fill="currentColor" />
            </button>
            <button
              type="button"
              aria-label={player.isPlaying ? 'Pause' : 'Play'}
              onclick={togglePlay}
              class="flex h-12 w-12 items-center justify-center rounded-full bg-accent text-text-primary shadow transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-accent"
            >
              {#if player.state === 'loading' || player.state === 'idle'}
                <Loader2 data-testid="play-spinner" size={22} strokeWidth={1.5} class="animate-spin" />
              {:else if player.isPlaying}
                <Pause size={22} strokeWidth={1.5} fill="currentColor" />
              {:else}
                <Play size={22} strokeWidth={1.5} fill="currentColor" class="ml-0.5" />
              {/if}
            </button>
            <button
              type="button"
              aria-label="Next"
              disabled={skipNextDisabled}
              onclick={skipNext}
              class="flex h-10 w-10 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary disabled:opacity-40 disabled:hover:bg-transparent"
            >
              <SkipForward size={18} strokeWidth={1.5} fill="currentColor" />
            </button>
          </div>
        </div>

        <!-- Column 3: shuffle/repeat/queue (top), volume slider (bottom) -->
        <div class="flex min-w-0 flex-col items-stretch justify-between gap-1" style="flex: 1 1 30%;">
          <div class="flex items-center justify-end gap-0.5">
            <button
              type="button"
              aria-label="Shuffle"
              aria-pressed={player.shuffle}
              onclick={toggleShuffle}
              class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.shuffle
                ? 'bg-accent-tint text-accent'
                : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
            >
              <Shuffle size={16} strokeWidth={1.5} />
            </button>
            <button
              type="button"
              aria-label={repeatLabel}
              onclick={cycleRepeat}
              class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.repeat !== 'off'
                ? 'bg-accent-tint text-accent'
                : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
            >
              {#if player.repeat === 'one'}
                <Repeat1 size={16} strokeWidth={1.5} />
              {:else}
                <Repeat size={16} strokeWidth={1.5} />
              {/if}
            </button>
            <button
              type="button"
              onclick={() => toggleQueueDrawer()}
              aria-label={player.queueDrawerOpen ? 'Close queue' : 'Open queue'}
              aria-pressed={player.queueDrawerOpen}
              class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.queueDrawerOpen
                ? 'bg-accent-tint text-accent'
                : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
            >
              <ListMusic size={16} strokeWidth={1.5} />
            </button>
          </div>
          <label class="flex items-center gap-1">
            <span class="sr-only">Volume</span>
            <VolumeIcon size={14} strokeWidth={1.5} class="shrink-0 text-text-secondary" />
            <input
              type="range"
              aria-label="Volume"
              min="0"
              max="1"
              step="0.01"
              value={player.volume}
              oninput={onVolumeInput}
              class="min-w-0 flex-1 accent-accent"
            />
          </label>
        </div>
      </div>

      <!-- Bottom row: full-width seek slider + time labels -->
      <div class="flex items-center gap-2">
        <span class="w-9 shrink-0 text-right text-[10px] tabular-nums text-text-secondary">
          {formatDuration(player.position)}
        </span>
        <input
          type="range"
          aria-label="Seek"
          min="0"
          max={player.duration || 0}
          step="0.1"
          value={player.position}
          oninput={onSeekInput}
          class="flex-1 accent-accent"
        />
        <span class="w-9 shrink-0 text-[10px] tabular-nums text-text-secondary">
          {formatDuration(player.duration)}
        </span>
      </div>
    {/if}
  </div>

  <!--
    DESKTOP view (md+). Original 3-column layout — unchanged except that
    the redundant PlayerOverflowMenu kebab is no longer mounted (volume,
    shuffle, repeat, queue all live inline in the right cluster).
  -->
  <div
    data-testid="player-bar-desktop"
    class="hidden md:flex md:flex-row md:min-h-[108px] md:items-center md:gap-4 border-t border-border bg-surface md:px-4 md:py-1.5"
  >
    <!-- Left: cover + title + artist + like + menu -->
    <div class="flex w-72 min-w-0 items-center gap-3">
      <a
        href={`/albums/${current.album_id}`}
        aria-label="Open album"
        class="shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
      >
        <img
          src={coverUrl(current.album_id)}
          alt=""
          class="h-24 w-24 rounded-md object-cover"
          onerror={onCoverError}
        />
      </a>
      <div class="min-w-0 flex-1">
        <div class="truncate text-sm font-medium text-text-primary">{current.title}</div>
        <a
          href={`/artists/${current.artist_id}`}
          class="block truncate text-xs text-text-secondary hover:text-text-primary"
        >
          {current.artist_name}
        </a>
        {#if player.queue.length > player.index + 1}
          {@const nextTrack = player.queue[player.index + 1]}
          <span class="block truncate text-xs text-text-secondary">
            Next · {nextTrack.title} — {nextTrack.artist_name}
          </span>
        {/if}
      </div>
      <LikeButton entityType="track" entityId={current.id} />
      <TrackMenu track={current} direction="up" hideQueueActions />
    </div>

    <!-- Center: seek row + transport row -->
    {#if player.state === 'error'}
      <div role="alert" class="flex flex-1 items-center justify-center gap-3 text-sm text-text-primary">
        <span>{player.error ?? 'Playback failed.'}</span>
        <button
          type="button"
          class="rounded bg-accent px-3 py-1.5 text-sm text-text-primary"
          onclick={() => playQueue(player.queue, player.index)}
        >
          Try again
        </button>
      </div>
    {:else}
      <div class="flex flex-1 flex-col items-stretch gap-2">
        <!-- Transport row -->
        <div class="flex items-center justify-center gap-3">
          <button
            type="button"
            aria-label="Previous"
            disabled={skipPrevDisabled}
            onclick={skipPrev}
            class="flex h-10 w-10 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary disabled:opacity-40 disabled:hover:bg-transparent"
          >
            <SkipBack size={20} strokeWidth={1.5} fill="currentColor" />
          </button>
          <button
            type="button"
            aria-label={player.isPlaying ? 'Pause' : 'Play'}
            onclick={togglePlay}
            class="flex h-12 w-12 items-center justify-center rounded-full bg-accent text-text-primary shadow transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-accent"
          >
            {#if player.state === 'loading' || player.state === 'idle'}
              <Loader2 size={24} strokeWidth={1.5} class="animate-spin" />
            {:else if player.isPlaying}
              <Pause size={24} strokeWidth={1.5} fill="currentColor" />
            {:else}
              <Play size={24} strokeWidth={1.5} fill="currentColor" class="ml-0.5" />
            {/if}
          </button>
          <button
            type="button"
            aria-label="Next"
            disabled={skipNextDisabled}
            onclick={skipNext}
            class="flex h-10 w-10 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary disabled:opacity-40 disabled:hover:bg-transparent"
          >
            <SkipForward size={20} strokeWidth={1.5} fill="currentColor" />
          </button>
        </div>
        <!-- Seek row -->
        <div class="flex items-center gap-3">
          <span class="w-12 shrink-0 text-right text-xs tabular-nums text-text-secondary">
            {formatDuration(player.position)}
          </span>
          <input
            type="range"
            aria-label="Seek"
            min="0"
            max={player.duration || 0}
            step="0.1"
            value={player.position}
            oninput={onSeekInput}
            class="flex-1 accent-accent"
          />
          <span class="w-12 shrink-0 text-xs tabular-nums text-text-secondary">
            {formatDuration(player.duration)}
          </span>
        </div>
      </div>
    {/if}

    <!-- Right: shuffle + repeat + queue + volume -->
    <div class="flex w-60 items-center justify-end gap-2">
      <button
        type="button"
        aria-label="Shuffle"
        aria-pressed={player.shuffle}
        onclick={toggleShuffle}
        class="flex h-9 w-9 items-center justify-center rounded-full transition-colors {player.shuffle
          ? 'bg-accent-tint text-accent'
          : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
      >
        <Shuffle size={18} strokeWidth={1.5} />
      </button>
      <button
        type="button"
        aria-label={repeatLabel}
        onclick={cycleRepeat}
        class="flex h-9 w-9 items-center justify-center rounded-full transition-colors {player.repeat !== 'off'
          ? 'bg-accent-tint text-accent'
          : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
      >
        {#if player.repeat === 'one'}
          <Repeat1 size={18} strokeWidth={1.5} />
        {:else}
          <Repeat size={18} strokeWidth={1.5} />
        {/if}
      </button>
      <button
        type="button"
        onclick={() => toggleQueueDrawer()}
        aria-label={player.queueDrawerOpen ? 'Close queue' : 'Open queue'}
        aria-pressed={player.queueDrawerOpen}
        class="flex h-9 w-9 items-center justify-center rounded-full transition-colors {player.queueDrawerOpen
          ? 'bg-accent-tint text-accent'
          : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
      >
        <ListMusic size={18} strokeWidth={1.5} />
      </button>
      <label class="flex items-center gap-1.5">
        <span class="sr-only">Volume</span>
        <VolumeIcon size={18} strokeWidth={1.5} class="shrink-0 text-text-secondary" />
        <input
          type="range"
          aria-label="Volume"
          min="0"
          max="1"
          step="0.01"
          value={player.volume}
          oninput={onVolumeInput}
          class="w-20 accent-accent"
        />
      </label>
    </div>
  </div>
{/if}
