<script lang="ts">
  import { sessions, selectedSession } from "$lib/stores";
  import SessionsList from "$lib/components/sessions/SessionsList.svelte";
  import RemoteControls from "$lib/components/sessions/RemoteControls.svelte";

  function handleSelectSession(sessionId: string) {
    // Toggle selection - if clicking the same session, deselect it
    if ($sessions.selectedSessionId === sessionId) {
      sessions.selectSession(null);
    } else {
      sessions.selectSession(sessionId);
    }
  }
</script>

<div class="min-h-full bg-[var(--color-background)] p-4 md:p-8">
  <div class="max-w-7xl mx-auto">
    <!-- Page Header -->
    <header class="mb-8">
      <h1 class="text-3xl font-bold text-white mb-2">Remote Sessions</h1>
      <p class="text-gray-400">
        Control playback on other Jellyfin clients
      </p>
    </header>

    <!-- Main Content -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Sessions List Column -->
      <div class="order-1">
        <SessionsList onSelectSession={handleSelectSession} />
      </div>

      <!-- Remote Controls Column -->
      <div class="order-2">
        {#if $selectedSession}
          <div class="sticky top-4">
            <RemoteControls session={$selectedSession} />
          </div>
        {:else}
          <!-- Placeholder when no session selected -->
          <div class="flex flex-col items-center justify-center p-12 rounded-lg bg-[var(--color-surface)] text-center">
            <svg class="w-20 h-20 text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
              />
            </svg>
            <h3 class="text-lg font-medium text-gray-400 mb-2">Select a Session</h3>
            <p class="text-sm text-gray-500 max-w-sm">
              Choose a session from the list to control playback on that device
            </p>
          </div>
        {/if}
      </div>
    </div>

    <!-- Help Text -->
    <div class="mt-8 p-4 rounded-lg bg-[var(--color-surface)] border border-[var(--color-jellyfin)]/20">
      <h3 class="text-sm font-semibold text-white mb-2">How to use Remote Sessions</h3>
      <ul class="text-sm text-gray-400 space-y-1 list-disc list-inside">
        <li>Start playing media on another Jellyfin client (TV, web browser, mobile app)</li>
        <li>The session will appear in the list above automatically</li>
        <li>Click on a session to select it and view playback controls</li>
        <li>Use the controls to play, pause, skip tracks, adjust volume, and seek</li>
        <li>Sessions update automatically - click refresh for immediate updates</li>
      </ul>
    </div>
  </div>
</div>

<style>
  /* Custom scrollbar for better appearance */
  :global(html) {
    scrollbar-width: thin;
    scrollbar-color: var(--color-jellyfin) var(--color-surface);
  }

  :global(::-webkit-scrollbar) {
    width: 8px;
  }

  :global(::-webkit-scrollbar-track) {
    background: var(--color-surface);
  }

  :global(::-webkit-scrollbar-thumb) {
    background: var(--color-jellyfin);
    border-radius: 4px;
  }

  :global(::-webkit-scrollbar-thumb:hover) {
    background: var(--color-jellyfin-hover);
  }
</style>
