@props([
    'interview',
])

@if(!empty($interview->candidate_notes) || !empty($interview->interviewer_notes) || !empty($interview->candidate_drawing) || (is_array($interview->formatted_recordings) && count($interview->formatted_recordings) > 0))
<div class="font-outfit text-base font-bold text-slate-900 mb-3 flex items-center gap-2">
    📝 Workspace Artifacts, Evaluation Notes & Call Session Recordings
</div>
<div class="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-7">
    @if(!empty($interview->candidate_notes))
        <div class="text-xs font-bold text-slate-600 mb-1.5 uppercase tracking-wide">
            CANDIDATE NOTEPAD NOTES (UNIQUE ID SYNCED):
        </div>
        <pre class="font-mono text-xs bg-white text-slate-800 p-3 rounded-lg border border-slate-200 mb-3.5 whitespace-pre-wrap">{{ $interview->candidate_notes }}</pre>
    @endif

    @if(!empty($interview->interviewer_notes))
        <div class="text-xs font-bold text-emerald-700 mb-1.5 uppercase tracking-wide">
            INTERVIEWER EVALUATION NOTES (STORED BY UNIQUE ID):
        </div>
        <pre class="font-sans text-xs bg-emerald-50 text-emerald-900 p-3 rounded-lg border border-emerald-200 mb-3.5 whitespace-pre-wrap">{{ $interview->interviewer_notes }}</pre>
    @endif

    @if(!empty($interview->candidate_drawing))
        <div class="text-xs font-bold text-slate-600 mb-1.5 uppercase tracking-wide">
            CANDIDATE DRAWING DIAGRAM:
        </div>
        <img src="{{ $interview->candidate_drawing }}" alt="Candidate Drawing" class="max-w-full max-h-[250px] rounded-lg border border-slate-200 mb-3.5" />
    @endif

    @if(is_array($interview->formatted_recordings) && count($interview->formatted_recordings) > 0)
        <div class="text-xs font-bold text-indigo-700 mb-2 flex justify-between items-center uppercase tracking-wide">
            <span>📹 STORED CALL SESSION RECORDINGS ({{ count($interview->formatted_recordings) }} RECORDINGS):</span>
            <span class="text-[11px] text-slate-400 font-medium">📜 Scroll to view all</span>
        </div>
        <div class="max-h-[480px] overflow-y-auto space-y-3 p-2.5 bg-slate-100/60 rounded-lg border border-slate-200 mb-2">
            @foreach($interview->formatted_recordings as $displayIdx => $rec)
                <div class="bg-white border border-slate-200 rounded-lg p-2.5">
                    <div class="flex justify-between items-center mb-1.5">
                        <span class="text-xs font-bold text-slate-900">Recording #{{ count($interview->formatted_recordings) - $displayIdx }} ({{ $rec['created_at'] }})</span>
                        <a href="{{ $rec['download_url'] }}" download class="text-[11px] text-indigo-600 font-bold hover:underline bg-indigo-50 px-2 py-1 rounded">
                            📥 Download MP4 Video
                        </a>
                    </div>
                    <video controls preload="metadata" class="w-full max-h-[220px] rounded bg-black">
                        <source src="{{ $rec['stream_url'] }}" type="{{ $rec['mime_type'] ?? 'video/webm' }}">
                        <source src="{{ $rec['stream_url'] }}">
                        Your browser does not support video playback.
                    </video>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endif