@extends('layouts.admin')
@section('title', 'PDF 切割工具')
@section('content')
<div class="max-w-2xl">

    {{-- 頁首 --}}
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-violet-600 to-purple-600 p-6 flex items-center gap-4">
            <div class="w-14 h-14 rounded-2xl bg-white/20 flex items-center justify-center shrink-0">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"/>
                </svg>
            </div>
            <div>
                <h2 class="text-xl font-bold text-white">PDF 切割工具</h2>
                <p class="text-purple-100 text-sm mt-0.5">上傳大型 PDF，依頁數自動分割為多個檔案並打包下載</p>
            </div>
        </div>

        <div class="p-6 space-y-6">

            {{-- 上傳區 --}}
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">選擇 PDF 檔案</label>
                <div id="dropZone"
                     class="relative border-2 border-dashed border-gray-200 dark:border-slate-700 rounded-xl p-8 text-center cursor-pointer hover:border-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/10 transition-all"
                     onclick="document.getElementById('pdfFileInput').click()"
                     ondragover="onDrop(event,true)" ondragleave="onDropLeave(event)" ondrop="onDrop(event,false)">
                    <input type="file" id="pdfFileInput" accept=".pdf" class="hidden" onchange="onFileSelect(this.files[0])">
                    <svg id="dropIcon" class="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <p id="dropText" class="text-gray-500 dark:text-gray-400 text-sm font-medium">點擊選擇或拖曳 PDF 至此</p>
                    <p class="text-gray-400 dark:text-gray-500 text-xs mt-1">最大 100 MB</p>
                </div>
                {{-- 已選檔案資訊 --}}
                <div id="fileInfo" class="hidden mt-3 flex items-center gap-3 p-3 bg-violet-50 dark:bg-violet-900/20 rounded-lg border border-violet-100 dark:border-violet-800">
                    <svg class="w-8 h-8 text-violet-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <div class="flex-1 min-w-0">
                        <p id="fileName" class="text-sm font-semibold text-gray-800 dark:text-gray-200 truncate"></p>
                        <p id="fileSize" class="text-xs text-gray-500 dark:text-gray-400"></p>
                    </div>
                    <div id="pageCountBadge" class="hidden shrink-0 px-3 py-1 bg-violet-600 text-white text-xs font-bold rounded-full"></div>
                    <button onclick="clearFile()" class="shrink-0 text-gray-400 hover:text-red-500 transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>

            {{-- 設定 --}}
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">

                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">每份頁數 <span class="text-red-500">*</span></label>
                    <div class="flex items-center gap-2">
                        <input type="number" id="pagesPerChunk" value="100" min="1" max="9999"
                               oninput="updatePreview()"
                               class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-violet-500 focus:border-violet-500">
                        <span class="text-sm text-gray-500 whitespace-nowrap">頁/份</span>
                    </div>
                    <div class="flex gap-2 mt-2 flex-wrap">
                        @foreach([50,100,150,200] as $n)
                        <button onclick="document.getElementById('pagesPerChunk').value={{$n}};updatePreview()"
                                class="px-2.5 py-1 text-xs font-medium bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400 rounded-md hover:bg-violet-100 hover:text-violet-700 dark:hover:bg-violet-900/30 transition-colors">
                            {{$n}}頁
                        </button>
                        @endforeach
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">輸出檔名前綴</label>
                    <input type="text" id="filenamePrefix" placeholder="例：考古題_2024" maxlength="50"
                           class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-violet-500 focus:border-violet-500 placeholder-gray-400">
                    <p class="text-xs text-gray-400 mt-1">預設為原檔名（不含副檔名）</p>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">起始頁 <span class="text-gray-400 font-normal">（選填，預設第 1 頁）</span></label>
                    <input type="number" id="startPage" placeholder="1" min="1"
                           oninput="updatePreview()"
                           class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-violet-500 focus:border-violet-500 placeholder-gray-400">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">結束頁 <span class="text-gray-400 font-normal">（選填，預設最後一頁）</span></label>
                    <input type="number" id="endPage" placeholder="最後一頁" min="1"
                           oninput="updatePreview()"
                           class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-violet-500 focus:border-violet-500 placeholder-gray-400">
                </div>
            </div>

            {{-- 預覽 --}}
            <div id="previewBox" class="hidden bg-gray-50 dark:bg-slate-800 rounded-xl p-4 border border-gray-200 dark:border-slate-700">
                <p class="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">切割預覽</p>
                <div id="previewList" class="space-y-1 max-h-52 overflow-y-auto pr-1"></div>
                <div id="previewSummary" class="mt-3 pt-3 border-t border-gray-200 dark:border-slate-700 text-sm font-semibold text-violet-700 dark:text-violet-300"></div>
            </div>

            {{-- 進度 --}}
            <div id="progressBox" class="hidden">
                <div class="flex items-center gap-3 mb-2">
                    <svg class="w-5 h-5 text-violet-500 animate-spin shrink-0" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span id="progressText" class="text-sm text-gray-600 dark:text-gray-400 font-medium">上傳並切割中，請稍候...</span>
                </div>
                <div class="w-full bg-gray-200 dark:bg-slate-700 rounded-full h-2">
                    <div id="progressBar" class="bg-violet-600 h-2 rounded-full transition-all duration-300" style="width:0%"></div>
                </div>
            </div>

            {{-- 錯誤 --}}
            <div id="errorBox" class="hidden bg-red-50 dark:bg-red-900/20 rounded-lg p-4 text-sm text-red-700 dark:text-red-400 border border-red-100 dark:border-red-800"></div>

            {{-- 按鈕 --}}
            <div class="flex gap-3">
                <button id="btnSplit" onclick="doSplit()" disabled
                        class="flex-1 py-3 bg-gradient-to-r from-violet-600 to-purple-600 text-white rounded-xl font-semibold text-sm hover:shadow-lg hover:scale-[1.01] transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:scale-100 disabled:shadow-none">
                    <svg class="w-4 h-4 inline -mt-0.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"/>
                    </svg>
                    開始切割
                </button>
                <button onclick="clearFile()" class="px-5 py-3 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-xl font-semibold text-sm hover:bg-gray-300 dark:hover:bg-slate-600 transition-colors">
                    重設
                </button>
            </div>
        </div>
    </div>

    {{-- 說明 --}}
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-5">
        <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">使用說明</p>
        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
            <li class="flex gap-2"><span class="text-violet-500 font-bold shrink-0">1.</span>上傳 PDF 檔案後系統會自動偵測頁數</li>
            <li class="flex gap-2"><span class="text-violet-500 font-bold shrink-0">2.</span>設定每份頁數（如 100）、可選填起始／結束頁縮小範圍</li>
            <li class="flex gap-2"><span class="text-violet-500 font-bold shrink-0">3.</span>「切割預覽」會即時顯示每一份的頁碼範圍與份數</li>
            <li class="flex gap-2"><span class="text-violet-500 font-bold shrink-0">4.</span>點「開始切割」後，多份檔案自動打包為 ZIP 下載；只有一份則直接回傳 PDF</li>
            <li class="flex gap-2"><span class="text-violet-500 font-bold shrink-0">⚠</span>加密或損壞的 PDF 無法切割，請先解除加密後再上傳</li>
        </ul>
    </div>
</div>

<script>
const CSRF_TOKEN = '{{ csrf_token() }}';
let selectedFile = null;
let totalPages   = 0;

// ── 上傳 / 拖曳 ──
function onFileSelect(file) {
    if (!file || file.type !== 'application/pdf') { showError('請選擇 PDF 格式檔案'); return; }
    if (file.size > 100 * 1024 * 1024) { showError('檔案大小不可超過 100 MB'); return; }
    selectedFile = file;
    hideError();
    document.getElementById('fileInfo').classList.remove('hidden');
    document.getElementById('dropZone').classList.add('hidden');
    document.getElementById('fileName').textContent = file.name;
    document.getElementById('fileSize').textContent = formatSize(file.size);
    // 自動填入前綴
    if (!document.getElementById('filenamePrefix').value) {
        document.getElementById('filenamePrefix').value = file.name.replace(/\.pdf$/i, '');
    }
    detectPageCount(file);
}

function onDrop(event, isDragOver) {
    event.preventDefault();
    event.stopPropagation();
    const zone = document.getElementById('dropZone');
    if (isDragOver) { zone.classList.add('border-violet-400','bg-violet-50','dark:bg-violet-900/10'); return; }
    zone.classList.remove('border-violet-400','bg-violet-50','dark:bg-violet-900/10');
    const file = event.dataTransfer?.files[0];
    if (file) onFileSelect(file);
}

function onDropLeave(event) {
    document.getElementById('dropZone').classList.remove('border-violet-400','bg-violet-50','dark:bg-violet-900/10');
}

function clearFile() {
    selectedFile = null; totalPages = 0;
    document.getElementById('pdfFileInput').value = '';
    document.getElementById('fileInfo').classList.add('hidden');
    document.getElementById('dropZone').classList.remove('hidden');
    document.getElementById('pageCountBadge').classList.add('hidden');
    document.getElementById('previewBox').classList.add('hidden');
    document.getElementById('btnSplit').disabled = true;
    hideError();
}

// ── 偵測頁數 ──
async function detectPageCount(file) {
    const badge = document.getElementById('pageCountBadge');
    badge.textContent = '偵測中...'; badge.classList.remove('hidden');

    const fd = new FormData();
    fd.append('pdf_file', file);
    fd.append('_token', CSRF_TOKEN);
    try {
        const res  = await fetch('{{ route("admin.pdf-split.info") }}', { method: 'POST', body: fd });
        const data = await res.json();
        if (data.total_pages) {
            totalPages = data.total_pages;
            badge.textContent = `共 ${totalPages} 頁`;
            document.getElementById('endPage').placeholder = totalPages;
            document.getElementById('btnSplit').disabled = false;
            updatePreview();
        } else {
            badge.textContent = '無法讀取'; badge.className = badge.className.replace('bg-violet-600','bg-red-500');
            showError(data.error || '無法偵測頁數');
        }
    } catch (e) {
        badge.textContent = '偵測失敗'; showError(e.message);
    }
}

// ── 預覽 ──
function updatePreview() {
    if (!totalPages) return;
    const ppc   = Math.max(1, parseInt(document.getElementById('pagesPerChunk').value) || 100);
    const start = Math.max(1, parseInt(document.getElementById('startPage').value) || 1);
    const end   = Math.min(totalPages, parseInt(document.getElementById('endPage').value) || totalPages);
    if (start > end) { document.getElementById('previewBox').classList.add('hidden'); return; }

    const parts = [];
    for (let s = start; s <= end; s += ppc) {
        parts.push({ from: s, to: Math.min(s + ppc - 1, end) });
    }

    const list = document.getElementById('previewList');
    list.innerHTML = parts.map((p, i) =>
        `<div class="flex items-center gap-2 text-xs py-1">
            <span class="w-6 h-6 flex items-center justify-center bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300 rounded font-bold shrink-0">${i+1}</span>
            <span class="text-gray-600 dark:text-gray-400">第 <b class="text-gray-800 dark:text-gray-200">${p.from}</b> ~ <b class="text-gray-800 dark:text-gray-200">${p.to}</b> 頁</span>
            <span class="text-gray-400">(${p.to - p.from + 1} 頁)</span>
        </div>`
    ).join('');
    document.getElementById('previewSummary').textContent = `共 ${parts.length} 份${parts.length > 1 ? '，下載為 ZIP 壓縮檔' : '，直接下載 PDF'}`;
    document.getElementById('previewBox').classList.remove('hidden');
}

// ── 切割 ──
async function doSplit() {
    if (!selectedFile) { showError('請先選擇 PDF 檔案'); return; }

    const ppc    = parseInt(document.getElementById('pagesPerChunk').value);
    const prefix = document.getElementById('filenamePrefix').value.trim();
    const start  = document.getElementById('startPage').value;
    const end    = document.getElementById('endPage').value;

    if (!ppc || ppc < 1) { showError('每份頁數至少為 1'); return; }

    hideError();
    document.getElementById('btnSplit').disabled = true;
    document.getElementById('progressBox').classList.remove('hidden');

    // 模擬進度（實際切割由後端完成，無法得知精確進度）
    let progress = 0;
    const progressInterval = setInterval(() => {
        progress = Math.min(progress + Math.random() * 8, 88);
        document.getElementById('progressBar').style.width = progress + '%';
        if (progress > 30)  document.getElementById('progressText').textContent = '上傳完成，正在切割...';
        if (progress > 70)  document.getElementById('progressText').textContent = '打包 ZIP 中...';
    }, 400);

    const fd = new FormData();
    fd.append('pdf_file',        selectedFile);
    fd.append('pages_per_chunk', ppc);
    fd.append('_token',          CSRF_TOKEN);
    if (prefix)  fd.append('filename_prefix', prefix);
    if (start)   fd.append('start_page', start);
    if (end)     fd.append('end_page',   end);

    try {
        const res = await fetch('{{ route("admin.pdf-split.split") }}', { method: 'POST', body: fd });
        clearInterval(progressInterval);
        document.getElementById('progressBar').style.width = '100%';

        if (!res.ok) {
            const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
            throw new Error(err.error || '切割失敗');
        }

        // 觸發下載
        const ct   = res.headers.get('Content-Type') || '';
        const cd   = res.headers.get('Content-Disposition') || '';
        const mFn  = cd.match(/filename\*?=(?:UTF-8'')?["']?([^"';\r\n]+)/i);
        const fn   = mFn ? decodeURIComponent(mFn[1]) : (ct.includes('zip') ? `${prefix || 'split'}.zip` : `${prefix || 'split'}.pdf`);
        const blob = await res.blob();
        const url  = URL.createObjectURL(blob);
        const a    = document.createElement('a'); a.href = url; a.download = fn; a.click();
        URL.revokeObjectURL(url);

        document.getElementById('progressText').textContent = '✅ 切割完成，開始下載！';
        setTimeout(() => document.getElementById('progressBox').classList.add('hidden'), 2500);
    } catch (e) {
        clearInterval(progressInterval);
        document.getElementById('progressBox').classList.add('hidden');
        showError(e.message);
    } finally {
        document.getElementById('btnSplit').disabled = false;
    }
}

// ── 工具 ──
function showError(msg) {
    const box = document.getElementById('errorBox');
    box.innerHTML = `<svg class="w-4 h-4 inline mr-1.5 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>${escapeHtml(msg)}`;
    box.classList.remove('hidden');
}
function hideError() { document.getElementById('errorBox').classList.add('hidden'); }
function escapeHtml(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
function formatSize(bytes) {
    if (bytes < 1024)       return bytes + ' B';
    if (bytes < 1048576)    return (bytes/1024).toFixed(1) + ' KB';
    return (bytes/1048576).toFixed(1) + ' MB';
}
</script>
@endsection