@php
    $business = $call->assignment->business ?? null;
    $canStartCall = (int) $call->mystery_shopper_id === (int) auth()->id();
    $startUrl = route('platform.voice.calls.start', $call->id);
    $historyUrl = route('platform.voice.calls.history', $call->id);
@endphp

<style>
    .voice-call-panel { border: 1px solid #d9e3f1; border-radius: 14px; background: #f8fbff; padding: 16px; margin-bottom: 20px; }
    .voice-call-panel__head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
    .voice-call-panel__title { font-size:17px; font-weight:700; color:#1f2d4d; }
    .voice-call-panel__status { min-height:22px; color:#61708b; font-size:13px; margin-top:8px; }
    .voice-call-history { width:100%; margin-top:14px; font-size:13px; }
    .voice-call-history th,.voice-call-history td { padding:8px; border-bottom:1px solid #e4ebf5; vertical-align:middle; }
    .voice-call-history th { color:#61708b; font-weight:700; }
    .voice-call-empty { color:#61708b; padding:12px 0 0; }
</style>

<section class="voice-call-panel" id="voice-call-panel"
    data-start-url="{{ $startUrl }}"
    data-history-url="{{ $historyUrl }}">
    <div class="voice-call-panel__head">
        <div>
            <div class="voice-call-panel__title">Calling</div>
            <div class="text-muted small">Start a recorded call to {{ $business->phone ?? 'the business number' }}. Completing a call does not submit this assessment.</div>
        </div>
        @if($canStartCall)
            <button type="button" class="btn btn-primary" id="start-voice-call">Start Call</button>
        @endif
    </div>
    <div id="voice-call-status" class="voice-call-panel__status" aria-live="polite"></div>
    <div id="voice-call-history"></div>
</section>

<script>
(() => {
    const panel = document.getElementById('voice-call-panel');
    const button = document.getElementById('start-voice-call');
    const status = document.getElementById('voice-call-status');
    const history = document.getElementById('voice-call-history');
    if (!panel) return;

    const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    const esc = (value) => String(value ?? '').replace(/[&<>"']/g, (char) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[char]));
    const duration = (seconds) => {
        if (!seconds) return '—';
        const m = Math.floor(seconds / 60); const s = String(seconds % 60).padStart(2, '0');
        return `${m}:${s}`;
    };
    const loadScript = (src) => new Promise((resolve, reject) => {
        if (!src) return resolve();
        if (document.querySelector(`script[src="${src}"]`)) return resolve();
        const script = document.createElement('script'); script.src = src; script.onload = resolve; script.onerror = reject;
        document.head.appendChild(script);
    });
    const renderHistory = (calls) => {
        if (!calls.length) { history.innerHTML = '<div class="voice-call-empty">No call attempts yet.</div>'; return; }
        history.innerHTML = `<table class="voice-call-history"><thead><tr><th>Attempt</th><th>Status</th><th>Duration</th><th>Recording</th></tr></thead><tbody>${calls.map((call) => `<tr><td>${esc(call.attempt_number)}</td><td>${esc(call.status)}</td><td>${duration(call.duration_seconds)}</td><td>${call.recording_url ? `<audio controls preload="none" style="max-width:190px"><source src="${esc(call.recording_url)}" type="audio/mpeg"></audio>` : '—'}</td></tr>`).join('')}</tbody></table>`;
    };
    const refreshHistory = async () => {
        const response = await fetch(panel.dataset.historyUrl, {headers: {'Accept':'application/json'}});
        if (response.ok) renderHistory((await response.json()).voice_calls || []);
    };
    const start = async () => {
        button.disabled = true; status.textContent = 'Preparing call…';
        try {
            const response = await fetch(panel.dataset.startUrl, {method:'POST', headers:{'Accept':'application/json','X-CSRF-TOKEN':csrf}});
            const body = await response.json();
            if (!response.ok) throw new Error(body.message || 'Could not start the call.');
            const session = body.session;
            await loadScript(session.client_library_url);
            await loadScript(session.client_adapter_url);
            const client = window.VoiceProviderClients?.[session.driver];
            if (!client) throw new Error('The configured calling client is unavailable.');
            status.textContent = `Attempt ${body.voice_call.attempt_number} is connecting…`;
            await client.connect(session, () => { status.textContent = 'Call ended. Recording processing may take a moment.'; refreshHistory(); });
            await refreshHistory();
        } catch (error) {
            status.textContent = error.message || 'Unable to start the call.';
            await refreshHistory();
        } finally { button.disabled = false; }
    };
    if (button) button.addEventListener('click', start);
    refreshHistory();
    window.setInterval(refreshHistory, 15000);
})();
</script>