@extends('layouts.app')

@section('title', __('messages.search') . ' - ' . __('messages.app_name'))

@section('content')
@php $lang = app()->getLocale(); @endphp

<div class="bg-[#F8F9FD] dark:bg-darkBg min-h-screen">

    {{-- ===== SEARCH HEADER (transparent) ===== --}}
    <div class="bg-transparent sticky top-0 z-30">
        <div class="max-w-5xl mx-auto flex items-center gap-3 px-3 py-3">
            {{-- Back --}}
            <button type="button" onclick="if(history.length>1){history.back()}else{location.href='{{ route('home') }}'}" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-100 flex-shrink-0" aria-label="Back">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" class="text-gray-700 {{ $lang === 'ar' ? 'rotate-180' : '' }}">
                    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                </svg>
            </button>
            {{-- Search input (live search — no form submission) --}}
            <div class="flex-1">
                <div class="relative h-9 bg-[#F1F2F7] rounded-[10px] flex items-center ps-4 pe-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px] text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    <input type="text" id="search-input" value="{{ $query }}" placeholder="{{ __('messages.search') }}" autofocus autocomplete="off"
                        class="ms-4 flex-1 bg-transparent text-gray-700 placeholder-gray-400 text-[13px] focus:outline-none">
                    <button type="button" id="search-clear" class="hidden ms-2 text-gray-400 hover:text-gray-600" aria-label="Clear">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-5xl mx-auto py-3">

        {{-- ===== LIVE SEARCH RESULTS (populated by JS) ===== --}}
        <div id="live-results" class="hidden"></div>

        {{-- ===== POPULAR ITEMS (hidden while searching) ===== --}}
        <div id="popular-section">
            {{-- Popular teams (Flutter: width 78px, logo 40x40 no background, text 10px w500 max 1 line) --}}
            <div class="mb-4">
                <h2 class="px-3 font-bold text-gray-900 mb-2" style="font-size: 14px;">{{ __('messages.popular_teams') }}</h2>
                <div class="overflow-x-auto scrollbar-hide">
                    <div class="flex gap-1 px-3">
                        @foreach($popularTeams as $t)
                            <a href="{{ route('team.show', $t['id']) }}" class="flex flex-col items-center flex-shrink-0 pb-1" style="width: 78px;">
                                <div class="w-10 h-10 flex items-center justify-center">
                                    <img src="{{ $t['logo'] }}" alt="" class="w-full h-full object-contain" loading="lazy">
                                </div>
                                <span class="mt-1.5 text-center font-medium text-black/80 truncate w-full" style="font-size: 10px;">{{ $t['name'] }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Popular leagues --}}
            <div class="mb-4">
                <h2 class="px-3 font-bold text-gray-900 mb-2" style="font-size: 14px;">{{ __('messages.popular_leagues') }}</h2>
                <div class="overflow-x-auto scrollbar-hide">
                    <div class="flex gap-1 px-3">
                        @foreach($popularLeagues as $l)
                            <a href="{{ route('league.show', $l['id']) }}" class="flex flex-col items-center flex-shrink-0 pb-1" style="width: 78px;">
                                <div class="w-10 h-10 flex items-center justify-center">
                                    <img src="{{ $l['logo'] }}" alt="" class="w-full h-full object-contain" loading="lazy">
                                </div>
                                <span class="mt-1.5 text-center font-medium text-black/80 truncate w-full" style="font-size: 10px;">{{ $l['name'] }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Popular players (like Flutter) --}}
            @if(!empty($popularPlayers))
            <div class="mb-4">
                <h2 class="px-3 font-bold text-gray-900 mb-2" style="font-size: 14px;">{{ __('messages.popular_players') }}</h2>
                <div class="overflow-x-auto scrollbar-hide">
                    <div class="flex gap-1 px-3">
                        @foreach($popularPlayers as $p)
                            <a href="{{ route('player.show', $p['id']) }}" class="flex flex-col items-center flex-shrink-0 pb-1" style="width: 78px;">
                                <div class="w-10 h-10 flex items-center justify-center">
                                    <img src="{{ $p['logo'] }}" alt="" class="w-full h-full object-contain rounded-full" loading="lazy">
                                </div>
                                <span class="mt-1.5 text-center font-medium text-black/80 truncate w-full" style="font-size: 10px;">{{ $p['name'] }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
        </div>{{-- /popular-section --}}

    </div>
</div>

@push('scripts')
<script>
(function() {
    const input = document.getElementById('search-input');
    const clearBtn = document.getElementById('search-clear');
    const popularSection = document.getElementById('popular-section');
    const liveResults = document.getElementById('live-results');
    const searchUrl = "{{ route('search.ajax') }}";
    const teamUrlBase = "{{ url('/team') }}";
    const leagueUrlBase = "{{ url('/league') }}";
    const newsUrlBase = "{{ url('/news') }}";
    const playerUrlBase = "{{ url('/player') }}";
    const lang = "{{ $lang }}";
    const rtl = lang === 'ar';

    const i18n = {
        teams: "{{ __('messages.teams') }}",
        players: "{{ __('messages.tab_players') }}",
        noResults: "{{ __('messages.no_results') }}",
    };

    let debounceTimer = null;
    let currentController = null;

    function showPopular() {
        popularSection.classList.remove('hidden');
        liveResults.classList.add('hidden');
        liveResults.innerHTML = '';
    }

    function showLoading() {
        popularSection.classList.add('hidden');
        liveResults.classList.remove('hidden');
        liveResults.innerHTML = '<div class="flex items-center justify-center py-16"><div class="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin"></div></div>';
    }

    function escapeHtml(s) {
        if (s == null) return '';
        return String(s)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    function renderResults(data) {
        popularSection.classList.add('hidden');
        liveResults.classList.remove('hidden');

        const teams = data.teams || [];
        const players = data.players || [];

        if (!teams.length && !players.length) {
            liveResults.innerHTML = `
                <div class="flex flex-col items-center justify-center py-16">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="#d1d5db"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
                    <p class="text-gray-500 mt-3" style="font-size: 14px;">${escapeHtml(i18n.noResults)}</p>
                </div>
            `;
            return;
        }

        const arrow = rtl
            ? '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" class="text-gray-400 rotate-180"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>'
            : '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" class="text-gray-400"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>';

        let html = '';

        // Teams
        if (teams.length) {
            html += `<div class="mb-4"><h2 class="px-3 font-bold text-gray-900 mb-2" style="font-size: 14px;">${escapeHtml(i18n.teams)}</h2><div class="bg-white mx-2.5 rounded-xl shadow-sm overflow-hidden">`;
            teams.forEach((t, i) => {
                const border = i < teams.length - 1 ? 'border-b border-[#F0F0F0]' : '';
                html += `
                    <a href="${teamUrlBase}/${t.id}" class="flex items-center gap-3 px-3 py-2.5 ${border} hover:bg-gray-50">
                        <div class="w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden flex-shrink-0 p-1">
                            ${t.logo ? `<img src="${escapeHtml(t.logo)}" alt="" class="w-full h-full object-contain" loading="lazy">` : ''}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="font-semibold text-gray-900 truncate" style="font-size: 13px;">${escapeHtml(t.name)}</div>
                            ${t.country ? `<div class="text-gray-500 truncate" style="font-size: 11px;">${escapeHtml(t.country)}</div>` : ''}
                        </div>
                        ${arrow}
                    </a>
                `;
            });
            html += `</div></div>`;
        }

        // Players
        if (players.length) {
            html += `<div class="mb-4"><h2 class="px-3 font-bold text-gray-900 mb-2" style="font-size: 14px;">${escapeHtml(i18n.players)}</h2><div class="bg-white mx-2.5 rounded-xl shadow-sm overflow-hidden">`;
            players.forEach((p, i) => {
                const border = i < players.length - 1 ? 'border-b border-[#F0F0F0]' : '';
                html += `
                    <a href="${playerUrlBase}/${p.id}" class="flex items-center gap-3 px-3 py-2.5 ${border} hover:bg-gray-50">
                        <div class="w-9 h-9 rounded-full bg-gray-100 overflow-hidden flex-shrink-0">
                            ${p.photo ? `<img src="${escapeHtml(p.photo)}" alt="" class="w-full h-full object-cover" loading="lazy">` : ''}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="font-semibold text-gray-900 truncate" style="font-size: 13px;">${escapeHtml(p.name)}</div>
                            ${p.team_name ? `<div class="flex items-center gap-1 text-gray-500 truncate" style="font-size: 11px;">${p.team_logo ? `<img src="${escapeHtml(p.team_logo)}" alt="" class="w-3.5 h-3.5 object-contain">` : ''}<span class="truncate">${escapeHtml(p.team_name)}</span></div>` : ''}
                        </div>
                        ${arrow}
                    </a>
                `;
            });
            html += `</div></div>`;
        }

        liveResults.innerHTML = html;
    }

    async function performSearch(q) {
        if (currentController) currentController.abort();
        currentController = new AbortController();

        try {
            const res = await fetch(`${searchUrl}?q=${encodeURIComponent(q)}`, {
                signal: currentController.signal,
                headers: { 'Accept': 'application/json' },
            });
            if (!res.ok) throw new Error('HTTP ' + res.status);
            const data = await res.json();
            renderResults(data);
        } catch (e) {
            if (e.name === 'AbortError') return;
            console.error('Search error:', e);
        }
    }

    function onInputChange() {
        const q = input.value.trim();
        clearBtn.classList.toggle('hidden', q.length === 0);

        clearTimeout(debounceTimer);

        if (q.length === 0) {
            showPopular();
            return;
        }
        if (q.length < 3) {
            return;
        }

        showLoading();
        debounceTimer = setTimeout(() => performSearch(q), 400);
    }

    input.addEventListener('input', onInputChange);
    clearBtn.addEventListener('click', () => {
        input.value = '';
        input.focus();
        onInputChange();
    });

    // If URL has ?q= on load, trigger search
    if (input.value.trim().length >= 3) {
        showLoading();
        performSearch(input.value.trim());
    }
})();
</script>
@endpush
@endsection