{% extends "base.html" %}

{% block extra_head %}
<style>
  :root {
    --settings-bg: #f4f3ef;
    --settings-card: rgba(255, 255, 252, 0.9);
    --settings-ink: #292822;
    --settings-muted: rgba(41, 40, 34, 0.5);
    --settings-line: rgba(41, 40, 34, 0.085);
    --settings-soft: rgba(41, 40, 34, 0.055);
  }
  [data-theme="dark"] {
    --settings-bg: #11110f;
    --settings-card: rgba(34, 34, 30, 0.9);
    --settings-ink: rgba(255, 255, 255, 0.92);
    --settings-muted: rgba(255, 255, 255, 0.44);
    --settings-line: rgba(255, 255, 255, 0.085);
    --settings-soft: rgba(255, 255, 255, 0.06);
  }
  body[data-nav-context="settings"] {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 50% -13rem, rgba(169, 151, 113, 0.08), transparent 31rem),
      var(--settings-bg) !important;
  }
  .settings-page {
    width: min(100%, 660px);
    min-height: calc(100dvh - 104px - env(safe-area-inset-bottom));
    margin: 0 auto;
    padding: 27px 14px 10px;
    color: var(--settings-ink);
  }
  .settings-stack { display: grid; gap: 27px; }
  .settings-section-title {
    margin: 0 0 9px 4px;
    color: var(--settings-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
  }
  .settings-card {
    overflow: hidden;
    border: 1px solid var(--settings-line);
    border-radius: 18px;
    background: var(--settings-card);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 1px 2px rgba(35, 34, 30, 0.035), 0 9px 28px rgba(35, 34, 30, 0.025);
  }
  [data-theme="dark"] .settings-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); }
  .settings-row {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 15px;
  }
  .settings-row + .settings-row { border-top: 1px solid var(--settings-line); }
  .settings-row-main { min-width: 0; flex: 1; }
  .settings-row-title { font-size: 14px; font-weight: 620; letter-spacing: -0.012em; line-height: 1.35; }
  .settings-row-copy {
    margin-top: 3px;
    color: var(--settings-muted);
    font-size: 11px;
    line-height: 1.45;
  }
  .appearance-card { padding: 15px; }
  .appearance-heading { margin-bottom: 13px; }
  .theme-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .theme-option {
    min-width: 0;
    min-height: 104px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--settings-muted);
    background: transparent;
    font-size: 12px;
    font-weight: 610;
    cursor: pointer;
    transition: color 140ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 160ms ease, transform 120ms ease;
  }
  .theme-preview {
    position: relative;
    width: min(100%, 92px);
    height: 52px;
    overflow: hidden;
    border: 1px solid rgba(36, 35, 30, 0.1);
    border-radius: 9px;
    background: #f4f2ec;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }
  .theme-preview::before,
  .theme-preview::after {
    content: '';
    position: absolute;
    left: 11px;
    height: 3px;
    border-radius: 99px;
    background: rgba(38, 37, 32, 0.58);
  }
  .theme-preview::before { top: 15px; width: 42%; }
  .theme-preview::after { top: 24px; width: 62%; opacity: 0.34; }
  .theme-preview-dark { border-color: rgba(255, 255, 255, 0.12); background: #1b1b18; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055); }
  .theme-preview-dark::before, .theme-preview-dark::after { background: rgba(255, 255, 255, 0.78); }
  .theme-preview-system { background: linear-gradient(90deg, #f4f2ec 0 50%, #1b1b18 50%); }
  .theme-preview-system::before { background: linear-gradient(90deg, rgba(38, 37, 32, 0.58) 0 48%, rgba(255, 255, 255, 0.78) 52%); }
  .theme-preview-system::after { background: linear-gradient(90deg, rgba(38, 37, 32, 0.35) 0 48%, rgba(255, 255, 255, 0.48) 52%); }
  .theme-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: #4c6c62;
    opacity: 0;
    transform: scale(0.65);
    transition: opacity 140ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .theme-check svg { width: 9px; height: 9px; stroke-width: 2.8; }
  .theme-option:hover { color: var(--settings-ink); }
  .theme-option:active { transform: scale(0.97); }
  .theme-option:focus-visible { outline: 2px solid var(--settings-ink); outline-offset: 2px; }
  .theme-option.is-active {
    color: var(--settings-ink);
    border-color: var(--settings-line);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 1px 2px rgba(32, 30, 24, 0.06), 0 7px 18px rgba(32, 30, 24, 0.045);
  }
  .theme-option.is-active .theme-check { opacity: 1; transform: scale(1); }
  [data-theme="dark"] .theme-option.is-active { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055); }
  .library-summary { padding: 18px 16px 16px; }
  .library-total { font-size: 29px; font-weight: 670; letter-spacing: -0.045em; line-height: 1; }
  .library-total-unit { margin-left: 5px; color: var(--settings-muted); font-size: 12px; font-weight: 560; letter-spacing: 0; }
  .library-types { margin-top: 9px; color: var(--settings-muted); font-size: 11px; }
  .library-sync-state { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--settings-muted); font-size: 11px; }
  .library-sync-dot { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: #668b7d; box-shadow: 0 0 0 3px rgba(102, 139, 125, 0.11); }
  .library-sync-state.is-error .library-sync-dot { background: #bd6259; box-shadow: 0 0 0 3px rgba(189, 98, 89, 0.11); }
  .download-levels { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--settings-soft); }
  .download-level {
    width: 31px; height: 29px; border: 0; border-radius: 999px; color: var(--settings-muted);
    background: transparent; font-size: 11px; font-weight: 650; cursor: pointer;
  }
  .download-level.is-active { color: var(--settings-ink); background: var(--settings-card); box-shadow: 0 1px 3px rgba(30,29,25,.09); }
  .download-level:focus-visible { outline: 2px solid var(--settings-ink); outline-offset: 2px; }
  .setting-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    color: var(--settings-muted);
    background: var(--settings-soft);
  }
  .setting-icon svg { width: 15px; height: 15px; stroke-width: 1.8; }
  .settings-action {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--settings-line);
    border-radius: 999px;
    color: var(--settings-ink);
    background: var(--settings-soft);
    font-size: 11px;
    font-weight: 620;
    cursor: pointer;
    transition: background-color 140ms ease, transform 120ms ease, opacity 140ms ease;
  }
  .settings-action:hover { background: color-mix(in oklab, var(--settings-ink) 10%, transparent); }
  .settings-action:active { transform: scale(0.97); }
  .settings-action:focus-visible { outline: 2px solid var(--settings-ink); outline-offset: 2px; }
  .settings-action:disabled { opacity: 0.45; cursor: wait; }
  .settings-action.is-danger { color: #b4433b; background: rgba(180, 67, 59, 0.065); }
  .settings-action.is-primary { color: #f7f6f1; border-color: #34332d; background: #34332d; }
  .settings-action.is-warning { color: #8a622f; border-color: rgba(138, 98, 47, 0.16); background: rgba(138, 98, 47, 0.075); }
  [data-theme="dark"] .settings-action.is-danger { color: #e69a93; background: rgba(230, 154, 147, 0.075); }
  [data-theme="dark"] .settings-action.is-primary { color: #24231f; border-color: #e9e5da; background: #e9e5da; }
  [data-theme="dark"] .settings-action.is-warning { color: #d8b57d; border-color: rgba(216, 181, 125, 0.16); background: rgba(216, 181, 125, 0.08); }
  .install-row { min-height: 86px; }
  .install-mark {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--settings-line);
    border-radius: 13px;
    background: #171815;
    box-shadow: 0 6px 18px rgba(23, 24, 21, 0.15);
  }
  .install-mark img { display: block; width: 100%; height: 100%; }
  .install-origin {
    display: block;
    max-width: 100%;
    margin-top: 5px;
    overflow: hidden;
    color: color-mix(in oklab, var(--settings-muted) 84%, transparent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .about-footer { padding: 1px 4px 9px; color: var(--settings-muted); text-align: center; }
  .about-card { padding: 0; }
  .about-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 7px; }
  .about-name { color: color-mix(in oklab, var(--settings-ink) 82%, transparent); font-size: 11px; font-weight: 620; }
  .about-separator { color: color-mix(in oklab, var(--settings-muted) 44%, transparent); font-size: 9px; }
  .about-version { color: var(--settings-muted); font-size: 10px; }
  .about-link { color: var(--settings-muted); font-size: 10px; font-weight: 560; text-decoration: none; }
  .about-link:hover { color: var(--settings-ink); }
  .about-link:focus-visible { outline: 2px solid var(--settings-ink); outline-offset: 3px; border-radius: 3px; }
  .confirm-mask {
    position: fixed;
    inset: 0;
    z-index: 270;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(18, 18, 16, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .confirm-card { width: min(100%, 390px); padding: 19px; border: 1px solid var(--settings-line); border-radius: 20px; color: var(--settings-ink); background: var(--settings-bg); box-shadow: 0 24px 70px rgba(20, 19, 16, 0.22); }
  .confirm-title { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
  .confirm-copy { margin: 7px 0 0; color: var(--settings-muted); font-size: 12px; line-height: 1.55; }
  .confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
  .credential-mask[hidden] { display: none; }
  .credential-mask { position: fixed; inset: 0; z-index: 275; display: grid; place-items: center; padding: 16px; background: rgba(18,18,16,.44); backdrop-filter: blur(9px); }
  .credential-dialog { width: min(100%, 430px); max-height: min(620px, calc(100dvh - 32px)); overflow-y: auto; padding: 20px; border: 1px solid var(--settings-line); border-radius: 22px; color: var(--settings-ink); background: var(--settings-bg); box-shadow: 0 26px 80px rgba(20,19,16,.24); }
  .credential-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .credential-title { margin: 0; font-size: 18px; font-weight: 660; letter-spacing: -.025em; }
  .credential-copy { margin: 6px 0 0; color: var(--settings-muted); font-size: 11px; line-height: 1.55; }
  .credential-close { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; color: var(--settings-muted); background: var(--settings-soft); cursor: pointer; }
  .credential-close svg { width: 15px; height: 15px; }
  .credential-list { margin-top: 18px; overflow: hidden; border: 1px solid var(--settings-line); border-radius: 15px; background: var(--settings-card); }
  .credential-item { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 10px 12px; }
  .credential-item + .credential-item { border-top: 1px solid var(--settings-line); }
  .credential-mark { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--settings-muted); background: var(--settings-soft); }
  .credential-mark svg { width: 14px; height: 14px; }
  .credential-name { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
  .credential-empty { padding: 24px 14px; color: var(--settings-muted); font-size: 11px; text-align: center; }
  .credential-upload { margin-top: 14px; padding: 14px; border: 1px dashed color-mix(in oklab, var(--settings-ink) 17%, transparent); border-radius: 15px; background: var(--settings-soft); }
  .credential-upload-title { font-size: 12px; font-weight: 630; }
  .credential-upload-copy { margin: 4px 0 10px; color: var(--settings-muted); font-size: 10px; line-height: 1.5; }
  .credential-file { width: 100%; color: var(--settings-muted); font-size: 10px; }
  .credential-upload-actions { display: flex; justify-content: flex-end; margin-top: 11px; }
  .toast-wrap { position: fixed; right: 14px; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 280; width: min(330px, calc(100vw - 28px)); }
  .settings-toast { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--settings-line); border-radius: 13px; color: var(--settings-ink); background: color-mix(in oklab, var(--settings-bg) 92%, transparent); box-shadow: 0 12px 32px rgba(20, 19, 16, 0.14); font-size: 12px; backdrop-filter: blur(16px); animation: toast-in 180ms cubic-bezier(0.22, 1, 0.36, 1); }
  .settings-toast svg { width: 16px; height: 16px; color: #668b7d; }
  .settings-toast.error svg { color: #bd6259; }
  .settings-toast.error { border-color: rgba(180, 67, 59, 0.28); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
  @media (min-width: 640px) { .settings-page { padding: 34px 18px 14px; } }
  @media (prefers-reduced-motion: reduce) {
    .theme-option, .settings-action, .settings-toast { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }
</style>
{% endblock %}

{% block content %}
<main class="settings-page tool-page">
  <header class="settings-header tool-page-header">
    <p class="tool-page-overline"><i data-feather="sliders"></i><span>本地偏好</span></p>
    <h1 class="settings-title">设置</h1>
    <p class="tool-page-intro">管理显示方式、媒体索引和本机服务。</p>
  </header>

  <div class="settings-stack">
    <section aria-labelledby="appearance-title">
      <h2 id="appearance-title" class="settings-section-title">外观</h2>
      <div class="settings-card appearance-card">
        <div class="appearance-heading">
          <div class="settings-row-title">显示模式</div>
          <div class="settings-row-copy">选择后立即应用到所有页面。</div>
        </div>
        <div class="theme-options" role="group" aria-label="显示模式">
          <button class="theme-option" type="button" data-theme-preference="system" aria-pressed="false">
            <span class="theme-preview theme-preview-system"><span class="theme-check"><i data-feather="check"></i></span></span><span>跟随系统</span>
          </button>
          <button class="theme-option" type="button" data-theme-preference="light" aria-pressed="false">
            <span class="theme-preview theme-preview-light"><span class="theme-check"><i data-feather="check"></i></span></span><span>浅色</span>
          </button>
          <button class="theme-option" type="button" data-theme-preference="dark" aria-pressed="false">
            <span class="theme-preview theme-preview-dark"><span class="theme-check"><i data-feather="check"></i></span></span><span>深色</span>
          </button>
        </div>
      </div>
    </section>

    <section aria-labelledby="install-title">
      <h2 id="install-title" class="settings-section-title">此设备</h2>
      <div class="settings-card">
        <div class="settings-row install-row">
          <span class="install-mark" aria-hidden="true"><img src="{{ url_for('pwa_icon', size=192) }}" alt=""></span>
          <div class="settings-row-main">
            <div class="settings-row-title">安装 TikLocal · {{ instance_name }}</div>
            <div id="install-app-copy" class="settings-row-copy">正在检查当前浏览器的安装方式…</div>
            <code id="install-origin" class="install-origin"></code>
          </div>
          <button id="install-app" class="settings-action is-primary" type="button">安装</button>
        </div>
      </div>
    </section>

    <section aria-labelledby="library-title">
      <h2 id="library-title" class="settings-section-title">媒体库</h2>
      <div class="settings-card">
        <div class="library-summary">
          <div class="library-total"><span id="media-total">{{ videos + images }}</span><span class="library-total-unit">个本地媒体</span></div>
          <div class="library-types"><span id="videos-count">{{ videos }}</span> 个视频 · <span id="images-count">{{ images }}</span> 张图片</div>
          <div id="index-sync-state" class="library-sync-state"><span class="library-sync-dot"></span><span id="index-sync-copy">正在读取索引状态…</span></div>
        </div>
        <div class="settings-row">
          <span class="setting-icon"><i data-feather="refresh-cw"></i></span>
          <div class="settings-row-main">
            <div class="settings-row-title">重新扫描媒体库</div>
            <div class="settings-row-copy">适用于应用运行期间从外部新增、移动或删除文件。</div>
          </div>
          <button id="refresh-library" class="settings-action" type="button">扫描</button>
        </div>
        <div class="settings-row">
          <span class="setting-icon"><i data-feather="image"></i></span>
          <div class="settings-row-main">
            <div class="settings-row-title">缩略图缓存</div>
            <div class="settings-row-copy"><span id="cache-size">{{ cache_size_mb }} MB</span>，清理后会在浏览时按需重新生成。</div>
          </div>
          <button id="clear-cache" class="settings-action" type="button">清理</button>
        </div>
      </div>
    </section>

    <section aria-labelledby="privacy-title">
      <h2 id="privacy-title" class="settings-section-title">隐私与推荐</h2>
      <div class="settings-card settings-row">
        <span class="setting-icon"><i data-feather="clock"></i></span>
        <div class="settings-row-main">
          <div class="settings-row-title">本地浏览记录</div>
          <div class="settings-row-copy">重置浏览、跳过和完成记录，不影响收藏与集合。</div>
        </div>
        <button id="reset-recommendations" class="settings-action is-danger" type="button">重置</button>
      </div>
    </section>

    <section id="download" aria-labelledby="download-title">
      <h2 id="download-title" class="settings-section-title">下载</h2>
      <div class="settings-card">
        <div class="settings-row">
          <span class="setting-icon"><i data-feather="activity"></i></span>
          <div class="settings-row-main">
            <div class="settings-row-title">下载组件</div>
            <div id="download-dependency-copy" class="settings-row-copy">正在检查运行状态…</div>
          </div>
        </div>
        <div class="settings-row">
          <span class="setting-icon"><i data-feather="layers"></i></span>
          <div class="settings-row-main">
            <div class="settings-row-title">同时下载</div>
            <div class="settings-row-copy">控制并行任务数量，2 个适合大多数设备。</div>
          </div>
          <div id="download-levels" class="download-levels" role="group" aria-label="同时下载任务数">
            <button class="download-level" type="button" data-concurrency="1">1</button>
            <button class="download-level" type="button" data-concurrency="2">2</button>
            <button class="download-level" type="button" data-concurrency="4">4</button>
          </div>
        </div>
        <div class="settings-row">
          <span class="setting-icon"><i data-feather="shield"></i></span>
          <div class="settings-row-main">
            <div class="settings-row-title">网站登录信息</div>
            <div id="credential-summary" class="settings-row-copy">正在读取…</div>
          </div>
          <button id="manage-credentials" class="settings-action" type="button">管理</button>
        </div>
      </div>
    </section>

    <section aria-label="关于">
      <footer class="about-footer about-card">
        <div class="about-line">
          <span class="about-name">TikLocal</span><span class="about-separator" aria-hidden="true">·</span><span class="about-version">v{{ version }}</span><span class="about-separator" aria-hidden="true">·</span>
          <a class="about-link" href="https://github.com/ChanMo/TikLocal" target="_blank" rel="noopener noreferrer">GitHub</a>
          <span class="about-separator" aria-hidden="true">·</span>
          <a class="about-link" href="mailto:chan.mo@outlook.com">联系作者</a>
        </div>
      </footer>
    </section>
  </div>
</main>
<div id="credential-mask" class="credential-mask" hidden>
  <section class="credential-dialog" role="dialog" aria-modal="true" aria-labelledby="credential-title">
    <div class="credential-head">
      <div><h2 id="credential-title" class="credential-title">网站登录信息</h2><p class="credential-copy">用于访问需要登录的内容，文件只保存在当前设备。</p></div>
      <button id="close-credentials" class="credential-close" type="button" aria-label="关闭"><i data-feather="x"></i></button>
    </div>
    <div id="credential-list" class="credential-list"><div class="credential-empty">正在读取登录信息…</div></div>
    <div class="credential-upload">
      <div class="credential-upload-title">添加或更新</div>
      <p class="credential-upload-copy">支持 .txt 和 .cookies；上传同名文件会自动替换。</p>
      <input id="credential-file" class="credential-file" type="file" accept=".txt,.cookies,text/plain">
      <div class="credential-upload-actions"><button id="upload-credential" class="settings-action is-primary" type="button">上传</button></div>
    </div>
  </section>
</div>
<div id="toast-wrap" class="toast-wrap" aria-live="polite"></div>
{% endblock %}

{% block extra_body %}
<script>
  (() => {
    const themeButtons = Array.from(document.querySelectorAll('[data-theme-preference]'));
    const refreshButton = document.getElementById('refresh-library');
    const clearCacheButton = document.getElementById('clear-cache');
    const resetButton = document.getElementById('reset-recommendations');
    const installButton = document.getElementById('install-app');
    const installCopy = document.getElementById('install-app-copy');
    const credentialMask = document.getElementById('credential-mask');
    const toastWrap = document.getElementById('toast-wrap');

    document.getElementById('install-origin').textContent = window.location.origin;

    function renderInstallStatus(status = window.TikLocalPWA?.status?.() || {}) {
      if (status.installed) {
        installCopy.textContent = '已作为独立应用运行；这个入口只连接当前 TikLocal 实例。';
        installButton.textContent = '已安装';
        installButton.disabled = true;
        return;
      }
      installButton.disabled = false;
      if (status.canPrompt) {
        installCopy.textContent = '安装后会出现在主屏幕或应用列表，不会下载媒体文件。';
        installButton.textContent = '安装';
      } else if (status.reason === 'untrusted-certificate') {
        installCopy.textContent = 'HTTPS 证书尚未被此设备信任，安装能力被浏览器阻止。';
        installButton.textContent = '配置安全连接';
      } else if (status.reason === 'insecure-http') {
        installCopy.textContent = '当前不是可信 HTTPS，浏览器不会提供完整安装能力。';
        installButton.textContent = '配置安全连接';
      } else if (status.reason === 'safari-menu') {
        installCopy.textContent = 'Safari 需要从“文件”菜单选择“添加到程序坞”。';
        installButton.textContent = '查看 Safari 步骤';
      } else if (status.reason === 'share-menu') {
        installCopy.textContent = '请从浏览器分享菜单选择“添加到主屏幕”。';
        installButton.textContent = '查看移动端步骤';
      } else if (status.reason === 'chromium-waiting') {
        installCopy.textContent = '安全连接正常；点击页面并停留片刻，或从 Chrome 菜单安装。';
        installButton.textContent = '查看 Chrome 步骤';
      } else {
        installCopy.textContent = '当前浏览器需要从自身菜单创建应用入口。';
        installButton.textContent = '查看安装步骤';
      }
    }

    function currentThemePreference() {
      const saved = localStorage.getItem('theme');
      return ['light', 'dark', 'system'].includes(saved) ? saved : 'system';
    }

    function syncThemeButtons(preference = currentThemePreference()) {
      themeButtons.forEach((button) => {
        const active = button.dataset.themePreference === preference;
        button.classList.toggle('is-active', active);
        button.setAttribute('aria-pressed', String(active));
      });
    }

    function setThemePreference(preference) {
      if (window.themeManager?.setPreference) {
        window.themeManager.setPreference(preference);
      } else {
        localStorage.setItem('theme', preference);
        const resolved = preference === 'system'
          ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
          : preference;
        document.body.setAttribute('data-theme', resolved);
      }
      syncThemeButtons(preference);
    }

    function showToast(message, type = 'info') {
      const toast = document.createElement('div');
      toast.className = `settings-toast ${type}`;
      const icon = document.createElement('i');
      icon.setAttribute('data-feather', type === 'error' ? 'alert-circle' : 'check-circle');
      const copy = document.createElement('span');
      copy.textContent = message;
      toast.append(icon, copy);
      toastWrap.replaceChildren(toast);
      feather.replace();
      window.setTimeout(() => toast.remove(), 3200);
    }

    async function requestJson(url, options = {}) {
      const response = await fetch(url, options);
      const payload = await response.json();
      if (!response.ok || payload.success === false) throw new Error(payload.error || '请求失败');
      return payload;
    }

    async function requestForm(url, formData) {
      const response = await fetch(url, { method: 'POST', body: formData });
      const payload = await response.json();
      if (!response.ok || payload.success === false) throw new Error(payload.error || '请求失败');
      return payload;
    }

    function formatSyncTime(value) {
      if (!value) return '尚未完成扫描';
      const date = new Date(value);
      if (Number.isNaN(date.getTime())) return '最近已完成扫描';
      return `最近扫描：${date.toLocaleString()}`;
    }

    async function loadStats() {
      try {
        const payload = await requestJson('/api/library/stats');
        const videos = Number(payload.videos || 0);
        const images = Number(payload.images || 0);
        document.getElementById('media-total').textContent = Number(payload.indexed_total || videos + images);
        document.getElementById('videos-count').textContent = videos;
        document.getElementById('images-count').textContent = images;
        document.getElementById('cache-size').textContent = `${Number(payload.cache_mb || 0)} MB`;
        document.getElementById('index-sync-copy').textContent = formatSyncTime(payload.last_synced_at);
        document.getElementById('index-sync-state').classList.remove('is-error');
      } catch (error) {
        document.getElementById('index-sync-copy').textContent = '暂时无法读取索引状态';
        document.getElementById('index-sync-state').classList.add('is-error');
      }
    }

    function confirmAction(title, copy, actionLabel, tone, onConfirm) {
      const mask = document.createElement('div');
      mask.className = 'confirm-mask';
      mask.innerHTML = `
        <section class="confirm-card" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
          <h2 id="confirm-title" class="confirm-title"></h2>
          <p class="confirm-copy"></p>
          <div class="confirm-actions">
            <button class="settings-action" type="button" data-confirm-cancel>取消</button>
            <button class="settings-action" type="button" data-confirm-accept></button>
          </div>
        </section>`;
      mask.querySelector('.confirm-title').textContent = title;
      mask.querySelector('.confirm-copy').textContent = copy;
      const acceptButton = mask.querySelector('[data-confirm-accept]');
      acceptButton.textContent = actionLabel;
      acceptButton.classList.add(`is-${tone}`);
      const close = () => mask.remove();
      mask.querySelector('[data-confirm-cancel]').addEventListener('click', close);
      acceptButton.addEventListener('click', () => { close(); onConfirm(); });
      mask.addEventListener('click', (event) => { if (event.target === mask) close(); });
      mask.addEventListener('keydown', (event) => { if (event.key === 'Escape') close(); });
      document.body.appendChild(mask);
      mask.querySelector('[data-confirm-cancel]').focus();
    }

    async function runButton(button, busyLabel, task) {
      const original = button.textContent;
      button.disabled = true;
      button.textContent = busyLabel;
      try { await task(); } finally { button.disabled = false; button.textContent = original; }
    }

    function renderCredentials(files = []) {
      const list = document.getElementById('credential-list');
      document.getElementById('credential-summary').textContent = files.length ? `已保存 ${files.length} 个凭证，下载时按网站自动匹配。` : '尚未添加，公开内容仍可正常下载。';
      if (!files.length) {
        list.innerHTML = '<div class="credential-empty">还没有保存登录信息</div>';
      } else {
        list.innerHTML = files.map((name) => `
          <div class="credential-item"><span class="credential-mark"><i data-feather="key"></i></span><span class="credential-name"></span></div>`).join('');
        list.querySelectorAll('.credential-name').forEach((element, index) => { element.textContent = files[index]; });
      }
      feather.replace();
    }

    async function loadDownloadSettings() {
      try {
        const [probePayload, configPayload, cookiePayload] = await Promise.all([
          requestJson('/api/download/probe', { method: 'POST' }),
          requestJson('/api/download/config'),
          requestJson('/api/download/cookies'),
        ]);
        const probe = probePayload.data || {};
        const missing = [!probe.yt_dlp_available ? '视频' : '', !probe.gallery_dl_available ? '图片' : '', !probe.ffmpeg_available ? '媒体合并' : ''].filter(Boolean);
        document.getElementById('download-dependency-copy').textContent = missing.length ? `${missing.join('、')}组件尚未准备好。` : '图片与视频下载均已就绪。';
        const configured = Number(configPayload.data?.effective?.max_concurrent ?? 2);
        const shown = [1, 2, 4].includes(configured) ? configured : 2;
        document.querySelectorAll('[data-concurrency]').forEach((button) => button.classList.toggle('is-active', Number(button.dataset.concurrency) === shown));
        renderCredentials(cookiePayload.data?.files || []);
      } catch (_) {
        document.getElementById('download-dependency-copy').textContent = '暂时无法读取下载状态。';
        document.getElementById('credential-summary').textContent = '暂时无法读取登录信息。';
      }
    }

    function openCredentials() {
      credentialMask.hidden = false;
      document.body.style.overflow = 'hidden';
      document.getElementById('close-credentials').focus();
    }

    function closeCredentials() {
      credentialMask.hidden = true;
      document.body.style.overflow = '';
      document.getElementById('manage-credentials').focus();
    }

    themeButtons.forEach((button) => button.addEventListener('click', () => setThemePreference(button.dataset.themePreference)));
    window.addEventListener('tiklocal:theme-changed', (event) => syncThemeButtons(event.detail?.preference));
    window.addEventListener('tiklocal:pwa-status', (event) => renderInstallStatus(event.detail));
    installButton.addEventListener('click', async () => {
      const result = await window.TikLocalPWA?.install?.();
      if (result?.outcome === 'accepted') {
        showToast('正在安装 TikLocal');
      } else if (result?.outcome === 'guide') {
        window.location.assign(result.url || '/install');
      }
      renderInstallStatus();
    });
    syncThemeButtons();
    renderInstallStatus();

    refreshButton.addEventListener('click', () => {
      confirmAction('重新扫描媒体库？', '扫描会校正运行期间发生的文件新增、移动和删除。', '开始扫描', 'primary', () => {
        runButton(refreshButton, '扫描中…', async () => {
          const payload = await requestJson('/api/library/sync', { method: 'POST' });
          await loadStats();
          showToast(`扫描完成，共索引 ${Number(payload.data?.indexed || 0)} 个媒体`);
        }).catch(() => showToast('扫描失败，请稍后重试', 'error'));
      });
    });

    clearCacheButton.addEventListener('click', () => {
      confirmAction('清理缩略图缓存？', '不会删除原始媒体；缩略图会在下次浏览时按需生成。', '确认清理', 'warning', () => {
        runButton(clearCacheButton, '清理中…', async () => {
          const payload = await requestJson('/api/cache/clear', { method: 'POST' });
          await loadStats();
          showToast(`已释放 ${Number(payload.freed_mb || 0)} MB`);
        }).catch(() => showToast('清理失败，请稍后重试', 'error'));
      });
    });

    resetButton.addEventListener('click', () => {
      confirmAction('重置推荐记录？', '浏览、跳过和完成记录将被清除，收藏与集合保持不变。', '确认重置', 'danger', () => {
        runButton(resetButton, '重置中…', async () => {
          await requestJson('/api/activity', { method: 'DELETE' });
          showToast('推荐记录已重置');
        }).catch(() => showToast('重置失败，请稍后重试', 'error'));
      });
    });

    document.getElementById('download-levels').addEventListener('click', async (event) => {
      const button = event.target.closest('[data-concurrency]');
      if (!button) return;
      const maxConcurrent = Number(button.dataset.concurrency);
      try {
        await requestJson('/api/download/config', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ max_concurrent: maxConcurrent }),
        });
        document.querySelectorAll('[data-concurrency]').forEach((item) => item.classList.toggle('is-active', item === button));
        showToast(`同时下载已设为 ${maxConcurrent} 个任务`);
      } catch (_) { showToast('下载设置保存失败', 'error'); }
    });

    document.getElementById('manage-credentials').addEventListener('click', openCredentials);
    document.getElementById('close-credentials').addEventListener('click', closeCredentials);
    credentialMask.addEventListener('click', (event) => { if (event.target === credentialMask) closeCredentials(); });
    credentialMask.addEventListener('keydown', (event) => { if (event.key === 'Escape') closeCredentials(); });
    document.getElementById('upload-credential').addEventListener('click', (event) => {
      const input = document.getElementById('credential-file');
      const file = input.files?.[0];
      if (!file) { showToast('请先选择登录信息文件', 'error'); return; }
      runButton(event.currentTarget, '上传中…', async () => {
        const formData = new FormData();
        formData.append('file', file);
        await requestForm('/api/download/cookies/upload', formData);
        input.value = '';
        const payload = await requestJson('/api/download/cookies');
        renderCredentials(payload.data?.files || []);
        showToast('登录信息已更新');
      }).catch(() => showToast('登录信息上传失败', 'error'));
    });

    loadStats();
    loadDownloadSettings();
  })();
</script>
{% endblock %}