@extends('user.layouts.app')

@section('title', 'المفضلة')

@php
    $favoritesStyle = $siteConfig['ui']['favorites_style'] ?? 'classic';
    $containerClass = $siteConfig['layout']['container_style'] ?? 'container';
    $headerStyle = $siteConfig['ui']['header_style'] ?? 'default';
@endphp

@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/favorites-' . $favoritesStyle . '.css') }}">
    <style>
        [x-cloak] { display: none !important; }
    </style>
@endsection

@section('content')
    <div class="content-wrapper" x-data="favoritesPage()" x-init="init()">
        <div class="{{ $containerClass }}">

            @if ($headerStyle === 'modern')
                <div class="page-header">
                    <h1>المفضلة</h1>
                </div>
            @else
                <div class="page-header">
                    <h1>المفضلة</h1>
                </div>
            @endif

            {{-- Empty State --}}
            <div x-show="favorites.length === 0" x-cloak class="favorites-empty">
                <div class="favorites-empty__icon">
                    @svg('lucide-heart', ['width' => '48', 'height' => '48'])
                </div>
                <h3 class="favorites-empty__title">لا توجد ألعاب مفضلة</h3>
                <p class="favorites-empty__text">أضف ألعابك المفضلة بالضغط على أيقونة القلب على أي لعبة</p>
                <a href="{{ route('index') }}" class="btn-custom-primary">
                    @svg('lucide-gamepad-2', ['width' => '18', 'height' => '18'])
                    تصفح الألعاب
                </a>
            </div>

            {{-- Favorites Header (when items exist) --}}
            <div x-show="favorites.length > 0" x-cloak class="favorites-header">
                <span class="favorites-header__count" x-text="favorites.length + ' لعبة مفضلة'"></span>
                <button type="button" class="favorites-header__clear" @click="clearAll()">
                    @svg('lucide-trash-2', ['width' => '16', 'height' => '16'])
                    مسح الكل
                </button>
            </div>

            {{-- Favorites Content - Style-specific partial --}}
            <div x-show="favorites.length > 0" x-cloak>
                @include('user.favorites.partials._' . str_replace('-', '-', $favoritesStyle))
            </div>

        </div>
    </div>
@endsection

@section('js')
<script>
function favoritesPage() {
    return {
        favorites: [],

        init() {
            this.loadFavorites();
        },

        loadFavorites() {
            this.favorites = Favorites.getAll();
        },

        removeFavorite(gameId) {
            Favorites.remove(gameId);
            this.loadFavorites();
        },

        clearAll() {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'مسح جميع المفضلات؟',
                    text: 'سيتم حذف جميع الألعاب من قائمة المفضلة',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، احذف الكل',
                    cancelButtonText: 'إلغاء',
                    confirmButtonColor: '#ef4444',
                }).then((result) => {
                    if (result.value) {
                        Favorites.clear();
                        this.loadFavorites();
                    }
                });
            } else {
                if (confirm('هل تريد مسح جميع المفضلات؟')) {
                    Favorites.clear();
                    this.loadFavorites();
                }
            }
        },

        formatDate(timestamp) {
            if (!timestamp) return '';
            var date = new Date(timestamp);
            return date.toLocaleDateString('ar-EG', { year: 'numeric', month: 'short', day: 'numeric' });
        }
    }
}
</script>
@endsection