@extends('layouts.app')

@push('style')
<style>
.moh-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 24px 20px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all .15s ease;
}
.moh-dropzone:hover { border-color: #3b82f6; background: #eff6ff; }
.moh-dropzone.dragover { border-color: #3b82f6; background: #dbeafe; }
.moh-dropzone-icon { width:36px; height:36px; color:#94a3b8; margin-bottom:8px; }
.moh-dropzone:hover .moh-dropzone-icon { color:#3b82f6; }
.moh-file-list { margin-top: 12px; }
.moh-file-list .file-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 6px; margin-bottom: 6px; font-size: .82rem;
}
.moh-file-list .file-icon { width:18px; height:18px; color:#3b82f6; flex-shrink:0; }
.moh-file-list .file-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.moh-file-list .file-size { color:#94a3b8; font-size:.75rem; flex-shrink:0; }
.moh-file-list .file-remove {
    border:0; background:transparent; color:#ef4444; cursor:pointer;
    padding:2px 6px; border-radius:4px; font-size:.75rem;
}
.moh-file-list .file-remove:hover { background:#fee2e2; }
.moh-file-list .file-warn { color:#d97706; font-size:.7rem; }
.moh-format-badges { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.moh-format-badges code {
    font-size:.7rem; padding:2px 6px; border-radius:4px;
    background:#f1f5f9; color:#475569; border:1px solid #e2e8f0;
}
.moh-audio-preview { margin-top:6px; }
.moh-audio-preview audio { width:100%; height:32px; }
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">Call Center Music on Hold</h4>
        <div class="text-secondary small mt-1">Upload and manage MOH classes for queues and other call center destinations.</div>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        <i data-lucide="check-circle" style="width:16px;height:16px;"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show">
        <strong>Upload failed:</strong>
        <ul class="mb-0 mt-1">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="row g-3 mb-3">
    <div class="col-xl-7">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center gap-2">
                <i data-lucide="upload-cloud" style="width:16px;height:16px;"></i>
                Upload Music on Hold
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('call-center.moh.store') }}" enctype="multipart/form-data" class="row g-3" id="mohUploadForm">
                    @csrf
                    <div class="col-12">
                        <label class="form-label fw-medium">MOH Class Name</label>
                        <input
                            type="text"
                            name="class_name"
                            class="form-control"
                            value="{{ old('class_name') }}"
                            placeholder="e.g. support_hold"
                            pattern="[A-Za-z0-9_\-]+"
                            maxlength="64"
                            required
                        >
                        <div class="form-text">
                            Letters, numbers, dashes, and underscores only.
                            A new MOH class is created on Asterisk automatically; an existing class is appended to.
                        </div>
                    </div>

                    <div class="col-12">
                        <label class="form-label fw-medium">Audio Files</label>
                        <label for="mohFileInput" class="moh-dropzone w-100 mb-0" id="mohDropzone">
                            <svg class="moh-dropzone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                <polyline points="17 8 12 3 7 8"/>
                                <line x1="12" y1="3" x2="12" y2="15"/>
                            </svg>
                            <div style="font-weight:500; color:#374151;">Drop audio files here or click to browse</div>
                            <div style="font-size:.78rem; color:#64748b; margin-top:4px;">
                                Up to 50&nbsp;MB per file. Multiple files allowed.
                            </div>
                            <input
                                type="file"
                                id="mohFileInput"
                                name="files[]"
                                class="d-none"
                                multiple
                                required
                                accept=".wav,.wav16,.ulaw,.alaw,.gsm,.sln,.slin,.mp3,.m4a,.aac,.flac,.ogg,.oga,.wma,.mp4"
                            >
                        </label>
                        <div class="moh-file-list" id="mohFileList"></div>
                    </div>

                    <div class="col-12">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="auto_convert" id="autoConvert" value="1" {{ old('auto_convert', 1) ? 'checked' : '' }}>
                            <label class="form-check-label" for="autoConvert">
                                Auto-convert non-native files to 8&nbsp;kHz mono WAV
                            </label>
                        </div>
                        <div class="form-text">
                            Recommended. Converts MP3, M4A, FLAC, OGG, etc. into Asterisk-compatible audio on the server.
                            @if(!$converter)
                                <span class="text-warning">⚠ Server has no audio converter installed — only native formats will be accepted.</span>
                            @endif
                        </div>
                    </div>

                    <div class="col-12">
                        <details>
                            <summary class="text-secondary small" style="cursor:pointer;">Supported file formats</summary>
                            <div class="mt-2 small">
                                <div><strong>Native (no conversion needed):</strong></div>
                                <div class="moh-format-badges">
                                    @foreach($supportedUploadExtensions as $ext)
                                        <code>{{ $ext }}</code>
                                    @endforeach
                                </div>
                            </div>
                            @if($converter && !empty($convertibleExtensions))
                                <div class="mt-2 small">
                                    <div><strong>Auto-convertible:</strong></div>
                                    <div class="moh-format-badges">
                                        @foreach($convertibleExtensions as $ext)
                                            <code>{{ $ext }}</code>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </details>
                    </div>

                    <div class="col-12">
                        <button type="submit" class="btn btn-primary" id="mohUploadBtn">
                            <i data-lucide="upload" style="width:14px;height:14px;"></i>
                            Upload to MOH Class
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-xl-5">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center gap-2">
                <i data-lucide="info" style="width:16px;height:16px;"></i>
                Server Status &amp; Tips
            </div>
            <div class="card-body">
                @if($converter)
                    <div class="alert alert-success py-2 mb-3 d-flex align-items-center gap-2">
                        <i data-lucide="check-circle" style="width:16px;height:16px;"></i>
                        <div>
                            <strong>Audio conversion enabled</strong> via <code>{{ $converter }}</code>
                        </div>
                    </div>
                @else
                    <div class="alert alert-warning py-2 mb-3 d-flex align-items-center gap-2">
                        <i data-lucide="alert-triangle" style="width:16px;height:16px;"></i>
                        <div>
                            <strong>No converter installed.</strong> Install <code>ffmpeg</code> or <code>sox</code> to upload non-WAV files.
                        </div>
                    </div>
                @endif

                <div class="border rounded p-3 mb-3">
                    <div class="fw-medium mb-2 small">📁 Where files are stored</div>
                    <div class="text-secondary small">
                        Each MOH class lives in <code>/var/lib/asterisk/moh/&lt;class&gt;</code>.
                        The class is registered in <code>musiconhold_custom.conf</code> and Asterisk reloads automatically.
                    </div>
                </div>

                <div class="border rounded p-3 mb-3">
                    <div class="fw-medium mb-2 small">🎵 Best format for clarity</div>
                    <div class="text-secondary small">
                        Mono WAV at 8&nbsp;kHz, 16-bit PCM. Asterisk plays this directly with no transcoding overhead.
                        For higher quality on G.722 codec, use 16&nbsp;kHz WAV.
                    </div>
                </div>

                <div class="border rounded p-3">
                    <div class="fw-medium mb-2 small">🎯 How to use a MOH class</div>
                    <div class="text-secondary small">
                        After uploading, set the class on a Queue or Ring Group as the
                        "Music on Hold" value. Callers will hear those tracks while waiting.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>Configured MOH Classes</span>
        <span class="badge bg-primary">{{ count($classes) }}</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Class</th>
                        <th>Directory</th>
                        <th>Files</th>
                        <th>Last Updated</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($classes as $class)
                        @php
                            $isDefault = $class['name'] === 'default';
                            $isActive = $isDefault && $activeDefault !== null;
                            $thisIsActive = !$isDefault && $activeDefault === $class['name'];
                        @endphp
                        <tr>
                            <td>
                                <div class="fw-semibold d-flex align-items-center gap-2">
                                    {{ $class['name'] }}
                                    @if($isDefault && $isActive)
                                        <span class="badge bg-info" title="Original built-in tracks have been replaced with the '{{ $activeDefault }}' class">
                                            using "{{ $activeDefault }}"
                                        </span>
                                    @elseif($isDefault && !$isActive)
                                        <span class="badge bg-secondary">Built-in</span>
                                    @endif
                                    @if($thisIsActive)
                                        <span class="badge bg-success d-flex align-items-center gap-1">
                                            <i data-lucide="check" style="width:10px;height:10px;"></i> Active Default
                                        </span>
                                    @endif
                                </div>
                                <div class="text-secondary small">{{ $class['managed'] ? 'Custom class' : 'Built-in/default class' }}</div>
                            </td>
                            <td><code>{{ $class['directory'] }}</code></td>
                            <td>{{ $class['file_count'] }}</td>
                            <td>
                                @if(!empty($class['files']))
                                    {{ collect($class['files'])->max('modified_at') }}
                                @else
                                    <span class="text-secondary">No files</span>
                                @endif
                            </td>
                            <td class="text-end">
                                @if($class['managed'] && !$thisIsActive && $class['file_count'] > 0)
                                    <form method="POST" action="{{ route('call-center.moh.set-default', ['className' => $class['name']]) }}" class="d-inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-success btn-sm"
                                                onclick="return confirm('Make &quot;{{ $class['name'] }}&quot; the system default Music on Hold? This replaces what callers hear by default everywhere.')"
                                                title="Use this class for system default MOH">
                                            <i data-lucide="star" style="width:12px;height:12px;"></i> Set as Default
                                        </button>
                                    </form>
                                @endif
                                @if($isDefault && $isActive)
                                    <form method="POST" action="{{ route('call-center.moh.reset-default') }}" class="d-inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-secondary btn-sm"
                                                onclick="return confirm('Restore the original built-in MOH tracks?')"
                                                title="Restore original built-in tracks">
                                            <i data-lucide="rotate-ccw" style="width:12px;height:12px;"></i> Restore Built-in
                                        </button>
                                    </form>
                                @endif
                                <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#moh-class-{{ $loop->index }}">
                                    <i data-lucide="folder-open" style="width:12px;height:12px;"></i> View Files
                                </button>
                            </td>
                        </tr>
                        <tr class="collapse" id="moh-class-{{ $loop->index }}">
                            <td colspan="5" class="bg-body-tertiary">
                                @if(empty($class['files']))
                                    <div class="text-secondary small py-2">No audio files found in this MOH class.</div>
                                @else
                                    <div class="table-responsive">
                                        <table class="table table-sm align-middle mb-0">
                                            <thead>
                                                <tr>
                                                    <th>Filename</th>
                                                    <th>Size</th>
                                                    <th>Modified</th>
                                                    <th class="text-end">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($class['files'] as $file)
                                                    <tr>
                                                        <td class="font-monospace">{{ $file['name'] }}</td>
                                                        <td>{{ number_format($file['size'] / 1024, 1) }} KB</td>
                                                        <td>{{ $file['modified_at'] }}</td>
                                                        <td class="text-end">
                                                            <button type="button" class="btn btn-outline-primary btn-sm me-1"
                                                                    onclick="playMoh('{{ $class['name'] }}', '{{ $file['name'] }}', this)">
                                                                <i data-lucide="play" style="width:12px;height:12px;"></i> Play
                                                            </button>
                                                            @if($class['managed'])
                                                                <form method="POST" action="{{ route('call-center.moh.destroy', ['className' => $class['name'], 'fileName' => $file['name']]) }}" class="d-inline">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" class="btn btn-outline-danger btn-sm" onclick="return confirm('Delete this MOH file?')">
                                                                        <i data-lucide="trash-2" style="width:12px;height:12px;"></i> Delete
                                                                    </button>
                                                                </form>
                                                            @else
                                                                <span class="text-secondary small">Protected</span>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                    <tr class="moh-audio-preview-row" style="display:none;">
                                                        <td colspan="4" class="moh-audio-preview py-2"></td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center text-secondary py-4">No MOH classes detected.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function() {
    const input = document.getElementById('mohFileInput');
    const dropzone = document.getElementById('mohDropzone');
    const list = document.getElementById('mohFileList');
    const btn = document.getElementById('mohUploadBtn');
    const MAX_SIZE = 50 * 1024 * 1024; // 50 MB

    if (!input || !dropzone) return;

    function fmtSize(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    }

    function renderList() {
        list.innerHTML = '';
        const files = Array.from(input.files || []);
        if (!files.length) return;

        files.forEach((f, idx) => {
            const tooBig = f.size > MAX_SIZE;
            const row = document.createElement('div');
            row.className = 'file-row';
            row.innerHTML =
                '<svg class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
                '<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>' +
                '<span class="file-name" title="' + escapeAttr(f.name) + '">' + escapeHtml(f.name) + '</span>' +
                '<span class="file-size' + (tooBig ? ' file-warn' : '') + '">' + fmtSize(f.size) +
                (tooBig ? ' — too large' : '') + '</span>' +
                '<button type="button" class="file-remove" data-idx="' + idx + '" title="Remove">×</button>';
            list.appendChild(row);
        });

        list.querySelectorAll('.file-remove').forEach(b => {
            b.addEventListener('click', e => {
                const idx = parseInt(e.target.dataset.idx, 10);
                const dt = new DataTransfer();
                Array.from(input.files).forEach((f, i) => {
                    if (i !== idx) dt.items.add(f);
                });
                input.files = dt.files;
                renderList();
            });
        });
    }

    function escapeHtml(s) { return String(s).replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
    function escapeAttr(s) { return escapeHtml(s); }

    input.addEventListener('change', renderList);

    ['dragenter', 'dragover'].forEach(evt => {
        dropzone.addEventListener(evt, e => {
            e.preventDefault();
            e.stopPropagation();
            dropzone.classList.add('dragover');
        });
    });
    ['dragleave', 'drop'].forEach(evt => {
        dropzone.addEventListener(evt, e => {
            e.preventDefault();
            e.stopPropagation();
            dropzone.classList.remove('dragover');
        });
    });
    dropzone.addEventListener('drop', e => {
        if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
            input.files = e.dataTransfer.files;
            renderList();
        }
    });

    // Disable button while uploading and show progress
    document.getElementById('mohUploadForm').addEventListener('submit', () => {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Uploading…';
    });
})();

// In-page audio preview for MOH files in the Configured Classes list
function playMoh(className, fileName, btn) {
    const url = '/call-center/moh/' + encodeURIComponent(className) + '/' + encodeURIComponent(fileName) + '/play';
    const previewRow = btn.closest('tr').nextElementSibling;
    if (!previewRow || !previewRow.classList.contains('moh-audio-preview-row')) return;
    const cell = previewRow.querySelector('.moh-audio-preview');

    if (previewRow.style.display !== 'none' && cell.querySelector('audio')) {
        // Toggle off
        previewRow.style.display = 'none';
        cell.innerHTML = '';
        return;
    }

    cell.innerHTML = '<audio controls autoplay preload="auto" src="' + url + '"></audio>';
    previewRow.style.display = '';
}
</script>
@endpush
@endsection