<script lang="ts">
  import {
    sleepTimerActive,
    sleepTimerMode,
    sleepTimerRemainingSeconds,
  } from "$lib/stores/sleepTimer";
  import { formatTime } from "$lib/utils/playbackUnits";

  interface Props {
    onClick?: () => void;
  }

  let { onClick }: Props = $props();

  function getDisplayText(): string {
    const mode = $sleepTimerMode;
    switch (mode.kind) {
      case "time":
        return formatTime($sleepTimerRemainingSeconds);
      case "endOfTrack":
        return "End";
      case "episodes":
        return `${mode.remaining} ep`;
      default:
        return "";
    }
  }
</script>

{#if $sleepTimerActive}
  <button
    onclick={onClick}
    class="flex items-center gap-1 px-2 py-1 rounded-full bg-[var(--color-jellyfin)]/20 text-[var(--color-jellyfin)] text-xs font-medium hover:bg-[var(--color-jellyfin)]/30 transition-colors"
    title="Sleep timer active - click to modify"
  >
    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
      <path
        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"
      />
    </svg>
    <span>{getDisplayText()}</span>
  </button>
{/if}
