@extends('layouts.admin')
@section('title', 'Google Drive 管理')
@section('content')
<div class="flex flex-col h-[calc(100vh-120px)] min-h-[600px]">

{{-- ── 頂部工具列 ── --}}
<div class="flex flex-wrap items-center gap-3 mb-4">
    <div class="flex-1 min-w-0">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
            <svg class="w-6 h-6 text-blue-500" fill="currentColor" viewBox="0 0 24 24"><path d="M4.433 22l2.268-3.927H22l-2.268 3.927H4.433zM2 18.118l4.537-7.854 3.955 6.85L8.224 18.9l-.267.463 3.955.001L14.18 15l3.955 6.851.267.463H2zm9.536-7.854L7.006 2h9.988l4.53 7.854H11.536z"/></svg>
            Google Drive 管理
        </h1>
    </div>
    <button onclick="openAddDriveModal()"
        class="flex items-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium shadow">
        <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="M12 4v16m8-8H4"/></svg>
        新增 Drive
    </button>
</div>

{{-- ── 主面板（左樹 + 右清單） ── --}}
<div class="flex flex-1 gap-4 min-h-0 overflow-hidden">

{{-- ── 左側：Drive 選擇 + 資料夾樹 ── --}}
<div class="w-64 flex-shrink-0 flex flex-col bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 shadow overflow-hidden">

    {{-- Drive 選單 --}}
    <div class="p-3 border-b border-gray-200 dark:border-slate-700">
        <select id="driveSelect" onchange="selectDrive(this.value)"
            class="w-full text-sm border border-gray-300 dark:border-slate-600 rounded-lg px-2 py-1.5 bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:outline-none">
            <option value="">— 選擇 Drive —</option>
            @foreach($drives as $d)
            <option value="{{ $d->id }}">{{ $d->name }}</option>
            @endforeach
        </select>
    </div>

    {{-- Drive 資訊 --}}
    <div id="driveInfo" class="hidden px-3 py-2 border-b border-gray-200 dark:border-slate-700 text-xs text-gray-500 dark:text-gray-400 space-y-0.5">
        <div id="driveInfoFiles" class="flex justify-between"><span>檔案數</span><span class="font-medium text-gray-700 dark:text-gray-300" id="driveFileCount">—</span></div>
        <div id="driveInfoSync" class="flex justify-between"><span>上次同步</span><span class="font-medium text-gray-700 dark:text-gray-300" id="driveSyncAt">—</span></div>
        <div class="flex gap-1 mt-1.5">
            <button onclick="syncDrive()" id="btnSync"
                class="flex-1 flex items-center justify-center gap-1 py-1 bg-green-600 hover:bg-green-700 text-white rounded text-xs font-medium">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                同步
            </button>
            <button onclick="testConnection()" id="btnTest" title="診斷連線" class="px-2 py-1 border border-blue-300 rounded text-xs text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20">診斷</button>
            <button onclick="openEditDriveModal()" class="px-2 py-1 border border-gray-300 dark:border-slate-600 rounded text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700">設定</button>
            <button onclick="deleteDrive()" class="px-2 py-1 border border-red-300 rounded text-xs text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20">刪除</button>
        </div>
    </div>

    {{-- 資料夾樹 --}}
    <div class="flex-1 overflow-y-auto p-2" id="folderTree">
        <div class="text-xs text-gray-400 p-2">請選擇 Drive</div>
    </div>
</div>

{{-- ── 右側：搜尋 + 麵包屑 + 檔案清單 ── --}}
<div class="flex-1 flex flex-col min-w-0 bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 shadow overflow-hidden">

    {{-- 搜尋列 --}}
    <div class="p-3 border-b border-gray-200 dark:border-slate-700 space-y-2">
        <div class="flex gap-2">
            <div class="relative flex-1">
                <input type="text" id="searchInput" placeholder="搜尋檔案名稱、備註..."
                    onkeydown="if(event.key==='Enter')doSearch()"
                    class="w-full pl-9 pr-4 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-blue-500 focus:outline-none">
                <svg class="absolute left-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/></svg>
            </div>
            <button onclick="doSearch()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">搜尋</button>
            <button onclick="clearSearch()" class="px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700">清除</button>
        </div>
        <div class="flex flex-wrap gap-2 items-center">
            <select id="filterMime" onchange="doSearch()"
                class="text-xs border border-gray-300 dark:border-slate-600 rounded px-2 py-1 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300">
                <option value="">所有類型</option>
                <option value="folder">📁 資料夾</option>
                <option value="pdf">📄 PDF</option>
                <option value="image">🖼 圖片</option>
                <option value="video">🎬 影片</option>
                <option value="gdoc">📝 Google 文件</option>
            </select>
            <select id="filterTag" onchange="doSearch()"
                class="text-xs border border-gray-300 dark:border-slate-600 rounded px-2 py-1 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300">
                <option value="">所有標籤</option>
            </select>
            <input type="date" id="filterDateFrom" onchange="doSearch()" placeholder="起始日期"
                class="text-xs border border-gray-300 dark:border-slate-600 rounded px-2 py-1 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300">
            <span class="text-gray-400 text-xs">~</span>
            <input type="date" id="filterDateTo" onchange="doSearch()"
                class="text-xs border border-gray-300 dark:border-slate-600 rounded px-2 py-1 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300">
            <button onclick="openUploadModal()" id="btnUpload" class="hidden ml-auto flex items-center gap-1 px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white rounded text-xs font-medium">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                上傳
            </button>
        </div>
    </div>

    {{-- 麵包屑 --}}
    <div id="breadcrumb" class="px-4 py-2 border-b border-gray-100 dark:border-slate-800 text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 flex-wrap overflow-x-auto">
        <span class="text-gray-400">請選擇 Drive 或搜尋</span>
    </div>

    {{-- 檔案清單 --}}
    <div class="flex-1 overflow-auto" id="fileListWrap">
        <table class="w-full text-sm">
            <thead class="sticky top-0 bg-gray-50 dark:bg-slate-800 z-10">
                <tr class="text-left text-xs text-gray-500 dark:text-gray-400 font-semibold">
                    <th class="px-4 py-2.5 w-8"><input type="checkbox" id="checkAll" onchange="toggleCheckAll(this)" class="rounded"></th>
                    <th class="px-2 py-2.5 cursor-pointer hover:text-gray-700" onclick="setSortAndBrowse('name')">名稱 <span id="sortIndicator_name"></span></th>
                    <th class="px-2 py-2.5 w-28 cursor-pointer hover:text-gray-700" onclick="setSortAndBrowse('size')">大小 <span id="sortIndicator_size"></span></th>
                    <th class="px-2 py-2.5 w-36 cursor-pointer hover:text-gray-700" onclick="setSortAndBrowse('modified')">修改時間 <span id="sortIndicator_modified"></span></th>
                    <th class="px-2 py-2.5 w-40">標籤</th>
                    <th class="px-2 py-2.5 w-28 text-right">操作</th>
                </tr>
            </thead>
            <tbody id="fileList">
                <tr><td colspan="6" class="text-center py-12 text-gray-400 text-sm">請選擇左側 Drive</td></tr>
            </tbody>
        </table>
    </div>

    {{-- 分頁 + 狀態列 --}}
    <div class="px-4 py-2 border-t border-gray-100 dark:border-slate-800 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
        <span id="fileCount">—</span>
        <div class="flex gap-1" id="pagination"></div>
        <div id="selectionBar" class="hidden flex gap-2 items-center">
            <span id="selectedCount" class="text-blue-600 font-medium"></span>
            <button onclick="bulkTrash()" class="px-2 py-0.5 bg-red-100 text-red-700 rounded text-xs hover:bg-red-200">🗑 刪除選取</button>
        </div>
    </div>
</div>
</div>
</div>

{{-- ═══════════════════ MODALS ═══════════════════ --}}

{{-- 新增 / 編輯 Drive --}}
<div id="modalDrive" class="hidden fixed inset-0 bg-black/50 z-50 overflow-y-auto">
  <div class="flex min-h-full items-start justify-center p-4 py-8">
  <div class="bg-white dark:bg-slate-900 rounded-xl shadow-2xl w-full max-w-2xl">
    <div class="p-5 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
        <h3 id="modalDriveTitle" class="font-bold text-gray-900 dark:text-white flex items-center gap-2">
            <svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 24 24"><path d="M4.433 22l2.268-3.927H22l-2.268 3.927H4.433zM2 18.118l4.537-7.854 3.955 6.85-.268.463-.267.463H2zm9.536-7.854L7.006 2h9.988l4.53 7.854H11.536z"/></svg>
            新增 Google Drive
        </h3>
        <button onclick="closeModal('modalDrive')" class="text-gray-400 hover:text-gray-600 text-xl leading-none">✕</button>
    </div>

    {{-- ── 取得 JSON 說明（可收合） ── --}}
    <div class="border-b border-gray-200 dark:border-slate-700">
        <button onclick="toggleJsonGuide()" id="jsonGuideToggle"
            class="w-full flex items-center justify-between px-5 py-3 text-sm font-medium text-blue-700 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors">
            <span class="flex items-center gap-2">
                <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                如何取得 Service Account JSON？（點此展開步驟說明）
            </span>
            <svg id="jsonGuideArrow" class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </button>

        <div id="jsonGuide" class="hidden px-5 pb-5 space-y-4 bg-blue-50/50 dark:bg-blue-900/10">

            {{-- 前置說明 --}}
            <div class="pt-3 pb-1 text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                系統使用 <strong>Google Service Account</strong> 存取 Google Drive，不需要使用者手動登入 Google，適合伺服器自動化作業。<br>
                完成以下 5 個步驟約需 <strong>5～10 分鐘</strong>。
            </div>

            {{-- 步驟一 --}}
            <div class="bg-white dark:bg-slate-800 rounded-lg border border-blue-100 dark:border-slate-700 p-4">
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-7 h-7 rounded-full bg-blue-600 text-white text-xs font-bold flex items-center justify-center mt-0.5">1</span>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-sm text-gray-800 dark:text-gray-200 mb-1">建立或選取 Google Cloud 專案</p>
                        <p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed mb-2">
                            前往 Google Cloud Console，點右上角「選取專案」→「新增專案」，建立一個專案（名稱隨意，例如 <code class="bg-gray-100 dark:bg-slate-700 px-1 rounded">drive-manager</code>）。已有專案可直接使用。
                        </p>
                        <a href="https://console.cloud.google.com/projectcreate" target="_blank"
                            class="inline-flex items-center gap-1 text-xs text-blue-600 hover:underline font-medium">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                            前往建立 Google Cloud 專案
                        </a>
                    </div>
                </div>
            </div>

            {{-- 步驟二 --}}
            <div class="bg-white dark:bg-slate-800 rounded-lg border border-blue-100 dark:border-slate-700 p-4">
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-7 h-7 rounded-full bg-blue-600 text-white text-xs font-bold flex items-center justify-center mt-0.5">2</span>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-sm text-gray-800 dark:text-gray-200 mb-1">啟用 Google Drive API</p>
                        <p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed mb-2">
                            在 Google Cloud Console 左側選單 → <strong>API 和服務 → 媒體庫</strong>，搜尋「Google Drive API」，點擊後按「<strong>啟用</strong>」。
                        </p>
                        <a href="https://console.cloud.google.com/apis/library/drive.googleapis.com" target="_blank"
                            class="inline-flex items-center gap-1 text-xs text-blue-600 hover:underline font-medium">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                            直接前往啟用 Google Drive API
                        </a>
                    </div>
                </div>
            </div>

            {{-- 步驟三 --}}
            <div class="bg-white dark:bg-slate-800 rounded-lg border border-blue-100 dark:border-slate-700 p-4">
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-7 h-7 rounded-full bg-blue-600 text-white text-xs font-bold flex items-center justify-center mt-0.5">3</span>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-sm text-gray-800 dark:text-gray-200 mb-1">建立 Service Account（服務帳號）</p>
                        <p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed mb-2">
                            左側選單 → <strong>IAM 與管理 → 服務帳號</strong> → 點「<strong>建立服務帳號</strong>」。<br>
                            填寫帳號名稱（例如 <code class="bg-gray-100 dark:bg-slate-700 px-1 rounded">drive-reader</code>），描述隨意，角色選「<strong>編輯者</strong>」或不選也可以，按「完成」。
                        </p>
                        <a href="https://console.cloud.google.com/iam-admin/serviceaccounts" target="_blank"
                            class="inline-flex items-center gap-1 text-xs text-blue-600 hover:underline font-medium">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                            前往服務帳號管理頁面
                        </a>
                    </div>
                </div>
            </div>

            {{-- 步驟四 --}}
            <div class="bg-white dark:bg-slate-800 rounded-lg border border-blue-100 dark:border-slate-700 p-4">
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-7 h-7 rounded-full bg-blue-600 text-white text-xs font-bold flex items-center justify-center mt-0.5">4</span>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-sm text-gray-800 dark:text-gray-200 mb-1">下載 JSON 金鑰</p>
                        <p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                            在服務帳號清單中，點剛建立的帳號 → 上方頁籤選「<strong>金鑰</strong>」→「<strong>新增金鑰</strong>」→「建立新的金鑰」→ 類型選 <strong>JSON</strong> → 按「建立」。<br>
                            瀏覽器會自動下載一個 <code class="bg-gray-100 dark:bg-slate-700 px-1 rounded">.json</code> 檔案，用文字編輯器開啟，將全部內容複製貼到下方欄位。
                        </p>
                    </div>
                </div>
            </div>

            {{-- 步驟五 --}}
            <div class="bg-white dark:bg-slate-800 rounded-lg border border-amber-100 dark:border-amber-900/40 p-4">
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-7 h-7 rounded-full bg-amber-500 text-white text-xs font-bold flex items-center justify-center mt-0.5">5</span>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-sm text-gray-800 dark:text-gray-200 mb-1">
                            將 Drive 分享給 Service Account
                            <span class="ml-1 text-amber-600 dark:text-amber-400 font-bold">← 最重要，容易漏掉！</span>
                        </p>
                        <p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                            開啟 <a href="https://drive.google.com" target="_blank" class="text-blue-600 hover:underline">Google Drive</a>，
                            對要管理的「資料夾」或「共用雲端硬碟」按右鍵 → <strong>共用</strong>。<br>
                            在成員欄位貼上 Service Account 的 Email（格式類似 <code class="bg-gray-100 dark:bg-slate-700 px-1 rounded">drive-reader@your-project.iam.gserviceaccount.com</code>），<br>
                            權限選「<strong>編輯者</strong>」（如需上傳/刪除）或「<strong>檢視者</strong>」（唯讀），按「傳送」。
                        </p>
                        <div class="mt-2 text-xs text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 rounded px-2 py-1.5">
                            ⚠️ 若是「共用雲端硬碟」，需在硬碟設定的「成員」頁面加入 Service Account，並勾選「允許不在此共用雲端硬碟中的使用者存取此硬碟中的檔案」。
                        </div>
                    </div>
                </div>
            </div>

            {{-- 取得資料夾/Drive ID 說明 --}}
            <div class="bg-gray-50 dark:bg-slate-800/50 rounded-lg border border-gray-200 dark:border-slate-700 p-4">
                <p class="font-semibold text-sm text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-1">
                    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                    如何找到「資料夾 ID」或「共用雲端硬碟 ID」
                </p>
                <div class="space-y-2 text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                    <div class="flex items-start gap-2">
                        <span class="text-blue-500 font-bold flex-shrink-0">一般資料夾：</span>
                        <span>在瀏覽器開啟 Google Drive，進入目標資料夾，網址列會顯示：<br>
                        <code class="bg-gray-100 dark:bg-slate-700 px-1 rounded">https://drive.google.com/drive/folders/<strong class="text-blue-600">1aBcDefGhiJkLmNoPqRsTuvWx</strong></code><br>
                        斜線後面那段即為「資料夾 ID」，填入「起始資料夾 ID」欄位。</span>
                    </div>
                    <div class="flex items-start gap-2 pt-1">
                        <span class="text-purple-600 font-bold flex-shrink-0">共用雲端硬碟：</span>
                        <span>開啟共用雲端硬碟（Shared Drive）根目錄，網址列：<br>
                        <code class="bg-gray-100 dark:bg-slate-700 px-1 rounded">https://drive.google.com/drive/u/0/folders/<strong class="text-purple-600">0ABxxxxxxxxxxxxxx</strong></code><br>
                        最後那段即為「Shared Drive ID」，需勾選下方「共用雲端硬碟」並填入。</span>
                    </div>
                </div>
            </div>

        </div>{{-- end jsonGuide --}}
    </div>

    {{-- ── 表單欄位 ── --}}
    <div class="p-5 space-y-4">
        <input type="hidden" id="driveModeId">
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">顯示名稱 <span class="text-red-500">*</span></label>
                <input type="text" id="driveName" class="w-full border border-gray-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="例：公司共用雲端硬碟">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">說明（選填）</label>
                <input type="text" id="driveDesc" class="w-full border border-gray-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="用途備註">
            </div>
        </div>

        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                Service Account JSON <span class="text-red-500" id="jsonRequired">*</span>
                <span class="text-gray-400 font-normal ml-1">（將步驟 4 下載的 .json 檔案全部內容貼到這裡）</span>
            </label>
            <textarea id="driveJson" rows="6" class="w-full border border-gray-300 dark:border-slate-600 rounded-lg px-3 py-2 text-xs font-mono bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder='{
  "type": "service_account",
  "project_id": "your-project-id",
  "private_key_id": "...",
  "private_key": "-----BEGIN RSA PRIVATE KEY-----\n...",
  "client_email": "drive-reader@your-project.iam.gserviceaccount.com",
  ...
}'></textarea>
            <p id="jsonEditHint" class="hidden mt-1 text-xs text-gray-400">編輯模式：留空表示保留原有 JSON，不更換金鑰。</p>
        </div>

        <div class="border border-gray-200 dark:border-slate-700 rounded-lg p-4 space-y-3">
            <div class="flex items-center gap-3">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" id="driveIsShared" class="rounded border-gray-300 dark:border-slate-600 text-blue-600" onchange="toggleSharedDriveFields()">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">這是「共用雲端硬碟」（Shared Drive）</span>
                </label>
                <span class="text-xs text-gray-400">— 一般個人 My Drive 不需要勾</span>
            </div>
            <div id="sharedDriveFields">
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                    Shared Drive ID <span class="text-red-500">*</span>
                    <span class="text-gray-400 font-normal">（從網址列複製，見上方說明）</span>
                </label>
                <input type="text" id="driveGDriveId" class="w-full border border-gray-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm font-mono bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="0ABCxxxxxxxxxxxxxx（約 20 個字元）">
            </div>
        </div>

        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                起始資料夾 ID
                <span class="text-gray-400 font-normal">（選填，省略則從硬碟根目錄開始同步）</span>
            </label>
            <input type="text" id="driveRootId" class="w-full border border-gray-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm font-mono bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="1aBcDefGhiJkLmNoPqRsT（從資料夾網址複製）">
            <p class="mt-1 text-xs text-gray-400">設定後，同步時只會索引這個資料夾及其子資料夾的檔案，可縮短同步時間。</p>
        </div>

        <div id="driveModalError" class="hidden text-sm text-red-600 bg-red-50 dark:bg-red-900/20 rounded-lg px-3 py-2 flex items-start gap-2">
            <svg class="w-4 h-4 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
            <span id="driveModalErrorMsg"></span>
        </div>
    </div>

    <div class="p-5 border-t border-gray-200 dark:border-slate-700 flex items-center justify-between">
        <a href="https://console.cloud.google.com/apis/library/drive.googleapis.com" target="_blank"
            class="text-xs text-blue-500 hover:underline flex items-center gap-1">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
            Google Cloud Console
        </a>
        <div class="flex gap-3">
            <button onclick="closeModal('modalDrive')" class="px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700">取消</button>
            <button onclick="saveDrive()" class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium shadow">儲存設定</button>
        </div>
    </div>
  </div>
</div>

{{-- 重新命名 --}}
<div id="modalRename" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-slate-900 rounded-xl shadow-2xl w-full max-w-md p-5">
    <h3 class="font-bold text-gray-900 dark:text-white mb-4">重新命名</h3>
    <input type="text" id="renameInput" class="w-full border border-gray-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none mb-4">
    <div class="flex justify-end gap-3">
        <button onclick="closeModal('modalRename')" class="px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm text-gray-600 dark:text-gray-300">取消</button>
        <button onclick="confirmRename()" class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">確認</button>
    </div>
  </div>
</div>

{{-- 移動 --}}
<div id="modalMove" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-slate-900 rounded-xl shadow-2xl w-full max-w-md p-5">
    <h3 class="font-bold text-gray-900 dark:text-white mb-3">移動到資料夾</h3>
    <div class="border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden mb-4 max-h-64 overflow-y-auto">
        <div id="moveFolderTree" class="p-2 text-sm text-gray-600 dark:text-gray-300">載入中…</div>
    </div>
    <div class="flex justify-end gap-3">
        <button onclick="closeModal('modalMove')" class="px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm text-gray-600 dark:text-gray-300">取消</button>
        <button onclick="confirmMove()" class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">移動</button>
    </div>
  </div>
</div>

{{-- 標籤 / 備註 --}}
<div id="modalTags" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-slate-900 rounded-xl shadow-2xl w-full max-w-md p-5">
    <div class="flex justify-between items-center mb-4">
        <h3 class="font-bold text-gray-900 dark:text-white" id="modalTagsTitle">標籤與備註</h3>
        <button onclick="closeModal('modalTags')" class="text-gray-400 hover:text-gray-600">✕</button>
    </div>
    <div class="mb-3">
        <div class="flex flex-wrap gap-1.5 mb-2" id="tagChips"></div>
        <div class="flex gap-2">
            <input type="text" id="tagInput" placeholder="輸入標籤後按 Enter"
                onkeydown="if(event.key==='Enter'){event.preventDefault();addTagFromModal()}"
                class="flex-1 border border-gray-300 dark:border-slate-600 rounded-lg px-3 py-1.5 text-sm bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none">
            <button onclick="addTagFromModal()" class="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm">新增</button>
        </div>
    </div>
    <div>
        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">備註</label>
        <textarea id="noteInput" rows="4" class="w-full border border-gray-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="自訂備註…"></textarea>
    </div>
    <div class="flex justify-end mt-4">
        <button onclick="saveNote()" class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">儲存備註</button>
    </div>
  </div>
</div>

{{-- 上傳 --}}
<div id="modalUpload" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-slate-900 rounded-xl shadow-2xl w-full max-w-md p-5">
    <div class="flex justify-between items-center mb-4">
        <h3 class="font-bold text-gray-900 dark:text-white">上傳檔案</h3>
        <button onclick="closeModal('modalUpload')" class="text-gray-400 hover:text-gray-600">✕</button>
    </div>
    <div id="uploadDropzone"
        class="border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 transition-colors"
        ondragover="event.preventDefault()" ondrop="handleDrop(event)" onclick="document.getElementById('uploadFileInput').click()">
        <svg class="w-10 h-10 mx-auto text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
        <p class="text-sm text-gray-500 dark:text-gray-400">拖曳檔案到此處，或點擊選取</p>
        <p id="uploadFilename" class="text-sm text-blue-600 font-medium mt-1"></p>
    </div>
    <input type="file" id="uploadFileInput" class="hidden" onchange="setUploadFile(this.files[0])">
    <div id="uploadProgress" class="hidden mt-3">
        <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
            <div id="uploadBar" class="h-2 bg-blue-500 rounded-full transition-all" style="width:0%"></div>
        </div>
        <p id="uploadStatus" class="text-xs text-gray-500 mt-1 text-center"></p>
    </div>
    <div class="flex justify-end gap-3 mt-4">
        <button onclick="closeModal('modalUpload')" class="px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm text-gray-600 dark:text-gray-300">取消</button>
        <button onclick="doUpload()" class="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium">上傳</button>
    </div>
  </div>
</div>

{{-- 診斷連線 Modal --}}
<div id="modalTest" class="hidden fixed inset-0 bg-black/50 z-50 overflow-y-auto">
  <div class="flex min-h-full items-start justify-center p-4">
    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-lg mt-8 mb-8 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-bold text-gray-900 dark:text-white">連線診斷</h3>
            <button onclick="closeModal('modalTest')" class="text-gray-400 hover:text-gray-600">✕</button>
        </div>
        <div id="testResult" class="space-y-2 text-sm min-h-[80px]">
            <div class="text-gray-400 animate-pulse">診斷中，請稍候…</div>
        </div>
        <div class="mt-5 text-right">
            <button onclick="closeModal('modalTest')" class="px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg text-sm text-gray-600 dark:text-gray-300">關閉</button>
        </div>
    </div>
  </div>
</div>

{{-- Toast --}}
<div id="toast" class="fixed bottom-6 right-6 z-[100] hidden">
    <div id="toastInner" class="flex items-center gap-3 px-4 py-3 rounded-xl shadow-lg text-sm font-medium text-white min-w-[200px]">
        <span id="toastMsg"></span>
    </div>
</div>

<script>
// ── 狀態 ──────────────────────────────────────────────────────────────────────
let state = {
    driveId: null,
    driveName: '',
    currentFolderId: null,
    currentFolderName: '根目錄',
    breadcrumb: [],
    sortBy: 'name',
    sortDir: 'asc',
    page: 1,
    isSearch: false,
    selectedFiles: new Set(),
    activeFile: null,    // 用於 rename/move/tag 操作
    moveFolderSelected: null,
};

// ── CSRF Token ────────────────────────────────────────────────────────────────
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content || '';
function baseUrl(path) { return '/admin/' + path; }
async function apiFetch(url, opts = {}) {
    const defaults = { headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json', 'Content-Type': 'application/json' } };
    if (opts.body instanceof FormData) delete defaults.headers['Content-Type'];
    const res = await fetch(url, { ...defaults, ...opts, headers: { ...defaults.headers, ...(opts.headers || {}) } });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) throw new Error(data.error || '操作失敗');
    return data;
}

// ── Drive 選擇 ────────────────────────────────────────────────────────────────
function selectDrive(id) {
    state.driveId = id || null;
    state.currentFolderId = null;
    state.breadcrumb = [];
    state.isSearch = false;
    document.getElementById('driveInfo').classList.toggle('hidden', !id);
    document.getElementById('btnUpload').classList.toggle('hidden', !id);
    if (!id) { renderFileList([]); renderBreadcrumb(); renderFolderTree(); return; }
    loadDriveInfo(id);
    loadFolderTree(null);
    browseFolder(null);
    loadAllTags();
}

async function loadDriveInfo(id) {
    // 從 select option 拿資訊（已渲染時知道）；更完整的從 API 取
    // 這裡直接更新 DOM 後再同步
}

function updateDriveStats(drive) {
    document.getElementById('driveFileCount').textContent = drive.total_files ?? '—';
    document.getElementById('driveSyncAt').textContent = drive.last_synced_at ?? '從未同步';
}

// ── 同步 ──────────────────────────────────────────────────────────────────────
async function syncDrive() {
    if (!state.driveId) return;
    const btn = document.getElementById('btnSync');
    btn.disabled = true;
    btn.innerHTML = '<svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/></svg> 同步中…';
    showToast('同步中，請稍候…', 'blue');
    try {
        const data = await apiFetch(baseUrl(`gdrive/${state.driveId}/sync`), { method: 'POST' });
        updateDriveStats(data.drive);
        if (data.synced === 0) {
            const hint = data.drive?.service_account_email
                ? `請確認已將資料夾共用給：${data.drive.service_account_email}`
                : '請確認 Service Account 有存取權限';
            showToast(`同步完成，共 0 筆。${hint}`, 'yellow', 8000);
        } else {
            const errMsg = (data.errors && data.errors.length) ? `（${data.errors.join('；')}）` : '';
            showToast(`同步完成，共 ${data.synced} 筆${errMsg}`, 'green');
        }
        browseFolder(state.currentFolderId);
        loadFolderTree(null);
    } catch (e) {
        showToast('同步失敗：' + e.message, 'red');
    }
    btn.disabled = false;
    btn.innerHTML = '<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> 同步';
}

// ── 診斷連線 ──────────────────────────────────────────────────────────────────
async function testConnection() {
    if (!state.driveId) { showToast('請先選擇 Drive', 'orange'); return; }
    const resultEl = document.getElementById('testResult');
    resultEl.innerHTML = '<div class="text-gray-400 animate-pulse">診斷中，請稍候…</div>';
    openModal('modalTest');
    try {
        const data = await apiFetch(baseUrl(`gdrive/${state.driveId}/test-connection`));
        let html = '';
        for (const step of (data.steps || [])) {
            const isWarn = step.startsWith('！');
            html += `<div class="flex items-start gap-2 ${isWarn ? 'text-yellow-600 dark:text-yellow-400' : 'text-green-600 dark:text-green-400'}">`
                + `<span class="mt-0.5 flex-shrink-0">${isWarn ? '⚠' : '✓'}</span>`
                + `<span>${step.replace(/^[✓！]\s*/, '')}</span></div>`;
        }
        for (const err of (data.errors || [])) {
            html += `<div class="flex items-start gap-2 text-red-600 dark:text-red-400">`
                + `<span class="mt-0.5 flex-shrink-0">✗</span>`
                + `<span>${err}</span></div>`;
        }
        if (!html) html = '<div class="text-gray-400">無回應</div>';
        resultEl.innerHTML = html;
    } catch (e) {
        resultEl.innerHTML = `<div class="text-red-600">診斷失敗：${e.message}</div>`;
    }
}

// ── 資料夾樹 ──────────────────────────────────────────────────────────────────
async function loadFolderTree(parentId, container) {
    if (!state.driveId) return;
    const el = container || document.getElementById('folderTree');
    if (!container) el.innerHTML = '<div class="text-xs text-gray-400 p-2 animate-pulse">載入中…</div>';
    try {
        const url = baseUrl(`gdrive/${state.driveId}/tree`) + (parentId ? `?parent_id=${parentId}` : '');
        const data = await apiFetch(url);
        if (!container) el.innerHTML = '';
        const list = document.createElement('ul');
        list.className = 'space-y-0.5';
        for (const f of (data.folders || [])) {
            const li = document.createElement('li');
            li.innerHTML = buildTreeNode(f);
            list.appendChild(li);
        }
        if (data.folders?.length === 0 && !container) {
            el.innerHTML = '<div class="text-xs text-gray-400 p-2">尚無資料夾（請先同步）</div>';
            return;
        }
        (container || el).appendChild(list);
    } catch (e) {
        (container || el).innerHTML = '<div class="text-xs text-red-400 p-2">載入失敗</div>';
    }
}

function buildTreeNode(f) {
    const arrow = f.has_children
        ? `<button onclick="toggleTreeNode(event,'${f.google_file_id}')" class="w-4 h-4 flex-shrink-0 text-gray-400 hover:text-gray-600 mr-0.5">▶</button>`
        : `<span class="w-4 h-4 flex-shrink-0 mr-0.5"></span>`;
    return `<div class="flex items-center gap-0.5 group">
        <span id="arrow_${f.google_file_id}">${arrow}</span>
        <button onclick="clickTreeFolder('${f.google_file_id}','${escHtml(f.name)}')"
            class="flex-1 flex items-center gap-1.5 px-1.5 py-1 rounded text-xs text-gray-700 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-slate-700 text-left truncate tree-folder-btn"
            data-fid="${f.google_file_id}">
            <span class="text-yellow-500">📁</span><span class="truncate">${escHtml(f.name)}</span>
        </button>
    </div>
    <div id="children_${f.google_file_id}" class="ml-4 hidden"></div>`;
}

async function toggleTreeNode(e, fid) {
    e.stopPropagation();
    const childrenEl = document.getElementById(`children_${fid}`);
    const arrowEl = document.getElementById(`arrow_${fid}`);
    const isOpen = !childrenEl.classList.contains('hidden');
    childrenEl.classList.toggle('hidden');
    const btn = arrowEl.querySelector('button');
    if (btn) btn.textContent = isOpen ? '▶' : '▼';
    if (!isOpen && childrenEl.children.length === 0) {
        childrenEl.innerHTML = '<div class="text-xs text-gray-400 py-1 pl-2">載入中…</div>';
        childrenEl.classList.remove('hidden');
        await loadFolderTree(fid, childrenEl);
        childrenEl.querySelector('div.text-gray-400')?.remove();
    }
}

function clickTreeFolder(fid, name) {
    document.querySelectorAll('.tree-folder-btn').forEach(b => b.classList.remove('bg-blue-100', 'dark:bg-slate-600', 'font-semibold'));
    document.querySelector(`.tree-folder-btn[data-fid="${fid}"]`)?.classList.add('bg-blue-100', 'dark:bg-slate-600', 'font-semibold');
    // 重新設定麵包屑到這個資料夾（簡化版：直接進入）
    state.isSearch = false;
    state.breadcrumb = [{ id: fid, name }];
    state.currentFolderId = fid;
    state.currentFolderName = name;
    browseFolder(fid);
}

// ── 瀏覽資料夾 ────────────────────────────────────────────────────────────────
async function browseFolder(folderId, page = 1) {
    if (!state.driveId) return;
    state.currentFolderId = folderId;
    state.page = page;
    state.isSearch = false;
    renderLoading();
    try {
        const params = new URLSearchParams({ sort: state.sortBy, dir: state.sortDir, page });
        if (folderId) params.set('folder_id', folderId);
        const data = await apiFetch(baseUrl(`gdrive/${state.driveId}/browse?${params}`));
        renderFileList(data.data);
        renderPagination(data, (p) => browseFolder(folderId, p));
        renderBreadcrumb();
        document.getElementById('fileCount').textContent = `共 ${data.total} 個項目`;
    } catch (e) {
        showToast('載入失敗：' + e.message, 'red');
    }
}

// ── 搜尋 ──────────────────────────────────────────────────────────────────────
async function doSearch(page = 1) {
    if (!state.driveId) { showToast('請先選擇 Drive', 'orange'); return; }
    const q = document.getElementById('searchInput').value.trim();
    const mime = document.getElementById('filterMime').value;
    const tag = document.getElementById('filterTag').value;
    const dateFrom = document.getElementById('filterDateFrom').value;
    const dateTo = document.getElementById('filterDateTo').value;

    state.isSearch = true;
    state.page = page;
    renderLoading();

    try {
        const params = new URLSearchParams({ page });
        if (q) params.set('q', q);
        if (mime) params.set('mime', mime);
        if (tag) params.set('tag', tag);
        if (dateFrom) params.set('date_from', dateFrom);
        if (dateTo) params.set('date_to', dateTo);
        const data = await apiFetch(baseUrl(`gdrive/${state.driveId}/search?${params}`));
        renderFileList(data.data, true);
        renderPagination(data, (p) => doSearch(p));
        document.getElementById('fileCount').textContent = `搜尋結果：${data.total} 個項目`;

        // 顯示搜尋路徑在麵包屑
        const bc = document.getElementById('breadcrumb');
        bc.innerHTML = `<span class="text-blue-600">🔍 搜尋：${escHtml(q || '（篩選）')}</span>`;
    } catch (e) {
        showToast('搜尋失敗：' + e.message, 'red');
    }
}

function clearSearch() {
    document.getElementById('searchInput').value = '';
    document.getElementById('filterMime').value = '';
    document.getElementById('filterTag').value = '';
    document.getElementById('filterDateFrom').value = '';
    document.getElementById('filterDateTo').value = '';
    state.isSearch = false;
    browseFolder(state.currentFolderId);
}

async function loadAllTags() {
    if (!state.driveId) return;
    try {
        const data = await apiFetch(baseUrl(`gdrive/${state.driveId}/tags`));
        const sel = document.getElementById('filterTag');
        sel.innerHTML = '<option value="">所有標籤</option>';
        for (const [tag, cnt] of Object.entries(data.tags || {})) {
            sel.insertAdjacentHTML('beforeend', `<option value="${escHtml(tag)}">${escHtml(tag)} (${cnt})</option>`);
        }
    } catch (_) {}
}

// ── 排序 ──────────────────────────────────────────────────────────────────────
function setSortAndBrowse(col) {
    if (state.sortBy === col) {
        state.sortDir = state.sortDir === 'asc' ? 'desc' : 'asc';
    } else {
        state.sortBy = col;
        state.sortDir = 'asc';
    }
    ['name','size','modified'].forEach(c => {
        document.getElementById(`sortIndicator_${c}`).textContent =
            state.sortBy === c ? (state.sortDir === 'asc' ? '▲' : '▼') : '';
    });
    if (state.isSearch) doSearch(); else browseFolder(state.currentFolderId);
}

// ── 渲染 ──────────────────────────────────────────────────────────────────────
function renderLoading() {
    document.getElementById('fileList').innerHTML = `<tr><td colspan="6" class="text-center py-10 text-gray-400 text-sm"><svg class="w-6 h-6 mx-auto animate-spin text-blue-400" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/></svg></td></tr>`;
}

function renderFileList(files, showPath = false) {
    state.selectedFiles.clear();
    updateSelectionBar();
    document.getElementById('checkAll').checked = false;
    if (!files || files.length === 0) {
        document.getElementById('fileList').innerHTML = `<tr><td colspan="6" class="text-center py-12 text-gray-400 text-sm">沒有檔案</td></tr>`;
        return;
    }
    document.getElementById('fileList').innerHTML = files.map(f => fileRow(f, showPath)).join('');
}

function fileRow(f, showPath = false) {
    const icon = getFileIcon(f.mime_type, f.is_folder);
    const nameHtml = f.is_folder
        ? `<button onclick="enterFolder('${f.google_file_id}','${escHtml(f.name)}')" class="font-medium text-blue-600 hover:underline text-left">${icon} ${escHtml(f.name)}</button>`
        : `<a href="${escHtml(f.web_view_link)}" target="_blank" class="font-medium text-gray-800 dark:text-gray-100 hover:text-blue-600 hover:underline">${icon} ${escHtml(f.name)}</a>`;
    const pathHtml = showPath && f.folder_path ? `<div class="text-xs text-gray-400 truncate max-w-xs">${escHtml(f.folder_path)}</div>` : '';
    const tagsHtml = f.tags.map(t => `<span class="px-1.5 py-0.5 bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded text-xs">${escHtml(t)}</span>`).join('');

    return `<tr class="border-b border-gray-100 dark:border-slate-800 hover:bg-gray-50 dark:hover:bg-slate-800/50 group" data-fid="${f.id}" data-gid="${f.google_file_id}" data-name="${escHtml(f.name)}" data-parent="${escHtml(f.parent_google_id)}" data-is-folder="${f.is_folder ? '1' : '0'}" data-note="${escHtml(f.note)}">
        <td class="px-4 py-2.5"><input type="checkbox" class="row-check rounded" onchange="toggleCheck(this,'${f.id}')" value="${f.id}"></td>
        <td class="px-2 py-2.5 min-w-0">
            <div class="truncate">${nameHtml}</div>
            ${pathHtml}
            ${f.note ? `<div class="text-xs text-amber-600 dark:text-amber-400 truncate mt-0.5">📝 ${escHtml(f.note)}</div>` : ''}
        </td>
        <td class="px-2 py-2.5 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">${escHtml(f.size)}</td>
        <td class="px-2 py-2.5 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">${escHtml(f.modified)}</td>
        <td class="px-2 py-2.5"><div class="flex flex-wrap gap-1">${tagsHtml}</div></td>
        <td class="px-2 py-2.5 text-right">
            <div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                ${!f.is_folder ? `<a href="/admin/gdrive/${state.driveId}/files/${f.id}/download" title="下載" class="p-1 text-gray-400 hover:text-blue-600 rounded">⬇</a>` : ''}
                <button onclick="openRename(${f.id},'${escHtml(f.name)}')" title="重新命名" class="p-1 text-gray-400 hover:text-indigo-600 rounded">✏️</button>
                <button onclick="openMove(${f.id},'${escHtml(f.name)}','${escHtml(f.parent_google_id)}')" title="移動" class="p-1 text-gray-400 hover:text-green-600 rounded">📂</button>
                <button onclick="openTagsModal(${f.id},'${escHtml(f.name)}')" title="標籤/備註" class="p-1 text-gray-400 hover:text-amber-600 rounded">🏷</button>
                <button onclick="trashFile(${f.id},'${escHtml(f.name)}')" title="刪除" class="p-1 text-gray-400 hover:text-red-600 rounded">🗑</button>
            </div>
        </td>
    </tr>`;
}

function enterFolder(gid, name) {
    state.breadcrumb.push({ id: gid, name });
    state.currentFolderId = gid;
    state.currentFolderName = name;
    browseFolder(gid);
}

function renderBreadcrumb() {
    const el = document.getElementById('breadcrumb');
    if (state.isSearch) return;
    let html = `<button onclick="goRoot()" class="text-blue-600 hover:underline">根目錄</button>`;
    for (let i = 0; i < state.breadcrumb.length; i++) {
        const b = state.breadcrumb[i];
        html += ` <span class="text-gray-400">/</span> `;
        if (i === state.breadcrumb.length - 1) {
            html += `<span class="text-gray-700 dark:text-gray-300 font-medium">${escHtml(b.name)}</span>`;
        } else {
            html += `<button onclick="goBreadcrumb(${i})" class="text-blue-600 hover:underline">${escHtml(b.name)}</button>`;
        }
    }
    el.innerHTML = html;
}

function goRoot() {
    state.breadcrumb = [];
    state.currentFolderId = null;
    browseFolder(null);
}

function goBreadcrumb(idx) {
    state.breadcrumb = state.breadcrumb.slice(0, idx + 1);
    const b = state.breadcrumb[idx];
    state.currentFolderId = b.id;
    browseFolder(b.id);
}

function renderPagination(data, onClick) {
    const el = document.getElementById('pagination');
    if (data.last_page <= 1) { el.innerHTML = ''; return; }
    let html = '';
    for (let p = 1; p <= data.last_page; p++) {
        const active = p === data.current_page;
        html += `<button onclick="(${onClick.toString()})(${p})"
            class="px-2 py-0.5 rounded text-xs ${active ? 'bg-blue-600 text-white' : 'border border-gray-300 dark:border-slate-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700'}">${p}</button>`;
    }
    el.innerHTML = html;
}

// ── 勾選 ─────────────────────────────────────────────────────────────────────
function toggleCheck(cb, id) {
    if (cb.checked) state.selectedFiles.add(id);
    else state.selectedFiles.delete(id);
    updateSelectionBar();
}

function toggleCheckAll(cb) {
    document.querySelectorAll('.row-check').forEach(c => {
        c.checked = cb.checked;
        const row = c.closest('tr');
        if (cb.checked) state.selectedFiles.add(row.dataset.fid);
        else state.selectedFiles.delete(row.dataset.fid);
    });
    updateSelectionBar();
}

function updateSelectionBar() {
    const n = state.selectedFiles.size;
    document.getElementById('selectionBar').classList.toggle('hidden', n === 0);
    document.getElementById('selectedCount').textContent = `已選 ${n} 個`;
}

async function bulkTrash() {
    if (!state.selectedFiles.size) return;
    if (!confirm(`確定要刪除選取的 ${state.selectedFiles.size} 個項目嗎？`)) return;
    const ids = [...state.selectedFiles];
    for (const id of ids) {
        const row = document.querySelector(`tr[data-fid="${id}"]`);
        if (!row) continue;
        const gid = row.dataset.gid;
        try {
            await apiFetch(baseUrl(`gdrive/${state.driveId}/files/${id}/trash`), { method: 'DELETE' });
            row.remove();
        } catch (_) {}
    }
    state.selectedFiles.clear();
    updateSelectionBar();
    showToast('已刪除', 'green');
}

// ── 重新命名 ──────────────────────────────────────────────────────────────────
let renameFileId = null;
function openRename(id, name) {
    renameFileId = id;
    document.getElementById('renameInput').value = name;
    openModal('modalRename');
    setTimeout(() => document.getElementById('renameInput').select(), 100);
}

async function confirmRename() {
    const name = document.getElementById('renameInput').value.trim();
    if (!name) return;
    try {
        await apiFetch(baseUrl(`gdrive/${state.driveId}/files/${renameFileId}/rename`), {
            method: 'PATCH', body: JSON.stringify({ name })
        });
        closeModal('modalRename');
        showToast('已重新命名', 'green');
        state.isSearch ? doSearch() : browseFolder(state.currentFolderId);
    } catch (e) { showToast(e.message, 'red'); }
}

// ── 移動 ──────────────────────────────────────────────────────────────────────
let moveFileId = null, moveOldParent = null;
async function openMove(id, name, oldParent) {
    moveFileId = id;
    moveOldParent = oldParent;
    state.moveFolderSelected = null;
    document.getElementById('moveFolderTree').innerHTML = '<div class="text-sm text-gray-400 p-2">載入中…</div>';
    openModal('modalMove');
    // 載入資料夾樹供選擇
    try {
        const data = await apiFetch(baseUrl(`gdrive/${state.driveId}/tree`));
        renderMoveFolderTree(data.folders, document.getElementById('moveFolderTree'));
    } catch (e) {
        document.getElementById('moveFolderTree').innerHTML = '<div class="text-sm text-red-400 p-2">載入失敗</div>';
    }
}

function renderMoveFolderTree(folders, el) {
    el.innerHTML = '';
    for (const f of (folders || [])) {
        const btn = document.createElement('button');
        btn.className = 'block w-full text-left px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-slate-700 rounded cursor-pointer';
        btn.textContent = '📁 ' + f.name;
        btn.onclick = () => {
            document.querySelectorAll('#moveFolderTree button').forEach(b => b.classList.remove('bg-blue-100','dark:bg-slate-600','font-semibold'));
            btn.classList.add('bg-blue-100', 'dark:bg-slate-600', 'font-semibold');
            state.moveFolderSelected = f.google_file_id;
        };
        el.appendChild(btn);
    }
    if (!folders?.length) el.innerHTML = '<div class="text-sm text-gray-400 p-2">沒有資料夾</div>';
}

async function confirmMove() {
    if (!state.moveFolderSelected) { showToast('請選擇目標資料夾', 'orange'); return; }
    try {
        await apiFetch(baseUrl(`gdrive/${state.driveId}/files/${moveFileId}/move`), {
            method: 'PATCH', body: JSON.stringify({ new_parent_id: state.moveFolderSelected })
        });
        closeModal('modalMove');
        showToast('已移動', 'green');
        state.isSearch ? doSearch() : browseFolder(state.currentFolderId);
    } catch (e) { showToast(e.message, 'red'); }
}

// ── 標籤 / 備註 ───────────────────────────────────────────────────────────────
let tagsFileId = null, currentFileTags = [];
async function openTagsModal(id, name) {
    tagsFileId = id;
    document.getElementById('modalTagsTitle').textContent = '標籤與備註：' + name;
    document.getElementById('tagInput').value = '';
    document.getElementById('noteInput').value = '';
    openModal('modalTags');
    try {
        const data = await apiFetch(baseUrl(`gdrive/${state.driveId}/files/${id}`));
        currentFileTags = data.tags || [];
        document.getElementById('noteInput').value = data.note || '';
        renderTagChips();
    } catch (e) { showToast(e.message, 'red'); }
}

function renderTagChips() {
    document.getElementById('tagChips').innerHTML = currentFileTags.map(t =>
        `<span class="flex items-center gap-1 px-2 py-0.5 bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded-full text-xs">
            ${escHtml(t)}
            <button onclick="removeTagFromModal('${escHtml(t)}')" class="hover:text-red-500 text-indigo-400">✕</button>
        </span>`
    ).join('');
}

async function addTagFromModal() {
    const tag = document.getElementById('tagInput').value.trim();
    if (!tag || currentFileTags.includes(tag)) return;
    try {
        const data = await apiFetch(baseUrl(`gdrive/${state.driveId}/files/${tagsFileId}/tags`), {
            method: 'POST', body: JSON.stringify({ tag })
        });
        currentFileTags = data.tags;
        renderTagChips();
        document.getElementById('tagInput').value = '';
        loadAllTags();
    } catch (e) { showToast(e.message, 'red'); }
}

async function removeTagFromModal(tag) {
    try {
        const data = await apiFetch(baseUrl(`gdrive/${state.driveId}/files/${tagsFileId}/tags/${encodeURIComponent(tag)}`), { method: 'DELETE' });
        currentFileTags = data.tags;
        renderTagChips();
    } catch (e) { showToast(e.message, 'red'); }
}

async function saveNote() {
    const note = document.getElementById('noteInput').value;
    try {
        await apiFetch(baseUrl(`gdrive/${state.driveId}/files/${tagsFileId}/note`), {
            method: 'PATCH', body: JSON.stringify({ note })
        });
        closeModal('modalTags');
        showToast('備註已儲存', 'green');
        state.isSearch ? doSearch() : browseFolder(state.currentFolderId);
    } catch (e) { showToast(e.message, 'red'); }
}

// ── 刪除 ──────────────────────────────────────────────────────────────────────
async function trashFile(id, name) {
    if (!confirm(`確定要將「${name}」移至垃圾桶嗎？`)) return;
    try {
        await apiFetch(baseUrl(`gdrive/${state.driveId}/files/${id}/trash`), { method: 'DELETE' });
        document.querySelector(`tr[data-fid="${id}"]`)?.remove();
        showToast('已移至垃圾桶', 'green');
    } catch (e) { showToast(e.message, 'red'); }
}

// ── 上傳 ──────────────────────────────────────────────────────────────────────
let uploadFile = null;
function openUploadModal() {
    uploadFile = null;
    document.getElementById('uploadFilename').textContent = '';
    document.getElementById('uploadProgress').classList.add('hidden');
    document.getElementById('uploadBar').style.width = '0%';
    openModal('modalUpload');
}

function setUploadFile(file) {
    uploadFile = file;
    document.getElementById('uploadFilename').textContent = file ? file.name : '';
}

function handleDrop(e) {
    e.preventDefault();
    const file = e.dataTransfer.files[0];
    if (file) setUploadFile(file);
}

async function doUpload() {
    if (!uploadFile) { showToast('請選擇檔案', 'orange'); return; }
    const folderId = state.currentFolderId;
    if (!folderId) { showToast('請先進入一個資料夾再上傳', 'orange'); return; }

    const fd = new FormData();
    fd.append('file', uploadFile);
    fd.append('folder_id', folderId);
    fd.append('_token', CSRF);

    document.getElementById('uploadProgress').classList.remove('hidden');
    document.getElementById('uploadStatus').textContent = '上傳中…';

    const xhr = new XMLHttpRequest();
    xhr.open('POST', baseUrl(`gdrive/${state.driveId}/upload`));
    xhr.setRequestHeader('X-CSRF-TOKEN', CSRF);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.upload.onprogress = (e) => {
        if (e.lengthComputable) {
            const pct = Math.round(e.loaded / e.total * 100);
            document.getElementById('uploadBar').style.width = pct + '%';
            document.getElementById('uploadStatus').textContent = `${pct}%`;
        }
    };
    xhr.onload = () => {
        const data = JSON.parse(xhr.responseText);
        if (xhr.status === 200) {
            closeModal('modalUpload');
            showToast('上傳完成', 'green');
            browseFolder(state.currentFolderId);
        } else {
            showToast(data.error || '上傳失敗', 'red');
        }
    };
    xhr.onerror = () => showToast('上傳失敗', 'red');
    xhr.send(fd);
}

// ── Drive CRUD Modal ──────────────────────────────────────────────────────────
function toggleJsonGuide() {
    const guide = document.getElementById('jsonGuide');
    const arrow = document.getElementById('jsonGuideArrow');
    const hidden = guide.classList.toggle('hidden');
    arrow.style.transform = hidden ? '' : 'rotate(180deg)';
}

function openAddDriveModal() {
    document.getElementById('modalDriveTitle').innerHTML =
        '<svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 24 24"><path d="M4.433 22l2.268-3.927H22l-2.268 3.927H4.433zM2 18.118l4.537-7.854 3.955 6.85-.268.463-.267.463H2zm9.536-7.854L7.006 2h9.988l4.53 7.854H11.536z"/></svg> 新增 Google Drive';
    document.getElementById('driveModeId').value = '';
    document.getElementById('driveName').value = '';
    document.getElementById('driveDesc').value = '';
    document.getElementById('driveJson').value = '';
    document.getElementById('driveJson').placeholder = '{\n  "type": "service_account",\n  "project_id": "your-project-id",\n  ...\n}';
    document.getElementById('jsonRequired').style.display = '';
    document.getElementById('jsonEditHint').classList.add('hidden');
    document.getElementById('driveIsShared').checked = false;
    document.getElementById('driveGDriveId').value = '';
    document.getElementById('driveRootId').value = '';
    document.getElementById('driveModalError').classList.add('hidden');
    // 預設展開說明，方便首次使用者
    const guide = document.getElementById('jsonGuide');
    const arrow = document.getElementById('jsonGuideArrow');
    guide.classList.remove('hidden');
    arrow.style.transform = 'rotate(180deg)';
    openModal('modalDrive');
}

async function openEditDriveModal() {
    if (!state.driveId) return;
    document.getElementById('modalDriveTitle').innerHTML =
        '<svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 24 24"><path d="M4.433 22l2.268-3.927H22l-2.268 3.927H4.433zM2 18.118l4.537-7.854 3.955 6.85-.268.463-.267.463H2zm9.536-7.854L7.006 2h9.988l4.53 7.854H11.536z"/></svg> 編輯 Drive 設定';
    document.getElementById('driveModeId').value = state.driveId;
    const sel = document.getElementById('driveSelect');
    document.getElementById('driveName').value = sel.options[sel.selectedIndex].text;
    document.getElementById('driveJson').value = '';
    document.getElementById('driveJson').placeholder = '（留空表示不更換金鑰）';
    document.getElementById('jsonRequired').style.display = 'none';
    document.getElementById('jsonEditHint').classList.remove('hidden');
    document.getElementById('driveModalError').classList.add('hidden');
    // 編輯時預設收合說明
    document.getElementById('jsonGuide').classList.add('hidden');
    document.getElementById('jsonGuideArrow').style.transform = '';
    openModal('modalDrive');
}

function toggleSharedDriveFields() {
    // Shared Drive ID 欄位一直顯示，checkbox 只影響 API 行為
}

async function saveDrive() {
    const id = document.getElementById('driveModeId').value;
    const errEl = document.getElementById('driveModalError');
    errEl.classList.add('hidden');

    const payload = {
        name: document.getElementById('driveName').value.trim(),
        description: document.getElementById('driveDesc').value.trim(),
        service_account_json: document.getElementById('driveJson').value.trim(),
        google_drive_id: document.getElementById('driveGDriveId').value.trim(),
        root_folder_id: document.getElementById('driveRootId').value.trim(),
        is_shared_drive: document.getElementById('driveIsShared').checked,
    };

    if (!payload.name) { errEl.textContent = '請填寫名稱'; errEl.classList.remove('hidden'); return; }
    if (!id && !payload.service_account_json) { errEl.textContent = '請貼上 Service Account JSON'; errEl.classList.remove('hidden'); return; }

    try {
        const url = id ? baseUrl(`gdrive/${id}`) : baseUrl('gdrive');
        const method = id ? 'PUT' : 'POST';
        const data = await apiFetch(url, { method, body: JSON.stringify(payload) });
        closeModal('modalDrive');

        // 更新 select 選單
        const sel = document.getElementById('driveSelect');
        if (id) {
            sel.options[sel.selectedIndex].text = data.drive.name;
        } else {
            const opt = new Option(data.drive.name, data.drive.id);
            sel.appendChild(opt);
            sel.value = data.drive.id;
            selectDrive(data.drive.id);
        }
        showToast('已儲存', 'green');
    } catch (e) {
        document.getElementById('driveModalErrorMsg').textContent = e.message;
        errEl.classList.remove('hidden');
    }
}

async function deleteDrive() {
    if (!state.driveId) return;
    const sel = document.getElementById('driveSelect');
    const name = sel.options[sel.selectedIndex].text;
    if (!confirm(`確定要刪除「${name}」的設定？（本地索引也會一併刪除，Drive 上的實際檔案不受影響）`)) return;
    try {
        await apiFetch(baseUrl(`gdrive/${state.driveId}`), { method: 'DELETE' });
        sel.options[sel.selectedIndex].remove();
        state.driveId = null;
        document.getElementById('driveInfo').classList.add('hidden');
        renderFileList([]);
        renderBreadcrumb();
        document.getElementById('folderTree').innerHTML = '<div class="text-xs text-gray-400 p-2">請選擇 Drive</div>';
        showToast('已刪除', 'green');
    } catch (e) { showToast(e.message, 'red'); }
}

// ── 工具函式 ──────────────────────────────────────────────────────────────────
function getFileIcon(mime, isFolder) {
    if (isFolder) return '📁';
    if (!mime) return '📎';
    if (mime.includes('pdf')) return '📄';
    if (mime.startsWith('image/')) return '🖼';
    if (mime.startsWith('video/')) return '🎬';
    if (mime.startsWith('audio/')) return '🎵';
    if (mime.includes('spreadsheet') || mime.includes('excel') || mime.includes('csv')) return '📊';
    if (mime.includes('document') || mime.includes('word')) return '📝';
    if (mime.includes('presentation') || mime.includes('powerpoint')) return '📑';
    if (mime.includes('zip') || mime.includes('compressed') || mime.includes('archive')) return '📦';
    if (mime.includes('google-apps.folder')) return '📁';
    if (mime.includes('google-apps.document')) return '📝';
    if (mime.includes('google-apps.spreadsheet')) return '📊';
    if (mime.includes('google-apps.presentation')) return '📑';
    if (mime.includes('google-apps.form')) return '📋';
    return '📎';
}

function escHtml(s) {
    if (!s) return '';
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}

function openModal(id) { document.getElementById(id).classList.remove('hidden'); }
function closeModal(id) { document.getElementById(id).classList.add('hidden'); }

let toastTimer;
function showToast(msg, color = 'green', duration = 3000) {
    const colorMap = { green: 'bg-green-600', red: 'bg-red-600', blue: 'bg-blue-600', orange: 'bg-orange-500', yellow: 'bg-yellow-500' };
    const el = document.getElementById('toastInner');
    el.className = `flex items-center gap-3 px-4 py-3 rounded-xl shadow-lg text-sm font-medium text-white min-w-[200px] ${colorMap[color] || 'bg-gray-700'}`;
    document.getElementById('toastMsg').textContent = msg;
    document.getElementById('toast').classList.remove('hidden');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => document.getElementById('toast').classList.add('hidden'), duration);
}

// 按 Esc 關閉 modal
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') ['modalDrive','modalRename','modalMove','modalTags','modalUpload','modalTest'].forEach(id => closeModal(id));
});
</script>
@endsection