{#
    settings.html — v3.0 Production
    從原 1651 行精簡到 ~180 行 markup
    變更：
      1. 獨立 <html><head><body> → extends "ewoooc_base.html"
      2. 移除 _navbar.html include
      3. 1031 行 inline style → static/css/page-settings.css
      4. JS 邏輯抽到 static/js/page-settings.js
      5. active_page='settings'（system 群組 → 石墨灰 accent）
#}
{% extends "ewoooc_base.html" %}

{% block title %}爬蟲管理 · EwoooC{% endblock %}

{% set active_page = 'settings' %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/page-settings.css') }}">
{% endblock %}

{% block ewooo_content %}
<header class="page-header">
    <div>
        <h1><i class="fas fa-robot me-2"></i>爬蟲管理中心</h1>
        <p class="text-muted mb-0">管理爬蟲開關、執行頻率與分類網址</p>
    </div>
    <button class="refresh-btn" onclick="refreshData()">
        <i class="fas fa-sync-alt me-2"></i>刷新狀態
    </button>
</header>

{# 統計 #}
<div class="stats-grid">
    <div class="stat-card active">
        <div class="stat-icon"><i class="fas fa-play-circle"></i></div>
        <div class="stat-number" id="enabled-count">0</div>
        <div class="stat-label">啟用中</div>
    </div>
    <div class="stat-card paused">
        <div class="stat-icon"><i class="fas fa-pause-circle"></i></div>
        <div class="stat-number" id="paused-count">0</div>
        <div class="stat-label">已暫停</div>
    </div>
    <div class="stat-card total">
        <div class="stat-icon"><i class="fas fa-layer-group"></i></div>
        <div class="stat-number" id="total-count">0</div>
        <div class="stat-label">爬蟲總數</div>
    </div>
</div>

{# 爬蟲卡片 (JS 動態插入) #}
<div id="crawlers-container"></div>

{# 使用說明 #}
<div class="info-section">
    <h5><i class="fas fa-info-circle"></i>使用說明</h5>
    <ul>
        <li>使用右側切換開關可以快速啟用或停用爬蟲</li>
        <li>停用的爬蟲程式碼和資料會完整保留，可隨時重新啟用</li>
        <li>點擊「修改頻率」按鈕可調整爬蟲的執行間隔時間</li>
        <li>變更執行頻率後，需要重啟排程器服務才會生效：<code>sudo systemctl restart momo-scheduler</code></li>
        <li>點擊右上角「刷新狀態」按鈕可即時更新所有爬蟲狀態</li>
    </ul>
</div>

<hr class="section-divider">

{# 分類設定 #}
<div class="section-header">
    <h5><i class="fas fa-list-alt me-2"></i>爬蟲網址設定</h5>
    <button class="btn btn-primary" onclick="prepareAddModal()">
        <i class="fas fa-plus me-2"></i>新增分類
    </button>
</div>

<div class="category-search-container" id="search-container" style="display: none;">
    <div class="search-box" id="search-box">
        <i class="fas fa-search search-icon"></i>
        <input type="text" id="category-search" placeholder="搜尋分類名稱或 URL..." oninput="filterCategories()">
        <i class="fas fa-times clear-icon" onclick="clearSearch()"></i>
    </div>
</div>

<div id="categories-container">
    {% if categories %}
    <div class="categories-grid" id="categories-grid">
        {% for category in categories %}
        <div class="category-card" data-category-name="{{ category.name|lower }}" data-category-url="{{ category.url|lower }}">
            <div class="category-card-header">
                <div class="category-name"><i class="fas fa-tag"></i>{{ category.name }}</div>
            </div>
            <div class="category-url">
                <i class="fas fa-link"></i>
                <a href="{{ category.url }}" target="_blank" title="{{ category.url }}">{{ category.url }}</a>
            </div>
            <div class="category-actions">
                <button class="category-btn test" data-url="{{ category.url }}" onclick="testUrl(this.dataset.url, this)" title="測試連結有效性">
                    <i class="fas fa-stethoscope"></i><span>測試</span>
                </button>
                <button class="category-btn edit" data-id="{{ category.id }}" data-name="{{ category.name }}" data-url="{{ category.url }}"
                        onclick="prepareEditModal(this.dataset.id, this.dataset.name, this.dataset.url)" title="編輯分類">
                    <i class="fas fa-edit"></i><span>編輯</span>
                </button>
                <button class="category-btn delete" data-id="{{ category.id }}" onclick="deleteCategory(this.dataset.id)" title="刪除分類">
                    <i class="fas fa-trash"></i><span>刪除</span>
                </button>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="no-results" id="no-results" style="display: none;">
        <i class="fas fa-search"></i>
        <p>找不到符合的分類</p>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon"><i class="fas fa-folder-open"></i></div>
        <h5>尚未建立任何分類</h5>
        <p>開始建立您的第一個爬蟲分類，追蹤 MOMO 商城的商品變化</p>
        <button class="empty-state-btn" onclick="prepareAddModal()">
            <i class="fas fa-plus-circle"></i>立即新增分類
        </button>
    </div>
    {% endif %}
</div>

<div class="alert alert-info mb-5">
    <i class="fas fa-lightbulb me-2"></i>
    <strong>提示：</strong> 分類設定採用動態讀取機制，新增或修改後<strong>無需重啟系統</strong>，下一次爬蟲任務執行時將自動載入最新設定。
</div>

{# Toast / Loading / Modal #}
<div class="toast-container" id="toast-container"></div>
<div class="loading-overlay" id="loading-overlay">
    <div class="loading-spinner">
        <i class="fas fa-spinner"></i>
        <div class="loading-text">處理中，請稍候...</div>
    </div>
</div>

<div class="modal fade" id="categoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">新增分類</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="categoryForm" onsubmit="saveCategory(); return false;">
                    <input type="hidden" id="categoryId" name="id">
                    <div class="mb-3">
                        <label for="categoryName" class="form-label"><i class="fas fa-tag me-2"></i>分類名稱</label>
                        <input type="text" class="form-control" id="categoryName" name="name" required placeholder="例如：3C家電">
                    </div>
                    <div class="mb-3">
                        <label for="categoryUrl" class="form-label"><i class="fas fa-link me-2"></i>分類 URL</label>
                        <input type="url" class="form-control" id="categoryUrl" name="url" required placeholder="https://www.momoshop.com.tw/...">
                        <div class="form-text">請輸入完整的 MOMO 商城分類網址</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fas fa-times me-2"></i>取消</button>
                <button type="submit" form="categoryForm" class="btn btn-primary"><i class="fas fa-save me-2"></i>儲存</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/page-settings.js') }}"></script>
{% endblock %}
