@extends('layouts.game')

@section('title', 'Gym')

@section('game-content')
    <div class="max-w-3xl mx-auto">

        {{-- Header --}}
        <div class="mb-6">
            <h1 class="font-display text-2xl font-bold text-gray-100 uppercase tracking-widest">Gym</h1>
            <p class="text-gray-500 text-sm mt-1">
                Train your stats. Each session costs {{ $energyCost }} energy. Max {{ $dailyCap }} sessions per stat per day.
            </p>
        </div>

        {{-- Energy warning --}}
        @if($character->energy < $energyCost)
            <div class="mb-4 px-4 py-3 bg-yellow-900/40 border border-yellow-700 text-yellow-400 rounded-lg text-sm">
                You need at least {{ $energyCost }} energy to train. Current energy: {{ $character->energy }}/{{ $character->max_energy }}.
            </div>
        @endif

        {{-- Stat cards --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            @foreach($stats as $stat => $data)
                @php
                    $icons = ['strength' => '💪', 'defense' => '🛡️', 'speed' => '⚡', 'dexterity' => '🎯'];
                    $labels = ['strength' => 'Strength', 'defense' => 'Defense', 'speed' => 'Speed', 'dexterity' => 'Dexterity'];
                    $canTrain = $character->energy >= $energyCost && $data['sessions_remaining'] > 0;
                @endphp
                <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-5">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-2">
                            <span class="text-2xl">{{ $icons[$stat] }}</span>
                            <div>
                                <h2 class="font-display text-base font-semibold text-gray-100">{{ $labels[$stat] }}</h2>
                                <p class="text-xs text-gray-500">Current: <span class="text-crime-400 font-bold">{{ $data['value'] }}</span></p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-xs text-gray-500">Sessions today</p>
                            <p class="text-sm font-medium {{ $data['sessions_remaining'] > 0 ? 'text-gray-300' : 'text-red-400' }}">
                                {{ $data['sessions_today'] }} / {{ $dailyCap }}
                            </p>
                        </div>
                    </div>

                    {{-- Progress bar for daily cap --}}
                    <div class="w-full bg-syndicate-700 rounded-full h-1.5 mb-4">
                        <div class="bg-crime-600 h-1.5 rounded-full transition-all"
                             style="width: {{ $dailyCap > 0 ? ($data['sessions_today'] / $dailyCap) * 100 : 0 }}%"></div>
                    </div>

                    <form method="POST" action="{{ route('game.gym.train') }}">
                        @csrf
                        <input type="hidden" name="stat" value="{{ $stat }}">
                        <button type="submit"
                                @if(!$canTrain) disabled @endif
                                class="w-full py-2 px-4 rounded text-sm font-medium transition
                                       {{ $canTrain
                                          ? 'bg-crime-600 hover:bg-crime-500 text-white'
                                          : 'bg-syndicate-700 text-gray-600 cursor-not-allowed' }}">
                            @if($data['sessions_remaining'] <= 0)
                                Capped for today
                            @elseif($character->energy < $energyCost)
                                Not enough energy
                            @else
                                Train (+1) &mdash; {{ $energyCost }} energy
                            @endif
                        </button>
                    </form>
                </div>
            @endforeach
        </div>

    </div>
@endsection