{% extends "base.html" %}
{% block title %}Live TV - neTV{% endblock %}

{% block head_extra %}
{% if loading and not request.query_params.get('refreshing') %}
<meta http-equiv="refresh" content="2">
{% endif %}
<style>
/* Desktop (default): show desktop-only, hide compact-only */
.compact-only { display: none; }
.compact-only-block { display: none; }
.desktop-only { display: flex; }
.desktop-only-block { display: block; }

/* Performance: contain layout recalculations to each row */
.guide-row {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 4rem; /* approximate row height */
}

/* Section headings; heights must match VirtualGuide sectionHeight/sectionHeightMobile */
.guide-section { height: 32px; }

/* Mobile (width < 512px): show compact-only, hide desktop-only */
@media (max-width: 511px) {
  .guide-container .compact-only { display: flex; }
  .guide-container .compact-only-block { display: block; }
  .guide-container .desktop-only { display: none; }
  .guide-container .desktop-only-block { display: none; }
  .guide-section { height: 24px; }
}

/* Landscape mobile: hide header, compact time row */
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .guide-container > .desktop-only { display: none !important; }
  .guide-container > .mobile-header { display: none !important; }
  .guide-container .desktop-only.sticky .relative { height: 1.25rem; }
  .guide-container .desktop-only.sticky .relative div { font-size: 0.625rem; }
}

/* EPG cell focus */
.desktop-only-block a[data-nav="epg"]:focus {
  outline: 3px solid #3b82f6;
  outline-offset: -1px;
  background: rgba(59, 130, 246, 0.3);
}
</style>
{% endblock %}

{% block content %}
{% macro cat_icon(kind) %}<svg class="w-4 h-4 flex-shrink-0 opacity-70" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
{%- if kind == 'star' %}<path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z"/>
{%- elif kind == 'tv' %}<path d="M4 7h16v11H4zM9 21h6M9 3l3 4 3-4"/>
{%- else %}<path d="M4 6h16M4 12h16M4 18h16"/>{% endif %}</svg>{% endmacro %}
{% macro cat_link(id, name, count, icon) %}
      <a href="/guide?offset={{ offset }}&cats={{ id | urlencode }}" data-nav="cat" tabindex="0"
         class="guide-cat flex items-center gap-2 px-3 py-2 rounded-md text-sm focusable focus:outline-none focus:ring-2 focus:ring-blue-500
                {% if (selected_id or '') == id %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-800{% endif %}"
         {% if (selected_id or '') == id %}aria-current="page"{% endif %} title="{{ name }}">
        {{ cat_icon(icon) }}
        <span class="flex-1 min-w-0 truncate font-medium">{{ name }}</span>
        <span class="text-xs tabular-nums {% if (selected_id or '') == id %}text-blue-100{% else %}text-gray-500{% endif %}">{{ count }}</span>
      </a>
{% endmacro %}
{% macro cat_chip(id, name) %}
    <a href="/guide?offset={{ offset }}&cats={{ id | urlencode }}"
       class="flex-shrink-0 px-3 py-1 rounded-full text-xs whitespace-nowrap focusable
              {% if (selected_id or '') == id %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-300{% endif %}">{{ name }}</a>
{% endmacro %}
<div class="flex h-full min-w-0 gap-3">
  {% if sidebar_categories is defined %}
  <!-- Category sidebar (matches the Apple apps) -->
  <aside class="hidden md:flex flex-col w-56 lg:w-64 flex-shrink-0 bg-gray-900 rounded-lg py-4" aria-label="Channel categories">
    <div class="px-4 mb-3">
      <div class="text-[10px] font-bold tracking-[0.2em] text-gray-500">LIVE TV</div>
      <div class="text-xl font-bold">Categories</div>
    </div>
    <div class="flex-1 overflow-y-auto px-2 py-1 space-y-0.5">
      {{ cat_link('', 'All Channels', all_count, 'all') }}
      {% if sidebar_playlists %}
      <div class="px-3 pt-4 pb-1 text-[10px] font-semibold tracking-[0.15em] text-gray-500">PLAYLISTS</div>
      {% for c in sidebar_playlists %}{{ cat_link(c.id, c.name, c.count, 'star') }}{% endfor %}
      {% endif %}
      <div class="px-3 pt-4 pb-1 text-[10px] font-semibold tracking-[0.15em] text-gray-500">CATEGORIES</div>
      {% for c in sidebar_categories %}{{ cat_link(c.id, c.name, c.count, 'tv') }}{% endfor %}
      {% if not sidebar_categories %}
      <p class="px-3 py-2 text-xs text-gray-500">No categories selected.</p>
      {% endif %}
    </div>
    <a href="/settings#filters" class="mx-4 mt-3 text-xs text-gray-500 hover:text-blue-400">Edit categories</a>
  </aside>
  {% endif %}
<div class="guide-container flex flex-col h-full min-w-0 flex-1">
  <!-- Desktop header (fixed, non-scrolling) -->
  <div class="desktop-only flex items-center justify-between gap-2 mb-4 h-10">
    <div class="min-w-0 flex items-baseline gap-2">
      <h2 class="text-xl sm:text-3xl font-bold truncate">{{ selected_name | default('Live TV') }}</h2>
      <span class="text-xs text-gray-500 flex-shrink-0">{{ total_count | default(channel_count) }} channels</span>
    </div>
    <div class="flex gap-1">
      <a href="/guide?offset={{ offset - 3 }}{% if cats_param %}&cats={{ cats_param }}{% endif %}"
         class="px-2 py-1 text-xs bg-gray-600 hover:bg-gray-500 rounded focusable" tabindex="0">
        &larr; Earlier
      </a>
      <a href="/guide?offset=0{% if cats_param %}&cats={{ cats_param }}{% endif %}"
         class="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 rounded focusable" tabindex="0">
        Now
      </a>
      <a href="/guide?offset={{ offset + 3 }}{% if cats_param %}&cats={{ cats_param }}{% endif %}"
         class="px-2 py-1 text-xs bg-gray-600 hover:bg-gray-500 rounded focusable" tabindex="0">
        Later &rarr;
      </a>
    </div>
  </div>

  {% if loading_message %}
  <div class="bg-blue-900/50 border border-blue-500 rounded p-2 sm:p-4 mb-2 sm:mb-4">
    <p class="text-blue-300 text-sm sm:text-base">{{ loading_message }}</p>
  </div>
  {% elif epg_error %}
  <div class="bg-red-900/50 border border-red-500 rounded p-2 sm:p-4 mb-2 sm:mb-4">
    <p class="text-red-300 text-sm sm:text-base">EPG Error: {{ epg_error }}</p>
    <p class="text-xs sm:text-sm text-gray-400 mt-1">Showing channels without program info</p>
  </div>
  {% endif %}

  <!-- Handoff: a channel left playing on another device (filled by handoff-card.js) -->
  <div id="handoff-card" class="hidden flex items-center gap-3 bg-gray-900 border border-blue-500/60 rounded-lg p-2 sm:p-3 mb-2 sm:mb-4" role="region" aria-label="Continue watching">
    <a id="handoff-resume" href="#" class="flex flex-1 min-w-0 items-center gap-3 focusable rounded focus:outline-none focus:ring-2 focus:ring-blue-500" data-nav="handoff" tabindex="0">
      <span class="flex-shrink-0 w-9 h-9 rounded-full bg-blue-600 flex items-center justify-center" aria-hidden="true">
        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
      </span>
      <span class="min-w-0">
        <span class="block text-[10px] font-semibold tracking-[0.15em] text-blue-300">CONTINUE WATCHING</span>
        <span id="handoff-title" class="block font-semibold truncate"></span>
        <span id="handoff-detail" class="block text-xs text-gray-400 truncate"></span>
      </span>
    </a>
    <button id="handoff-dismiss" type="button" class="flex-shrink-0 p-2 text-gray-400 hover:text-white focusable rounded" title="Dismiss" aria-label="Dismiss">
      <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
    </button>
  </div>

  <!-- Mobile header (outside scroll container, stays visible in portrait, hidden in landscape) -->
  <div class="compact-only mobile-header items-center justify-between gap-1 p-2 bg-gray-900 border-b border-gray-700 rounded-t-lg">
    <div class="flex items-center gap-1">
      <span class="text-sm font-bold truncate">{{ selected_name | default('Live TV') }}</span>
      <span class="text-[10px] text-gray-500 flex-shrink-0">{{ total_count | default(channel_count) }}</span>
    </div>
    <div class="flex gap-1">
      <a href="/guide?offset={{ offset - 2 }}{% if cats_param %}&cats={{ cats_param }}{% endif %}"
         class="px-1 py-0.5 text-[10px] bg-gray-700 rounded focusable" tabindex="0">◀</a>
      <a href="/guide?offset=0{% if cats_param %}&cats={{ cats_param }}{% endif %}"
         class="px-1 py-0.5 text-[10px] bg-blue-600 rounded focusable" tabindex="0">Now</a>
      <a href="/guide?offset={{ offset + 2 }}{% if cats_param %}&cats={{ cats_param }}{% endif %}"
         class="px-1 py-0.5 text-[10px] bg-gray-700 rounded focusable" tabindex="0">▶</a>
    </div>
  </div>

  {% if sidebar_categories is defined %}
  <!-- Category chips for narrow screens (sidebar is hidden) -->
  <div class="md:hidden flex gap-1.5 overflow-x-auto pb-2 -mt-1 mb-1">
    {{ cat_chip('', 'All') }}
    {% for c in sidebar_playlists %}{{ cat_chip(c.id, '★ ' ~ c.name) }}{% endfor %}
    {% for c in sidebar_categories %}{{ cat_chip(c.id, c.name) }}{% endfor %}
  </div>
  {% endif %}

  {% if grid_data %}
  <!-- EPG Grid (scrollable) -->
  <div id="guide-grid" class="flex-1 overflow-y-auto overflow-x-hidden bg-gray-800 rounded-lg">
    <!-- Mobile Time Header -->
    <div class="compact-only sticky top-0 z-20 bg-gray-900 border-b border-gray-700">
      <div class="w-32 flex-shrink-0 p-1 bg-gray-900"></div>
      <div class="flex-1 relative h-5">
        {% for marker in time_markers_mobile %}
        <div class="absolute top-0 h-full border-l border-gray-700 text-[10px] text-gray-400 pl-0.5"
             style="left: {{ marker.left_pct }}%" data-clock="{{ marker.timestamp }}">
          {{ marker.label }}
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Desktop Time Header -->
    <div class="desktop-only sticky top-0 z-20 bg-gray-900 border-b border-gray-700">
      <div class="w-36 lg:w-48 flex-shrink-0 p-2 bg-gray-900"></div>
      <div class="flex-1 relative h-10">
        {% for marker in time_markers %}
        <div class="absolute top-0 h-full border-l border-gray-700 text-sm text-gray-400 pl-1"
             style="left: {{ marker.left_pct }}%" data-clock="{{ marker.timestamp }}">
          {{ marker.label }}
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Channel Rows -->
    {% for row in grid_data %}
    {% set section = section_by_start.get(loop.index0) if section_by_start is defined else none %}
    {% if section %}
    <div class="guide-section flex items-center px-2 bg-gray-900 border-b border-gray-700 text-xs sm:text-sm font-semibold text-gray-200">
      <span class="truncate">{{ section.name }}</span>
    </div>
    {% endif %}
    <div class="guide-row flex border-b border-gray-700 hover:bg-gray-750" data-row="{{ loop.index0 }}">
      <!-- Mobile Channel Info -->
      <div class="compact-only w-32 flex-shrink-0 p-1 items-center bg-gray-800 sticky left-0 z-10 border-r border-gray-700">
        <a href="/play/live/{{ row.channel.stream_id }}"
           class="text-xs line-clamp-2 hover:text-blue-400 focus:text-blue-400 focus:outline focus:outline-2 focus:outline-blue-500 focusable"
           tabindex="0" data-nav="epg" data-row="{{ loop.index0 }}" data-col="-1"
           title="{{ row.channel.name }}">
          {{ row.channel.name }}
        </a>
      </div>

      <!-- Desktop Channel Info -->
      <div class="desktop-only w-36 lg:w-48 flex-shrink-0 p-1 items-center gap-1 bg-gray-800 sticky left-0 z-10 border-r border-gray-700">
        {% if row.channel.icon %}
        <img src="{{ row.channel.icon | logo_url }}" alt="" class="w-10 h-10 object-contain" loading="lazy"
             onerror="this.style.display='none'">
        {% endif %}
        <a href="/play/live/{{ row.channel.stream_id }}"
           class="text-sm line-clamp-3 hover:text-blue-400 focus:text-blue-400 focus:outline focus:outline-2 focus:outline-blue-500 focusable"
           tabindex="0" data-nav="epg" data-row="{{ loop.index0 }}" data-col="-1"
           title="{{ row.channel.name }}">
          {{ row.channel.name }}
        </a>
      </div>

      <!-- Mobile Programs (2-hour window) -->
      {% set row_idx = loop.index0 %}
      <div class="compact-only-block flex-1 relative h-10 ml-1">
        {% if row.programs_mobile %}
        {% for prog in row.programs_mobile %}
        <a {% if prog.unavailable %}aria-disabled="true" role="link" tabindex="-1"{% else %}href="/play/live/{{ row.channel.stream_id }}{% if prog.catchup %}?start={{ prog.start_timestamp | int }}{% endif %}"
           tabindex="0" data-nav="epg" data-row="{{ row_idx }}" data-col="{{ loop.index0 }}"{% endif %}
           class="absolute top-0.5 bottom-0.5 bg-gray-700 hover:bg-gray-600 rounded px-1 overflow-hidden
                  {% if prog.unavailable %}opacity-50 cursor-not-allowed{% else %}focusable{% endif %} border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-800"
           style="left: {{ prog.left_pct }}%; width: calc({{ prog.width_pct }}% - 4px);"
           data-start="{{ prog.start_timestamp }}" data-end="{{ prog.end_timestamp }}"
           title="{{ prog.title }}&#10;{{ prog.start }} - {{ prog.end }}&#10;{{ prog.desc }}{% if prog.unavailable %}&#10;Not available in the upstream archive{% endif %}">
          <div class="text-[10px] font-medium truncate">{% if prog.catchup %}<span class="text-blue-300" title="Watch from the start">&#8634;</span> {% endif %}{{ prog.title }}</div>
        </a>
        {% endfor %}
        {% else %}
        <div class="absolute inset-0.5 flex items-center px-1 text-gray-500 text-[10px]">
          No info
        </div>
        {% endif %}
      </div>

      <!-- Desktop Programs -->
      <div class="desktop-only-block flex-1 relative h-16 ml-1">
        {% if row.programs %}
        {% for prog in row.programs %}
        <a {% if prog.unavailable %}aria-disabled="true" role="link" tabindex="-1"{% else %}href="/play/live/{{ row.channel.stream_id }}{% if prog.catchup %}?start={{ prog.start_timestamp | int }}{% endif %}"
           tabindex="0" data-nav="epg" data-row="{{ row_idx }}" data-col="{{ loop.index0 }}"{% endif %}
           class="absolute top-1 bottom-1 bg-gray-700 hover:bg-gray-600 rounded px-2 py-1 overflow-hidden
                  {% if prog.unavailable %}opacity-50 cursor-not-allowed{% else %}focusable{% endif %} border-2 border-transparent focus:border-blue-500 focus:bg-blue-900/50"
           style="left: {{ prog.left_pct }}%; width: calc({{ prog.width_pct }}% - 4px);"
           data-start="{{ prog.start_timestamp }}" data-end="{{ prog.end_timestamp }}"
           title="{{ prog.title }}&#10;{{ prog.start }} - {{ prog.end }}&#10;{{ prog.desc }}{% if prog.unavailable %}&#10;Not available in the upstream archive{% endif %}">
          <div class="text-sm font-medium truncate">{% if prog.catchup %}<span class="text-blue-300" title="Watch from the start">&#8634;</span> {% endif %}{{ prog.title }}</div>
          <div class="text-xs text-gray-400 truncate">{{ prog.desc }}</div>
        </a>
        {% endfor %}
        {% else %}
        <div class="absolute inset-1 flex items-center px-2 text-gray-500 text-sm">
          No program info
        </div>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="flex-1 flex items-center justify-center bg-gray-800 rounded-lg">
    <div class="text-center text-gray-400">
      <p class="text-2xl mb-4">No channels selected</p>
      <p>Go to <a href="/settings#filters" class="text-blue-400 hover:underline">Settings</a> to configure Live TV category filter</p>
    </div>
  </div>
  {% endif %}
</div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/virtual-guide.js"></script>
<script src="/static/js/handoff-card.js"></script>
<script>
// Virtual scroll configuration
const GUIDE_CONFIG = {
  totalRows: {{ total_count | default(0) }},
  offset: {{ offset }},
  cats: {{ (effective_cats if effective_cats is defined else cats_param) | tojson }},
  initialRows: {{ grid_data | tojson | safe }},
  sections: {{ (guide_sections if guide_sections is defined else []) | tojson }},
  // Logo URL proxy (matches _logo_url_filter in Python)
  logoUrlFilter: function(url) {
    if (!url || url.startsWith('/') || url.startsWith('data:')) {
      return url;
    }
    try {
      const parsed = new URL(url);
      const source = parsed.hostname.split(':')[0] || 'external';
      return '/api/logo?source=' + encodeURIComponent(source) + '&url=' + encodeURIComponent(url);
    } catch (e) {
      return url;
    }
  }
};

// Auto-refresh when EPG finishes loading
{% if epg_loading %}
(function() {
  const es = new EventSource('/events/epg');
  es.onmessage = function(e) {
    if (e.data === 'epg_ready') {
      es.close();
      window.location.reload();
    }
  };
  es.onerror = function() { es.close(); };
})();
{% endif %}

// Auto-advance when half-hour boundary passes (only when viewing "now")
{% if offset == 0 %}
(function() {
  const now = new Date();
  const min = now.getMinutes();
  const minToNext = min < 30 ? (30 - min) : (60 - min);
  const msToNext = (minToNext * 60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 500;
  setTimeout(() => window.location.reload(), msToNext);
})();
{% endif %}

// Show clock times in the viewer's time zone rather than the server's
localizeGuideTimes(document);

// Initialize virtual scrolling if enabled and we have more than initial batch
(function() {
  const virtualScrollEnabled = {{ virtual_scroll | default(true) | tojson }};
  if (virtualScrollEnabled && GUIDE_CONFIG.totalRows > GUIDE_CONFIG.initialRows.length && GUIDE_CONFIG.totalRows > 0) {
    const container = document.querySelector('.guide-container');
    if (container) {
      window.virtualGuide = new VirtualGuide({
        container: container,
        totalRows: GUIDE_CONFIG.totalRows,
        initialRows: GUIDE_CONFIG.initialRows,
        offset: GUIDE_CONFIG.offset,
        cats: GUIDE_CONFIG.cats,
        sections: GUIDE_CONFIG.sections,
        rowHeight: 64,  // 4rem desktop
        rowHeightMobile: 40,  // 2.5rem mobile
        bufferSize: 50,
        logoUrlFilter: GUIDE_CONFIG.logoUrlFilter
      });
    }
  }
})();

// EPG-specific keyboard navigation
(function() {
  function isVisible(el) {
    return el.offsetParent !== null;
  }

  // Use total count for keyboard navigation range
  const maxRow = () => {
    return Math.max(0, GUIDE_CONFIG.totalRows - 1);
  };

  function getVisiblePrograms(row) {
    // Select ONLY from desktop-only-block containers
    const containers = document.querySelectorAll('.desktop-only-block');
    let programs = [];
    containers.forEach(c => {
      const rowDiv = c.closest('[data-row]');
      if (rowDiv && rowDiv.dataset.row === String(row)) {
        programs.push(...c.querySelectorAll('a[data-nav="epg"]'));
      }
    });
    // Filter to unique visual positions (first element at each left position)
    const seen = new Set();
    const unique = programs.filter(p => {
      const left = Math.round(p.getBoundingClientRect().left);
      if (seen.has(left)) return false;
      seen.add(left);
      return true;
    });
    return unique;
  }

  // Sidebar: the highlighted category, and the row to return to from it
  const selectedCat = () => Array.from(document.querySelectorAll('[data-nav="cat"][aria-current]')).find(isVisible);
  let lastRow = 0;
  document.addEventListener('focusin', (e) => {
    if (e.target.dataset?.nav === 'epg') lastRow = parseInt(e.target.dataset.row) || 0;
  });

  function getCurrentPos() {
    const el = document.activeElement;
    if (!el || !el.dataset || el.dataset.nav !== 'epg') {
      return { row: 0, col: -1 };
    }
    const row = parseInt(el.dataset.row) || 0;
    const dataCol = parseInt(el.dataset.col);
    if (dataCol === -1) {
      return { row, col: -1 };
    }
    // Find visual index in sorted list
    const programs = getVisiblePrograms(row);
    const visualCol = programs.indexOf(el);
    return { row, col: visualCol >= 0 ? visualCol : 0 };
  }

  function focusCell(row, col) {
    // If virtual scrolling is active, ensure row is in view first
    if (window.virtualGuide) {
      const vg = window.virtualGuide;
      const rowHeight = vg.currentRowHeight;
      const viewport = vg.viewport;

      // Check if row is outside rendered range
      if (row < vg.renderedRange.start || row >= vg.renderedRange.end) {
        // Scroll to bring row into view, then focus after render
        const targetScroll = vg.rowTop(row) - (viewport.clientHeight / 2) + (rowHeight / 2);
        viewport.scrollTop = Math.max(0, targetScroll);

        // Wait for render and then focus
        setTimeout(() => doFocus(row, col), 100);
        return;
      }
    }

    doFocus(row, col);
  }

  function doFocus(row, col) {
    let cell;
    if (col === -1) {
      const candidates = document.querySelectorAll(`[data-nav="epg"][data-row="${row}"][data-col="-1"]`);
      cell = Array.from(candidates).find(isVisible);
    } else {
      const cells = getVisiblePrograms(row);
      cell = cells[col] || cells[cells.length - 1];
      if (!cell) {
        const fallback = document.querySelectorAll(`[data-nav="epg"][data-row="${row}"][data-col="-1"]`);
        cell = Array.from(fallback).find(isVisible);
      }
    }
    if (cell) {
      cell.focus();
      cell.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
    }
  }

  document.addEventListener('keydown', (e) => {
    if (e.target.type === 'checkbox' || e.target.tagName === 'INPUT') return;
    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter', 'PageUp', 'PageDown', 'Home', 'End'].includes(e.key)) return;
    if (e.altKey) return; // Allow browser back/forward

    const active = document.activeElement;
    if (active?.dataset?.nav === 'cat') {
      const cats = Array.from(document.querySelectorAll('[data-nav="cat"]')).filter(isVisible);
      const i = cats.indexOf(active);
      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        e.preventDefault();
        const next = cats[i + (e.key === 'ArrowDown' ? 1 : -1)];
        if (next) { next.focus(); next.scrollIntoView({ block: 'nearest' }); }
      } else if (e.key === 'ArrowRight') {
        e.preventDefault();
        focusCell(Math.min(lastRow, maxRow()), -1);
      } else if (e.key === 'ArrowLeft') {
        e.preventDefault();
        (document.querySelector('nav .nav-link.active') || document.querySelector('nav .nav-link'))?.focus();
      }
      return;
    }

    const { row, col } = getCurrentPos();
    const catsParam = '{{ cats_param }}';
    const catsSuffix = catsParam ? '&cats=' + catsParam : '';

    switch(e.key) {
      case 'ArrowUp':
        e.preventDefault();
        focusCell(Math.max(0, row - 1), col);
        break;
      case 'ArrowDown':
        e.preventDefault();
        focusCell(Math.min(maxRow(), row + 1), col);
        break;
      case 'ArrowLeft':
        e.preventDefault();
        if (col > -1) {
          focusCell(row, col - 1);
        } else if (selectedCat()) {
          selectedCat().focus();
        } else {
          window.location.href = `/guide?offset={{ offset - 3 }}${catsSuffix}`;
        }
        break;
      case 'ArrowRight':
        e.preventDefault();
        const progs = getVisiblePrograms(row);
        if (col < progs.length - 1) {
          focusCell(row, col + 1);
        }
        break;
      case 'Enter':
        if (document.activeElement?.href) {
          e.preventDefault();
          if (e.ctrlKey || e.metaKey) {
            window.open(document.activeElement.href, '_blank');
          } else {
            window.location.href = document.activeElement.href;
          }
        }
        break;
      case 'PageUp':
      case 'PageDown':
        e.preventDefault();
        const container = document.getElementById("guide-grid");
        const rowEl = document.querySelector('[data-row="0"]');
        const pageSize = (container && rowEl) ? Math.floor(container.clientHeight / rowEl.offsetHeight) : 10;
        if (e.key === 'PageUp') {
          focusCell(Math.max(0, row - pageSize), col);
        } else {
          focusCell(Math.min(maxRow(), row + pageSize), col);
        }
        break;
      case 'Home':
        e.preventDefault();
        focusCell(0, col);
        break;
      case 'End':
        e.preventDefault();
        focusCell(maxRow(), col);
        break;
    }
  });

  // Save/restore scroll position (persists across reloads and navigation)
  // Note: VirtualGuide handles scroll restore for virtual scrolling mode
  const scrollKey = 'guide_scroll:' + GUIDE_CONFIG.cats;
  const gridContainer = document.getElementById("guide-grid");
  if (gridContainer) {
    // Only restore if not using virtual scrolling (VirtualGuide handles it)
    if (!window.virtualGuide) {
      const saved = sessionStorage.getItem(scrollKey);
      if (saved) gridContainer.scrollTop = parseInt(saved);
    }
    // Save on scroll (debounced)
    let scrollTimer;
    gridContainer.addEventListener('scroll', () => {
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(() => sessionStorage.setItem(scrollKey, gridContainer.scrollTop), 100);
    });
    // Save immediately when clicking any link (before navigation)
    gridContainer.addEventListener('click', (e) => {
      if (e.target.closest('a')) sessionStorage.setItem(scrollKey, gridContainer.scrollTop);
    });
    // Save before page unload (catches all navigation/reloads)
    window.addEventListener('beforeunload', () => sessionStorage.setItem(scrollKey, gridContainer.scrollTop));
    // Restore on bfcache navigation (pageshow fires when page is restored from cache)
    window.addEventListener('pageshow', (e) => {
      if (e.persisted) {
        const saved = sessionStorage.getItem(scrollKey);
        if (saved) gridContainer.scrollTop = parseInt(saved);
      }
    });
  }

  // Initial focus
  // Start on the selected category, like the Apple TV app (rows may be
  // re-rendered by the virtual scroller, the sidebar isn't).
  setTimeout(() => {
    const active = document.activeElement;
    if (active !== document.body && active?.dataset?.nav !== 'cat') return;
    const target = selectedCat()
      || Array.from(document.querySelectorAll('[data-nav="epg"][data-row="0"][data-col="-1"]')).find(isVisible);
    if (target) target.focus({ preventScroll: true });
  }, 0);
})();

</script>
{% endblock %}