@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto space-y-6">
    <div>
        <h1 class="text-3xl font-extrabold tracking-tight text-white">Bulk Upload Songs</h1>
        <p class="text-slate-400 mt-1">Upload a ZIP file or multiple individual KAR/MIDI files. The system will auto-parse titles/artists and match official karaoke numbers.</p>
    </div>

    <!-- Upload Panel -->
    <div id="upload-panel" class="bg-glass p-8 rounded-2xl shadow-xl space-y-6">
        <!-- Configuration options -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-2">
                <label for="naming_pattern" class="block text-sm font-semibold text-slate-300">Filename Pattern</label>
                <select id="naming_pattern" class="w-full bg-indigo-950/40 border border-indigo-900 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-cyan-500 transition">
                    <option value="artist-title">Artist - Title (e.g. Freddie Aguilar - Anak.kar)</option>
                    <option value="title-artist">Title - Artist (e.g. Anak - Freddie Aguilar.kar)</option>
                    <option value="title-only">Title Only (e.g. Anak.kar)</option>
                </select>
            </div>
            <div class="space-y-2">
                <label for="fallback_artist" class="block text-sm font-semibold text-slate-300">Fallback Artist</label>
                <input type="text" id="fallback_artist" placeholder="e.g. Unknown Artist" value="Unknown Artist" class="w-full bg-indigo-950/40 border border-indigo-900 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-cyan-500 transition">
            </div>
        </div>

        <!-- Drag & Drop Zone -->
        <div id="dropzone" class="border-2 border-indigo-900/60 border-dashed rounded-2xl p-12 text-center hover:border-cyan-500/50 transition cursor-pointer relative">
            <input type="file" id="bulk_files" class="hidden" accept=".zip,.kar,.mid,.midi" multiple>
            <div class="space-y-3">
                <div class="mx-auto w-16 h-16 bg-indigo-950/60 rounded-full flex items-center justify-center text-cyan-400 text-3xl">
                    📦
                </div>
                <div class="text-lg font-semibold text-slate-200">Drag & drop your files here, or <span class="text-cyan-400">browse</span></div>
                <p class="text-xs text-slate-500">Supports .zip archives containing KAR/MIDI files, or selecting multiple individual files directly.</p>
            </div>
        </div>

        <!-- Progress Bar -->
        <div id="progress-container" class="hidden space-y-2">
            <div class="flex justify-between text-xs font-semibold text-slate-400">
                <span id="progress-status">Uploading and processing files...</span>
                <span id="progress-percent">0%</span>
            </div>
            <div class="w-full bg-indigo-950/60 rounded-full h-2 overflow-hidden">
                <div id="progress-bar" class="bg-gradient-to-r from-cyan-500 to-indigo-500 h-full w-0 transition-all duration-300"></div>
            </div>
        </div>
    </div>

    <!-- Preview Table (Initially Hidden) -->
    <div id="preview-panel" class="hidden bg-glass rounded-2xl shadow-xl overflow-hidden">
        <div class="p-6 border-b border-indigo-950 flex justify-between items-center bg-indigo-950/20">
            <div>
                <h2 class="text-xl font-bold text-white">Extracted Songs Preview</h2>
                <p class="text-xs text-slate-400 mt-0.5">Please review codes, titles, and artists. Click cells to edit them directly before final import.</p>
            </div>
            <div class="flex gap-3">
                <button id="btn-cancel-preview" class="bg-indigo-950/60 border border-indigo-900 hover:bg-indigo-900 text-slate-300 font-bold py-2 px-5 rounded-xl transition text-sm">
                    Clear
                </button>
                <button id="btn-import" class="bg-gradient-to-r from-cyan-500 to-indigo-500 hover:opacity-90 text-white font-bold py-2 px-6 rounded-xl transition text-sm shadow-lg shadow-cyan-950/20">
                    Import Checked Songs (<span id="checked-count">0</span>)
                </button>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-indigo-950/20 text-slate-400 text-xs font-semibold uppercase tracking-wider border-b border-indigo-950">
                        <th class="px-6 py-4 w-12"><input type="checkbox" id="select-all" checked class="rounded border-indigo-900 bg-indigo-950 text-cyan-500"></th>
                        <th class="px-6 py-4 w-32">Official Code</th>
                        <th class="px-6 py-4">Title</th>
                        <th class="px-6 py-4">Artist</th>
                        <th class="px-6 py-4">Matched Source</th>
                        <th class="px-6 py-4">Original Filename</th>
                    </tr>
                </thead>
                <tbody id="preview-body" class="divide-y divide-indigo-950/40 text-sm">
                    <!-- Dynamic preview rows will go here -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropzone = document.getElementById('dropzone');
    const fileInput = document.getElementById('bulk_files');
    const progressContainer = document.getElementById('progress-container');
    const progressBar = document.getElementById('progress-bar');
    const progressPercent = document.getElementById('progress-percent');
    const progressStatus = document.getElementById('progress-status');
    const previewPanel = document.getElementById('preview-panel');
    const previewBody = document.getElementById('preview-body');
    const checkedCountEl = document.getElementById('checked-count');
    const selectAllCb = document.getElementById('select-all');
    const btnImport = document.getElementById('btn-import');
    const btnCancelPreview = document.getElementById('btn-cancel-preview');

    let extractedSongs = [];

    // Drag-and-drop triggers file input
    dropzone.addEventListener('click', () => fileInput.click());
    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.classList.add('border-cyan-500', 'bg-indigo-950/10');
    });
    dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('border-cyan-500', 'bg-indigo-950/10');
    });
    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropzone.classList.remove('border-cyan-500', 'bg-indigo-950/10');
        if (e.dataTransfer.files.length > 0) {
            handleFiles(e.dataTransfer.files);
        }
    });

    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            handleFiles(fileInput.files);
        }
    });

    function handleFiles(files) {
        progressContainer.classList.remove('hidden');
        progressPercent.textContent = '0%';
        progressBar.style.width = '0%';
        progressStatus.textContent = 'Uploading files...';

        const formData = new FormData();
        formData.append('naming_pattern', document.getElementById('naming_pattern').value);
        formData.append('fallback_artist', document.getElementById('fallback_artist').value);
        formData.append('_token', '{{ csrf_token() }}');

        // Check if there is a zip file, or handle multiple individual files
        let isZip = false;
        for (let i = 0; i < files.length; i++) {
            if (files[i].name.endsWith('.zip')) {
                formData.append('bulk_zip', files[i]);
                isZip = true;
                break;
            }
        }

        if (!isZip) {
            for (let i = 0; i < files.length; i++) {
                formData.append('individual_files[]', files[i]);
            }
        }

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '{{ route('songs.bulk-extract') }}', true);

        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percent = Math.round((e.loaded / e.total) * 100);
                progressBar.style.width = percent + '%';
                progressPercent.textContent = percent + '%';
                if (percent === 100) {
                    progressStatus.textContent = 'Processing files and extracting metadata...';
                }
            }
        });

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    try {
                        const response = JSON.parse(xhr.responseText);
                        if (response.success && response.songs.length > 0) {
                            extractedSongs = response.songs;
                            renderPreview();
                        } else {
                            alert(response.message || 'No supported songs found in the upload.');
                            resetUpload();
                        }
                    } catch (e) {
                        alert('Error parsing server response: ' + e.message);
                        resetUpload();
                    }
                } else {
                    alert('Upload failed or server error occurred.');
                    resetUpload();
                }
            }
        };

        xhr.send(formData);
    }

    function renderPreview() {
        previewBody.innerHTML = '';
        extractedSongs.forEach((song, index) => {
            const tr = document.createElement('tr');
            tr.className = 'hover:bg-indigo-950/10 transition';
            tr.dataset.index = index;

            const badgeColor = song.match_source === 'Auto-generated' ? 'bg-yellow-950/40 text-yellow-400 border-yellow-900/60' : 'bg-emerald-950/40 text-emerald-400 border-emerald-500/30';

            tr.innerHTML = `
                <td class="px-6 py-4"><input type="checkbox" class="song-checkbox rounded border-indigo-900 bg-indigo-950 text-cyan-500" checked></td>
                <td class="px-6 py-4 font-mono text-cyan-400 font-bold"><input type="text" value="${song.code}" class="w-full bg-indigo-950/20 border border-indigo-900/40 rounded px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 text-cyan-400 font-bold code-input"></td>
                <td class="px-6 py-4 text-white font-medium"><input type="text" value="${song.title}" class="w-full bg-indigo-950/20 border border-indigo-900/40 rounded px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 text-white title-input"></td>
                <td class="px-6 py-4 text-slate-300"><input type="text" value="${song.artist}" class="w-full bg-indigo-950/20 border border-indigo-900/40 rounded px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 text-slate-300 artist-input"></td>
                <td class="px-6 py-4"><span class="text-xs px-2.5 py-1 rounded-full border ${badgeColor}">${song.match_source}</span></td>
                <td class="px-6 py-4 font-mono text-slate-400 text-xs">${song.original_name}</td>
            `;

            previewBody.appendChild(tr);
        });

        previewPanel.classList.remove('hidden');
        document.getElementById('upload-panel').classList.add('hidden');
        updateCheckedCount();
    }

    function updateCheckedCount() {
        const checked = document.querySelectorAll('.song-checkbox:checked').length;
        checkedCountEl.textContent = checked;
    }

    previewBody.addEventListener('change', function(e) {
        if (e.target.classList.contains('song-checkbox')) {
            updateCheckedCount();
        }
    });

    selectAllCb.addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.song-checkbox');
        checkboxes.forEach(cb => cb.checked = selectAllCb.checked);
        updateCheckedCount();
    });

    btnCancelPreview.addEventListener('click', () => {
        resetUpload();
    });

    function resetUpload() {
        extractedSongs = [];
        previewBody.innerHTML = '';
        previewPanel.classList.add('hidden');
        document.getElementById('upload-panel').classList.remove('hidden');
        progressContainer.classList.add('hidden');
        fileInput.value = '';
    }

    btnImport.addEventListener('click', function() {
        const rows = previewBody.querySelectorAll('tr');
        const songsToImport = [];

        rows.forEach(row => {
            const cb = row.querySelector('.song-checkbox');
            if (cb && cb.checked) {
                const index = parseInt(row.dataset.index);
                const originalSong = extractedSongs[index];

                songsToImport.push({
                    temp_path: originalSong.temp_path,
                    original_name: originalSong.original_name,
                    code: row.querySelector('.code-input').value,
                    title: row.querySelector('.title-input').value,
                    artist: row.querySelector('.artist-input').value
                });
            }
        });

        if (songsToImport.length === 0) {
            alert('Please select at least one song to import.');
            return;
        }

        btnImport.disabled = true;
        btnImport.textContent = 'Importing...';

        fetch('{{ route('songs.bulk-store') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ songs: songsToImport })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                window.location.href = '{{ route('songs.index') }}';
            } else {
                alert(data.message || 'Import failed.');
                btnImport.disabled = false;
                btnImport.textContent = 'Import Checked Songs';
            }
        })
        .catch(err => {
            console.error(err);
            alert('An error occurred during import.');
            btnImport.disabled = false;
            btnImport.textContent = 'Import Checked Songs';
        });
    });
});
</script>
@endsection