@extends('layouts.examiner')
@section('title', 'Recording — ' . $candidate->reg_no)

@section('content')
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <div>
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-video text-primary mr-2"></i>{{ $candidate->reg_no }}
        </h1>
        <p class="text-muted small mb-0 mt-1">
            {{ $candidate->full_name }}
            @if($candidate->department) &mdash; {{ $candidate->department->name }} @endif
        </p>
    </div>
    <div class="btn-group">
        <a href="{{ route('examiner.recordings.index') }}" class="btn btn-sm btn-secondary">
            <i class="fas fa-arrow-left mr-1"></i> All Recordings
        </a>
        <form method="POST" action="{{ route('examiner.recordings.destroy', $candidate) }}"
              onsubmit="return confirm('Delete this recording? This cannot be undone.')">
            @csrf @method('DELETE')
            <button class="btn btn-sm btn-danger">
                <i class="fas fa-trash-alt mr-1"></i> Delete
            </button>
        </form>
    </div>
</div>

<div class="row">

    {{-- ── Video player ──────────────────────────────────── --}}
    <div class="col-lg-8 mb-4">
        <div class="card shadow">
            <div class="card-body p-3">
                <video id="recordingPlayer" controls
                       src="{{ route('examiner.recordings.stream', $candidate) }}"
                       style="width:100%;border-radius:8px;background:#000;max-height:480px;">
                    Your browser does not support the video element.
                </video>

                <div class="d-flex align-items-center justify-content-between mt-2 flex-wrap" style="gap:.5rem;">
                    <div id="playerStatus" class="small text-muted">
                        Playing: <strong id="playerMode">Full recording</strong>
                        &mdash; {{ $chunks->count() }} segment(s), {{ number_format($chunks->sum('size') / 1048576, 1) }} MB
                    </div>
                    <div class="btn-group btn-group-sm">
                        <button id="btnFull" class="btn btn-outline-primary">
                            <i class="fas fa-film mr-1"></i> Full Recording
                        </button>
                        <button id="btnPrev" class="btn btn-outline-secondary"
                                onclick="var v=document.getElementById('recordingPlayer');v.currentTime=Math.max(0,v.currentTime-10);">
                            <i class="fas fa-step-backward mr-1"></i> &minus;10s
                        </button>
                        <button id="btnNext" class="btn btn-outline-secondary"
                                onclick="document.getElementById('recordingPlayer').currentTime+=10;">
                            +10s <i class="fas fa-step-forward ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Chunk list ────────────────────────────────────── --}}
    <div class="col-lg-4 mb-4">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-list mr-1"></i>
                    Segments
                    <span class="badge badge-primary ml-1">{{ $chunks->count() }}</span>
                </h6>
            </div>
            <div class="card-body p-0" style="max-height:420px;overflow-y:auto;">
                <ul class="list-group list-group-flush" id="chunkList">
                    @foreach($chunks as $chunk)
                    <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center
                                py-2 px-3 chunk-item" style="cursor:pointer;"
                        data-index="{{ $chunk->chunk_index }}"
                        data-url="{{ route('examiner.recordings.segment', [$candidate, $chunk->chunk_index]) }}">
                        <div>
                            <i class="fas fa-film text-muted mr-1 small"></i>
                            <span class="small font-weight-bold">Segment {{ $chunk->chunk_index + 1 }}</span>
                        </div>
                        <div class="text-right">
                            <div class="small text-muted">{{ number_format($chunk->size / 1024, 0) }} KB</div>
                            <div class="text-muted" style="font-size:.68rem;">
                                {{ $chunk->created_at->format('H:i:s') }}
                            </div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
(function () {
    var video       = document.getElementById('recordingPlayer');
    var chunkItems  = document.querySelectorAll('.chunk-item');
    var playerMode  = document.getElementById('playerMode');
    var btnFull     = document.getElementById('btnFull');
    var FULL_SRC    = '{{ route('examiner.recordings.stream', $candidate) }}';
    var mode        = 'full'; // 'full' | 'segment'
    var activeIndex = null;

    function clearHighlight() {
        chunkItems.forEach(function (el) { el.classList.remove('active'); });
    }

    function highlightSegment(idx) {
        chunkItems.forEach(function (el) {
            el.classList.toggle('active', parseInt(el.dataset.index, 10) === idx);
        });
        var active = document.querySelector('.chunk-item.active');
        if (active) active.scrollIntoView({ block: 'nearest' });
    }

    // Click a segment: load and play just that clip, standalone.
    chunkItems.forEach(function (li) {
        li.addEventListener('click', function () {
            var idx = parseInt(li.dataset.index, 10);
            mode = 'segment';
            activeIndex = idx;
            playerMode.textContent = 'Segment ' + (idx + 1);
            video.src = li.dataset.url;
            video.load();
            video.play().catch(function () {});
            highlightSegment(idx);
        });
    });

    // Switch back to the full merged recording.
    btnFull.addEventListener('click', function () {
        mode = 'full';
        activeIndex = null;
        playerMode.textContent = 'Full recording';
        video.src = FULL_SRC;
        video.load();
        video.play().catch(function () {});
        clearHighlight();
    });

    // While playing the full recording, highlight whichever segment the
    // playhead is currently in (rough 5s-per-chunk approximation).
    video.addEventListener('timeupdate', function () {
        if (mode !== 'full') return;
        highlightSegment(Math.floor(video.currentTime / 5));
    });
})();
</script>
@endpush