@extends('layouts.app')

@section('title', __('messages.standings') . ' - ' . __('messages.app_name'))
@section('description', __('messages.standings_meta'))

@section('content')
@php
    // Arab leagues IDs
    $arabLeagueIds = [202, 828, 511, 860, 768, 186, 187, 200, 201, 233, 887, 714, 307, 308, 305, 542, 387, 301, 330, 584, 402, 425, 417, 406, 586];
    // European leagues IDs
    $europeanLeagueIds = [2, 3, 848, 39, 40, 140, 141, 61, 62, 78, 79, 135, 136, 94, 88, 144, 203, 204, 197, 207, 179, 283, 333, 235, 106, 345, 119, 113, 103, 210, 286, 547, 556];
    // All leagues ordered
    $allLeagueIds = [
        202, 828, 511,
        2, 3, 848, 4, 5,
        39, 40, 140, 141, 61, 62, 78, 79, 135, 136, 94, 88,
        203, 204, 144, 197, 207, 179, 283, 333, 235, 106, 345,
        119, 113, 103, 210, 286,
        1, 10,
        860, 768, 12, 20, 6, 1043,
        186, 187, 200, 201, 233, 887, 714, 307, 308, 305,
        542, 387, 301, 330, 584, 402, 425, 417, 406, 586,
        547, 556, 71, 128, 253,
    ];

    $leaguesData = [
        1 => ['name' => 'Coupe du monde', 'nameAr' => 'كأس العالم', 'country' => 'World', 'logo' => 'https://pub-480c6c9acfe14a8691b924c7ab9f887d.r2.dev/coupedemonde.png'],
        2 => ['name' => 'UEFA Champions League', 'nameAr' => 'دوري أبطال أوروبا', 'country' => 'Europe'],
        3 => ['name' => 'UEFA Europa League', 'nameAr' => 'الدوري الأوروبي', 'country' => 'Europe'],
        4 => ['name' => 'Euro Championship', 'nameAr' => 'كأس أمم أوروبا', 'country' => 'Europe'],
        5 => ['name' => 'UEFA Nations League', 'nameAr' => 'دوري الأمم الأوروبية', 'country' => 'Europe'],
        6 => ['name' => 'Africa Cup of Nations', 'nameAr' => 'كأس أمم أفريقيا', 'country' => 'Africa'],
        10 => ['name' => 'Friendly International', 'nameAr' => 'مباريات ودية دولية', 'country' => 'World'],
        12 => ['name' => 'CAF Champions League', 'nameAr' => 'دوري أبطال أفريقيا', 'country' => 'Africa'],
        20 => ['name' => 'CAF Confederation Cup', 'nameAr' => 'كأس الكنفدرالية', 'country' => 'Africa'],
        39 => ['name' => 'Premier League', 'nameAr' => 'الدوري الإنجليزي', 'country' => 'England'],
        40 => ['name' => 'Championship', 'nameAr' => 'دوري الدرجة الأولى', 'country' => 'England'],
        61 => ['name' => 'Ligue 1', 'nameAr' => 'الدوري الفرنسي', 'country' => 'France'],
        62 => ['name' => 'Ligue 2', 'nameAr' => 'الدوري الفرنسي الثاني', 'country' => 'France'],
        71 => ['name' => 'Brazil Serie A', 'nameAr' => 'الدوري البرازيلي', 'country' => 'Brazil'],
        78 => ['name' => 'Bundesliga', 'nameAr' => 'الدوري الألماني', 'country' => 'Germany'],
        79 => ['name' => '2. Bundesliga', 'nameAr' => 'الدرجة الثانية الألمانية', 'country' => 'Germany'],
        88 => ['name' => 'Eredivisie', 'nameAr' => 'الدوري الهولندي', 'country' => 'Netherlands'],
        94 => ['name' => 'Primeira Liga', 'nameAr' => 'الدوري البرتغالي', 'country' => 'Portugal'],
        103 => ['name' => 'Eliteserien', 'nameAr' => 'الدوري النرويجي', 'country' => 'Norway'],
        106 => ['name' => 'Ekstraklasa', 'nameAr' => 'الدوري البولندي', 'country' => 'Poland'],
        113 => ['name' => 'Allsvenskan', 'nameAr' => 'الدوري السويدي', 'country' => 'Sweden'],
        119 => ['name' => 'Superliga', 'nameAr' => 'الدوري الدنماركي', 'country' => 'Denmark'],
        128 => ['name' => 'Argentina Liga', 'nameAr' => 'الدوري الأرجنتيني', 'country' => 'Argentina'],
        135 => ['name' => 'Serie A', 'nameAr' => 'الدوري الإيطالي', 'country' => 'Italy'],
        136 => ['name' => 'Serie B', 'nameAr' => 'الدرجة الثانية الإيطالية', 'country' => 'Italy'],
        140 => ['name' => 'La Liga', 'nameAr' => 'الدوري الإسباني', 'country' => 'Spain'],
        141 => ['name' => 'Segunda División', 'nameAr' => 'الدرجة الثانية الإسبانية', 'country' => 'Spain'],
        144 => ['name' => 'Jupiler Pro League', 'nameAr' => 'الدوري البلجيكي', 'country' => 'Belgium'],
        179 => ['name' => 'Scottish Premiership', 'nameAr' => 'الدوري الاسكتلندي', 'country' => 'Scotland'],
        186 => ['name' => 'Algerian Ligue 1', 'nameAr' => 'البطولة الجزائرية', 'country' => 'Algeria'],
        187 => ['name' => 'Algerian Ligue 2', 'nameAr' => 'الرابطة الثانية الجزائرية', 'country' => 'Algeria'],
        197 => ['name' => 'Greece Premier League', 'nameAr' => 'الدوري اليوناني', 'country' => 'Greece'],
        200 => ['name' => 'Botola Pro', 'nameAr' => 'الدوري المغربي', 'country' => 'Morocco'],
        201 => ['name' => 'Botola 2', 'nameAr' => 'القسم الثاني المغربي', 'country' => 'Morocco'],
        202 => ['name' => 'Ligue 1', 'nameAr' => 'الرابطة التونسية', 'country' => 'Tunisia'],
        203 => ['name' => 'Süper Lig', 'nameAr' => 'الدوري التركي', 'country' => 'Turkey'],
        204 => ['name' => '1. Lig', 'nameAr' => 'الدوري التركي الثاني', 'country' => 'Turkey'],
        207 => ['name' => 'Swiss Super League', 'nameAr' => 'الدوري السويسري', 'country' => 'Switzerland'],
        210 => ['name' => 'Croatia HNL', 'nameAr' => 'الدوري الكرواتي', 'country' => 'Croatia'],
        233 => ['name' => 'Egyptian Premier League', 'nameAr' => 'الدوري المصري', 'country' => 'Egypt'],
        235 => ['name' => 'Russian Premier League', 'nameAr' => 'الدوري الروسي', 'country' => 'Russia'],
        253 => ['name' => 'MLS', 'nameAr' => 'الدوري الأمريكي', 'country' => 'USA'],
        283 => ['name' => 'Liga I', 'nameAr' => 'الدوري الروماني', 'country' => 'Romania'],
        286 => ['name' => 'Serbian Super Liga', 'nameAr' => 'الدوري الصربي', 'country' => 'Serbia'],
        301 => ['name' => 'UAE Pro League', 'nameAr' => 'دوري الإمارات', 'country' => 'UAE'],
        305 => ['name' => 'Qatar Stars League', 'nameAr' => 'دوري نجوم قطر', 'country' => 'Qatar'],
        307 => ['name' => 'Saudi Pro League', 'nameAr' => 'دوري روشن', 'country' => 'Saudi Arabia'],
        308 => ['name' => 'Saudi Division 1', 'nameAr' => 'دوري الدرجة الأولى السعودي', 'country' => 'Saudi Arabia'],
        330 => ['name' => 'Kuwait Ligue 1', 'nameAr' => 'الدوري الكويتي', 'country' => 'Kuwait'],
        333 => ['name' => 'Ukrainian Premier League', 'nameAr' => 'الدوري الأوكراني', 'country' => 'Ukraine'],
        345 => ['name' => 'Czech Liga', 'nameAr' => 'الدوري التشيكي', 'country' => 'Czech Republic'],
        387 => ['name' => 'Jordan League', 'nameAr' => 'الدوري الأردني', 'country' => 'Jordan'],
        402 => ['name' => 'Sudanese Premier League', 'nameAr' => 'الدوري السوداني', 'country' => 'Sudan'],
        406 => ['name' => 'Omani Professional League', 'nameAr' => 'الدوري العماني', 'country' => 'Oman'],
        417 => ['name' => 'Bahraini Premier League', 'nameAr' => 'الدوري البحريني', 'country' => 'Bahrain'],
        425 => ['name' => 'Syrian Premier League', 'nameAr' => 'الدوري السوري', 'country' => 'Syria'],
        511 => ['name' => 'Coupe de Tunisie', 'nameAr' => 'كأس تونس', 'country' => 'Tunisia'],
        542 => ['name' => 'Iraqi Premier League', 'nameAr' => 'الدوري العراقي', 'country' => 'Iraq'],
        547 => ['name' => 'Supercoppa Italiana', 'nameAr' => 'كأس السوبر الإيطالي', 'country' => 'Italy'],
        556 => ['name' => 'Super Copa de España', 'nameAr' => 'كأس السوبر الإسباني', 'country' => 'Spain'],
        584 => ['name' => 'Libyan Premier League', 'nameAr' => 'الدوري الليبي', 'country' => 'Libya'],
        586 => ['name' => 'Palestinian Premier League', 'nameAr' => 'الدوري الفلسطيني', 'country' => 'Palestine'],
        714 => ['name' => 'Egypt Cup', 'nameAr' => 'كأس مصر', 'country' => 'Egypt'],
        768 => ['name' => 'Arab Club Champions Cup', 'nameAr' => 'كأس العرب للأندية', 'country' => 'World'],
        828 => ['name' => 'Ligue 2', 'nameAr' => 'الرابطة التونسية 2', 'country' => 'Tunisia'],
        848 => ['name' => 'Conference League', 'nameAr' => 'دوري المؤتمر الأوروبي', 'country' => 'Europe'],
        860 => ['name' => 'FIFA Arab Cup', 'nameAr' => 'كأس العرب', 'country' => 'World'],
        887 => ['name' => 'Egyptian Second Division', 'nameAr' => 'الدرجة الثانية', 'country' => 'Egypt'],
        1043 => ['name' => 'African Football League', 'nameAr' => 'دوري أبطال أفريقيا الجديد', 'country' => 'Africa'],
    ];

    $countryArabic = [
        'World' => 'العالم', 'Brazil' => 'البرازيل', 'Argentina' => 'الأرجنتين', 'USA' => 'أمريكا',
        'Mexico' => 'المكسيك', 'Kuwait' => 'الكويت', 'Libya' => 'ليبيا', 'Croatia' => 'كرواتيا',
        'Greece' => 'اليونان', 'Africa' => 'أفريقيا', 'Tunisia' => 'تونس', 'Europe' => 'أوروبا',
        'England' => 'إنجلترا', 'France' => 'فرنسا', 'Germany' => 'ألمانيا', 'Italy' => 'إيطاليا',
        'Spain' => 'إسبانيا', 'Algeria' => 'الجزائر', 'Morocco' => 'المغرب', 'Egypt' => 'مصر',
        'Qatar' => 'قطر', 'Jordan' => 'الأردن', 'Iraq' => 'العراق', 'Saudi Arabia' => 'السعودية',
        'Netherlands' => 'هولندا', 'Portugal' => 'البرتغال', 'UAE' => 'الإمارات', 'Turkey' => 'تركيا',
        'Belgium' => 'بلجيكا', 'Sudan' => 'السودان', 'Syria' => 'سوريا', 'Bahrain' => 'البحرين',
        'Oman' => 'عمان', 'Palestine' => 'فلسطين', 'Scotland' => 'اسكتلندا', 'Romania' => 'رومانيا',
        'Ukraine' => 'أوكرانيا', 'Russia' => 'روسيا', 'Poland' => 'بولندا', 'Czech Republic' => 'التشيك',
        'Denmark' => 'الدنمارك', 'Sweden' => 'السويد', 'Norway' => 'النرويج', 'Serbia' => 'صربيا',
        'Switzerland' => 'سويسرا',
    ];

    $filter = request()->get('filter');
    if ($filter === 'arab') {
        $displayIds = $arabLeagueIds;
        $sectionTitle = app()->getLocale() === 'ar' ? 'الدوريات العربية' : (app()->getLocale() === 'fr' ? 'Ligues arabes' : 'Arab Leagues');
    } elseif ($filter === 'european') {
        $displayIds = $europeanLeagueIds;
        $sectionTitle = app()->getLocale() === 'ar' ? 'الدوريات الأوروبية' : (app()->getLocale() === 'fr' ? 'Ligues européennes' : 'European Leagues');
    } else {
        $displayIds = $allLeagueIds;
        $sectionTitle = app()->getLocale() === 'ar' ? 'جميع البطولات' : (app()->getLocale() === 'fr' ? 'Toutes les ligues' : 'All Leagues');
    }

    $lang = app()->getLocale();
    $favTitle = $lang === 'ar' ? 'المفضلة' : ($lang === 'fr' ? 'Favoris' : 'Favorites');
@endphp

<div class="max-w-[800px] mx-auto bg-white">

    {{-- ===== Favorites section (hidden if empty, populated by JS) ===== --}}
    <div id="fav-section" class="hidden">
        <div class="flex items-center px-3.5 pt-3 pb-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24">
                <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
            </svg>
            <span class="mr-1.5 ms-1.5 font-bold text-[#1A1A2E]" style="font-size: 13px;">{{ $favTitle }}</span>
        </div>
        <div id="fav-list" class="md:grid md:grid-cols-2 lg:grid-cols-3"></div>
    </div>

    {{-- ===== All leagues section header ===== --}}
    <div class="flex items-center px-3.5 pt-3 pb-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#2e8b6b">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
        <span class="mr-1.5 ms-1.5 font-bold text-[#1A1A2E]" style="font-size: 13px;">{{ $sectionTitle }}</span>
    </div>

    {{-- ===== Leagues list ===== --}}
    <div id="all-list" class="md:grid md:grid-cols-2 lg:grid-cols-3">
        @foreach($displayIds as $id)
            @php
                $data = $leaguesData[$id] ?? null;
                if (!$data) continue;
                $displayName = $lang === 'ar' ? $data['nameAr'] : $data['name'];
                $countryDisplay = $lang === 'ar' ? ($countryArabic[$data['country']] ?? $data['country']) : $data['country'];
                $logo = $data['logo'] ?? "https://media.api-sports.io/football/leagues/{$id}.png";
            @endphp
            <div class="league-item flex items-center px-3 py-1.5 border-b border-[#F0F0F0] hover:bg-gray-50 transition-colors" data-league-id="{{ $id }}">
                {{-- Link area: logo + name + country + chevron --}}
                <a href="{{ route('league.show', $id) }}" class="flex items-center flex-1 min-w-0">
                    {{-- League logo --}}
                    <div class="w-8 h-8 rounded-lg bg-[#F5F5F5] flex items-center justify-center flex-shrink-0 overflow-hidden p-1">
                        <img src="{{ $logo }}" alt="{{ $displayName }}" class="w-full h-full object-contain" loading="lazy">
                    </div>

                    {{-- Name + country --}}
                    <div class="flex-1 min-w-0 ms-2.5">
                        <div class="font-medium text-black/70 line-clamp-1" style="font-size: 12px;">{{ $displayName }}</div>
                        <div class="text-[#6B7280] line-clamp-1" style="font-size: 10px;">{{ $countryDisplay }}</div>
                    </div>
                </a>

                {{-- Star favorite button (separate from link) --}}
                <button type="button" class="fav-btn flex-shrink-0 p-1 hover:scale-110 transition-transform" data-league-id="{{ $id }}" aria-label="Toggle favorite">
                    <svg class="fav-icon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
                        {{-- Default: outline star --}}
                        <path class="star-outline" d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
                        {{-- Filled star (shown when favorited) --}}
                        <path class="star-filled hidden" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                    </svg>
                </button>

                {{-- Chevron --}}
                <a href="{{ route('league.show', $id) }}" class="flex-shrink-0 ms-1 {{ $lang === 'ar' ? 'rotate-180' : '' }}">
                    <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>
                </a>
            </div>
        @endforeach
    </div>

</div>

@push('scripts')
<script>
(function() {
    const STORAGE_KEY = 'favorite_leagues';

    // Load favorites from localStorage
    function loadFavorites() {
        try {
            const raw = localStorage.getItem(STORAGE_KEY);
            return raw ? new Set(JSON.parse(raw)) : new Set();
        } catch (e) {
            return new Set();
        }
    }

    // Save favorites
    function saveFavorites(favs) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(favs)));
    }

    // Update a star button visual state
    function updateStarVisual(btn, isFav) {
        const svg = btn.querySelector('.fav-icon');
        const outline = btn.querySelector('.star-outline');
        const filled = btn.querySelector('.star-filled');
        if (isFav) {
            svg.classList.remove('text-gray-400');
            svg.classList.add('text-amber-400');
            outline.classList.add('hidden');
            filled.classList.remove('hidden');
        } else {
            svg.classList.add('text-gray-400');
            svg.classList.remove('text-amber-400');
            outline.classList.remove('hidden');
            filled.classList.add('hidden');
        }
    }

    // Move favorited items into the favorites section (clone) and hide from main list
    function refreshFavoritesSection() {
        const favs = loadFavorites();
        const favSection = document.getElementById('fav-section');
        const favList = document.getElementById('fav-list');

        favList.innerHTML = '';

        if (favs.size === 0) {
            favSection.classList.add('hidden');
            return;
        }

        favSection.classList.remove('hidden');

        // Clone favorited items from main list into favorites section
        favs.forEach(id => {
            const original = document.querySelector(`#all-list .league-item[data-league-id="${id}"]`);
            if (original) {
                const clone = original.cloneNode(true);
                // Re-bind click on cloned star button
                const cloneBtn = clone.querySelector('.fav-btn');
                if (cloneBtn) {
                    cloneBtn.addEventListener('click', handleStarClick);
                    updateStarVisual(cloneBtn, true);
                }
                favList.appendChild(clone);
            }
        });
    }

    function handleStarClick(e) {
        e.preventDefault();
        e.stopPropagation();
        const btn = e.currentTarget;
        const leagueId = parseInt(btn.dataset.leagueId, 10);
        const favs = loadFavorites();

        if (favs.has(leagueId)) {
            favs.delete(leagueId);
        } else {
            favs.add(leagueId);
        }
        saveFavorites(favs);

        // Update all stars with this league id (main list + favorites section)
        document.querySelectorAll(`.fav-btn[data-league-id="${leagueId}"]`).forEach(b => {
            updateStarVisual(b, favs.has(leagueId));
        });

        refreshFavoritesSection();
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        const favs = loadFavorites();

        // Set initial state for all stars and attach click handlers
        document.querySelectorAll('.fav-btn').forEach(btn => {
            const leagueId = parseInt(btn.dataset.leagueId, 10);
            updateStarVisual(btn, favs.has(leagueId));
            btn.addEventListener('click', handleStarClick);
        });

        refreshFavoritesSection();
    });
})();
</script>
@endpush
@endsection