@extends('app')

@section('titulo', $deck->name)

@section('styles')
<style>
    .stats-panel {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 30px;
        border: 1px solid #34495e;
    }

    .elixir-container {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 10px;
    }

    .elixir-drop {
        color: #d35400;
        font-size: 2rem;
        font-weight: bold;
    }

    .progress-bar-bg {
        flex-grow: 1;
        background: #2c3e50;
        height: 20px;
        border-radius: 10px;
        overflow: hidden;
    }

    .progress-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #e67e22, #d35400);
        width: 0%;
        transition: width 1s ease-in-out;
    }

    .final-deck-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        max-width: 600px;
        margin: 0 auto 30px auto;
    }

    .final-deck-grid img {
        width: 100%;
        border-radius: 8px;
        border: 2px solid #1abc9c;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    .analysis-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .role-badge {
        padding: 10px;
        border-radius: 8px;
        background: #34495e;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .check {
        color: #2ecc71;
        font-weight: bold;
    }

    .cross {
        color: #e74c3c;
        font-weight: bold;
    }

    .warning-box {
        background: #c0392b;
        color: white;
        padding: 15px;
        border-radius: 8px;
        margin-top: 20px;
        border-left: 5px solid #e74c3c;
    }
</style>
@endsection

@section('content')

<div class="text-center mb-4">
    <h1 style="color: #f1c40f;">{{ $deck->name }}</h1>
    <p style="color: #bdc3c7;">Creado el {{ $deck->created_at->format('d/m/Y') }}</p>
</div>

<div class="stats-panel">
    <h3>💧 Coste Medio de Elixir</h3>
    <div class="elixir-container">
        <span class="elixir-drop">{{ number_format($deck->average_elixir, 1) }}</span>
        <div class="progress-bar-bg">
            <div class="progress-bar-fill" style="width: {{ ($deck->average_elixir / 5) * 100 }}%"></div>
        </div>
    </div>
    @if($deck->average_elixir > 4.5)
    <small style="color: #e74c3c;"> ¡Cuidado! Es un mazo muy pesado.</small>
    @elseif($deck->average_elixir < 2.8)
        <small style="color: #3498db;"> Es un mazo de ciclo muy rápido.</small>
        @else
        <small style="color: #2ecc71;"> Coste equilibrado.</small>
        @endif
</div>

<h3 class="text-center">Tus Cartas</h3>
<div class="final-deck-grid">
    @foreach($cartas as $carta)
    <div title="{{ $carta['name'] }}">
        <img src="{{ $carta['iconUrls']['medium'] ?? '' }}" alt="{{ $carta['name'] }}">
    </div>
    @endforeach
</div>

<div class="stats-panel">
    <h3>Análisis de Equilibrio</h3>
    <div class="analysis-box">
        <div class="role-badge">
            <span>Tiene Tanque</span>
            <span class="{{ $deck->analysis_result['tiene_tanque'] ? 'check' : 'cross' }}">
                {{ $deck->analysis_result['tiene_tanque'] ? 'SÍ' : 'NO' }}
            </span>
        </div>

        <div class="role-badge">
            <span>Win Condition (Ataque)</span>
            <span class="{{ $deck->analysis_result['tiene_win_condition'] ? 'check' : 'cross' }}">
                {{ $deck->analysis_result['tiene_win_condition'] ? 'SÍ' : 'NO' }}
            </span>
        </div>

        <div class="role-badge">
            <span>Hechizos</span>
            <span class="{{ $deck->analysis_result['tiene_hechizo'] ? 'check' : 'cross' }}">
                {{ $deck->analysis_result['tiene_hechizo'] ? 'SÍ' : 'NO' }}
            </span>
        </div>
    </div>

    @if(!empty($deck->analysis_result['advertencias']))
    <div class="warning-box">
        <img src="{{ asset('img/emote.png') }}" width="100px" height="100px" alt="">
        <h4>Debilidades detectadas:</h4>
        <ul>
            @foreach($deck->analysis_result['advertencias'] as $warning)
            <li>{{ $warning }}</li>
            @endforeach
        </ul>
    </div>
    @else
    <div style="margin-top: 20px; color: #2ecc71; text-align: center; font-weight: bold;">
        <img src="{{ asset('img/ningunaDebilidad.png') }}" width="100px" height="117px" alt=""> <br>¡El mazo parece muy sólido!
    </div>
    @endif
</div>

<div class="text-center" style="margin-top: 30px; display: flex; justify-content: center; gap: 15px;">

    <a href="{{ route('index') }}" class="btn-clash" style="background-color: #7f8c8d; border-bottom-color: #586667;">
        ← Volver
    </a>

    <a href="{{ route('edit', $deck->id) }}" class="btn-clash" style="background-color: #018BF6; border-bottom-color: #005799ff; color: #1c2331;">
        Modificar Mazo
    </a>

</div>

@endsection