{{-- Google Drive panel (ใช้ซ้ำได้ทุกหน้า) — include แล้วส่ง refType/refId เช่น ('memo', id โปรเจกต์) --}}
@php
    $driveConnected = \App\Models\GDriveToken::where('user_id', auth()->id())->exists();
    $driveLink      = \App\Models\GDriveLink::where('ref_type', $refType)->where('ref_id', (string) $refId)->first();
    $hasFolder      = (bool) $driveLink;
@endphp

<div class="border rounded-4 p-4 mt-4" id="drivePanel-{{ $refType }}-{{ $refId }}">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
        <div>
            <div class="fw-bold"><i class="uil uil-cloud-upload me-1"></i> Google Drive</div>
            <div class="text-muted small" id="driveFolderLabel">
                @if($hasFolder)
                    โฟลเดอร์ปลายทาง: <b>{{ $driveLink->folder_name }}</b>
                @else
                    ยังไม่ได้เลือกโฟลเดอร์
                @endif
            </div>
        </div>
        <div class="d-flex gap-2">
            @if($driveConnected)
                <button type="button" class="btn btn-sm btn-outline-primary rounded-pill" id="btnPickFolder">
                    <i class="uil uil-folder-open"></i> {{ $hasFolder ? 'เปลี่ยนโฟลเดอร์' : 'เลือกโฟลเดอร์' }}
                </button>
            @else
                <a href="{{ url('/gdrive/connect') }}" class="btn btn-sm btn-primary rounded-pill">
                    <i class="uil uil-link"></i> เชื่อมต่อ Google Drive ({{ auth()->user()->email }})
                </a>
            @endif
        </div>
    </div>

    @if(session('drive_error')) <div class="alert alert-danger py-2 mt-3 mb-0">{{ session('drive_error') }}</div> @endif
    @if(session('drive_ok'))    <div class="alert alert-success py-2 mt-3 mb-0">{{ session('drive_ok') }}</div> @endif

    <div id="driveUploadBox" class="mt-3" @if(!$hasFolder) style="display:none" @endif>
        <input type="file" id="driveFileInput" class="form-control" multiple>
        <div class="text-muted small mt-1">ไฟล์ละไม่เกิน {{ config('services.google_drive.max_upload_mb', 50) }} MB — เลือกแล้วระบบอัปโหลดเข้าโฟลเดอร์ให้อัตโนมัติ</div>
        <div id="driveQueue" class="mt-2"></div>

        <div class="d-flex justify-content-between align-items-center mt-3">
            <div class="fw-bold small">ไฟล์ในโฟลเดอร์</div>
            <button type="button" class="btn btn-xs btn-soft-ash rounded-pill" id="btnRefreshFiles">รีเฟรช</button>
        </div>
        <ul class="list-unstyled small mb-0" id="driveFileList"></ul>
    </div>
</div>

{{-- Modal เลือกโฟลเดอร์ --}}
<div class="modal fade" id="driveFolderModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">เลือกโฟลเดอร์ใน Google Drive</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="small text-muted mb-2" id="driveCrumb"></div>
                <div id="driveFolderList"></div>
                <div class="text-danger small mt-2" id="driveFolderErr"></div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill" id="btnFolderUp">ย้อนกลับ</button>
                <button type="button" class="btn btn-sm btn-primary rounded-pill" id="btnFolderUse">เลือกโฟลเดอร์นี้</button>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    const BASE = '{{ url('/gdrive') }}/' + @json($refType . '/' . $refId);
    const CSRF = '{{ csrf_token() }}';
    const MAX  = {{ (int) config('services.google_drive.max_upload_mb', 50) }} * 1024 * 1024;
    let hasFolder = {{ $hasFolder ? 'true' : 'false' }};

    const $ = (id) => document.getElementById(id);
    const esc = (s) => String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    const fmtSize = (b) => b ? (b > 1048576 ? (b/1048576).toFixed(1)+' MB' : Math.ceil(b/1024)+' KB') : '';

    async function api(path, opts = {}) {
        const res  = await fetch(BASE + path, Object.assign({
            headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' }
        }, opts));
        const data = await res.json().catch(() => ({}));
        if (!res.ok) {
            const err = new Error(data.message || 'เกิดข้อผิดพลาด (' + res.status + ')');
            err.reconnect = !!data.needs_reconnect;
            throw err;
        }
        return data;
    }

    /* ---------- เลือกโฟลเดอร์ ---------- */
    let stack = [{ id: 'root', name: 'My Drive' }];   // path ที่กำลังเปิดอยู่
    let modal;

    async function loadFolders() {
        const cur = stack[stack.length - 1];
        $('driveCrumb').textContent = stack.map(s => s.name).join(' / ');
        $('driveFolderErr').textContent = '';
        $('driveFolderList').innerHTML = '<div class="text-muted small">กำลังโหลด...</div>';
        $('btnFolderUp').disabled  = stack.length < 2;
        $('btnFolderUse').disabled = cur.id === 'root';   // ไม่ให้เลือก My Drive ทั้งก้อน
        try {
            const { folders } = await api('/folders?parent=' + encodeURIComponent(cur.id));
            $('driveFolderList').innerHTML = folders.length
                ? folders.map(f => '<a href="#" class="list-group-item list-group-item-action py-2" data-id="' + esc(f.id) + '" data-name="' + esc(f.name) + '"><i class="uil uil-folder me-1"></i>' + esc(f.name) + '</a>').join('')
                : '<div class="text-muted small">ไม่มีโฟลเดอร์ย่อย</div>';
        } catch (e) {
            $('driveFolderList').innerHTML = '';
            $('driveFolderErr').innerHTML = esc(e.message) + (e.reconnect ? ' <a href="{{ url('/gdrive/connect') }}">เชื่อมต่อใหม่</a>' : '');
        }
    }

    function openPicker() {
        stack = [{ id: 'root', name: 'My Drive' }];
        modal = modal || new bootstrap.Modal($('driveFolderModal'));
        modal.show();
        loadFolders();
    }

    $('driveFolderList').addEventListener('click', (e) => {
        const a = e.target.closest('a[data-id]');
        if (!a) return;
        e.preventDefault();
        stack.push({ id: a.dataset.id, name: a.dataset.name });
        loadFolders();
    });
    $('btnFolderUp').addEventListener('click', () => { if (stack.length > 1) { stack.pop(); loadFolders(); } });

    $('btnFolderUse').addEventListener('click', async () => {
        const cur = stack[stack.length - 1];
        try {
            const { folder } = await api('/folder', {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json', 'Content-Type': 'application/json' },
                body: JSON.stringify({ folder_id: cur.id })
            });
            hasFolder = true;
            $('driveFolderLabel').innerHTML = 'โฟลเดอร์ปลายทาง: <b>' + esc(folder.name) + '</b>';
            $('driveUploadBox').style.display = '';
            $('btnPickFolder').innerHTML = '<i class="uil uil-folder-open"></i> เปลี่ยนโฟลเดอร์';
            modal.hide();
            loadFiles();
        } catch (e) {
            $('driveFolderErr').textContent = e.message;
        }
    });

    const pickBtn = $('btnPickFolder');
    if (pickBtn) pickBtn.addEventListener('click', openPicker);
    if (pickBtn && new URLSearchParams(location.search).get('open_folder') === '1') openPicker();

    /* ---------- อัปโหลด (ทีละไฟล์ พร้อม progress) ---------- */
    function uploadOne(file, row) {
        return new Promise((resolve) => {
            const bar = row.querySelector('.progress-bar'), st = row.querySelector('.st');
            if (file.size > MAX) { fail('ไฟล์ใหญ่เกิน ' + (MAX / 1048576) + ' MB'); return resolve(); }

            const fd = new FormData(); fd.append('file', file);
            const xhr = new XMLHttpRequest();
            xhr.open('POST', BASE + '/upload');
            xhr.setRequestHeader('X-CSRF-TOKEN', CSRF);
            xhr.setRequestHeader('Accept', 'application/json');

            function fail(msg) { st.className = 'st text-danger'; st.textContent = 'ผิดพลาด: ' + msg; bar.classList.add('bg-danger'); }

            xhr.upload.onprogress = (ev) => {
                if (!ev.lengthComputable) return;
                const p = Math.round(ev.loaded / ev.total * 100);
                bar.style.width = p + '%';
                st.textContent = p < 100 ? 'กำลังอัปโหลด ' + p + '%' : 'กำลังส่งเข้า Google Drive...';
            };
            xhr.onload = () => {
                let d = {}; try { d = JSON.parse(xhr.responseText); } catch (e) {}
                if (xhr.status >= 200 && xhr.status < 300) {
                    bar.style.width = '100%'; bar.classList.add('bg-success');
                    st.className = 'st text-success'; st.textContent = 'สำเร็จ';
                } else if (xhr.status === 413) {
                    fail('ไฟล์ใหญ่เกินที่เซิร์ฟเวอร์รับได้ (post_max_size / client_max_body_size)');
                } else {
                    fail(d.message || 'HTTP ' + xhr.status);
                }
                resolve();
            };
            xhr.onerror = () => { fail('เชื่อมต่อเซิร์ฟเวอร์ไม่ได้'); resolve(); };
            xhr.send(fd);
        });
    }

    $('driveFileInput').addEventListener('change', async (e) => {
        const files = Array.from(e.target.files);
        e.target.value = '';
        for (const f of files) {
            const row = document.createElement('div');
            row.className = 'mb-2 small';
            row.innerHTML = '<div class="d-flex justify-content-between"><span>' + esc(f.name) + ' <span class="text-muted">(' + fmtSize(f.size) + ')</span></span><span class="st text-muted">รอคิว</span></div>'
                          + '<div class="progress" style="height:6px"><div class="progress-bar" style="width:0"></div></div>';
            $('driveQueue').appendChild(row);
            await uploadOne(f, row);
        }
        loadFiles();
    });

    /* ---------- รายการไฟล์ในโฟลเดอร์ ---------- */
    async function loadFiles() {
        if (!hasFolder) return;
        const ul = $('driveFileList');
        ul.innerHTML = '<li class="text-muted">กำลังโหลด...</li>';
        try {
            const { files } = await api('/files');
            ul.innerHTML = files.length ? files.map(f =>
                '<li class="py-1 border-bottom"><a href="' + esc(f.link || '#') + '" target="_blank" rel="noopener">' + esc(f.name) + '</a> <span class="text-muted">' + fmtSize(+f.size) + '</span></li>'
            ).join('') : '<li class="text-muted">ยังไม่มีไฟล์</li>';
        } catch (e) {
            ul.innerHTML = '<li class="text-danger">' + esc(e.message) + '</li>';
        }
    }
    $('btnRefreshFiles').addEventListener('click', loadFiles);
    loadFiles();
})();
</script>