@extends('app')

@section('titulo', 'Mis Mazos')

@section('styles')
<style>
    .deck-title {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--text);
        margin: 0;
    }

    .deck-date {
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .elixir-badge {
        background: linear-gradient(135deg, #ff9f00, #ff6f00);
        color: white;
        padding: 8px 12px;
        border-radius: 20px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.95rem;
        box-shadow: 0 4px 15px rgba(255, 159, 0, 0.3);
    }

    .roles-row {
        display: flex;
        gap: 8px;
        margin: 0;
    }

    .mini-badge {
        font-size: 1.5rem;
        opacity: 0.3;
        filter: grayscale(100%);
        transition: all 0.2s;
    }

    .mini-badge.active {
        opacity: 1;
        filter: grayscale(0%);
    }

    .cards-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin: 12px 0;
        border-top: 1px solid var(--border);
        padding-top: 12px;
    }

    .card-img {
        width: 100%;
        border-radius: 6px;
        border: 2px solid var(--primary);
        cursor: pointer;
        transition: all 0.3s;
    }

    .card-img:hover {
        transform: scale(1.05);
        border-color: var(--accent);
        box-shadow: 0 4px 15px var(--shadow);
    }

    .btn-view {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border: none;
        color: white;
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        text-align: center;
        border-radius: 6px;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s;
        display: block;
        margin-top: auto;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);
    }

    .btn-view:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
    }

    .btn-favorite {
        background: linear-gradient(135deg, var(--accent), #ff1493);
        border: none;
        color: white;
        padding: 12px;
        box-sizing: border-box;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 1rem;
        box-shadow: 0 4px 15px rgba(255, 0, 110, 0.2);
    }

    .btn-favorite:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 0, 110, 0.4);
    }

    .btn-delete {
        background: linear-gradient(135deg, var(--danger), #cc1414);
        border: none;
        color: white;
        padding: 12px;
        box-sizing: border-box;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 1rem;
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
    }

    .btn-delete:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    }

    .card-actions {
        display: flex;
        gap: 10px;
        margin-top: auto;
    }

    .card-actions button, .card-actions a {
        flex: 1;
    }

    .empty-state {
        text-align: center;
        margin-top: 80px;
        opacity: 0.8;
    }

    .empty-state h2 {
        font-size: 2rem;
        color: var(--primary);
        margin-bottom: 15px;
    }

    .empty-state p {
        color: var(--text-secondary);
        font-size: 1.1rem;
    }

    .header-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    .header-section h2 {
        font-size: 2rem;
        color: var(--accent);
        margin: 0;
    }

    .pagination {
        justify-content: center;
        display: flex;
        list-style: none;
        gap: 10px;
        margin-top: 30px;
        flex-wrap: wrap;
    }

    .page-item a, .page-item span {
        color: var(--text);
        padding: 8px 12px;
        background: var(--card-bg);
        border-radius: 6px;
        text-decoration: none;
        border: 1px solid var(--border);
        transition: all 0.3s;
    }

    .page-item a:hover {
        background: var(--primary);
        border-color: var(--primary);
    }

    .page-item.active span {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
        border-color: transparent;
    }
</style>
@endsection

@section('content')

<div class="header-section">
    <h2>📚 Biblioteca de Mazos</h2>
    <a href="{{ route('crearMazo') }}" class="btn-clash">➕ Nuevo Mazo</a>
</div>

@if($decks->count() > 0)

    <div class="decks-grid">
        @foreach($decks as $deck)
            <div class="deck-card">

                <div class="deck-header" style="margin-bottom: 10px;">
                    <div>
                        <h3 class="deck-title">{{ $deck->name }}</h3>
                        <span class="deck-date">{{ $deck->created_at->diffForHumans() }}</span>
                    </div>
                </div>

                <div style="display: flex; align-items: center; justify-content: space-between; background: rgba(0, 212, 255, 0.05); padding: 10px; border-radius: 8px; border-left: 4px solid var(--primary);">
                    <div style="text-align: center;">
                        <div class="elixir-badge">💧 {{ number_format($deck->average_elixir, 1) }}</div>
                        <small style="color: var(--text-secondary); font-size: 0.7rem; margin-top: 3px; display: block;">ELIXIR</small>
                    </div>

                    <div class="roles-row">
                        <div class="mini-badge {{ $deck->analysis_result['tiene_tanque'] ? 'active' : '' }}" title="Tanque">🛡️</div>
                        <div class="mini-badge {{ $deck->analysis_result['tiene_win_condition'] ? 'active' : '' }}" title="Win Condition">⚔️</div>
                        <div class="mini-badge {{ $deck->analysis_result['tiene_hechizo'] ? 'active' : '' }}" title="Hechizos">🧪</div>
                        @if(!empty($deck->analysis_result['advertencias']))
                            <div class="mini-badge active" title="Tiene advertencias">⚠️</div>
                        @endif
                    </div>
                </div>

                @if(!empty($deck->cartas) && $deck->cartas->count() > 0)
                    <div class="cards-grid">
                        @foreach($deck->cartas as $carta)
                            <img src="{{ $carta['iconUrls']['medium'] ?? '' }}" alt="{{ $carta['name'] }}" 
                                 class="card-img"
                                 title="{{ $carta['name'] ?? '' }}">
                        @endforeach
                    </div>
                @endif

                <div class="card-actions" style="margin-top: 15px;">
                    <a href="{{ route('show', $deck->id) }}" class="btn-view">🔍 Analizar</a>
                    @auth
                        <button onclick="toggleFavoriteDeck({{ $deck->id }})" class="btn-favorite">❤️</button>
                    @endauth
                    @if(auth()->check() && (auth()->id() === $deck->user_id || auth()->user()->isAdmin()))
                        <form action="{{ route('destroy', $deck->id) }}" method="POST" onsubmit="return confirm('¿Borrar mazo?');" style="flex: 1;">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn-delete" style="width: 100%;">🗑️</button>
                        </form>
                    @endif
                </div>

            </div>
        @endforeach
    </div>

    <div class="mt-4">
        {{ $decks->links() }}
    </div>

@else
    <div class="empty-state">
        <h2>📭</h2>
        <p>Aún no has creado ningún mazo</p>
        <p style="font-size: 0.95rem; color: var(--text-secondary);">¡Ve al creador y diseña tu primera estrategia!</p>
        <br>
        <a href="{{ route('crearMazo') }}" class="btn-clash">➕ Crear Primer Mazo</a>
    </div>
@endif

@endsection

@section('scripts')
<script>
function toggleFavoriteDeck(deckId) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    
    if (!csrfToken) {
        alert('❌ Error: Token de seguridad no encontrado');
        return;
    }

    fetch(`/mazos/${deckId}/favorite`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        }
    })
    .then(response => {
        if (response.status === 401) {
            window.location.href = '/login';
            return;
        }
        if (!response.ok) {
            throw new Error(`Error ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.status === 'added') {
            alert('✅ ¡Mazo agregado a favoritos!');
            location.reload();
        } else if (data.status === 'removed') {
            alert('❌ Mazo removido de favoritos');
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('⚠️ Error: ' + error.message);
    });
}
</script>
@endsection