@extends('layouts.app')

@push('scripts')
{{-- MediaPipe tasks-vision loaded via dynamic import() in training-studio.js --}}
@endpush

@section('content')

<!-- STAGE 1: Pre-Test Briefing & Scenario Screen -->
<div id="briefing_screen" class="main-container" style="max-width: 900px; margin: 0 auto; padding-top: 10px;">
    <div class="page-header" style="margin-bottom: 24px;">
        <div>
            <h1 class="page-title">{{ $training->title }}</h1>
            <p class="page-subtitle" style="display: flex; align-items: center; gap: 8px; margin-top: 6px;">
                <span class="badge-role {{ $training->type === 'ai_avatar' ? 'admin' : 'user' }}">
                    {{ $training->type === 'ai_avatar' ? 'AI Avatar Interactive Mode' : 'Solo Practice Mode' }}
                </span>
                @if($training->difficulty)
                    <span class="mono text-dim" style="font-size: 12px; text-transform: uppercase;">Difficulty: {{ $training->difficulty }}</span>
                @endif
            </p>
        </div>
        <a href="{{ route('trainings.index') }}" class="btn btn-secondary">Exit to Trainings</a>
    </div>

    <!-- Instructions & Guidelines Card -->
    <div class="card" style="margin-bottom: 24px; border: 1px solid var(--border-bright);">
        <h2 class="card-title" style="color: var(--accent); margin-bottom: 12px; font-size: 20px;">
            Pitch Scenario Instructions & Guidelines
        </h2>
        <p style="font-size: 15px; color: var(--white); white-space: pre-wrap; line-height: 1.7; background: var(--muted); padding: 18px; border-radius: 10px; border: 1px solid var(--border);">{{ $training->prompt_text }}</p>

        <div style="margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);">
            <h4 style="font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;">Session Rules & Evaluation Metrics</h4>
            <div class="grid grid-cols-1 md:grid-cols-3" style="gap: 12px;">
                <div style="background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; border: 1px solid var(--border);">
                    <div style="font-weight: 600; font-size: 13px; color: var(--white);">Eye Contact & Expression</div>
                    <div style="font-size: 11px; color: var(--text-dim); margin-top: 4px;">Maintain natural camera alignment and confident posture throughout the pitch.</div>
                </div>
                <div style="background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; border: 1px solid var(--border);">
                    <div style="font-weight: 600; font-size: 13px; color: var(--white);">Speech Cadence & WPM</div>
                    <div style="font-size: 11px; color: var(--text-dim); margin-top: 4px;">Target clear pacing (120–165 WPM) and minimize filler words (um, ah, like).</div>
                </div>
                <div style="background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; border: 1px solid var(--border);">
                    <div style="font-weight: 600; font-size: 13px; color: var(--white);">Interactive AI Dialogue</div>
                    <div style="font-size: 11px; color: var(--text-dim); margin-top: 4px;">Listen to buyer questions and objections; articulate responses clearly.</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Target Buyer Persona Card (If AI Avatar Mode) -->
    @if($training->isAiAvatar())
        <div class="card" style="margin-bottom: 24px; border: 1px solid var(--accent-glow); background: rgba(99, 102, 241, 0.05);">
            <h3 class="card-title" style="color: var(--accent); margin-bottom: 16px;">
                Target Buyer Persona Details
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2" style="gap: 12px;">
                <div style="background: var(--card-solid); padding: 14px; border-radius: 10px; border: 1px solid var(--border);">
                    <div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase;">Buyer Name</div>
                    <div style="font-weight: 700; color: var(--white); font-size: 15px; margin-top: 4px;">{{ $training->client_name ?: 'Target Buyer' }}</div>
                </div>
                <div style="background: var(--card-solid); padding: 14px; border-radius: 10px; border: 1px solid var(--border);">
                    <div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase;">Title / Position</div>
                    <div style="font-weight: 700; color: var(--white); font-size: 15px; margin-top: 4px;">{{ $training->client_title ?: 'Executive Decision Maker' }}</div>
                </div>
            </div>
            @if($training->company_desc)
                <div style="margin-top: 12px; background: var(--card-solid); padding: 14px; border-radius: 10px; border: 1px solid var(--border);">
                    <div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase;">Company Background</div>
                    <div style="font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.5;">{{ $training->company_desc }}</div>
                </div>
            @endif
        </div>
    @endif

    <!-- Start Test Action Button -->
    <div style="text-align: center; margin-top: 28px;">
        <button type="button" class="btn btn-primary" style="padding: 16px 40px; font-size: 18px; font-weight: 700; min-width: 280px; box-shadow: 0 8px 30px var(--accent-glow);" onclick="proceedToLiveStudio()">
            Begin Pitch Session
        </button>
    </div>
</div>


<!-- STAGE 2: Live Pitch Test Screen (Hidden initially) -->
<div id="live_studio_screen" style="display: none;">
    <div class="page-header" style="margin-bottom: 20px;">
        <div>
            <h1 class="page-title" style="font-size: 24px;">{{ $training->title }} — Live Studio</h1>
            <p class="page-subtitle" style="margin-top: 4px;">Interactive AI Buyer Pitch & Real-Time Speech Recognition</p>
        </div>
        <div style="display: flex; gap: 10px;">
            <button id="mic_toggle_btn" class="btn btn-secondary btn-sm" style="background: var(--green); border-color: transparent; color: var(--white); font-weight: 600;" onclick="toggleMic()">
                Mic: On
            </button>
            <button id="stop_btn" class="btn btn-danger btn-sm" onclick="stopPitchSession()">
                Stop & Submit Pitch
            </button>
        </div>
    </div>

    <!-- Side by Side Layout: Left Camera Window, Right AI Avatar Window -->
    <div style="display: flex; gap: 20px; width: 100%; flex-wrap: nowrap; align-items: stretch;">
        
        <!-- SECTION 1: User Camera Video Feed Window with Real-Time Proctoring Overlay -->
        <div class="card" style="flex: 1; position: relative; overflow: hidden; min-height: 520px; display: flex; flex-direction: column; justify-content: space-between; background: #07080c; border: 1px solid var(--border-bright); border-radius: 16px; padding: 0; margin-bottom: 0;">
            <!-- Webcam Video Feed (Mirrored Horizontally for Natural Camera View) -->
            <video id="webcam" autoplay playsinline muted style="width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; opacity: 0.95; filter: brightness(1.04); transform: scaleX(-1);"></video>
            
            <!-- Real-Time MediaPipe Proctoring Mesh Canvas -->
            <canvas id="proctor_canvas" style="width: 100%; height: 100%; position: absolute; top:0; left:0; pointer-events: none; z-index: 10; transform: scaleX(-1);"></canvas>

            <!-- Top HUD Header Overlay (Timer & REC Indicator) -->
            <div style="position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 20; pointer-events: none;">
                <div style="background: rgba(15, 17, 26, 0.88); backdrop-filter: blur(12px); border: 1px solid var(--border-bright); padding: 6px 14px; border-radius: 20px; display: flex; align-items: center; gap: 8px;">
                    <span style="width: 8px; height: 8px; border-radius: 50%; background: var(--red);" id="recording_dot"></span>
                    <span class="mono text-white font-semibold" style="font-size: 14px;" id="timer_display">00:00</span>
                </div>
                <div style="background: rgba(15, 17, 26, 0.88); backdrop-filter: blur(12px); border: 1px solid var(--border-bright); padding: 6px 14px; border-radius: 20px;" class="mono text-dim" style="font-size: 12px;" id="studio_status_badge">
                    Camera Live
                </div>
            </div>

            <!-- PROCTORING OVERLAY: FACE VISIBILITY LOST PAUSE -->
            <div id="visibility_error_overlay" style="display: none; position: absolute; inset: 0; background: rgba(7, 8, 12, 0.88); backdrop-filter: blur(12px); z-index: 30; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center;">
                <div class="card" style="border: 1px solid var(--amber); background: rgba(245, 158, 11, 0.08); max-width: 360px;">
                    <h3 class="mono text-amber" style="font-size: 16px; font-weight: 700; margin-bottom: 8px;">VISIBILITY ERROR</h3>
                    <p style="font-size: 13px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5;">Your face is not clearly visible. The proctoring system requires a clear view of your face to analyze eye contact.</p>
                    <div class="mono text-accent" style="font-size: 12px;">Please align yourself in front of the camera...</div>
                </div>
            </div>

            <!-- PROCTORING OVERLAY: DEVICE CONNECTION LOST PAUSE -->
            <div id="device_error_overlay" style="display: none; position: absolute; inset: 0; background: rgba(7, 8, 12, 0.88); backdrop-filter: blur(12px); z-index: 30; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center;">
                <div class="card" style="border: 1px solid var(--red); background: rgba(239, 68, 68, 0.08); max-width: 360px;">
                    <h3 class="mono text-red" style="font-size: 16px; font-weight: 700; margin-bottom: 8px;">DEVICE LOST</h3>
                    <p style="font-size: 13px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.5;">Webcam or microphone connection was interrupted. Please reconnect device to resume.</p>
                    <button type="button" class="btn btn-primary btn-sm" onclick="initWebcam()">Reconnect & Resume</button>
                </div>
            </div>

            <!-- Bottom Video Proctoring Footer: Original 5-Dot Eye Contact Gauge & Blinks counter -->
            <div style="position: absolute; bottom: 16px; left: 16px; right: 16px; background: var(--card); backdrop-filter: blur(14px); padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border-bright); z-index: 20; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-card);">
                <div style="display: flex; align-items: center; gap: 10px;">
                    <span class="mono text-dim" style="font-size: 10px; font-weight: 700; text-transform: uppercase;">Eye Contact</span>
                    <div id="eye_dots_container" style="display: flex; gap: 4px;">
                        <span class="eye-dot" style="width: 8px; height: 8px; border-radius: 50%; background: var(--green);"></span>
                        <span class="eye-dot" style="width: 8px; height: 8px; border-radius: 50%; background: var(--green);"></span>
                        <span class="eye-dot" style="width: 8px; height: 8px; border-radius: 50%; background: var(--green);"></span>
                        <span class="eye-dot" style="width: 8px; height: 8px; border-radius: 50%; background: var(--green);"></span>
                        <span class="eye-dot" style="width: 8px; height: 8px; border-radius: 50%; background: var(--muted);"></span>
                    </div>
                </div>
                <div class="mono text-dim" style="font-size: 11px;">
                    Blinks: <strong id="live_blinks" style="color: var(--white);">0</strong>
                </div>
            </div>
        </div>

        <!-- SECTION 2: AI Avatar Interactive Window & Live Dialogue Thread -->
        <div class="card" style="flex: 1; display: flex; flex-direction: column; min-height: 520px; background: var(--card-solid); border: 1px solid var(--border-bright); border-radius: 16px; padding: 20px; justify-content: space-between; margin-bottom: 0;">
            
            <!-- AI Avatar Visualizer Header (Siri Orb Centered Overlay) -->
            <div style="background: var(--muted); border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-bottom: 14px;">
                <div class="siri-orb-container" style="padding: 0; margin-bottom: 10px;">
                    <div id="buyer_orb" class="siri-orb" style="width: 68px; height: 68px;"></div>
                </div>
                <div style="font-weight: 700; font-size: 16px; color: var(--white);">{{ $training->client_name ?: 'AI Avatar Buyer' }}</div>
                <div style="font-size: 12px; color: var(--text-dim); margin-top: 2px;">{{ $training->client_title ?: 'Executive Decision Maker' }}</div>
                <div style="display: flex; gap: 8px; margin-top: 8px;">
                    <div id="buyer_status" class="mono text-accent" style="font-size: 10px; padding: 3px 10px; background: rgba(99,102,241,0.1); border-radius: 12px; border: 1px solid rgba(99,102,241,0.2);">
                        Initializing buyer session...
                    </div>
                    <div id="buyer_mood_badge" class="mono" style="font-size: 10px; padding: 3px 10px; background: rgba(16, 185, 129, 0.1); border-radius: 12px; border: 1px solid rgba(16, 185, 129, 0.2); color: var(--green);">
                        MOOD: NEUTRAL
                    </div>
                </div>
            </div>

            <!-- Dialogue History Box: AI Speech Text & User Speech Sub-blocks -->
            <div style="flex-grow: 1; display: flex; flex-direction: column;">
                <div style="font-size: 11px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.05em;" class="mono">
                    Live Dialogue Stream
                </div>

                <div id="dialogue_container" style="flex-grow: 1; max-height: 240px; overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 8px;">
                    <!-- AI Buyer Initial Speech Box -->
                    <div id="ai_speech_box" style="background: rgba(99, 102, 241, 0.12); border-left: 4px solid var(--accent); padding: 12px 14px; border-radius: 10px;">
                        <div style="font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.05em;" class="mono">AI Avatar Speech</div>
                        <div style="font-size: 13px; color: var(--white); line-height: 1.5;">
                            "{{ $training->dialogue_script['greeting'] ?? 'Hello, I am ready to hear your pitch.' }}"
                        </div>
                    </div>
                </div>

                <!-- Live User Active Speech Input Buffer Display -->
                <div id="user_speech_box" style="display: none; background: rgba(16, 185, 129, 0.08); border-left: 4px solid var(--green); padding: 10px 14px; border-radius: 10px; margin-top: 8px;">
                    <div style="font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.05em;" class="mono">Active Voice Input</div>
                    <div id="user_speech_text" style="font-size: 13px; color: var(--white); line-height: 1.5;" class="mono">
                        Waiting for your response...
                    </div>
                </div>

                <!-- Submit Response Action Button -->
                <div style="margin-top: 12px;">
                    <button id="send_response_btn" type="button" class="btn btn-primary" style="width: 100%; justify-content: center; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;" onclick="handleUserResponseSubmit()">
                        Send Response to Buyer
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden Submission Form -->
<form id="submit_form" method="POST" action="{{ route('attempt.submit', $training) }}" style="display: none;">
    @csrf
    <input type="hidden" name="attempt_id" value="{{ $attempt->id }}">
    <input type="hidden" name="transcript" id="form_transcript">
    <input type="hidden" name="duration_sec" id="form_duration">
    <input type="hidden" name="blinks" id="form_blinks">
    <input type="hidden" name="eye_contact_timeline" id="form_eye_contact">
    <input type="hidden" name="movement_timeline" id="form_movement">
    <input type="hidden" name="expression_timeline" id="form_expression">
    <input type="hidden" name="pause_events" id="form_pause">
    <input type="hidden" name="word_count_timeline" id="form_word_count">
    <input type="hidden" name="conversation_history" id="form_conversation">
</form>

<!-- Script JSON Data for JS Engine -->
<script>
    window.TRAINING_DATA = {
        isAiAvatar: {{ $training->isAiAvatar() ? 'true' : 'false' }},
        language: {!! json_encode($training->language ?? 'en') !!},
        script: {!! json_encode($training->dialogue_script) !!},
        voiceName: {!! json_encode($training->voice_name ?: 'af_heart') !!},
        ttsUrl: {!! json_encode(route('attempt.tts', $training)) !!},
        hindiSttUrl: {!! json_encode(route('attempt.hindi_stt', $training)) !!},
        trainingId: {{ $training->id }},
        chatTurnUrl: {!! json_encode(route('attempt.chat_turn', $training)) !!}
    };

    function proceedToLiveStudio() {
        document.getElementById('briefing_screen').style.display = 'none';
        document.getElementById('live_studio_screen').style.display = 'block';
        if (typeof initWebcam === 'function') {
            initWebcam();
        }
        if (typeof startPitchSession === 'function') {
            startPitchSession();
        }
    }

    function handleExitClick(e) {
        if (window.isRecording) {
            return confirm('Recording is active! Are you sure you want to exit without submitting?');
        }
        return true;
    }
</script>

<script src="{{ asset('js/training-studio.js') }}"></script>
@endsection