@extends('layouts.app')

@section('page-header')
<div class="page-header mt-5-7">
    <div class="page-leftheader">
        <h4 class="page-title mb-0">{{ __('Meeting / Internal Audio Capture') }}</h4>
        <ol class="breadcrumb mb-2">
            <li class="breadcrumb-item"><a href="{{route('user.stt.file')}}"><i class="fa fa-magic mr-2 fs-12"></i>{{ __('User') }}</a></li>
            <li class="breadcrumb-item" aria-current="page"><a href="#">{{ __('Speech-to-Text') }}</a></li>
            <li class="breadcrumb-item active" aria-current="page"><a href="#">{{ __('Live Transcribe') }}</a></li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-4 col-md-12 col-sm-12">
        <div class="card border-0 overflow-hidden">
            <div class="card-header">
                <h3 class="card-title">Capture Setup</h3>
            </div>
            <div class="card-body p-5">
                <div class="alert {{ !empty($runtime['missing']) ? 'alert-warning' : 'alert-success' }}">
                    @if (!empty($runtime['missing']))
                        <strong>Runtime belum siap.</strong><br>
                        Meeting capture sudah disiapkan, tapi transkripsi live belum bisa jalan sampai runtime lokal lengkap atau binary server tersedia di PATH.
                    @else
                        <strong>Runtime siap.</strong><br>
                        Browser bisa mulai menangkap audio meeting dan mengirim potongan audio ke runtime lokal <code>{{ $runtime['engine'] ?? 'whisper.cpp' }}</code> pada {{ $runtime['platform'] ?? PHP_OS_FAMILY }}.
                    @endif
                </div>

                <div class="form-group">
                    <label class="font-weight-bold">Bahasa Meeting</label>
                    <select id="live-language" class="form-control">
                        @foreach ($languages as $language)
                            <option value="{{ $language->id }}" @if (auth()->user()->language_live == $language->id || auth()->user()->language_file == $language->id) selected @endif>
                                {{ $language->language }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label class="font-weight-bold">Sumber Capture</label>
                    <select id="capture-source" class="form-control">
                        <option value="screen-audio">Screen / Window / Tab Audio</option>
                        <option value="screen-audio-mic">Screen / Window / Tab Audio + Microphone</option>
                        <option value="microphone">Microphone Only</option>
                    </select>
                    <small class="text-muted d-block mt-2">
                        Untuk Zoom desktop, pilih <strong>Screen / Window / Tab Audio</strong> lalu aktifkan share audio saat prompt browser muncul.
                        Untuk Zoom/Meet di browser, share tab dengan audio biasanya hasilnya paling stabil.
                    </small>
                </div>

                <div class="form-group">
                    <label class="font-weight-bold">Chunk Interval</label>
                    <select id="chunk-seconds" class="form-control">
                        <option value="10">10 detik</option>
                        <option value="15" selected>15 detik</option>
                        <option value="20">20 detik</option>
                        <option value="30">30 detik</option>
                    </select>
                    <small class="text-muted d-block mt-2">
                        Chunk lebih pendek membuat teks muncul lebih cepat. Chunk lebih panjang biasanya sedikit lebih stabil.
                    </small>
                </div>

                <div class="form-group">
                    <label class="font-weight-bold">Project</label>
                    <select id="live-project" class="form-control">
                        <option value="all">All Projects</option>
                        @foreach ($projects as $project)
                            <option value="{{ $project->name }}" @if (auth()->user()->default_project == $project->name) selected @endif>
                                {{ ucfirst($project->name) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3">
                    <div class="small text-muted">Status runtime</div>
                    <div id="live-status" class="font-weight-bold">Menunggu start capture...</div>
                    <div class="small text-muted mt-2">Menit tersedia: <span id="live-available-minutes">{{ number_format((float) auth()->user()->available_minutes, 2) }}</span></div>
                    <div class="small text-muted">Durasi tertangkap: <span id="captured-duration">00:00</span></div>
                </div>

                <div class="d-flex flex-wrap gap-2">
                    <button type="button" id="live-start" class="btn btn-primary mr-2" @if (!empty($runtime['missing'])) disabled @endif>Start Capture</button>
                    <button type="button" id="live-stop" class="btn btn-secondary mr-2" disabled>Stop</button>
                    <button type="button" id="live-save" class="btn btn-success" disabled>Save Transcript</button>
                </div>
            </div>
        </div>

        <div class="card border-0 overflow-hidden">
            <div class="card-header">
                <h3 class="card-title">Checklist runtime lokal</h3>
            </div>
            <div class="card-body">
                @if (!empty($runtime['missing']))
                    <ul class="mb-4">
                        @foreach ($runtime['missing'] as $item)
                            <li>{{ $item }}</li>
                        @endforeach
                    </ul>
                @endif
                <pre class="bg-light p-3 small mb-0">@foreach (($runtime['checklist'] ?? []) as $line){{ $line }}
@endforeach</pre>
            </div>
        </div>
    </div>

    <div class="col-lg-8 col-md-12 col-sm-12">
        <div class="card border-0 overflow-hidden">
            <div class="card-header">
                <h3 class="card-title">Live Transcript Buffer</h3>
            </div>
            <div class="card-body p-5">
                <div class="alert alert-info">
                    Mode ini bekerja dengan cara menangkap audio meeting di browser, memecahnya menjadi potongan kecil,
                    lalu tiap potongan dikirim ke runtime lokal untuk diubah menjadi teks. Browser tetap akan meminta izin share audio,
                    jadi ini bukan capture diam-diam di background.
                </div>

                <textarea id="live-transcript" class="form-control" rows="16" placeholder="Transkrip live akan muncul di sini..." spellcheck="false"></textarea>

                <div class="mt-4">
                    <div class="small text-muted mb-2">Log proses</div>
                    <div id="live-log" class="bg-light border rounded p-3 small" style="min-height: 140px; max-height: 240px; overflow-y: auto;"></div>
                </div>

                <div class="mt-4 d-flex flex-wrap gap-2">
                    <a href="{{ route('user.stt.results.live') }}" class="btn btn-outline-primary mr-2">Buka Live Results</a>
                    <a href="{{ route('user.stt.file') }}" class="btn btn-outline-secondary mr-2">File Transcribe</a>
                    <a href="{{ route('user.stt.record') }}" class="btn btn-outline-secondary">Record Transcribe</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="notificationModal" tabindex="-1" role="dialog" aria-hidden="true" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><i class="fa fa-exclamation-circle color-red"></i> {{ __('Speech-to-Text Notification') }}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body pb-4 pl-6">
                <span id="notificationMessage" class="fs-13"></span>
            </div>
            <div class="modal-footer pr-6">
                <button type="button" class="btn btn-cancel mb-5" data-dismiss="modal">{{ __('Close') }}</button>
            </div>
        </div>
    </div>
</div>

<div
    id="live-config"
    data-runtime-ready="{{ empty($runtime['missing']) ? 'true' : 'false' }}"
    data-live-chunk-url="{{ route('user.stt.transcribe.live.chunk') }}"
    data-live-save-url="{{ route('user.stt.transcribe.live') }}"
    data-live-settings-url="{{ route('user.stt.settings.live') }}"
></div>
@endsection

@section('js')
<script src="{{URL::asset('js/transcribe-live.js')}}"></script>
@endsection