@props([
    'interview',
])

<aside class="w-[340px] bg-slate-900/90 border-l border-white/10 p-4 flex flex-col gap-4 overflow-y-auto shrink-0 select-none">
    <!-- Candidate Camera Feed -->
    <div id="cand-self-video-box" class="w-full aspect-[16/10] bg-black rounded-xl border-2 border-white/15 overflow-hidden relative shrink-0 transition-all duration-200">
        <video id="webcam" autoplay muted playsinline class="w-full h-full object-cover -scale-x-100"></video>
        <div id="webcam-avatar-placeholder" class="absolute inset-0 hidden flex-col items-center justify-center bg-slate-900 text-white z-10">
            <div class="w-14 h-14 rounded-full bg-gradient-to-br from-indigo-500 to-sky-600 flex items-center justify-center text-xl font-bold font-outfit shadow-lg shadow-indigo-500/40">
                {{ $interview->candidate_initials }}
            </div>
            <div class="text-[11px] text-slate-400 mt-1.5 font-medium">Camera Disabled</div>
        </div>
        <div class="absolute bottom-2 left-2 bg-black/70 px-2 py-0.5 rounded text-[10.5px] text-emerald-400 font-semibold z-10 flex items-center gap-1.5 backdrop-blur-xs">
            <span>Candidate (You)</span>
            <span class="opacity-40">|</span>
            <i id="cand-self-mic-icon" class="fa-solid fa-microphone text-emerald-400 text-[10px]" title="Mic On"></i>
            <i id="cand-self-cam-icon" class="fa-solid fa-video text-emerald-400 text-[10px]" title="Camera On"></i>
        </div>
    </div>

    <!-- Remote Interviewer Panelist Video Grid (Multi-Party WebRTC Mesh) -->
    <div id="interviewer-mesh-grid" class="flex flex-col gap-2.5 w-full">
        <div id="interviewer-placeholder-box" class="w-full aspect-[16/10] bg-black rounded-xl border-2 border-indigo-500/40 overflow-hidden relative shrink-0 transition-all duration-200">
            <video id="interviewer-video-default" autoplay playsinline class="w-full h-full object-cover bg-slate-950 hidden -scale-x-100"></video>
            <div id="interviewer-video-placeholder" class="absolute inset-0 flex flex-col items-center justify-center bg-slate-900/95 text-slate-400 text-xs text-center p-2.5 z-10">
                <div id="interviewer-avatar-circle" class="w-14 h-14 rounded-full bg-gradient-to-br from-sky-400 to-indigo-500 flex items-center justify-center text-xl font-bold font-outfit text-white mb-1.5 shadow-lg shadow-sky-500/30">
                    IV
                </div>
                <div id="call-status-sub" class="text-xs text-slate-200 font-semibold">Interviewer Panel</div>
                <div class="text-[10.5px] text-sky-400 mt-0.5 font-medium">Waiting for interviewer panelist to join call...</div>
            </div>
            <div class="absolute bottom-2 left-2 bg-indigo-600/90 px-2 py-0.5 rounded text-[10.5px] text-white font-semibold z-10 backdrop-blur-xs flex items-center gap-1">
                <i class="fa-solid fa-microphone-lines text-[9px]"></i>
                <span>Interviewer / Panelist</span>
            </div>
        </div>
    </div>

    <!-- Proctor Canvas for Hidden AI Analysis -->
    <canvas id="proctor-canvas" class="hidden" width="320" height="240"></canvas>

    <!-- Candidate Profile Info -->
    <div class="bg-white/[0.03] border border-white/10 rounded-xl p-3.5 text-xs leading-relaxed">
        <div class="font-bold text-white mb-1.5 flex items-center gap-1.5">
            <i class="fa-solid fa-user-tie text-indigo-400"></i>
            <span>Candidate Profile</span>
        </div>
        <div class="text-slate-400">Name: <strong class="text-white">{{ $interview->candidate_name }}</strong></div>
        <div class="text-slate-400">Email: <span class="text-white font-mono text-[11.5px]">{{ $interview->candidate_email }}</span></div>
        <div class="text-slate-400 mt-1.5">Access Expires: <span class="text-red-400 font-semibold">{{ $interview->expires_at->format('H:i:s T') }}</span></div>
    </div>

    <!-- Real-Time Call Controls (Mic, Camera, Screen Sharing) -->
    <div class="bg-indigo-500/10 border border-indigo-500/30 rounded-xl p-3.5">
        <div class="text-xs font-bold text-white mb-2.5 flex items-center justify-between">
            <span class="flex items-center gap-1.5">
                <i class="fa-solid fa-phone text-indigo-400"></i>
                <span>Real-Time Interview Call</span>
            </span>
            <span id="call-status-badge" class="text-[10px] font-bold bg-emerald-500/20 text-emerald-400 px-2 py-0.5 rounded-full">READY</span>
        </div>

        <button type="button" id="candidate-join-active-call-btn" onclick="acceptCandidateCall()" class="hidden w-full p-2.5 mb-2.5 text-xs font-bold bg-gradient-to-r from-emerald-500 to-emerald-600 text-white rounded-lg border-none shadow-lg shadow-emerald-500/30 cursor-pointer animate-pulse">
            <i class="fa-solid fa-phone-volume mr-1.5"></i> Call in Progress &bull; Join Call Now
        </button>

        <div class="flex gap-2 mb-2.5">
            <button type="button" id="toggle-mic-btn" onclick="toggleMic()" class="flex-1 py-2 px-2 text-xs font-semibold rounded-lg bg-emerald-500/20 border-none text-emerald-300 hover:bg-emerald-500/30 transition-all cursor-pointer flex items-center justify-center gap-1.5">
                <i class="fa-solid fa-microphone"></i>
                <span>Mic On</span>
            </button>
            <button type="button" id="toggle-cam-btn" onclick="toggleCam()" class="flex-1 py-2 px-2 text-xs font-semibold rounded-lg bg-emerald-500/20 border-none text-emerald-300 hover:bg-emerald-500/30 transition-all cursor-pointer flex items-center justify-center gap-1.5">
                <i class="fa-solid fa-video"></i>
                <span>Cam On</span>
            </button>
            <button type="button" id="leave-call-btn" onclick="candidateLeaveCall()" class="py-2 px-2.5 text-xs font-semibold rounded-lg bg-red-500/20 border-none text-red-300 hover:bg-red-500/30 transition-all cursor-pointer flex items-center justify-center gap-1" title="Leave 2-Way Call">
                <i class="fa-solid fa-phone-slash"></i>
                <span>Leave</span>
            </button>
        </div>

        <!-- Noise Cancellation Toggle -->
        <button type="button" id="toggle-candidate-noise-btn" onclick="toggleCandidateNoiseSuppression()" class="w-full mb-2.5 py-1.5 px-2 text-xs font-semibold rounded-lg bg-emerald-500/20 border-none text-emerald-300 hover:bg-emerald-500/30 transition-all cursor-pointer flex items-center justify-center gap-1.5" title="Noise Cancellation - Filter background keyboard and fan noise">
            <i class="fa-solid fa-wand-magic-sparkles text-[11px]"></i>
            <span>Noise Cancellation: ON</span>
        </button>

        <button type="button" id="share-screen-btn" onclick="startScreenShare()" class="w-full py-2.5 px-3 text-xs font-bold bg-indigo-500/30  text-white rounded-lg border-none transition-all cursor-pointer flex items-center justify-center gap-1.5">
            <i class="fa-solid fa-desktop"></i>
            <span>Share Screen with Interviewer</span>
        </button>
    </div>

    <!-- 2-Way Real-Time Chat Container with Interviewer/Panelist -->
    <div class="bg-slate-900/80 border border-white/10 rounded-xl p-3">
        <div class="text-xs font-bold text-white mb-2 flex items-center gap-1.5">
            <i class="fa-solid fa-comments text-indigo-400"></i>
            <span>Live Chat with Interviewer</span>
        </div>
        <div id="candidate-chat-history" class="bg-[#050811] border border-white/10 rounded-lg p-2 h-[130px] overflow-y-auto text-xs mb-2 flex flex-col gap-1">
            <div class="text-slate-500 italic text-center pt-10 text-[11px]">No messages yet. Send a message below.</div>
        </div>
        <div class="flex gap-1.5">
            <input type="text" id="candidate-chat-input" placeholder="Type message to panelist..." onkeydown="if(event.key==='Enter') sendCandidateMessage()" class="flex-1 text-xs bg-slate-950 text-white border border-white/10 rounded-lg px-2.5 py-1.5 outline-none focus:border-indigo-500 placeholder-slate-500">
            <x-button type="button" onclick="sendCandidateMessage()" variant="primary" size="sm" icon="fa-solid fa-paper-plane" class="border-none">
                Send
            </x-button>
        </div>
    </div>
</aside>