@extends('layouts.app')

@section('title', isset($query) ? 'Search: ' . $query . ' | ' . config('app.name') : config('app.name'))

@section('extra_styles')
<style>
    /* ── Regular video grid ── */
    .yt-video-grid {
        display: grid;
        /* minmax(0, 1fr) keeps every column exactly equal in width.
           Plain 1fr lets a track grow if a child's min-content is wider
           than the share, which was making the 3rd column wider (and
           therefore taller, since the thumb is 16/9) than the first two. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        align-items: stretch;
        gap: 20px;
    }
    .yt-video-grid > .yt-video-card { height: 100%; min-width: 0; }
    @media (max-width: 992px) { .yt-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 576px)  { .yt-video-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }


    /* ── Thumbnail orientation fix ── */


    /* ── Thumbnail orientation fix ──
       Always cover so every thumbnail visually fills its 16/9 box the
       same way. `!important` beats any leftover inline style from the
       old adjust-fit script (cached page in the wild). */
    .yt-video-card .yt-video-thumb img { object-fit: cover !important; }

    /* ── Search result helpers ── */
    .search-info { margin-bottom: 20px; padding: 16px; background: var(--bg-secondary); border-radius: 12px; }
    .search-info h2 { font-size: 20px; margin: 0; }
    .search-info p  { color: var(--text-secondary); margin: 8px 0 0; }
    .results-section-title {
        font-size: 15px; font-weight: 600; color: var(--text-secondary);
        text-transform: uppercase; letter-spacing: .05em;
        margin: 28px 0 14px;
        display: flex; align-items: center; gap: 8px;
    }
    .results-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }

    /* Channel results — card list sized to sit comfortably above the video
       grid. Avatar is a fixed 56px circle; name + handle sit to the right. */
    .search-channels-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 12px;
        margin-bottom: 8px;
    }
    .search-channel-card {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 12px;
        background: var(--bg-secondary);
        border-radius: 12px;
        text-decoration: none;
        color: var(--text-primary);
        transition: background .15s ease;
    }
    .search-channel-card:hover { background: rgba(255,255,255,.08); }
    .search-channel-card img,
    .search-channel-ph {
        width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
        background: #333; display: flex; align-items: center; justify-content: center;
        font-size: 22px; color: var(--text-secondary);
    }
    .search-channel-text { min-width: 0; }
    .search-channel-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .search-channel-handle { font-size: 13px; color: var(--text-secondary); }

    .yt-empty { text-align: center; padding: 80px 20px; }

    /* Language chips */
    .yt-chip-sep { display:inline-block; width:1px; align-self:stretch; margin:6px 4px; background:var(--border-color); }
    .yt-chip-lang { display:inline-flex; align-items:center; gap:6px; }
    .yt-chip-lang .fi { width:18px; height:13px; border-radius:2px; display:inline-block; flex-shrink:0; }
</style>
@endsection

@section('content')

{{-- ── Filter chip bar ── --}}
@unless(isset($query))
@php $activeFilter = request('filter', 'all'); @endphp
<div class="yt-filter-bar-wrap">
<button type="button" class="yt-filter-nav left"  aria-label="Scroll left"  onclick="scrollFilterBar(-1)"><i class="bi bi-chevron-left"></i></button>
<button type="button" class="yt-filter-nav right" aria-label="Scroll right" onclick="scrollFilterBar(1)"><i class="bi bi-chevron-right"></i></button>
<div class="yt-filter-bar" role="navigation" aria-label="Browse filters">
    {{-- aria-current="page" on the active chip so assistive tech can read
         the current filter. "New to You" was renamed to "Recent" — it was
         just the latest filter, not a personalised recommendation, so the
         old label overpromised. --}}
    @php
        $isAll       = $activeFilter === 'all';
        $isTrending  = request()->is('trending');
        $isMusic     = $activeFilter === 'music';
        $isMatch     = $activeFilter === 'match';
        $isShorts    = request()->is('shorts');
        $isPlaylists = $activeFilter === 'playlists';
        $isRecent    = $activeFilter === 'latest';
    @endphp
    <a href="{{ route('videos.index') }}"
       class="yt-chip {{ $isAll ? 'active' : '' }}" @if($isAll) aria-current="page"@endif>All</a>
    <a href="{{ route('videos.trending') }}"
       class="yt-chip {{ $isTrending ? 'active' : '' }}" @if($isTrending) aria-current="page"@endif>Trending</a>
    <a href="{{ route('videos.index', ['filter' => 'music']) }}"
       class="yt-chip {{ $isMusic ? 'active' : '' }}" @if($isMusic) aria-current="page"@endif>Music</a>
    <a href="{{ route('videos.index', ['filter' => 'match']) }}"
       class="yt-chip {{ $isMatch ? 'active' : '' }}" @if($isMatch) aria-current="page"@endif>Sports</a>
    <a href="{{ route('videos.shorts') }}"
       class="yt-chip {{ $isShorts ? 'active' : '' }}" @if($isShorts) aria-current="page"@endif>Shorts</a>
    <a href="{{ route('videos.index', ['filter' => 'playlists']) }}"
       class="yt-chip {{ $isPlaylists ? 'active' : '' }}" @if($isPlaylists) aria-current="page"@endif>Playlists</a>
    <a href="{{ route('videos.index', ['filter' => 'latest']) }}"
       class="yt-chip {{ $isRecent ? 'active' : '' }}" @if($isRecent) aria-current="page"@endif>Recent</a>

    @if(!empty($langChips ?? []))
        @php $activeLang = str_starts_with($activeFilter, 'lang:') ? substr($activeFilter, 5) : null; @endphp
        <span class="yt-chip-sep" aria-hidden="true"></span>
        @foreach($langChips as $chip)
            <a href="{{ route('videos.index', ['filter' => 'lang:' . $chip['code']]) }}"
               class="yt-chip yt-chip-lang {{ $activeLang === $chip['code'] ? 'active' : '' }}"
               @if($activeLang === $chip['code']) aria-current="page"@endif
               title="{{ $chip['name'] }} ({{ $chip['count'] }})">
                <span class="fi fi-{{ $chip['flag'] }}"></span>
                <span>{{ $chip['name'] }}</span>
            </a>
        @endforeach
    @endif
</div>
</div>{{-- /yt-filter-bar-wrap --}}
@endunless

<div id="filter-content">
{{-- ══════════════════════════════════════════════
     SEARCH RESULTS
══════════════════════════════════════════════ --}}
@isset($query)

@php
    $searchShorts    = $shorts    ?? collect();
    $searchPlaylists = $playlists ?? collect();
    $searchChannels  = $channels  ?? collect();
    $totalResults    = $videos->count() + $searchShorts->count() + $searchPlaylists->count() + $searchChannels->count();
@endphp

<div class="search-info">
    <h2>Search results for "{{ $query }}"</h2>
    <p>
        @if($videos->count()) {{ $videos->count() }} video{{ $videos->count() !== 1 ? 's' : '' }} @endif
        @if($searchShorts->count())    &nbsp;·&nbsp; {{ $searchShorts->count() }} short{{ $searchShorts->count() !== 1 ? 's' : '' }} @endif
        @if($searchChannels->count())  &nbsp;·&nbsp; {{ $searchChannels->count() }} channel{{ $searchChannels->count() !== 1 ? 's' : '' }} @endif
        @if($searchPlaylists->count()) &nbsp;·&nbsp; {{ $searchPlaylists->count() }} playlist{{ $searchPlaylists->count() !== 1 ? 's' : '' }} @endif
        @if($totalResults === 0) No results found @endif
    </p>
</div>

@if($searchChannels->count())
    <div class="results-section-title"><i class="bi bi-person-circle"></i> Channels</div>
    <div class="search-channels-grid">
        @foreach($searchChannels as $channel)
            <a href="{{ route('channel', $channel->channel) }}" class="search-channel-card">
                @if($channel->avatar_url)
                    <img src="{{ $channel->avatar_url }}" alt="{{ $channel->name }}" width="56" height="56" loading="lazy">
                @else
                    <div class="search-channel-ph"><i class="bi bi-person"></i></div>
                @endif
                <div class="search-channel-text">
                    <div class="search-channel-name">{{ $channel->name }}</div>
                    @if($channel->username)
                        <div class="search-channel-handle">@{{ $channel->username }}</div>
                    @endif
                </div>
            </a>
        @endforeach
    </div>
@endif

@if($videos->count())
    <div class="results-section-title"><i class="bi bi-play-circle"></i> Videos</div>
    <div class="yt-video-grid">
        @foreach($videos as $video)
            @include('components.video-card', ['video' => $video])
        @endforeach
    </div>
@endif

@if($searchShorts->count())
    <div class="results-section-title"><i class="bi bi-lightning-charge-fill"></i> Shorts</div>
    <div class="yt-video-grid">
        @foreach($searchShorts as $video)
            @include('components.video-card', ['video' => $video])
        @endforeach
    </div>
@endif

@if($searchPlaylists->count())
    <div class="results-section-title"><i class="bi bi-collection-play"></i> Playlists</div>
    <div class="yt-video-grid">
        @foreach($searchPlaylists as $pl)
            @include('components.playlist-card', ['playlist' => $pl])
        @endforeach
    </div>
@endif

@if($totalResults === 0)
    <div class="yt-empty">
        <i class="bi bi-search" style="font-size:56px;color:var(--text-secondary);display:block;margin-bottom:12px;"></i>
        <h2>No results for "{{ $query }}"</h2>
        <p style="color:var(--text-secondary);">Try different keywords or browse the gallery.</p>
    </div>
@endif

@endisset

{{-- ══════════════════════════════════════════════
     PLAYLISTS-ONLY FILTER
══════════════════════════════════════════════ --}}
@if(!isset($query) && isset($filter) && $filter === 'playlists')
    @if(isset($playlists) && $playlists->count())
        <div class="yt-video-grid">
            @foreach($playlists as $pl)
                @include('components.playlist-card', ['playlist' => $pl])
            @endforeach
        </div>
    @else
        <div class="yt-empty">
            <i class="bi bi-collection-play" style="font-size:56px;color:var(--text-secondary);display:block;margin-bottom:12px;"></i>
            <h2>No public playlists yet</h2>
        </div>
    @endif

{{-- ══════════════════════════════════════════════
     HOME — MIXED FEED
══════════════════════════════════════════════ --}}
@elseif(!isset($query) && (!isset($filter) || $filter === 'all'))

    @if(!empty($homeShorts) && $homeShorts->count())
    {{-- Horizontally-scrolling Shorts shelf. Sits above the main feed grid
         so the user sees fresh short-form content without the feed being
         drowned in 60-second portrait clips. --}}
    <section class="home-shorts-shelf" aria-labelledby="home-shorts-heading">
        <div class="home-shorts-shelf-head">
            <h2 id="home-shorts-heading"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> Shorts</h2>
            <a href="{{ route('videos.shorts') }}" class="home-shorts-see-all">See all</a>
        </div>
        <div class="home-shorts-shelf-track">
            @foreach($homeShorts as $s)
                <a class="home-short-card" href="{{ route('videos.shorts.focused', $s) }}"
                   aria-label="Open short: {{ $s->title }}">
                    <img src="{{ $s->thumbnail ? route('media.thumbnail', $s->thumbnail) : 'https://picsum.photos/seed/'.$s->id.'/180/320' }}"
                         alt="" width="150" height="266" loading="lazy" decoding="async">
                    <div class="home-short-card-overlay">
                        <div class="home-short-card-title">{{ Str::limit($s->title, 40) }}</div>
                        <div class="home-short-card-views">{{ number_format($s->view_count) }} views</div>
                    </div>
                </a>
            @endforeach
        </div>
    </section>
    <style>
        .home-shorts-shelf { margin: 8px 0 24px; }
        .home-shorts-shelf-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
        .home-shorts-shelf-head h2 { font-size:18px; font-weight:600; margin:0; display:flex; align-items:center; gap:8px; }
        .home-shorts-shelf-head h2 i { color:#ef4444; }
        .home-shorts-see-all { color: var(--text-secondary); font-size:13px; text-decoration:none; }
        .home-shorts-see-all:hover { color: var(--text-primary); text-decoration: underline; }
        .home-shorts-shelf-track {
            display:flex; gap:12px; overflow-x:auto; scroll-snap-type: x proximity;
            scrollbar-width: none; -ms-overflow-style: none;
            padding-bottom: 4px;
        }
        .home-shorts-shelf-track::-webkit-scrollbar { display:none; }
        .home-short-card {
            flex: 0 0 150px; aspect-ratio: 9/16; border-radius: 10px;
            overflow: hidden; position: relative; scroll-snap-align: start;
            text-decoration: none; color: inherit; background: #1a1a1a;
            transition: transform .15s ease;
        }
        .home-short-card:hover { transform: translateY(-2px); }
        .home-short-card img { width:100%; height:100%; object-fit: cover; display:block; }
        .home-short-card-overlay {
            position:absolute; left:0; right:0; bottom:0; padding: 20px 8px 8px;
            background: linear-gradient(transparent, rgba(0,0,0,.75));
            color: #fff;
        }
        .home-short-card-title { font-size:12px; font-weight:600; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
        .home-short-card-views { font-size:11px; opacity:.8; margin-top:2px; }
    </style>
    @endif

    @if(isset($feedItems) && $feedItems->count())
    <div class="yt-video-grid">
        @foreach($feedItems as $entry)
            @if($entry['kind'] === 'video')
                @include('components.video-card', ['video' => $entry['item']])
            @else
                @php $pl = $entry['item']; @endphp
                @include('components.playlist-card', ['playlist' => $pl])
            @endif
        @endforeach
    </div>
    @else
        <div class="yt-empty">
            <h2>No content yet</h2>
            @auth
                <a href="{{ route('videos.create') }}" class="action-btn action-btn-primary" style="margin-top:12px;">Upload First Video</a>
            @endauth
        </div>
    @endif

{{-- ══════════════════════════════════════════════
     SINGLE-TYPE FILTERED VIEWS
══════════════════════════════════════════════ --}}
@elseif(!isset($query))

    @if($videos->isEmpty())
        <div class="yt-empty">
            <i class="bi bi-camera-video" style="font-size:56px;color:var(--text-secondary);display:block;margin-bottom:12px;"></i>
            <h2>Nothing here yet</h2>
        </div>
    @else
        <div class="yt-video-grid">
            @foreach($videos as $video)
                @include('components.video-card', ['video' => $video])
            @endforeach
        </div>
    @endif

@endif

{{-- Infinite-scroll sentinel. The IntersectionObserver down in @section('scripts')
     fetches the next cursor page when this comes into view and appends the
     rendered cards to the grid above. A visible "Load more" button is the
     always-available fallback. --}}
<div id="feed-sentinel"
     data-feed-filter="{{ $filter ?? 'all' }}"
     style="height:1px;"></div>
<div id="feed-loadmore-wrap" style="display:none; text-align:center; padding:16px 0;">
    <button type="button" id="feed-loadmore" class="action-btn">Load more</button>
</div>
</div>{{-- /filter-content --}}

@endsection

@section('scripts')
<script>
/* Thumbnails render at a uniform size: the .yt-video-thumb box is a
   strict 16/9 container and every image inside it uses `object-fit:
   cover` (set in the shared card CSS) so portrait/square art fills the
   frame instead of shrinking with letterboxing. No per-image adjustment
   needed. */

/* ─── Filter-bar horizontal scroll ─── */
(function () {
    var bar = document.querySelector('.yt-filter-bar');
    var wrap = document.querySelector('.yt-filter-bar-wrap');
    if (!bar || !wrap) return;

    var leftBtn  = wrap.querySelector('.yt-filter-nav.left');
    var rightBtn = wrap.querySelector('.yt-filter-nav.right');

    function updateNav() {
        var canLeft  = bar.scrollLeft > 4;
        var canRight = (bar.scrollLeft + bar.clientWidth) < (bar.scrollWidth - 4);
        if (leftBtn)  leftBtn.classList.toggle('visible', canLeft);
        if (rightBtn) rightBtn.classList.toggle('visible', canRight);
    }

    // Expose for the inline onclick handlers.
    window.scrollFilterBar = function (dir) {
        bar.scrollBy({ left: dir * Math.max(240, bar.clientWidth * 0.8), behavior: 'smooth' });
    };

    // Convert vertical wheel to horizontal — but only when there's no
    // shift key (shift+wheel already scrolls horizontally in browsers).
    bar.addEventListener('wheel', function (e) {
        if (e.deltaY === 0 || e.shiftKey) return;
        // Only intercept when the bar can actually scroll in that direction,
        // otherwise let the page scroll normally.
        var going = e.deltaY > 0 ? 1 : -1;
        var atEdge = (going > 0 && bar.scrollLeft + bar.clientWidth >= bar.scrollWidth - 1)
                  || (going < 0 && bar.scrollLeft <= 0);
        if (atEdge) return;
        e.preventDefault();
        bar.scrollLeft += e.deltaY;
    }, { passive: false });

    bar.addEventListener('scroll', updateNav, { passive: true });
    window.addEventListener('resize', updateNav);

    // Persist scroll position across navigations so clicking a chip
    // doesn't snap the bar back to the start.
    var STORAGE_KEY = 'ytFilterBarScroll';
    try {
        var saved = parseInt(sessionStorage.getItem(STORAGE_KEY) || '0', 10);
        if (saved > 0) {
            // Wait a tick so layout is settled and scrollWidth is accurate.
            requestAnimationFrame(function () { bar.scrollLeft = saved; updateNav(); });
        }
    } catch (e) {}

    bar.addEventListener('scroll', function () {
        try { sessionStorage.setItem(STORAGE_KEY, String(bar.scrollLeft)); } catch (e) {}
    }, { passive: true });

    updateNav();
})();

/* ─── SPA chip navigation — no full page reload ─── */
(function () {
    var bar = document.querySelector('.yt-filter-bar');
    if (!bar) return;

    // Only /videos* URLs are handled in-place — trending/shorts render
    // different templates and are cheaper to just navigate to.
    function isSpaUrl(href) {
        try {
            var u = new URL(href, window.location.origin);
            if (u.origin !== window.location.origin) return false;
            return u.pathname.replace(/\/+$/, '') === '/videos';
        } catch (e) { return false; }
    }

    function setActiveChip(url) {
        var target = new URL(url, window.location.origin);
        bar.querySelectorAll('.yt-chip').forEach(function (a) {
            var u;
            try { u = new URL(a.href, window.location.origin); } catch (e) { return; }
            var same = u.pathname === target.pathname && u.search === target.search;
            a.classList.toggle('active', same);
        });
    }

    // No per-image sizing needed — CSS `object-fit: cover` on
    // `.yt-video-thumb img` gives every card the same visible image size.
    function reinitGrid(_root) {}

    var currentReq = 0;
    async function swapTo(url, pushHist) {
        var reqId = ++currentReq;
        var container = document.getElementById('filter-content');
        if (!container) { window.location.href = url; return; }
        container.style.opacity = '0.5';
        try {
            var resp = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'text/html' }, credentials: 'same-origin' });
            if (reqId !== currentReq) return; // a newer click superseded us
            if (!resp.ok) { window.location.href = url; return; }
            var html = await resp.text();
            var doc  = new DOMParser().parseFromString(html, 'text/html');
            var next = doc.getElementById('filter-content');
            if (!next) { window.location.href = url; return; }
            container.innerHTML = next.innerHTML;
            reinitGrid(container);
            setActiveChip(url);
            if (pushHist !== false) history.pushState({ filterUrl: url }, '', url);
            // Update <title> in case the new page has a different one
            var t = doc.querySelector('title');
            if (t) document.title = t.textContent;
            window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
        } catch (e) {
            window.location.href = url;
            return;
        } finally {
            container.style.opacity = '';
        }
    }

    // Delegate: any .yt-chip click within the bar (event delegation survives
    // DOM swaps of the grid, though the bar itself isn't swapped).
    bar.addEventListener('click', function (e) {
        var a = e.target.closest('a.yt-chip');
        if (!a || !bar.contains(a)) return;
        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
        var href = a.getAttribute('href');
        if (!href || !isSpaUrl(href)) return;
        e.preventDefault();
        swapTo(href, true);
    });

    window.addEventListener('popstate', function (e) {
        if (e.state && e.state.filterUrl) swapTo(e.state.filterUrl, false);
    });
})();

/* ─── Cursor-paginated infinite scroll ───────────────────────────────────
   The server renders the first page of 60 cards. Everything after that is
   fetched here, one 24-card page at a time, when the #feed-sentinel scrolls
   into view. The sentinel sits right after the grid, so we never fetch
   until the user has actually scrolled past the first page.

   State lives on #feed-sentinel.dataset so a SPA filter-swap can reset it
   without having to rebind listeners. Fallback: an always-visible "Load
   more" button that users without IntersectionObserver can click. */
(function () {
    const sentinel = document.getElementById('feed-sentinel');
    const grid     = document.querySelector('.yt-video-grid');
    const btnWrap  = document.getElementById('feed-loadmore-wrap');
    const btn      = document.getElementById('feed-loadmore');
    if (!sentinel || !grid) return;

    let cursor = '';     // null token = next request is the first continuation page
    let busy   = false;
    let done   = false;
    const filter = sentinel.dataset.feedFilter || 'all';

    async function loadMore() {
        if (busy || done) return;
        busy = true;
        try {
            const url = new URL("{{ route('videos.feed.more') }}", window.location.origin);
            url.searchParams.set('filter', filter);
            if (cursor) url.searchParams.set('cursor', cursor);
            const resp = await fetch(url.toString(), {
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
                credentials: 'same-origin',
            });
            if (!resp.ok) throw new Error('bad status: ' + resp.status);
            const data = await resp.json();
            if (data.items) {
                grid.insertAdjacentHTML('beforeend', data.items);
            }
            cursor = data.next_cursor || '';
            done   = !data.has_more;
        } catch (e) {
            // Reveal the manual Load More so a flaky network doesn't dead-end the user.
            btnWrap.style.display = 'block';
        } finally {
            busy = false;
            if (done) {
                btnWrap.style.display = 'none';
                sentinel.style.display = 'none';
            }
        }
    }

    btn?.addEventListener('click', loadMore);

    if ('IntersectionObserver' in window) {
        const io = new IntersectionObserver((entries) => {
            if (entries.some(e => e.isIntersecting)) loadMore();
        }, { rootMargin: '400px 0px' });
        io.observe(sentinel);
    } else {
        // No IntersectionObserver → surface the Load More fallback immediately.
        btnWrap.style.display = 'block';
    }
})();
</script>
@endsection