@extends('app')

@section('titulo', $player ? $player['name'] : 'Buscar Jugador')

@section('styles')
<style>
    .back-link {
        display: inline-block;
        margin-bottom: 20px;
        padding: 10px 20px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
        border-radius: 6px;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s;
        box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);
    }

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

    .player-header {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        padding: 40px 30px;
        border-radius: 12px;
        margin-bottom: 30px;
        text-align: center;
        color: white;
        box-shadow: 0 8px 30px var(--shadow);
    }

    .player-avatar {
        width: 120px;
        height: 120px;
        margin: 0 auto 20px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        border: 4px solid white;
    }

    .player-name {
        font-size: 2.2rem;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .player-tag {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.9);
        font-family: monospace;
        margin-bottom: 20px;
    }

    .player-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 15px;
        margin-top: 25px;
    }

    .stat-box {
        background: rgba(255, 255, 255, 0.15);
        padding: 18px;
        border-radius: 10px;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
    }

    .stat-value {
        font-size: 1.6rem;
        font-weight: bold;
        color: #ffd700;
    }

    .stat-label {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.85);
        margin-top: 5px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .clan-info-box {
        background: var(--card-bg);
        padding: 25px;
        border-radius: 12px;
        border-left: 5px solid var(--accent);
        margin-bottom: 30px;
        box-shadow: 0 4px 15px var(--shadow);
    }

    .clan-title {
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--accent);
        margin-bottom: 20px;
    }

    .clan-details {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }

    .clan-detail {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 0, 110, 0.05));
        padding: 15px;
        border-radius: 8px;
        border-left: 4px solid var(--primary);
    }

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

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

    .no-clan {
        background: linear-gradient(135deg, var(--danger), rgba(239, 68, 68, 0.6));
        color: white;
        padding: 20px;
        border-radius: 8px;
        margin-top: 20px;
        text-align: center;
        font-weight: bold;
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
    }
</style>
@endsection

@section('content')

<a href="{{ route('player') }}" class="back-link">← Volver a Buscador</a>

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

@if($player)
    <div class="player-header">
        <div class="player-avatar">👤</div>
        <div class="player-name">{{ $player['name'] }}</div>
        <div class="player-tag">{{ $player['tag'] }}</div>
        
        <div class="player-stats">
            <div class="stat-box">
                <div class="stat-value">🏆 {{ $player['trophies'] ?? 0 }}</div>
                <div class="stat-label">Trofeos</div>
            </div>
            <div class="stat-box">
                <div class="stat-value">⭐ {{ $player['expLevel'] ?? 1 }}</div>
                <div class="stat-label">Nivel</div>
            </div>
            <div class="stat-box">
                <div class="stat-value">📈 {{ $player['bestTrophies'] ?? 0 }}</div>
                <div class="stat-label">Récord</div>
            </div>
            <div class="stat-box">
                <div class="stat-value">✅ {{ $player['wins'] ?? 0 }}</div>
                <div class="stat-label">Victorias</div>
            </div>
            <div class="stat-box">
                <div class="stat-value">❌ {{ $player['losses'] ?? 0 }}</div>
                <div class="stat-label">Derrotas</div>
            </div>
            <div class="stat-box">
                <div class="stat-value">🤝 {{ $player['draws'] ?? 0 }}</div>
                <div class="stat-label">Empates</div>
            </div>
        </div>
    </div>

    @if($clan)
        <div class="clan-info-box">
            <div class="clan-title">🏰 Clan: {{ $clan['name'] }}</div>
            
            <div class="clan-details">
                <div class="clan-detail">
                    <div class="clan-detail-label">Etiqueta</div>
                    <div class="clan-detail-value">{{ $clan['tag'] }}</div>
                </div>
                <div class="clan-detail">
                    <div class="clan-detail-label">👥 Miembros</div>
                    <div class="clan-detail-value">{{ $clan['members'] }}/50</div>
                </div>
                <div class="clan-detail">
                    <div class="clan-detail-label">🏆 Trofeos</div>
                    <div class="clan-detail-value">{{ number_format($clan['clanScore'] ?? 0) }}</div>
                </div>
                <div class="clan-detail">
                    <div class="clan-detail-label">⚔️ Guerra</div>
                    <div class="clan-detail-value">{{ $clan['clanWarTrophies'] ?? 0 }}</div>
                </div>
                <div class="clan-detail">
                    <div class="clan-detail-label">📊 Nivel</div>
                    <div class="clan-detail-value">{{ $clan['clanLevel'] ?? 'N/A' }}</div>
                </div>
                <div class="clan-detail">
                    <div class="clan-detail-label">📍 Ubicación</div>
                    <div class="clan-detail-value">{{ $clan['location']['name'] ?? 'Global' }}</div>
                </div>
            </div>

            @if(!empty($clan['description']))
                <div style="background: rgba(0, 212, 255, 0.05); padding: 15px; border-radius: 8px; margin-top: 15px; border-left: 4px solid var(--primary);">
                    <div style="color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 1px;">Descripción</div>
                    <div style="color: var(--text); font-size: 0.95rem;">{{ $clan['description'] }}</div>
                </div>
            @endif
        </div>
    @else
        <div class="no-clan">
            👤 Este jugador no está en ningún clan
        </div>
    @endif

@endif

@endsection