@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">{{ $training->title }}</h1>
        <p class="page-subtitle">
            <span class="badge-role {{ $training->type === 'ai_avatar' ? 'admin' : 'user' }}">
                {{ $training->type === 'ai_avatar' ? 'AI Avatar Mode' : 'Solo Practice' }}
            </span>
            @if($training->difficulty)
                <span class="mono text-amber" style="margin-left: 8px;">{{ strtoupper($training->difficulty) }}</span>
            @endif
            <span class="badge-role" style="margin-left: 8px; background: {{ $training->status === 'ready' ? 'rgba(16,185,129,0.2)' : ($training->status === 'processing' ? 'rgba(245,158,11,0.2)' : 'rgba(107,114,128,0.2)') }}; color: {{ $training->status === 'ready' ? 'var(--green)' : ($training->status === 'processing' ? 'var(--amber)' : 'var(--text-dim)') }};">
                Status: {{ strtoupper($training->status) }}
            </span>
            @if($training->scheduled_at)
                <span class="mono" style="font-size: 12px; color: var(--text-dim); margin-left: 12px;">
                    Start: {{ $training->scheduled_at->format('M d, Y h:i A') }}
                </span>
            @endif
            @if($training->expires_at)
                <span class="mono text-red" style="font-size: 12px; margin-left: 8px;">
                    Expires: {{ $training->expires_at->format('M d, Y h:i A') }}
                </span>
            @endif
        </p>
    </div>
    <div style="display: flex; gap: 12px;">
        <a href="{{ route('admin.trainings.assign', $training) }}" class="btn btn-primary">+ Assign Users</a>
        <a href="{{ route('trainings.index') }}" class="btn btn-secondary">Back</a>
    </div>
</div>

<div class="grid grid-cols-3">
    <!-- Main Info Column -->
    <div class="layout-span-2">
        <div class="card">
            <h3 class="card-title" style="margin-bottom: 12px;">Scenario Prompt</h3>
            <p style="white-space: pre-wrap; font-size: 14px; color: var(--text-dim);">{{ $training->prompt_text }}</p>
            
            @if($training->description)
                <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);">
                    <h4 style="font-size: 13px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;">Description</h4>
                    <p style="font-size: 14px;">{{ $training->description }}</p>
                </div>
            @endif
        </div>

        @if($training->isAiAvatar())
            <div class="card">
                <h3 class="card-title" style="margin-bottom: 16px; color: var(--accent);">Pre-Generated AI Avatar Script & Persona</h3>
                
                <div class="mono" style="font-size: 13px; background: var(--muted); padding: 16px; border-radius: 8px; margin-bottom: 16px;">
                    <div><strong>Persona Name:</strong> {{ $training->client_name }} ({{ $training->client_title }})</div>
                    <div><strong>Profile / Organization Context:</strong> {{ $training->company_desc }}</div>
                    <div><strong>Voice Model:</strong> {{ $training->voice_name }}</div>
                </div>

                @if($training->dialogue_script)
                    <h4 style="font-size: 14px; font-weight: 700; margin-bottom: 8px;">Greeting:</h4>
                    <p class="mono" style="font-size: 13px; color: var(--green); margin-bottom: 16px;">
                        "{{ $training->dialogue_script['greeting'] ?? 'No greeting script' }}"
                    </p>

                    <h4 style="font-size: 14px; font-weight: 700; margin-bottom: 8px;">Generated Dialogue Stages & Objections:</h4>
                    @foreach($training->dialogue_script['objections'] ?? [] as $index => $obj)
                        <div style="border: 1px solid var(--border); padding: 12px; border-radius: 6px; margin-bottom: 12px; font-size: 13px;">
                            <div style="color: var(--amber); font-weight: 600;">Stage / Objection {{ $index + 1 }}: {{ $obj['objection'] ?? '' }}</div>
                            <div style="color: var(--text-dim); margin-top: 4px;"><strong>Follow-up Question:</strong> {{ $obj['question'] ?? '' }}</div>
                        </div>
                    @endforeach
                @endif
            </div>
        @endif
    </div>

    <!-- Assigned Users & Attempts Sidebar Column -->
    <div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title" style="font-size: 16px;">Assigned Users ({{ $training->assignments->count() }})</h3>
            </div>
            
            @forelse($training->assignments as $assignment)
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border);">
                    <div>
                        <div style="font-size: 14px; font-weight: 600;">{{ $assignment->user->name }}</div>
                        <div style="font-size: 12px; color: var(--text-dim);">{{ $assignment->user->email }}</div>
                    </div>
                    <form method="POST" action="{{ route('admin.trainings.unassign', [$training, $assignment->user]) }}">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Unassign user?')">Remove</button>
                    </form>
                </div>
            @empty
                <p style="font-size: 13px; color: var(--text-dim);">No users assigned yet.</p>
            @endforelse
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title" style="font-size: 16px;">User Attempts ({{ $training->attempts->count() }})</h3>
            </div>

            @forelse($training->attempts as $attempt)
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border);">
                    <div>
                        <div style="font-size: 13px; font-weight: 600;">{{ $attempt->user->name }}</div>
                        <div style="font-size: 11px; color: var(--text-dim);">
                            Score: <span class="text-accent font-bold">{{ $attempt->overall_score ?: 'N/A' }}/100</span> | {{ $attempt->created_at->diffForHumans() }}
                        </div>
                    </div>
                    <a href="{{ route('attempt.show', $attempt) }}" class="btn btn-secondary btn-sm">Review</a>
                </div>
            @empty
                <p style="font-size: 13px; color: var(--text-dim);">No user attempts submitted yet.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection