@extends('layouts.gamification')

@section('title', 'Мой герой')
@section('gami-active', 'hero')

@push('styles')
<style>
    .hero-card {
        background: linear-gradient(135deg, #1E1B4B 0%, #0F172A 60%, #1A1F35 100%);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 28px;
        display: flex;
        align-items: center;
        gap: 24px;
        margin-bottom: 28px;
    }
    .hero-avatar {
        width: 84px; height: 84px;
        border-radius: 50%;
        background: var(--panel);
        border: 2px solid var(--purple-lt);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        flex-shrink: 0;
        overflow: hidden;
    }
    .hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .hero-name { font-size: 22px; font-weight: 800; color: var(--text); }
    .hero-level-badge {
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(124,58,237,0.2); border: 1px solid rgba(124,58,237,0.4);
        color: var(--purple-lt); font-size: 12px; font-weight: 600;
        padding: 3px 10px; border-radius: 20px; margin-top: 6px;
    }
    .hero-progress-wrap { flex: 1; min-width: 200px; }
    .hero-progress-label {
        display: flex; justify-content: space-between;
        font-size: 12px; color: var(--text-dim); margin-bottom: 6px;
    }
    .hero-progress-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
    .hero-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-lt)); border-radius: 4px; transition: width .4s; }
    .hero-coins {
        font-size: 26px; font-weight: 800; color: var(--gold);
        display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    }
    .hero-coins .lbl { font-size: 11px; color: var(--text-dim); font-weight: 500; text-transform: uppercase; }

    /* This page alone opens with a stat row above its first section heading,
       so its titles need top spacing the other gamification pages don't. */
    .sec-title { margin-top: 32px; }

    .hero-stat {
        background: var(--panel);
        border: 1px solid var(--border);
    }
    .hero-stat-value { font-size: 20px; }
    .hero-stat-xp { color: var(--gold); }
    .hero-stat-streak { color: #34D399; }
    .hero-stat-visits { color: #60A5FA; }
    .hero-stat-label { color: var(--text-dim); }

    .hero-panel {
        background: var(--panel);
        border: 1px solid var(--border);
    }

    .history-table { width: 100%; }
    .history-table td { padding: 10px 8px; font-size: 13px; border-bottom: 1px solid #1E293B; color: #CBD5E1; }
    .history-amount-pos { color: #34D399; font-weight: 700; }
    .history-amount-neg { color: #F87171; font-weight: 700; }
    .history-date { width: 120px; color: var(--text-dim); }
    .history-amount-cell { width: 70px; }
    .history-empty { color: var(--text-dim); }
    .history-note { color: var(--text-dim); }
</style>
@endpush

@section('content')

    <div class="hero-card">
        <div class="hero-avatar">
            @if (! empty($hero->avatar) && preg_match('#^(https?://|/)#', $hero->avatar))
                <img src="{{ $hero->avatar }}" alt="avatar">
            @elseif (! empty($hero->avatar))
                {{ $hero->avatar }}
            @else
                🦸
            @endif
        </div>
        <div>
            <div class="hero-name">{{ $hero->name ?? 'Безымянный герой' }}</div>
            <div class="hero-level-badge">⭐ Уровень {{ (int) $hero->level_number }} · {{ $currentLevel->name }}</div>
        </div>

        <div class="hero-progress-wrap">
            <div class="hero-progress-label mono">
                <span>{{ (int) $view['xp_into_level'] }} ⭐</span>
                <span>{{ $nextLevel ? ((int) $view['xp_for_next'].' ⭐') : 'MAX' }}</span>
            </div>
            <div class="hero-progress-track">
                <div class="hero-progress-fill" style="width: {{ (int) $progressPct }}%;"></div>
            </div>
        </div>

        <div class="hero-coins">
            <div>
                <div>{{ (int) $hero->coins_balance }} 🪙</div>
                <div class="lbl">монет</div>
            </div>
        </div>
    </div>

    <div class="row text-center g-2 mb-4">
        <div class="col-4">
            <div class="p-3 rounded hero-stat">
                <div class="mono fw-bold hero-stat-value hero-stat-xp">{{ (int) $hero->xp_total }}</div>
                <div class="small hero-stat-label">всего опыта</div>
            </div>
        </div>
        <div class="col-4">
            <div class="p-3 rounded hero-stat">
                <div class="mono fw-bold hero-stat-value hero-stat-streak">{{ (int) $hero->attendance_streak }}</div>
                <div class="small hero-stat-label">дней подряд</div>
            </div>
        </div>
        <div class="col-4">
            <div class="p-3 rounded hero-stat">
                <div class="mono fw-bold hero-stat-value hero-stat-visits">{{ (int) $hero->total_attendance_days }}</div>
                <div class="small hero-stat-label">всего посещений</div>
            </div>
        </div>
    </div>

    <div class="sec-title">📜 История монет</div>
    <div class="p-2 rounded hero-panel">
        <table class="history-table">
            <tbody>
            @if (empty($coinHistory))
                <tr><td class="text-center history-empty">Пока нет записей</td></tr>
            @endif
            @foreach ($coinHistory as $row)
                <tr>
                    <td class="mono history-date">
                        {{ (new DateTime($row->created_at))->format('d.m.Y H:i') }}
                    </td>
                    <td>{{ $reasonLabels[$row->reason] ?? $row->reason }}
                        @if ($row->description)
                            <span class="history-note">— {{ $row->description }}</span>
                        @endif
                    </td>
                    <td class="text-end mono history-amount-cell {{ $row->amount >= 0 ? 'history-amount-pos' : 'history-amount-neg' }}">
                        {{ ($row->amount >= 0 ? '+' : '').(int) $row->amount }} 🪙
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

@endsection