@extends('layouts.game')

@section('title', 'Dashboard')

@section('game-content')
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        {{-- Welcome Card --}}
        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-6">
            <h2 class="font-display text-xl font-semibold text-gray-100 mb-4">
                Welcome, {{ $character->name }}!
            </h2>
            <p class="text-gray-400 text-sm">
                You are in <strong class="text-gray-200">{{ $character->location->name ?? 'Unknown Location' }}</strong>.
            </p>
            <p class="text-gray-400 text-sm mt-2">
                Level {{ $character->level }} &mdash; {{ number_format($character->experience) }} / {{ number_format($character->experience_for_next_level) }} EXP
            </p>
            <div class="w-full bg-syndicate-700 rounded-full h-1.5 mt-3">
                <div class="bg-crime-600 h-1.5 rounded-full" style="width: {{ $character->experience_progress }}%"></div>
            </div>
            <p class="text-xs text-gray-600 mt-1">{{ number_format($character->experience_progress, 1) }}% to next level</p>
        </div>

        {{-- Quick Stats --}}
        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-6">
            <h3 class="font-display text-lg font-semibold text-gray-100 mb-4">Quick Stats</h3>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-400">Strength</span>
                    <span class="text-gray-200 font-medium">{{ $character->strength }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-400">Defense</span>
                    <span class="text-gray-200 font-medium">{{ $character->defense }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-400">Speed</span>
                    <span class="text-gray-200 font-medium">{{ $character->speed }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-400">Dexterity</span>
                    <span class="text-gray-200 font-medium">{{ $character->dexterity }}</span>
                </div>
                <div class="flex justify-between pt-2 border-t border-syndicate-700">
                    <span class="text-gray-400">Attack Power</span>
                    <span class="text-crime-400 font-medium">{{ $character->attack_power }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-400">Total Defense</span>
                    <span class="text-blue-400 font-medium">{{ $character->defense }}</span>
                </div>
            </div>
        </div>

        {{-- Nerve --}}
        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-6">
            <h3 class="font-display text-lg font-semibold text-gray-100 mb-4">Nerve</h3>
            <div class="space-y-3">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-400">Available</span>
                    <span class="text-purple-400 font-medium">{{ $character->nerve }} / {{ $character->max_nerve }}</span>
                </div>
                <div class="w-full bg-syndicate-700 rounded-full h-2">
                    <div class="bg-purple-600 h-2 rounded-full transition-all"
                         style="width: {{ $character->nerve_percentage }}%"></div>
                </div>
                <p class="text-xs text-gray-600">
                    Nerve gates crime volume. Recharges over time and fully refills at midnight.
                </p>
                <a href="{{ route('game.gym.index') }}"
                   class="block w-full text-center bg-syndicate-700 hover:bg-syndicate-600 text-gray-300 py-2 px-4 rounded text-sm transition mt-2">
                    Go to Gym
                </a>
            </div>
        </div>

        {{-- Finances --}}
        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-6">
            <h3 class="font-display text-lg font-semibold text-gray-100 mb-4">Finances</h3>
            <div class="space-y-3 text-sm">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2">
                        <span class="text-gold-400">💰</span>
                        <span class="text-gray-400">Cash</span>
                    </div>
                    <span class="text-gold-400 font-medium">${{ number_format($character->money) }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2">
                        <span class="text-blue-400">🏦</span>
                        <span class="text-gray-400">Bank</span>
                    </div>
                    <span class="text-gray-200 font-medium">${{ number_format($character->bank) }}</span>
                </div>
                <div class="pt-2 border-t border-syndicate-700 space-y-2">
                    <a href="#" onclick="event.preventDefault(); document.getElementById('deposit-form').submit();"
                       class="block w-full text-center bg-crime-600 hover:bg-crime-500 text-white py-2 px-4 rounded text-sm transition">
                        Deposit to Bank
                    </a>
                    <form id="deposit-form" action="{{ route('game.character.deposit') }}" method="POST" class="hidden">
                        @csrf
                        <input type="number" name="amount" value="1000" min="1" max="{{ $character->money }}">
                    </form>

                    <a href="#" onclick="event.preventDefault(); document.getElementById('withdraw-form').submit();"
                       class="block w-full text-center bg-syndicate-700 hover:bg-syndicate-600 text-gray-300 py-2 px-4 rounded text-sm transition">
                        Withdraw from Bank
                    </a>
                    <form id="withdraw-form" action="{{ route('game.character.withdraw') }}" method="POST" class="hidden">
                        @csrf
                        <input type="number" name="amount" value="1000" min="1" max="{{ $character->bank }}">
                    </form>
                </div>
            </div>
        </div>

        {{-- Quick Actions --}}
        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-6 lg:col-span-2">
            <h3 class="font-display text-lg font-semibold text-gray-100 mb-4">Quick Actions</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                <a href="{{ route('game.crimes.index') }}"
                   class="flex flex-col items-center justify-center bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 text-gray-300 hover:text-gray-100 py-4 px-2 rounded-lg transition">
                    <span class="text-2xl mb-1">🎯</span>
                    <span class="text-sm font-medium">Crimes</span>
                    <span class="text-xs text-gray-500">Commit crimes</span>
                </a>
                <a href="{{ route('game.inventory.index') }}"
                   class="flex flex-col items-center justify-center bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 text-gray-300 hover:text-gray-100 py-4 px-2 rounded-lg transition">
                    <span class="text-2xl mb-1">🎒</span>
                    <span class="text-sm font-medium">Inventory</span>
                    <span class="text-xs text-gray-500">Manage items</span>
                </a>
                <a href="{{ route('game.character.show') }}"
                   class="flex flex-col items-center justify-center bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 text-gray-300 hover:text-gray-100 py-4 px-2 rounded-lg transition">
                    <span class="text-2xl mb-1">👤</span>
                    <span class="text-sm font-medium">Profile</span>
                    <span class="text-xs text-gray-500">View profile</span>
                </a>
                <a href="{{ route('profile.edit') }}"
                   class="flex flex-col items-center justify-center bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 text-gray-300 hover:text-gray-100 py-4 px-2 rounded-lg transition">
                    <span class="text-2xl mb-1">⚙️</span>
                    <span class="text-sm font-medium">Settings</span>
                    <span class="text-xs text-gray-500">Account settings</span>
                </a>
            </div>
        </div>

        {{-- Recent Activity --}}
        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-6 lg:col-span-3">
            <h3 class="font-display text-lg font-semibold text-gray-100 mb-4">Recent Activity</h3>

            @if($recentActivity->isEmpty())
                <p class="text-gray-500 text-center py-4 text-sm">No recent activity.</p>
            @else
                <div class="space-y-2">
                    @foreach($recentActivity as $activity)
                        <div class="flex items-start space-x-3 p-3 bg-syndicate-700 rounded-lg">
                            <span class="text-gray-500 text-base">
                                @switch($activity->action)
                                    @case('crime_attempt')
                                        @if(str_contains($activity->description, 'success')) ✅ @else ❌ @endif
                                        @break
                                    @case('money_earned') 💰 @break
                                    @case('money_spent') 💸 @break
                                    @case('character_created') 🎉 @break
                                    @default 📝
                                @endswitch
                            </span>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-200">
                                    {{ ucfirst(str_replace('_', ' ', $activity->action)) }}
                                </p>
                                <p class="text-xs text-gray-500">{{ $activity->description }}</p>
                                <p class="text-xs text-gray-600 mt-1">{{ $activity->created_at->diffForHumans() }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

    </div>
@endsection