@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Interactive Simulation Scenarios</h1>
        <p class="page-subtitle">Manage scenario assignments, schedules, and AI persona simulations</p>
    </div>
    <a href="{{ route('admin.trainings.create') }}" class="btn btn-primary">
        + Create Simulation
    </a>
</div>

<div class="grid grid-cols-3">
    @forelse($trainings as $training)
        <div class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
            <div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; flex-wrap: wrap;">
                    <span class="badge-role {{ $training->type === 'ai_avatar' ? 'admin' : 'user' }}">
                        {{ $training->type === 'ai_avatar' ? 'AI Avatar' : 'Solo Practice' }}
                    </span>
                    
                    <span class="badge-role" style="background: {{ $training->status === 'ready' ? 'rgba(16,185,129,0.15)' : ($training->status === 'processing' ? 'rgba(245,158,11,0.15)' : 'rgba(107,114,128,0.15)') }}; color: {{ $training->status === 'ready' ? 'var(--green)' : ($training->status === 'processing' ? 'var(--amber)' : 'var(--text-dim)') }};">
                        {{ strtoupper($training->status) }}
                    </span>
                </div>

                <h3 style="font-size: 17px; font-weight: 700; margin-bottom: 6px;">{{ $training->title }}</h3>
                <p style="font-size: 13px; color: var(--text-dim); margin-bottom: 16px; line-height: 1.5;">
                    {{ Str::limit($training->description ?: $training->prompt_text, 85) }}
                </p>
            </div>

            <div style="border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;" class="mono text-dim font-semibold" style="font-size: 11px;">
                    <span>Assigned Users: {{ $training->assignments_count }}</span>
                </div>
                <div style="display: flex; gap: 8px; flex-direction: column;">
                    @if($training->attempts_count > 0)
                        <a href="{{ route('admin.trainings.attempts', $training) }}" class="btn btn-primary btn-sm" style="width: 100%;">
                            View User Attempts →
                        </a>
                    @endif
                    <a href="{{ route('admin.trainings.show', $training) }}" class="btn btn-secondary btn-sm" style="width: 100%;">
                        Manage & Assign
                    </a>
                </div>
            </div>
        </div>
    @empty
        <div class="card" style="grid-column: 1 / -1; text-align: center; padding: 48px 24px;">
            <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 6px;">No simulations created yet</h3>
            <p style="color: var(--text-dim); font-size: 14px; margin-bottom: 20px;">Create your first interactive session or AI Avatar simulation to get started.</p>
            <a href="{{ route('admin.trainings.create') }}" class="btn btn-primary">Create Your First Simulation</a>
        </div>
    @endforelse
</div>
@endsection