@extends('layouts.game')

@section('title', 'Crimes')

@section('game-content')
    <div class="max-w-4xl mx-auto space-y-6">

        {{-- Header card --}}
        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
            <div class="px-6 py-4 border-b border-syndicate-700 flex justify-between items-center">
                <h1 class="font-display text-xl font-semibold text-gray-100">Available Crimes</h1>
                <div class="text-sm text-gray-400">
                    Energy: <span class="text-yellow-400 font-medium">{{ $character->energy }}/{{ $character->max_energy }}</span>
                </div>
            </div>

            <div class="p-6">
                @if($availableCrimes->isEmpty())
                    <p class="text-center text-gray-500 py-8 text-sm">No crimes available. Try leveling up or restoring your energy.</p>
                @else
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach($availableCrimes as $crime)
                            @php
                                $onCooldown = $crimeService->isOnCooldown($character, $crime);
                                $cooldownRemaining = $onCooldown ? $crimeService->getCooldownRemaining($character, $crime) : 0;
                                $successRate = $crime->calculateSuccessRate($character);
                            @endphp

                            <div class="bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 rounded-lg p-4 transition">
                                <div class="flex justify-between items-start mb-2">
                                    <div>
                                        <h3 class="font-medium text-gray-100">{{ $crime->name }}</h3>
                                        <p class="text-xs text-gray-500 mt-1">{{ $crime->difficulty_label }} Difficulty</p>
                                    </div>
                                    <span class="text-xs px-2 py-1 rounded-full {{ $crime->difficulty_color }} text-white flex-shrink-0">
                                        {{ number_format($successRate * 100, 1) }}% Success
                                    </span>
                                </div>

                                <p class="text-sm text-gray-400 mb-3">{{ Str::limit($crime->description, 100) }}</p>

                                <div class="grid grid-cols-2 gap-2 text-xs text-gray-400 mb-3">
                                    <div class="flex items-center space-x-1">
                                        <span class="text-yellow-400">⚡</span>
                                        <span>{{ $crime->energy_cost }} Energy</span>
                                    </div>
                                    <div class="flex items-center space-x-1">
                                        <span class="text-gold-400">💰</span>
                                        <span>${{ $crime->reward_min }}-{{ $crime->reward_max }}</span>
                                    </div>
                                    <div class="flex items-center space-x-1">
                                        <span class="text-blue-400">📈</span>
                                        <span>{{ $crime->experience }} EXP</span>
                                    </div>
                                    <div class="flex items-center space-x-1">
                                        <span class="text-gray-500">⏱</span>
                                        <span>{{ $crime->cooldown }}s Cooldown</span>
                                    </div>
                                </div>

                                @if($onCooldown)
                                    <button disabled
                                        class="w-full py-2 px-4 text-sm text-center bg-syndicate-600 text-gray-600 rounded-lg cursor-not-allowed">
                                        On Cooldown ({{ ceil($cooldownRemaining / 60) }}m)
                                    </button>
                                @else
                                    <form action="{{ route('game.crimes.attempt', $crime) }}" method="POST">
                                        @csrf
                                        <button type="submit"
                                            class="w-full py-2 px-4 text-sm text-center bg-crime-600 hover:bg-crime-500 text-white rounded-lg transition">
                                            Attempt Crime
                                        </button>
                                    </form>
                                @endif

                                @if($crime->requires_level)
                                    <p class="text-xs text-gray-600 mt-2">Requires Level {{ $crime->requires_level }}+</p>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        {{-- Recent Attempts --}}
        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
            <div class="px-6 py-4 border-b border-syndicate-700">
                <h3 class="font-display text-lg font-semibold text-gray-100">Recent Attempts</h3>
            </div>
            <div class="p-6">
                @if($recentAttempts->isEmpty())
                    <p class="text-center text-gray-500 py-4 text-sm">No recent crime attempts.</p>
                @else
                    <div class="space-y-2">
                        @foreach($recentAttempts as $attempt)
                            <div class="flex items-center justify-between p-3 bg-syndicate-700 rounded-lg">
                                <div class="flex items-center space-x-3">
                                    <span>
                                        @if($attempt->success)
                                            <span class="text-green-400">✅</span>
                                        @else
                                            <span class="text-red-400">❌</span>
                                        @endif
                                    </span>
                                    <div>
                                        <p class="font-medium text-gray-200 text-sm">{{ $attempt->crime->name }}</p>
                                        <p class="text-xs text-gray-500">{{ $attempt->attempted_at->diffForHumans() }}</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    @if($attempt->success)
                                        <p class="text-sm text-gold-400">+${{ number_format($attempt->reward) }}</p>
                                        <p class="text-xs text-gray-500">+{{ $attempt->experience_gained }} EXP</p>
                                    @else
                                        <p class="text-sm text-red-400">Failed</p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

    </div>
@endsection