@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Assigned Training Scenarios</h1>
        <p class="page-subtitle">Welcome back, {{ Auth::user()->name }}! Select a training scenario to practice your pitch.</p>
    </div>
</div>

<div class="grid grid-cols-3">
    @forelse($assignments as $assignment)
        @php 
            $training = $assignment->training;
            $userAttempts = $training->attempts;
            $attemptCount = $userAttempts->count();
            $isLimitReached = $training->max_attempts && $attemptCount >= $training->max_attempts;
            $isExpired = $training->expires_at && now()->gt($training->expires_at);
            
            // Find best graded attempt or highest score
            $gradedAttempts = $userAttempts->whereNotNull('grade');
            $bestGrade = $gradedAttempts->first()?->grade;
            $highestScore = $userAttempts->max('overall_score');
        @endphp

        <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 Pitch' }}
                    </span>

                    @if($bestGrade)
                        <span class="badge-role" style="background: rgba(16,185,129,0.2); color: var(--green); border: 1px solid rgba(16,185,129,0.4); font-size: 12px;">
                            Best Grade: {{ $bestGrade }}
                        </span>
                    @elseif($highestScore)
                        <span class="badge-role" style="background: rgba(99,102,241,0.2); color: var(--accent);">
                            Score: {{ $highestScore }}/100
                        </span>
                    @elseif($isExpired)
                        <span class="badge-role" style="background: rgba(239,68,68,0.15); color: var(--red);">EXPIRED</span>
                    @elseif($training->scheduled_at && now()->lt($training->scheduled_at))
                        <span class="badge-role" style="background: rgba(245,158,11,0.15); color: var(--amber);">SCHEDULED</span>
                    @endif
                </div>

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

                <div class="mono" style="font-size: 11px; color: var(--text-muted); margin-bottom: 16px;">
                    @if($training->scheduled_at)
                        <div>Start: {{ $training->scheduled_at->format('M d, Y h:i A') }}</div>
                    @endif
                    @if($training->expires_at)
                        <div>Expiry: {{ $training->expires_at->format('M d, Y h:i A') }}</div>
                    @endif
                    @if($training->max_attempts)
                        <div>Attempts Taken: {{ $attemptCount }}/{{ $training->max_attempts }}</div>
                    @endif
                </div>
            </div>

            <div>
                @if($isExpired)
                    <button class="btn btn-secondary" style="width: 100%; opacity: 0.6; cursor: not-allowed;" disabled>
                        Training Expired
                    </button>
                @elseif($isLimitReached)
                    <button class="btn btn-secondary" style="width: 100%; opacity: 0.6; cursor: not-allowed;" disabled>
                        Attempt Limit Reached ({{ $attemptCount }}/{{ $training->max_attempts }})
                    </button>
                @elseif($training->scheduled_at && now()->lt($training->scheduled_at))
                    <button class="btn btn-secondary" style="width: 100%; opacity: 0.7; cursor: not-allowed;" disabled>
                        Opens {{ $training->scheduled_at->format('M d, h:i A') }}
                    </button>
                @elseif($training->isAiAvatar() && $training->status !== 'ready')
                    <button class="btn btn-secondary" style="width: 100%; opacity: 0.7; cursor: not-allowed;" disabled>
                        Generating AI Persona...
                    </button>
                @else
                    <a href="{{ route('attempt.start', $training) }}" class="btn btn-primary" style="width: 100%;">
                        Start Pitch Attempt
                    </a>
                @endif

                @if($attemptCount > 0)
                    <div style="margin-top: 10px; border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 10px;">
                        <button class="btn btn-secondary" style="width: 100%; font-size: 13px;" onclick="const el = document.getElementById('attempts-list-{{ $training->id }}'); el.style.display = el.style.display === 'none' ? 'flex' : 'none';">
                            View Past Attempts ({{ $attemptCount }})
                        </button>
                        <div id="attempts-list-{{ $training->id }}" style="display: none; flex-direction: column; gap: 6px; background: rgba(0,0,0,0.3); padding: 8px; border-radius: 6px; margin-top: 8px;">
                            @foreach($userAttempts->sortByDesc('created_at')->values() as $index => $att)
                                <a href="{{ route('attempt.show', $att) }}" class="mono" style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-dim); text-decoration: none; padding: 6px 8px; border-radius: 4px; background: rgba(255,255,255,0.02); transition: background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.06)'" onmouseout="this.style.background='rgba(255,255,255,0.02)'">
                                    <span>Attempt #{{ $attemptCount - $index }} · {{ $att->overall_score ?? 'N/A' }} pts</span>
                                    <span style="color: var(--accent); font-weight: 600;">Review</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </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 assigned</h3>
            <p style="color: var(--text-dim); font-size: 14px;">You have no active pitch training assignments at this moment.</p>
        </div>
    @endforelse
</div>
@endsection