@extends('layouts-v2.app')

@section('content')
<div class="max-w-6xl mx-auto space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-slate-900">Import câu hỏi từ Word</h1>
        <p class="text-sm text-slate-500 mt-1">Zip gồm file .docx và các file audio đặt tên trùng chữ hyperlink, ví dụ Audio 1.mp3. Câu được lưu nháp trước. Bấm xác nhận mới tạo trên EMS.</p>
        <p class="text-sm mt-2"><a class="text-blue-600 hover:underline" href="{{ route('word-quiz-type-import.index') }}">Mở luồng quiz type</a></p>
    </div>

    <form id="zip-form" class="bg-white border border-slate-200 rounded-xl p-5 space-y-4">
        <label class="block">
            <span class="text-sm font-medium text-slate-700">Kiểu convert</span>
            <select id="convert-mode" name="convert_mode" class="mt-2 block w-full max-w-xs rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-800">
                <option value="default" selected>Mặc định</option>
                <option value="listening_b">Listening B</option>
            </select>
        </label>
        <label class="block">
            <span class="text-sm font-medium text-slate-700">Kỹ năng</span>
            <select id="skill" name="skill" required class="mt-2 block w-full max-w-xs rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-800">
                <option value="">Chọn kỹ năng</option>
                <option value="listening">Listening (round.type 13)</option>
                <option value="reading">Reading (round.type 14)</option>
                <option value="writing">Writing (round.type 15)</option>
                <option value="speaking">Speaking (round.type 16)</option>
            </select>
        </label>
        <label class="block">
            <span id="file-label" class="text-sm font-medium text-slate-700">File zip</span>
            <input id="zip-file" type="file" accept=".zip,application/zip" required class="mt-2 block w-full text-sm text-slate-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
            <span id="file-hint" class="mt-1 block text-xs text-slate-500">Zip gồm .docx và audio. Listening B thì chọn file .docx.</span>
        </label>
        <button id="upload-btn" type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 disabled:opacity-50">
            Đọc file và xem trước
        </button>
        <p id="upload-status" class="text-sm text-slate-500"></p>
    </form>

    <form id="server-form" class="bg-white border border-slate-200 rounded-xl p-5 space-y-4">
        <div>
            <h2 class="text-sm font-semibold text-slate-800">Chạy file có sẵn trong word_import</h2>
            <p class="text-xs text-slate-500 mt-1">Chọn folder là chọn kiểu convert. Không cần chọn kỹ năng. Mỗi file .docx tạo một dòng danh sách dạng tên folder/tên file.</p>
        </div>
        <label class="block">
            <span class="text-sm font-medium text-slate-700">Kiểu convert</span>
            <select id="server-folder" class="mt-2 block w-full max-w-xl rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-800">
                <option value="">Chọn folder</option>
                @foreach($serverFolders as $folder)
                    <option value="{{ $folder['relative_path'] }}">{{ $folder['name'] }}</option>
                @endforeach
            </select>
        </label>
        <div id="server-files" class="text-sm text-slate-600"></div>
        <button id="server-btn" type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800 text-white text-sm font-medium hover:bg-slate-900 disabled:opacity-50">
            Tạo bản ghi cho folder này
        </button>
        <p id="server-status" class="text-sm text-slate-500"></p>
    </form>

    <div id="result" class="hidden space-y-4"></div>

    <div class="bg-white border border-slate-200 rounded-xl p-5">
        <h2 class="text-sm font-semibold text-slate-800 mb-3">Các lần import gần đây</h2>
        @if($batches->isEmpty())
            <p class="text-sm text-slate-500">Chưa có lần import nào.</p>
        @else
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="text-left text-slate-500 border-b">
                            <th class="py-2 pr-3">#</th>
                            <th class="py-2 pr-3">File</th>
                            <th class="py-2 pr-3">Kiểu convert</th>
                            <th class="py-2 pr-3">Kỹ năng</th>
                            <th class="py-2 pr-3">Trạng thái</th>
                            <th class="py-2 pr-3">Số dòng</th>
                            <th class="py-2 pr-3">Lúc</th>
                            <th class="py-2"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($batches as $batch)
                            <tr class="border-b border-slate-100">
                                <td class="py-2 pr-3">{{ $batch->id }}</td>
                                <td class="py-2 pr-3">{{ $batch->original_filename }}</td>
                                <td class="py-2 pr-3">{{ $batch->convert_mode }}</td>
                                <td class="py-2 pr-3">{{ $batch->skill ? ucfirst($batch->skill) : '' }}</td>
                                <td class="py-2 pr-3">{{ $batch->status }}</td>
                                <td class="py-2 pr-3">{{ $batch->items_count }}</td>
                                <td class="py-2 pr-3">{{ $batch->created_at }}</td>
                                <td class="py-2">
                                    <button type="button" class="text-blue-600 hover:underline open-batch" data-id="{{ $batch->id }}">Xem</button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
<style>
    .q-html table { border-collapse: collapse; width: 100%; }
    .q-html td, .q-html th { border: 1px solid #cbd5e1; padding: 8px; vertical-align: middle; }
    .q-html img { max-width: 140px; height: auto; }
    .q-html p { margin: 0.25rem 0; }
</style>
<script>
(function () {
    const result = document.getElementById('result');
    const statusEl = document.getElementById('upload-status');
    const uploadBtn = document.getElementById('upload-btn');

    const typeName = { 0: 'Essay', 1: 'MCQ', 7: 'Embedded answers' };

    const serverFolders = @json($serverFolders);
    const serverFolder = document.getElementById('server-folder');
    const serverFiles = document.getElementById('server-files');
    const serverStatus = document.getElementById('server-status');
    serverFolder.addEventListener('change', function () {
        const folder = serverFolders.find(function (item) { return item.relative_path === serverFolder.value; });
        if (!folder) {
            serverFiles.textContent = '';
            return;
        }
        const docx = folder.files.filter(function (file) { return file.kind === 'docx'; });
        serverFiles.innerHTML = docx.map(function (file) {
            return '<div>' + escapeHtml(folder.name + '/' + file.name) + '</div>';
        }).join('') || 'Folder không có file .docx.';
    });
    document.getElementById('server-form').addEventListener('submit', async function (event) {
        event.preventDefault();
        if (!serverFolder.value) {
            serverStatus.textContent = 'Chọn một folder.';
            return;
        }
        document.getElementById('server-btn').disabled = true;
        serverStatus.textContent = 'Đang tạo bản ghi...';
        try {
            const response = await fetch('/api/question-word-import/server-folder', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                body: JSON.stringify({ folder: serverFolder.value })
            });
            const json = await response.json();
            if (!response.ok || !json.status) {
                serverStatus.textContent = json.message || 'Tạo bản ghi thất bại.';
                document.getElementById('server-btn').disabled = false;
                return;
            }
            window.location.reload();
        } catch (error) {
            serverStatus.textContent = 'Tạo bản ghi thất bại.';
            document.getElementById('server-btn').disabled = false;
        }
    });

    const convertMode = document.getElementById('convert-mode');
    const fileInput = document.getElementById('zip-file');
    const fileLabel = document.getElementById('file-label');
    convertMode.addEventListener('change', function () {
        const listeningB = convertMode.value === 'listening_b';
        fileLabel.textContent = listeningB ? 'File Word' : 'File zip';
        fileInput.accept = listeningB ? '.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document' : '.zip,application/zip';
        fileInput.value = '';
    });

    document.getElementById('zip-form').addEventListener('submit', async function (event) {
        event.preventDefault();
        const file = document.getElementById('zip-file').files[0];
        const skill = document.getElementById('skill').value;
        if (!file) return;
        if (!skill) {
            statusEl.textContent = 'Chọn một kỹ năng trước khi đọc file.';
            return;
        }
        const body = new FormData();
        body.append('zip_file', file);
        body.append('skill', skill);
        body.append('convert_mode', convertMode.value);
        uploadBtn.disabled = true;
        statusEl.textContent = 'Đang đọc file...';
        try {
            const response = await fetch('/api/question-word-import/zip', { method: 'POST', body });
            const json = await response.json();
            if (!response.ok || json.status === false) {
                throw new Error(json.message || 'Upload thất bại');
            }
            statusEl.textContent = 'Đã lưu nháp, batch #' + json.batch_id;
            render(json);
        } catch (error) {
            statusEl.textContent = error.message;
        } finally {
            uploadBtn.disabled = false;
        }
    });

    document.querySelectorAll('.open-batch').forEach(function (button) {
        button.addEventListener('click', function () {
            loadBatch(button.dataset.id);
        });
    });

    async function loadBatch(id) {
        statusEl.textContent = 'Đang mở batch #' + id + '...';
        const response = await fetch('/api/question-word-import/batches/' + id);
        const json = await response.json();
        if (!response.ok || json.status === false) {
            statusEl.textContent = json.message || 'Không mở được batch';
            return;
        }
        statusEl.textContent = 'Batch #' + id;
        if (json.skill) {
            document.getElementById('skill').value = json.skill;
        }
        render(json);
    }

    function render(payload) {
        const questions = payload.data || [];
        const skipped = payload.skipped || [];
        const draftCount = questions.filter(function (item) { return item.status === 'draft'; }).length;
        result.classList.remove('hidden');
        result.innerHTML = '';

        const bar = document.createElement('div');
        bar.className = 'bg-white border border-slate-200 rounded-xl p-5 flex flex-col md:flex-row md:items-center md:justify-between gap-3';
        const skillLabel = payload.skill_name ? payload.skill_name + ' · type ' + payload.round_type : 'chưa chọn kỹ năng';
        bar.innerHTML = '<div><div class="font-semibold text-slate-900">Batch #' + payload.batch_id + ' · ' + escapeHtml(payload.file || '') + '</div><div class="text-sm text-slate-500">' + questions.length + ' câu · ' + skipped.length + ' bỏ qua · ' + escapeHtml(payload.batch_status || '') + ' · ' + escapeHtml(skillLabel) + '</div></div>';
        const confirmBtn = document.createElement('button');
        confirmBtn.type = 'button';
        confirmBtn.className = 'px-4 py-2 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 disabled:opacity-50';
        confirmBtn.textContent = 'Tạo câu hỏi, đề và cuộc thi trên EMS';
        confirmBtn.disabled = draftCount === 0;
        confirmBtn.addEventListener('click', function () { confirmBatch(payload.batch_id, confirmBtn); });
        bar.appendChild(confirmBtn);
        result.appendChild(bar);

        if (payload.exam_part || payload.contest || payload.contest_file) {
            const summary = document.createElement('div');
            summary.className = 'bg-white border border-slate-200 rounded-xl p-5 text-sm space-y-2';
            const exam = payload.exam_part;
            const contest = payload.contest;
            const mapped = payload.contest_file;
            summary.innerHTML = '<h2 class="text-sm font-semibold text-slate-800">Đề thành phần và cuộc thi</h2>'
                + '<div>Folder / tên cuộc thi: <span class="font-medium">' + escapeHtml(payload.folder_name || (contest && contest.contest_name) || '') + '</span></div>'
                + '<div>Kỹ năng: ' + escapeHtml(payload.skill_name || '') + (payload.round_type ? ' · round.type ' + escapeHtml(payload.round_type) : '') + '</div>'
                + '<div>Đề thành phần: ' + escapeHtml(exam ? exam.status : 'chưa tạo')
                + (exam && exam.ems_baikiemtra_id ? ' · EMS #' + escapeHtml(exam.ems_baikiemtra_id) : '')
                + (exam && exam.note ? ' · ' + escapeHtml(exam.note) : '') + '</div>'
                + '<div>Cuộc thi: ' + escapeHtml(contest ? contest.status : 'chưa tạo')
                + (contest && contest.ems_mockcontest_id ? ' · EMS #' + escapeHtml(contest.ems_mockcontest_id) : '')
                + (contest && contest.note ? ' · ' + escapeHtml(contest.note) : '') + '</div>'
                + (mapped ? '<div>Mapping: ' + escapeHtml(mapped.contest_name) + ' ↔ ' + escapeHtml(mapped.upload_filename) + '</div>' : '');
            summary.appendChild(jsonDetails('Request đề thành phần', exam && exam.request));
            summary.appendChild(jsonDetails('Response đề thành phần', exam && exam.response));
            summary.appendChild(jsonDetails('Request cuộc thi', contest && contest.request));
            summary.appendChild(jsonDetails('Response cuộc thi', contest && contest.response));
            result.appendChild(summary);
        }

        if ((payload.audio || []).length) {
            const audio = document.createElement('div');
            audio.className = 'bg-white border border-slate-200 rounded-xl p-5';
            audio.innerHTML = '<h2 class="text-sm font-semibold mb-2">Audio</h2>' + payload.audio.map(function (item) {
                const url = item.url ? '<a class="text-blue-600 break-all" href="' + escapeHtml(item.url) + '" target="_blank" rel="noopener">' + escapeHtml(item.url) + '</a>' : '<span class="text-amber-700">chưa có link S3</span>';
                return '<div class="text-sm py-1">' + escapeHtml(item.label) + ' → ' + escapeHtml(item.filename || 'không thấy file') + ' · ' + url + '</div>';
            }).join('');
            result.appendChild(audio);
        }

        if (skipped.length) {
            const box = document.createElement('div');
            box.className = 'bg-amber-50 border border-amber-200 rounded-xl p-5 text-sm text-amber-900';
            box.innerHTML = '<div class="font-semibold mb-2">Bỏ qua</div>' + skipped.map(function (item) {
                return '<div>' + escapeHtml(item.lesson || '') + ' / Exercise ' + escapeHtml(String(item.exercise || '')) + ' · ' + escapeHtml(item.note || '') + '</div>';
            }).join('');
            result.appendChild(box);
        }

        questions.forEach(function (item, index) {
            result.appendChild(questionCard(item, index));
        });
        window.scrollTo({ top: result.offsetTop - 20, behavior: 'smooth' });
    }

    function questionCard(item, index) {
        const question = item.question || {};
        const card = document.createElement('article');
        card.className = 'bg-white border border-slate-200 rounded-xl p-5 space-y-3';
        const title = document.createElement('div');
        title.className = 'flex flex-wrap items-center gap-2';
        title.innerHTML = '<span class="text-sm font-semibold text-slate-900">' + (index + 1) + '. ' + escapeHtml(question.name || item.lesson || '') + '</span>'
            + badge(typeName[item.quiz_type] || ('quiz ' + item.quiz_type))
            + badge(item.status)
            + (item.ems_question_id ? badge('EMS #' + item.ems_question_id) : '');
        card.appendChild(title);

        if (item.audio_url) {
            const audio = document.createElement('div');
            audio.className = 'text-sm text-slate-600';
            audio.innerHTML = escapeHtml(item.audio_label || 'Audio') + ': <a class="text-blue-600 break-all" target="_blank" rel="noopener" href="' + escapeHtml(item.audio_url) + '">' + escapeHtml(item.audio_url) + '</a>';
            card.appendChild(audio);
        }

        const html = document.createElement('div');
        html.className = 'q-html text-sm text-slate-800 bg-slate-50 rounded-lg p-3 overflow-x-auto';
        html.innerHTML = question.text || '';
        card.appendChild(html);

        const options = question.listSelectOptions || [];
        if (options.length) {
            const list = document.createElement('ul');
            list.className = 'text-sm space-y-1';
            options.forEach(function (option) {
                const li = document.createElement('li');
                li.className = option.is_true ? 'text-red-600 font-medium' : 'text-slate-700';
                li.innerHTML = (option.is_true ? '✓ ' : '') + (option.answer_content || '');
                list.appendChild(li);
            });
            card.appendChild(list);
        }

        const children = question.listQuestionChildren || [];
        if (children.length) {
            const words = children.map(function (child) {
                const keywords = (child.listShortAnswer && child.listShortAnswer.listKeyword) || [];
                return keywords.join(' / ');
            }).filter(Boolean);
            const line = document.createElement('p');
            line.className = 'text-sm text-red-600';
            line.textContent = 'Đáp án: ' + words.join(' · ');
            card.appendChild(line);
        }

        if (question.solution) {
            const solution = document.createElement('div');
            solution.className = 'text-sm text-slate-600 border-t pt-2';
            solution.innerHTML = '<span class="font-medium">Solution:</span> ' + question.solution;
            card.appendChild(solution);
        }

        const details = document.createElement('details');
        const summary = document.createElement('summary');
        summary.className = 'text-sm text-slate-500 cursor-pointer';
        summary.textContent = 'JSON gửi EMS';
        const pre = document.createElement('pre');
        pre.className = 'mt-2 text-xs bg-slate-900 text-slate-100 rounded-lg p-3 overflow-x-auto';
        pre.textContent = JSON.stringify(question, null, 2);
        details.appendChild(summary);
        details.appendChild(pre);
        card.appendChild(details);

        if (item.ems_response) {
            const ems = document.createElement('details');
            const emsSummary = document.createElement('summary');
            emsSummary.className = 'text-sm text-slate-500 cursor-pointer';
            emsSummary.textContent = 'Response EMS';
            const emsPre = document.createElement('pre');
            emsPre.className = 'mt-2 text-xs bg-slate-900 text-slate-100 rounded-lg p-3 overflow-x-auto';
            emsPre.textContent = JSON.stringify(item.ems_response, null, 2);
            ems.appendChild(emsSummary);
            ems.appendChild(emsPre);
            card.appendChild(ems);
        }

        return card;
    }

    async function confirmBatch(id, button) {
        if (!window.confirm('Tạo câu hỏi, rồi đề thành phần, rồi cuộc thi của batch #' + id + ' trên EMS?')) return;
        button.disabled = true;
        button.textContent = 'Đang gọi EMS...';
        try {
            const skill = document.getElementById('skill').value;
            const response = await fetch('/api/question-word-import/batches/' + id + '/confirm', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                body: JSON.stringify({ skill: skill || null })
            });
            const json = await response.json();
            if (!response.ok || json.status === false) {
                throw new Error(json.message || 'Gọi EMS thất bại');
            }
            statusEl.textContent = json.message || 'Đã gọi EMS';
            render(json);
        } catch (error) {
            statusEl.textContent = error.message;
            button.disabled = false;
            button.textContent = 'Tạo câu hỏi, đề và cuộc thi trên EMS';
        }
    }

    function jsonDetails(title, value) {
        const details = document.createElement('details');
        const summary = document.createElement('summary');
        summary.className = 'text-sm text-slate-500 cursor-pointer';
        summary.textContent = title;
        const pre = document.createElement('pre');
        pre.className = 'mt-2 text-xs bg-slate-900 text-slate-100 rounded-lg p-3 overflow-x-auto';
        pre.textContent = value ? JSON.stringify(value, null, 2) : 'Chưa có.';
        details.appendChild(summary);
        details.appendChild(pre);
        return details;
    }

    function badge(text) {
        return '<span class="px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 text-xs">' + escapeHtml(String(text)) + '</span>';
    }

    function escapeHtml(value) {
        return String(value).replace(/[&<>"']/g, function (char) {
            return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char];
        });
    }
})();
</script>
@endsection