@extends('app')

@section('titulo', 'Buscar clan')

@section('styles')
<style>
    .clan-name {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--text);
        margin: 0 0 5px 0;
        word-break: break-word;
    }

    .clan-tag {
        font-size: 0.85rem;
        color: var(--text-secondary);
        font-family: monospace;
    }

    .clan-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .clan-badge {
        width: 70px;
        height: 70px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(0, 212, 255, 0.1);
        padding: 5px;
        border: 2px solid var(--primary);
    }

    .clan-badge img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .clan-info {
        flex: 1;
        margin-left: 15px;
    }

    .clan-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 15px 0;
        font-size: 0.9rem;
    }

    .detail-item {
        padding: 12px;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 0, 110, 0.05));
        border-radius: 6px;
        border-left: 3px solid var(--primary);
    }

    .detail-label {
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        margin-bottom: 3px;
        letter-spacing: 1px;
    }

    .detail-value {
        color: var(--text);
        font-weight: bold;
        font-size: 1.1rem;
    }

    .clan-description {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin: 15px 0;
        padding: 12px;
        background: rgba(0, 212, 255, 0.05);
        border-radius: 6px;
        border-left: 4px solid var(--accent);
        max-height: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .btn-favorite {
        width: 100%;
        padding: 12px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border: none;
        color: white;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
        margin-top: 15px;
        font-size: 1rem;
        box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);
    }

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

    .no-results {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-secondary);
    }

    .no-results h2 {
        font-size: 3rem;
        margin-bottom: 20px;
        color: var(--primary);
    }

    .no-results p {
        font-size: 1rem;
        margin: 10px 0;
    }

    .login-prompt {
        text-align: center;
        color: var(--primary);
        font-size: 0.9rem;
        margin-top: 15px;
    }

    .login-prompt a {
        color: var(--accent);
        font-weight: bold;
        text-decoration: none;
    }

    .login-prompt a:hover {
        text-decoration: underline;
    }
</style>
@endsection

@section('content')

<div style="margin-bottom: 30px;">
    <h1 class="page-title">🏰 Buscador de Clanes</h1>
    <p class="page-subtitle">Encuentra tu próximo clan en Clash Royale</p>
</div>

<div class="search-container">
    <form action="{{ route('clan.search') }}" method="get" class="search-form">
        <input type="text" name="clanTag" placeholder="Nombre o etiqueta del clan..." 
               value="{{ $clanTag ?? '' }}" required>
        <button type="submit">🔍 Buscar</button>
    </form>
</div>

@if($error ?? null)
    <div class="error-message">
        ⚠️ {{ $error }}
    </div>
@endif

@if(!empty($clanes ?? []))
    <div class="clans-grid">
        @foreach($clanes as $clan)
            <div class="clan-card">
                <div class="clan-header">
                    <div class="clan-badge">
                        @if(!empty($clan['badgeId']))
                            <img src="https://api.clashroyale.com/v1/badges/{{ $clan['badgeId'] }}.png" 
                                 alt="{{ $clan['name'] }}" 
                                 title="Badge del clan">
                        @else
                            🏰
                        @endif
                    </div>
                    <div class="clan-info">
                        <h3 class="clan-name">{{ $clan['name'] }}</h3>
                        <div class="clan-tag">{{ $clan['tag'] }}</div>
                    </div>
                </div>

                <div class="clan-details">
                    <div class="detail-item">
                        <div class="detail-label">👥 Miembros</div>
                        <div class="detail-value">{{ $clan['members'] }}/50</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">🏆 Trofeos</div>
                        <div class="detail-value">{{ number_format($clan['clanScore'] ?? 0) }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">⚔️ Guerra</div>
                        <div class="detail-value">{{ $clan['clanWarTrophies'] ?? '0' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">📍 Ubicación</div>
                        <div class="detail-value">{{ $clan['location']['name'] ?? 'Global' }}</div>
                    </div>
                </div>

                @if(!empty($clan['description']))
                    <div class="clan-description">
                        {{ $clan['description'] }}
                    </div>
                @endif

                @auth
                    <button class="btn-favorite" onclick="toggleFavoriteClan('{{ $clan['tag'] }}', '{{ $clan['name'] }}', {{ $clan['members'] }})">
                        {{ $clan['isFavorite'] ?? false ? '❤️ Favorito' : '🤍 Agregar a Favoritos' }}
                    </button>
                @else
                    <div class="login-prompt">
                        <a href="{{ route('login') }}">Inicia sesión</a> para agregar favoritos
                    </div>
                @endauth
            </div>
        @endforeach
    </div>
@elseif(isset($clanTag))
    <div class="no-results">
        <h2>😕</h2>
        <p>No se encontraron clanes</p>
        <p style="font-size: 0.95rem; color: var(--text-secondary);">Intenta con otro nombre o etiqueta</p>
    </div>
@endif

@endsection

@section('scripts')
<script>
function toggleFavoriteClan(clanTag, clanName, clanMembers) {
    const encodedTag = encodeURIComponent(clanTag);
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    
    fetch('/clan/' + encodedTag + '/favorite', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            clanTag: clanTag,
            clanName: clanName,
            clanMembers: clanMembers
        })
    })
    .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('✅ ¡Clan agregado a favoritos!');
            location.reload();
        } else if (data.status === 'removed') {
            alert('❌ Clan removido de favoritos');
            location.reload();
        } else if (data.status === 'error') {
            alert('Error: ' + (data.message || 'Algo salió mal'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al procesar tu solicitud');
    });
}
</script>
@endsection