{% extends "base.html" %}

{% block title %}{{ t('scanner.page_title') }} - OpenAver{% endblock %}

{% block extra_css %}
<link href="/static/css/pages/scanner.css" rel="stylesheet">
{% endblock %}

{% block pre_alpine_module %}
<script type="module" src="/static/js/pages/scanner/main.js"></script>
{% endblock %}

{% block content %}
<div class="avlist-container ds-gallery-composition" x-data="scanner"
     @dragenter.document="handleDragEnter($event)"
     @dragleave.document="handleDragLeave($event)"
     @dragover.document.prevent
     @drop.document.prevent="handleDrop($event)"
     @keydown.escape.window="dirtyCheckModalOpen && dirtyCheckCancel(); missingConfirmModalOpen && cancelLargeMissingEnrich(); deleteAliasGroupModalOpen && cancelDeleteAliasGroupModal(); deleteTagAliasGroupModalOpen && cancelDeleteTagAliasGroupModal(); copyFailModalOpen && closeCopyFailModal();">
    <!-- Drag Overlay (must be inside x-data scope) -->
    <div class="drag-overlay" id="dragOverlay" x-show="showDragOverlay" x-transition.opacity>
        <div class="drag-overlay-content">
            <i class="bi bi-folder-plus"></i>
            <p>{{ t('scanner.drag_overlay.hint') }}</p>
        </div>
    </div>
    <!-- Header -->
    <div class="avlist-header">
        <h4><i class="bi bi-list-ul"></i> {{ t('scanner.page_title') }}</h4>
        <div class="stats" id="headerStats"></div>
    </div>

    <!-- Main Card: Folder List -->
    <div class="avlist-card">
        <div class="avlist-card-header">
            <div class="title">
                <i class="bi bi-folder"></i> <span>{{ t('scanner.folder.section_title') }}</span>
            </div>
            <div class="actions">
                <button id="btnSelectFolder" class="btn-icon" @click="selectFolder()" title="{{ t('scanner.folder.select_title') }}">
                    <i class="bi bi-folder-plus"></i>
                </button>
                <button class="btn-icon" @click="toggleManualInput()" title="{{ t('scanner.folder.manual_title') }}">
                    <i class="bi bi-keyboard"></i>
                </button>
            </div>
        </div>

        <div class="avlist-card-body">
            <!-- Manual Input (hidden by default) -->
            <div class="manual-input" :style="{ display: manualInputVisible ? 'flex' : 'none' }">
                <input type="text" class="input input-bordered input-sm" id="manualPath"
                       x-ref="manualPathInput"
                       x-model="manualPath" placeholder="{{ t('scanner.folder.placeholder') }}"
                       @keypress.enter="addManualPath()">
                <button class="btn btn-sm btn-primary" @click="addManualPath()">
                    <i class="bi bi-plus"></i>
                </button>
            </div>

            <!-- Folder List -->
            <div class="folder-list">
                <!-- Empty State -->
                <div x-show="directories.length === 0" class="folder-empty">
                    <i class="bi bi-folder-plus"></i>
                    <p>{{ t('scanner.folder.empty_line1') }}</p>
                    <p>{{ t('scanner.folder.empty_line2') }}</p>
                </div>

                <!-- Folder Items -->
                <template x-for="(dir, idx) in directories" :key="idx">
                    <div class="folder-item">
                        <i class="bi bi-folder folder-icon"></i>
                        <span class="folder-path" x-text="dir"></span>
                        <button class="btn btn-sm btn-outline btn-error btn-remove"
                                @click="removeDirectory(idx)" title="{{ t('scanner.folder.remove_title') }}">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>
                </template>
            </div>
        </div>

        <!-- Output Info -->
        <div class="output-info">
            <div class="path">
                <i class="bi bi-file-earmark-code"></i>
                {{ t('scanner.folder.output_prefix') }} <code id="outputPathDisplay" x-text="outputPathDisplay"></code>
            </div>
            <a href="/settings" class="settings-link">
                <i class="bi bi-gear"></i> {{ t('scanner.folder.settings_link') }}
            </a>
        </div>

        <!-- Action Buttons -->
        <div class="action-section">
            <button class="btn-hero btn-hero-primary" id="btnGenerate"
                    @click="generate()"
                    x-bind:disabled="isBusy"
                    x-html="generateButtonText">
            </button>
            <!-- Done Actions (hidden until complete) -->
            <div id="doneActions" class="done-actions" :style="{ display: doneActionsVisible ? 'flex' : 'none' }">
                <button class="btn-hero btn-hero-secondary" id="btnCopyPath"
                        @click="copyOutputPath()" title="{{ t('scanner.folder.copy_path') }}">
                    <i class="bi bi-clipboard"></i> {{ t('scanner.folder.copy_path') }}
                </button>
            </div>
        </div>
    </div>

    <!-- Mini Terminal (hidden by default) -->
    <div class="mini-terminal" id="progressSection" x-show="progressSectionVisible">
        <div class="mini-terminal-header">
            <span class="title" id="progressStatus" x-text="progressStatus"></span>

            <!-- T7d: Filter Badges -->
            <div class="log-filter-group">
                <button class="log-filter-btn" :class="{ active: logFilter === 'all' }"
                        @click="logFilter = 'all'" title="{{ t('scanner.terminal.filter_all_title') }}">
                    {{ t('scanner.terminal.filter_all') }}
                </button>
                <button class="log-filter-btn" :class="{ active: logFilter === 'error' }"
                        @click="logFilter = 'error'" title="{{ t('scanner.terminal.filter_error_title') }}">
                    {{ t('scanner.terminal.filter_error') }}
                </button>
                <button class="log-filter-btn" :class="{ active: logFilter === 'warn' }"
                        @click="logFilter = 'warn'" title="{{ t('scanner.terminal.filter_warn_title') }}">
                    {{ t('scanner.terminal.filter_warn') }}
                </button>
            </div>

            <!-- T7d: Action Buttons -->
            <div class="log-actions">
                <button class="log-action-btn" @click="copyLogs()" title="{{ t('scanner.terminal.copy_title') }}">
                    <i class="bi bi-clipboard"></i>
                </button>
                <button class="log-action-btn" @click="clearLogsDisplay()" title="{{ t('scanner.terminal.clear_display_title') }}">
                    <i class="bi bi-eraser"></i>
                </button>
                <button class="log-action-btn" @click="confirmClearAll()" title="{{ t('scanner.terminal.clear_all_title') }}">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        </div>
        <div class="progress-mini">
            <div class="bar" id="progressBar" x-bind:style="{ width: progressPercent + '%' }"></div>
        </div>
        <div class="mini-terminal-body" id="logOutput" x-ref="logOutput" :class="'filter-' + logFilter"></div>
    </div>

    <!-- Stats Card -->
    <div class="stats-card" id="statsCard" x-show="statsVisible">
        <div class="stats-row">
            <div class="stat-item">
                <i class="bi bi-collection-play"></i>
                <span>{{ t('scanner.stats.cached_prefix') }} <span class="stat-value" id="statTotal" x-text="statTotal"></span> {{ t('scanner.stats.cached_suffix') }}</span>
                <button class="btn btn-ghost btn-xs" @click="clearCacheModalOpen = true"
                        :disabled="isBusy" title="{{ t('scanner.stats.clear_cache_title') }}">
                    <i class="bi bi-trash3"></i>
                </button>
            </div>
            <div class="stat-item" id="statLastRun" x-text="statLastRun"></div>
        </div>
        <!-- NFO Update Section (separate row) -->
        <div class="nfo-update-row" id="statNeedUpdate" x-show="nfoUpdateVisible">
            <span class="nfo-badge">
                <i class="bi bi-exclamation-circle"></i>
                {{ t('scanner.stats.nfo_prefix') }} <strong id="updateCount" x-text="nfoNeedUpdateCount"></strong> {{ t('scanner.stats.nfo_suffix') }}
            </span>
            <button class="btn-nfo-update" @click="runNfoUpdate()" id="btnUpdate"
                    x-bind:disabled="nfoUpdateButtonDisabled"
                    x-html="nfoUpdateButtonText"
                    title="{{ t('scanner.stats.nfo_update_title') }}">
            </button>
        </div>
        <!-- T10: Missing NFO/Cover Pill -->
        <div class="nfo-update-row" x-show="missingPillVisible">
            <span class="nfo-badge">
                <i class="bi bi-file-earmark-x"></i>
                <span x-text="missingPillLabel"></span>
            </span>
            <button class="btn-nfo-update" @click="runMissingEnrich()"
                    x-bind:disabled="isBusy || missingItems.length === 0"
                    x-html="missingEnrichButtonText">
            </button>
        </div>

        <!-- T10: Resume Pill (未完成提示) -->
        <div class="nfo-update-row" x-show="resumePillVisible">
            <span class="nfo-badge">
                <i class="bi bi-arrow-repeat"></i>
                <span x-text="window.t('scanner.stats.missing_resume_label')"></span>
                <strong x-text="missingItems.length"></strong>
                <span x-text="window.t('scanner.stats.missing_resume_suffix')"></span>
            </span>
            <button class="btn-nfo-update" @click="resumeMissingEnrich()"
                    x-bind:disabled="isBusy">
                {{ t('scanner.stats.missing_resume_btn') }}
            </button>
            <button class="btn btn-ghost btn-xs" @click="dismissResume()">
                {{ t('scanner.stats.missing_resume_dismiss') }}
            </button>
        </div>

        <!-- T2(40c): Jellyfin 圖片檢查觸發列 -->
        <!-- T3(40c) Codex fix: x-show 改為 !jellyfinImageVisible，done 狀態仍顯示觸發列 -->
        <div class="nfo-update-row"
             x-show="config?.scraper?.jellyfin_mode && !jellyfinImageVisible">
            <span class="nfo-badge">
                <i class="bi bi-image"></i>
                <span x-show="jellyfinCheckState === 'idle'">
                    {{ t('scanner.stats.jellyfin_check_idle_label') }}
                </span>
                <span x-show="jellyfinCheckState === 'checking'">
                    {{ t('scanner.stats.jellyfin_checking') }}
                </span>
                <span x-show="jellyfinCheckState === 'done'">
                    {{ t('scanner.stats.jellyfin_check_done_ok') }}
                </span>
            </span>
            <button class="btn-nfo-update"
                    @click="checkJellyfinImages()"
                    :disabled="jellyfinCheckState === 'checking' || isGenerating"
                    x-show="jellyfinCheckState !== 'checking'">
                <i class="bi bi-search"></i>
                <span x-show="jellyfinCheckState === 'idle'">{{ t('scanner.stats.jellyfin_check_btn') }}</span>
                <span x-show="jellyfinCheckState === 'done'">{{ t('scanner.stats.jellyfin_check_btn') }}</span>
            </button>
            <span x-show="jellyfinCheckState === 'checking'"
                  class="loading loading-spinner loading-sm"></span>
        </div>
        <!-- Jellyfin 圖片補齊列（只在 jellyfin_mode 開啟時顯示） -->
        <div class="nfo-update-row" x-show="jellyfinImageVisible">
            <span class="nfo-badge">
                <i class="bi bi-image"></i>
                {{ t('scanner.stats.jellyfin_prefix') }} <strong x-text="jellyfinImageCount"></strong> {{ t('scanner.stats.jellyfin_suffix') }}
                <button type="button" class="help-popover-btn"
                        @click="showJellyfinHelp = !showJellyfinHelp"
                        :aria-expanded="showJellyfinHelp">
                    <i class="bi bi-question-circle"></i>
                </button>
                <div x-show="showJellyfinHelp" x-cloak x-transition
                     @click.outside="showJellyfinHelp = false"
                     class="help-popover">
                    <small class="help-popover__body">
                        {{ t('scanner.stats.jellyfin_help_line1') }}<br>
                        {{ t('scanner.stats.jellyfin_help_line2') | safe }}<br>
                        {{ t('scanner.stats.jellyfin_help_line3') | safe }}<br><br>
                        {{ t('scanner.stats.jellyfin_help_line4') }}
                    </small>
                </div>
            </span>
            <button class="btn-nfo-update" @click="runJellyfinImageUpdate()"
                    x-bind:disabled="isGenerating"
                    x-html="jellyfinImageButtonText"
                    title="{{ t('scanner.stats.jellyfin_update_title') }}">
            </button>
        </div>
    </div>

    <!-- Actress Alias Management -->
    <div class="actress-alias-card" id="actressAliasCard">
        <!-- 53a-T5fix: header 整列點擊展開（對齊 settings collapsible-trigger pattern） -->
        <div class="actress-alias-header"
             role="button"
             tabindex="0"
             :aria-expanded="(!aliasCardCollapsed).toString()"
             title="{{ t('scanner.alias.collapse_title') }}"
             @click="toggleAliasCard()"
             @keydown.enter.prevent="toggleAliasCard()"
             @keydown.space.prevent="toggleAliasCard()">
            <div class="title">
                <i class="bi bi-person-circle"></i> <span>{{ t('scanner.alias.section_title') }}</span>
            </div>
            <span class="btn-collapse" aria-hidden="true">
                <i class="bi" :class="aliasCardCollapsed ? 'bi-chevron-down' : 'bi-chevron-up'"></i>
            </span>
        </div>

        <div class="actress-alias-body" x-show="!aliasCardCollapsed" x-collapse>
            <!-- 單一輸入框：篩選 + 新增 -->
            <div class="alias-toolbar">
                <div class="alias-input-wrap">
                    <input type="text" class="input input-bordered input-sm"
                           x-model="aliasInput"
                           :placeholder="window.t('scanner.alias.search_placeholder')"
                           @keydown.enter="createAliasGroup()">
                    <i class="bi bi-search"></i>
                </div>
                <button class="btn btn-sm btn-primary" @click="createAliasGroup()" :disabled="newGroupAdding">
                    <i class="bi bi-plus-lg"></i> {{ t('scanner.alias.add') }}
                </button>
                <button class="btn btn-sm btn-outline" @click="startOnlineSearch()" :disabled="onlineSearchLoading">
                    <i class="bi bi-search"></i> {{ t('scanner.alias.online_search') }}
                </button>
            </div>

            <!-- 篩選提示 -->
            <div class="alias-filter-hint" :class="{ visible: aliasInput.trim() }"
                 x-show="aliasInput.trim()"
                 x-text="window.t('scanner.alias.filter_hint').replace('{count}', filteredAliasRecords().length).replace('{name}', aliasInput.trim())">
            </div>

            <!-- 線上搜尋結果區 -->
            <div class="alias-online-results" x-show="onlineSearchLoading || onlineSearchResults.length > 0 || onlineSearchDone">
                <!-- Spinner -->
                <div class="alias-list-loading" x-show="onlineSearchLoading">
                    <span class="loading loading-spinner loading-sm"></span> {{ t('scanner.alias.loading') }}
                </div>
                <!-- 無結果 -->
                <div class="alias-list-empty" x-show="!onlineSearchLoading && onlineSearchResults.length === 0">
                    {{ t('scanner.alias.no_results') }}
                </div>
                <!-- checkbox 列表 -->
                <template x-for="s in onlineSearchResults" :key="s">
                    <label class="alias-online-item">
                        <input type="checkbox" :value="s" x-model="onlineSearchSelected"> <span x-text="s"></span>
                    </label>
                </template>
                <!-- 確認加入 -->
                <button class="btn btn-sm btn-primary" x-show="onlineSearchResults.length > 0"
                        @click="confirmOnlineSearch(onlineSearchTarget)">
                    {{ t('scanner.alias.confirm') }}
                </button>
            </div>

            <!-- 載入中 -->
            <div class="alias-list-loading" x-show="aliasRecordsLoading">
                <span class="loading loading-spinner loading-sm"></span> {{ t('scanner.alias.loading') }}
            </div>

            <!-- 錯誤訊息 -->
            <div class="alias-list-error" x-show="aliasRecordsError" x-text="aliasRecordsError"></div>

            <!-- 空狀態 -->
            <div class="alias-list-empty"
                 x-show="!aliasRecordsLoading && !aliasRecordsError && filteredAliasRecords().length === 0">
                {{ t('scanner.alias.empty') }}
            </div>

            <!-- Pill-based 群組列表 -->
            <template x-for="group in filteredAliasRecords()" :key="group.primary_name">
                <div class="alias-group-row">
                    <!-- Primary pill -->
                    <span class="alias-pill alias-pill-primary" x-text="group.primary_name"></span>

                    <!-- Alias pills -->
                    <template x-for="a in group.aliases" :key="a">
                        <span class="alias-pill alias-pill-alias">
                            <span x-text="a"></span>
                            <button type="button" class="alias-pill-remove"
                                    @click="removeAlias(group.primary_name, a)"
                                    :title="window.t('scanner.alias.delete_alias_title')">✕</button>
                        </span>
                    </template>

                    <!-- Inline add input -->
                    <template x-if="addingAlias[group.primary_name] !== undefined">
                        <span class="alias-add-inline">
                            <input type="text"
                                   x-model="addingAlias[group.primary_name]"
                                   @keydown.enter="addAlias(group.primary_name)"
                                   @keydown.escape="cancelAddAlias(group.primary_name)"
                                   :placeholder="window.t('scanner.alias.alias_input_placeholder')">
                            <button type="button" class="btn-cancel" @click="cancelAddAlias(group.primary_name)">
                                <i class="bi bi-x-lg"></i>
                            </button>
                        </span>
                    </template>

                    <!-- + 別名 button -->
                    <button type="button" class="alias-add-btn"
                            @click="showAddAliasInput(group.primary_name)"
                            x-show="addingAlias[group.primary_name] === undefined">
                        <i class="bi bi-plus" style="font-size:0.7rem"></i> {{ t('scanner.alias.add_alias') }}
                    </button>

                    <span class="alias-row-spacer"></span>

                    <!-- 刪除整筆 -->
                    <button type="button" class="alias-trash"
                            @click="deleteAliasGroup(group.primary_name)"
                            :title="window.t('scanner.alias.delete_group_title')">
                        <i class="bi bi-trash3"></i>
                    </button>
                </div>
            </template>

        </div>
    </div>

    <!-- Tag Alias Management (A3-3) -->
    <div class="actress-alias-card" id="tagAliasCard">
        <div class="actress-alias-header"
             role="button" tabindex="0"
             :aria-expanded="(!tagAliasCardCollapsed).toString()"
             title="{{ t('scanner.tag_alias.collapse_title') }}"
             @click="toggleTagAliasCard()"
             @keydown.enter.prevent="toggleTagAliasCard()"
             @keydown.space.prevent="toggleTagAliasCard()">
            <div class="title">
                <i class="bi bi-tags"></i> <span>{{ t('scanner.tag_alias.section_title') }}</span>
            </div>
            <!-- (?) AI hint icon + popover — @click.stop 避免觸發 collapse -->
            <div class="tag-alias-ai-hint-wrap" @click.stop>
                <button type="button"
                        class="help-popover-btn"
                        :title="window.t('scanner.tag_alias.ai_hint.icon_title')"
                        :aria-label="window.t('scanner.tag_alias.ai_hint.icon_title')"
                        @click.stop.prevent="toggleTagAliasAiHint()"
                        @keydown.enter.stop
                        @keydown.space.stop>
                    <i class="bi bi-question-circle"></i>
                </button>
                <div class="help-popover tag-alias-ai-hint-popover"
                     x-show="tagAliasAiHintOpen"
                     x-transition.opacity
                     @click.outside="tagAliasAiHintOpen = false"
                     x-cloak>
                    <p class="help-popover__body"
                       x-text="window.t('scanner.tag_alias.ai_hint.tooltip')"></p>
                </div>
            </div>
            <span class="btn-collapse" aria-hidden="true">
                <i class="bi" :class="tagAliasCardCollapsed ? 'bi-chevron-down' : 'bi-chevron-up'"></i>
            </span>
        </div>

        <div class="actress-alias-body" x-show="!tagAliasCardCollapsed" x-collapse>
            <!-- 新增 group 輸入 -->
            <div class="alias-toolbar">
                <div class="alias-input-wrap">
                    <input type="text" class="input input-bordered input-sm"
                           x-model="tagAliasInput"
                           :placeholder="window.t('scanner.tag_alias.new_group_placeholder')"
                           @keydown.enter.prevent="addTagAliasGroup()">
                </div>
                <button type="button" class="btn btn-sm btn-primary"
                        @click="addTagAliasGroup()"
                        :disabled="newTagGroupAdding">
                    {{ t('scanner.tag_alias.add') }}
                </button>
            </div>

            <!-- 載入中 -->
            <div class="alias-list-loading" x-show="tagAliasRecordsLoading">
                <span class="loading loading-spinner loading-sm"></span> {{ t('scanner.tag_alias.loading') }}
            </div>

            <!-- 錯誤訊息 -->
            <div class="alias-list-error" x-show="tagAliasRecordsError" x-text="tagAliasRecordsError"></div>

            <!-- 空狀態 -->
            <div class="alias-list-empty"
                 x-show="!tagAliasRecordsLoading && !tagAliasRecordsError && filteredTagAliasRecords().length === 0">
                {{ t('scanner.tag_alias.empty') }}
            </div>

            <!-- 緊湊牆 -->
            <div class="tag-alias-wall"
                 x-show="!tagAliasRecordsLoading && !tagAliasRecordsError && filteredTagAliasRecords().length > 0">
                <template x-for="group in filteredTagAliasRecords()" :key="group.primary_name">
                    <div class="tag-alias-group">
                        <!-- primary pill -->
                        <span class="alias-pill alias-pill-primary" x-text="group.primary_name"></span>

                        <!-- alias pills -->
                        <template x-for="a in group.aliases" :key="a">
                            <span class="alias-pill alias-pill-alias">
                                <span x-text="a"></span>
                                <button type="button" class="alias-pill-remove"
                                        @click="removeTagAlias(group.primary_name, a)"
                                        :title="window.t('scanner.tag_alias.delete_alias_title')">✕</button>
                            </span>
                        </template>

                        <!-- inline add alias input -->
                        <div class="alias-add-inline" x-show="addingTagAlias[group.primary_name] !== undefined">
                            <input type="text"
                                   x-model="addingTagAlias[group.primary_name]"
                                   :placeholder="window.t('scanner.tag_alias.new_group_placeholder')"
                                   @keydown.enter.prevent="submitAddTagAlias(group.primary_name)"
                                   @keydown.escape.prevent="showAddTagAliasInput(group.primary_name, false)">
                            <button type="button" @click="submitAddTagAlias(group.primary_name)">✓</button>
                            <button type="button" class="btn-cancel"
                                    @click="showAddTagAliasInput(group.primary_name, false)">✕</button>
                        </div>

                        <!-- icon-only + 按鈕 -->
                        <button type="button" class="alias-add-btn"
                                @click="showAddTagAliasInput(group.primary_name)"
                                x-show="addingTagAlias[group.primary_name] === undefined"
                                :aria-label="window.t('scanner.tag_alias.add_alias_aria')">
                            <i class="bi bi-plus"></i>
                        </button>

                        <!-- 刪除整筆 -->
                        <button type="button" class="alias-trash"
                                @click="deleteTagAliasGroup(group.primary_name)"
                                :title="window.t('scanner.tag_alias.delete_group_title')">
                            <i class="bi bi-trash3"></i>
                        </button>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Tag Alias Delete Group Modal (A3-3) -->
    <dialog class="modal fluent-modal"
            :class="{ 'modal-open': deleteTagAliasGroupModalOpen }"
            @click.self="cancelDeleteTagAliasGroupModal()">
        <div class="modal-box fluent-modal-box">
            <h3 class="fluent-modal-title">
                <i class="bi bi-exclamation-triangle text-warning"></i>
                {{ t('scanner.tag_alias.delete_group_modal.title') }}
            </h3>
            <p class="fluent-modal-body"
               x-text="window.t('scanner.tag_alias.delete_group_modal.body').replace('{name}', _pendingDeleteTagAliasGroupName || '')">
            </p>
            <div class="modal-action fluent-modal-actions">
                <button type="button" class="btn btn-ghost" @click="cancelDeleteTagAliasGroupModal()">
                    {{ t('scanner.tag_alias.delete_group_modal.cancel') }}
                </button>
                <button type="button" class="btn btn-error"
                        @click="confirmDeleteTagAliasGroup()"
                        :disabled="_deleteTagAliasGroupLoading">
                    <span x-show="_deleteTagAliasGroupLoading" class="loading loading-spinner loading-xs"></span>
                    <span x-show="!_deleteTagAliasGroupLoading"><i class="bi bi-trash3"></i></span>
                    {{ t('scanner.tag_alias.delete_group_modal.confirm') }}
                </button>
            </div>
        </div>
    </dialog>

    <!-- Dirty Check Modal (must be inside x-data scope for @click) -->
    <dialog class="modal fluent-modal"
            :class="{ 'modal-open': dirtyCheckModalOpen }"
            @click.self="dirtyCheckCancel()">
        <div class="modal-box fluent-modal-box">
            <h3 class="fluent-modal-title">
                <i class="bi bi-exclamation-triangle"></i> {{ t('scanner.dirty_modal.title') }}
            </h3>
            <p class="fluent-modal-body">
                {{ t('scanner.dirty_modal.body') }}
            </p>
            <div class="modal-action fluent-modal-actions">
                <button type="button" class="btn btn-ghost" @click="dirtyCheckCancel()">
                    {{ t('scanner.dirty_modal.cancel') }}
                </button>
                <button type="button" class="btn btn-error" @click="dirtyCheckDiscard()">
                    {{ t('scanner.dirty_modal.discard') }}
                </button>
                <button type="button" class="btn btn-primary" @click="dirtyCheckSave()">
                    {{ t('scanner.dirty_modal.save') }}
                </button>
            </div>
        </div>
    </dialog>

    <!-- Clear Cache Modal -->
    <dialog class="modal fluent-modal"
            :class="{ 'modal-open': clearCacheModalOpen }"
            @click.self="clearCacheModalOpen = false">
        <div class="modal-box fluent-modal-box">
            <h3 class="fluent-modal-title">
                <i class="bi bi-exclamation-triangle text-warning"></i> {{ t('scanner.clear_cache_modal.title') }}
            </h3>
            <p class="fluent-modal-body">
                {{ t('scanner.clear_cache_modal.body_prefix') }} <strong x-text="statTotal"></strong> {{ t('scanner.clear_cache_modal.body_suffix') }}
            </p>
            <div class="modal-action fluent-modal-actions">
                <button type="button" class="btn btn-ghost" @click="clearCacheModalOpen = false">
                    {{ t('scanner.clear_cache_modal.cancel') }}
                </button>
                <button type="button" class="btn btn-error" @click="clearCache()"
                        :disabled="clearCacheLoading">
                    <span x-show="clearCacheLoading" class="loading loading-spinner loading-xs"></span>
                    <span x-show="!clearCacheLoading"><i class="bi bi-trash3"></i></span>
                    {{ t('scanner.clear_cache_modal.confirm') }}
                </button>
            </div>
        </div>
    </dialog>

    <!-- TASK-52.3.5: Delete Alias Group Confirm Modal -->
    <dialog class="modal fluent-modal"
            :class="{ 'modal-open': deleteAliasGroupModalOpen }"
            @click.self="cancelDeleteAliasGroupModal()">
        <div class="modal-box fluent-modal-box">
            <h3 class="fluent-modal-title">
                <i class="bi bi-exclamation-triangle text-warning"></i>
                {{ t('scanner.alias.delete_group_modal.title') }}
            </h3>
            <p class="fluent-modal-body"
               x-text="window.t('scanner.alias.delete_group_modal.body').replace('{name}', _pendingDeleteAliasGroupName || '')">
            </p>
            <div class="modal-action fluent-modal-actions">
                <button type="button" class="btn btn-ghost" @click="cancelDeleteAliasGroupModal()">
                    {{ t('scanner.alias.delete_group_modal.cancel') }}
                </button>
                <button type="button" class="btn btn-error"
                        @click="confirmDeleteAliasGroup()"
                        :disabled="_deleteAliasGroupLoading">
                    <span x-show="_deleteAliasGroupLoading" class="loading loading-spinner loading-xs"></span>
                    <span x-show="!_deleteAliasGroupLoading"><i class="bi bi-trash3"></i></span>
                    {{ t('scanner.alias.delete_group_modal.confirm') }}
                </button>
            </div>
        </div>
    </dialog>

    <!-- TASK-52.3.6: Copy Logs Fail Modal (clipboard fail fallback) -->
    <dialog class="modal fluent-modal"
            :class="{ 'modal-open': copyFailModalOpen }"
            @click.self="closeCopyFailModal()">
        <div class="modal-box fluent-modal-box">
            <h3 class="fluent-modal-title">
                <i class="bi bi-exclamation-triangle text-warning"></i>
                {{ t('scanner.copy_fail_modal.title') }}
            </h3>
            <p class="fluent-modal-body">{{ t('scanner.copy_fail_modal.body') }}</p>
            <pre class="copy-fail-pre" x-text="copyFailDump"></pre>
            <div class="modal-action fluent-modal-actions">
                <button type="button" class="btn btn-ghost" @click="closeCopyFailModal()">
                    {{ t('scanner.copy_fail_modal.close') }}
                </button>
            </div>
        </div>
    </dialog>

    <!-- TASK-13: Missing Enrich Confirm Modal (大批量 > 500 筆) -->
    <dialog class="modal fluent-modal"
            :class="{ 'modal-open': missingConfirmModalOpen }"
            @click.self="cancelLargeMissingEnrich()">
        <div class="modal-box fluent-modal-box">
            <h3 class="fluent-modal-title">
                <i class="bi bi-exclamation-triangle text-warning"></i>
                <span x-text="window.t('scanner.stats.missing_enrich_confirm_title')"></span>
            </h3>
            <p class="fluent-modal-body">
                <span x-text="window.t('scanner.stats.missing_enrich_confirm_body_prefix')"></span><strong x-text="missingItems.length"></strong><span x-text="window.t('scanner.stats.missing_enrich_confirm_body_middle')"></span><strong x-text="Math.ceil(missingItems.length / 20 * 2)"></strong><span x-text="window.t('scanner.stats.missing_enrich_confirm_body_suffix')"></span>
            </p>
            <div class="modal-action fluent-modal-actions">
                <button type="button" class="btn btn-ghost" @click="cancelLargeMissingEnrich()">
                    <span x-text="window.t('scanner.stats.missing_enrich_confirm_cancel')"></span>
                </button>
                <button type="button" class="btn btn-primary" @click="confirmLargeMissingEnrich()">
                    <span x-text="window.t('scanner.stats.missing_enrich_confirm_confirm')"></span>
                </button>
            </div>
        </div>
    </dialog>

    <!-- Toast (Alpine controlled) -->
    <div class="toast toast-bottom toast-center fluent-toast-container"
         x-show="_toast.visible"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-4"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-4"
         x-cloak>
        <div class="alert fluent-toast" :class="`alert-${_toast.type}`">
            <i class="bi" :class="{
                'bi-check-circle': _toast.type === 'success',
                'bi-exclamation-circle': _toast.type === 'error',
                'bi-exclamation-triangle': _toast.type === 'warning',
                'bi-info-circle': _toast.type === 'info'
            }"></i>
            <span x-text="_toast.message"></span>
        </div>
    </div>
</div>
{% endblock %}