{{--
    Shared action modals for call recordings:
      • Download — requires a reason (logged for privacy) before the file downloads.
      • Email    — sends the recording to one or more addresses (gated + logged).
    Exposes window.RecActions.download(url) and window.RecActions.email(url, label).
--}}

{{-- ── Download reason modal ── --}}
<div id="recReasonBackdrop" style="display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1080;"></div>
<div id="recReasonModal" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1081;width:440px;max-width:94vw;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(15,23,42,.3);overflow:hidden;">
    <div style="padding:16px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:8px;">
        <span style="font-size:1.1rem;">⬇️</span>
        <div style="font-size:.95rem;font-weight:800;color:#0f172a;">Download recording</div>
    </div>
    <div style="padding:18px 20px;">
        <p style="font-size:.82rem;color:#64748b;margin:0 0 12px;line-height:1.5;">
            Downloading a call recording is recorded for privacy and compliance.
            Please give a brief reason for this download.
        </p>
        <label style="font-size:.72rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.04em;">Reason</label>
        <textarea id="recReasonText" rows="3" class="form-control mt-1" placeholder="e.g. Quality review for ticket #4821" style="font-size:.85rem;"></textarea>
        <div id="recReasonErr" style="display:none;font-size:.76rem;color:#dc2626;margin-top:6px;">Please enter a reason (at least 3 characters).</div>
    </div>
    <div style="padding:12px 20px;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end;gap:8px;">
        <button type="button" id="recReasonCancel" class="btn btn-outline-secondary btn-sm">Cancel</button>
        <button type="button" id="recReasonConfirm" class="btn btn-primary btn-sm px-3">Download</button>
    </div>
</div>

@canAccess('recordings.email')
{{-- ── Email modal ── --}}
<div id="recEmailBackdrop" style="display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1080;"></div>
<div id="recEmailModal" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1081;width:480px;max-width:94vw;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(15,23,42,.3);overflow:hidden;">
    <div style="padding:16px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:8px;">
        <span style="font-size:1.1rem;">📧</span>
        <div>
            <div style="font-size:.95rem;font-weight:800;color:#0f172a;">Email recording</div>
            <div id="recEmailLabel" style="font-size:.74rem;color:#94a3b8;"></div>
        </div>
    </div>
    <div style="padding:18px 20px;">
        <label style="font-size:.72rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.04em;">Send to</label>
        <input type="text" id="recEmailTo" class="form-control mt-1 mb-3" placeholder="name@company.co.za, another@company.co.za" style="font-size:.85rem;">

        <label style="font-size:.72rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.04em;">Reason for sharing</label>
        <input type="text" id="recEmailReason" class="form-control mt-1 mb-3" placeholder="e.g. Sharing with client for confirmation" style="font-size:.85rem;">

        <label style="font-size:.72rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.04em;">Message <span style="font-weight:500;color:#94a3b8;text-transform:none;">(optional)</span></label>
        <textarea id="recEmailMessage" rows="3" class="form-control mt-1" placeholder="Add a short note for the recipient…" style="font-size:.85rem;"></textarea>

        <div style="font-size:.74rem;color:#94a3b8;margin-top:10px;display:flex;align-items:center;gap:6px;">
            🔒 The recipients, reason and sender are recorded in the audit log.
        </div>
        <div id="recEmailErr" style="display:none;font-size:.76rem;color:#dc2626;margin-top:8px;"></div>
        <div id="recEmailOk"  style="display:none;font-size:.78rem;color:#16a34a;margin-top:8px;"></div>
    </div>
    <div style="padding:12px 20px;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end;gap:8px;">
        <button type="button" id="recEmailCancel" class="btn btn-outline-secondary btn-sm">Cancel</button>
        <button type="button" id="recEmailSend" class="btn btn-primary btn-sm px-3">Send Email</button>
    </div>
</div>
@endcanAccess

@push('plugin-scripts')
<script>
(function () {
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';

    // ── Download reason ──
    const dBackdrop = document.getElementById('recReasonBackdrop');
    const dModal    = document.getElementById('recReasonModal');
    const dText     = document.getElementById('recReasonText');
    const dErr      = document.getElementById('recReasonErr');
    let   dUrl      = null;

    function openDownload(url) {
        dUrl = url;
        dText.value = '';
        dErr.style.display = 'none';
        dBackdrop.style.display = 'block';
        dModal.style.display = 'block';
        setTimeout(() => dText.focus(), 50);
    }
    function closeDownload() {
        dBackdrop.style.display = 'none';
        dModal.style.display = 'none';
        dUrl = null;
    }
    document.getElementById('recReasonCancel').addEventListener('click', closeDownload);
    dBackdrop.addEventListener('click', closeDownload);
    document.getElementById('recReasonConfirm').addEventListener('click', function () {
        const reason = (dText.value || '').trim();
        if (reason.length < 3) { dErr.style.display = 'block'; return; }
        const sep = dUrl.includes('?') ? '&' : '?';
        const target = dUrl + sep + 'reason=' + encodeURIComponent(reason);
        closeDownload();
        window.location.href = target; // triggers the browser download
    });

    // ── Email ──
    const eBackdrop = document.getElementById('recEmailBackdrop');
    const eModal    = document.getElementById('recEmailModal');
    const eLabel    = document.getElementById('recEmailLabel');
    const eTo       = document.getElementById('recEmailTo');
    const eReason   = document.getElementById('recEmailReason');
    const eMsg      = document.getElementById('recEmailMessage');
    const eErr      = document.getElementById('recEmailErr');
    const eOk       = document.getElementById('recEmailOk');
    const eSend     = document.getElementById('recEmailSend');
    let   eUrl      = null;

    function openEmail(url, label) {
        if (!eModal) { alert('You do not have permission to email recordings.'); return; }
        eUrl = url;
        eLabel.textContent = label || '';
        eTo.value = ''; eReason.value = ''; eMsg.value = '';
        eErr.style.display = 'none'; eOk.style.display = 'none';
        eSend.disabled = false; eSend.textContent = 'Send Email';
        eBackdrop.style.display = 'block';
        eModal.style.display = 'block';
        setTimeout(() => eTo.focus(), 50);
    }
    function closeEmail() {
        if (!eModal) return;
        eBackdrop.style.display = 'none';
        eModal.style.display = 'none';
        eUrl = null;
    }
    if (eModal) {
        document.getElementById('recEmailCancel').addEventListener('click', closeEmail);
        eBackdrop.addEventListener('click', closeEmail);
        eSend.addEventListener('click', async function () {
            eErr.style.display = 'none'; eOk.style.display = 'none';
            const to = (eTo.value || '').trim();
            const reason = (eReason.value || '').trim();
            if (!to)            { eErr.textContent = 'Please enter at least one email address.'; eErr.style.display = 'block'; return; }
            if (reason.length < 3) { eErr.textContent = 'Please enter a reason for sharing.'; eErr.style.display = 'block'; return; }

            eSend.disabled = true; eSend.textContent = 'Sending…';
            try {
                const fd = new FormData();
                fd.append('_token', csrf);
                fd.append('to', to);
                fd.append('reason', reason);
                fd.append('message', eMsg.value || '');
                const res = await fetch(eUrl, { method: 'POST', body: fd, headers: { Accept: 'application/json' } });
                const data = await res.json().catch(() => ({}));
                if (res.ok && data.ok) {
                    eOk.textContent = data.message || 'Recording emailed.';
                    eOk.style.display = 'block';
                    setTimeout(closeEmail, 1600);
                } else {
                    eErr.textContent = data.error || 'The email could not be sent.';
                    eErr.style.display = 'block';
                    eSend.disabled = false; eSend.textContent = 'Send Email';
                }
            } catch (e) {
                eErr.textContent = 'The email could not be sent. Please try again.';
                eErr.style.display = 'block';
                eSend.disabled = false; eSend.textContent = 'Send Email';
            }
        });
    }

    window.RecActions = { download: openDownload, email: openEmail };
})();
</script>
@endpush