{% extends "base.html" %}
{% block content %}
<div class="bg-gray-50 dark:bg-gray-900">
  <main class="container mx-auto px-4 py-8 lg:py-12">
    <div class="max-w-6xl mx-auto">
      <!-- Header -->
      <header class="mb-8 lg:mb-12">
        <h1 class="text-3xl lg:text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">Settings</h1>
        <p class="mt-2 text-lg text-gray-500 dark:text-gray-400">Manage your TikLocal preferences and explore app details.</p>
      </header>

      <div class="grid grid-cols-1 lg:grid-cols-3 lg:gap-12">
        <!-- Left Column / Main Settings -->
        <div class="lg:col-span-2 space-y-8">
          <!-- Actions -->
          <section class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-700">
            <header class="p-6 border-b border-gray-200 dark:border-gray-700">
              <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
                <i data-feather="zap" class="w-6 h-6 text-green-500"></i>
                <span>Actions</span>
              </h2>
            </header>
            <div class="p-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
              <button onclick="clearCache()" class="group flex items-center gap-4 p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all duration-200 text-left">
                <div class="flex-shrink-0 w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
                  <i data-feather="trash-2" class="w-6 h-6 text-orange-600 dark:text-orange-400"></i>
                </div>
                <div>
                  <h3 class="font-semibold text-gray-800 dark:text-gray-200">Clear Cache</h3>
                  <p class="text-sm text-gray-500 dark:text-gray-400">Free up storage space.</p>
                </div>
              </button>
              <button onclick="refreshLibrary()" class="group flex items-center gap-4 p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all duration-200 text-left">
                <div class="flex-shrink-0 w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center">
                  <i data-feather="refresh-cw" class="w-6 h-6 text-blue-600 dark:text-blue-400"></i>
                </div>
                <div>
                  <h3 class="font-semibold text-gray-800 dark:text-gray-200">Refresh Library</h3>
                  <p class="text-sm text-gray-500 dark:text-gray-400">Rescan media files.</p>
                </div>
              </button>
            </div>
          </section>

          <!-- LLM Provider -->
          <section class="hidden bg-white dark:bg-gray-800 rounded-2xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-700">
            <header class="p-6 border-b border-gray-200 dark:border-gray-700">
              <div class="flex items-center justify-between gap-4">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
                  <i data-feather="server" class="w-6 h-6 text-blue-500"></i>
                  <span>LLM Provider</span>
                </h2>
                <span id="llm-config-state" class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200">
                  已保存
                </span>
              </div>
            </header>
            <div class="p-6 space-y-4">
              <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                <div>
                  <p class="text-sm font-semibold text-gray-900 dark:text-white">API Key 状态</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">API Key 仍通过环境变量管理，不在页面内保存。</p>
                </div>
                <span id="llm-api-key-state" class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200">检测中...</span>
              </div>
              <div>
                <label for="llm-model-name" class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">Model Name</label>
                <input id="llm-model-name" type="text" maxlength="256" placeholder="例如 gpt-4.1-mini" class="w-full rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
              </div>
              <div>
                <label for="llm-base-url" class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">Base URL</label>
                <input id="llm-base-url" type="text" maxlength="512" placeholder="例如 https://api.openai.com/v1" class="w-full rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">留空将回退到环境变量配置。</p>
              </div>
              <div class="flex flex-wrap items-center gap-3 pt-2">
                <button id="llm-save-btn" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold transition-colors">
                  <i data-feather="save" class="w-4 h-4"></i>
                  保存配置
                </button>
                <button id="llm-reset-btn" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                  <i data-feather="rotate-ccw" class="w-4 h-4"></i>
                  恢复默认
                </button>
              </div>
            </div>
          </section>

          <!-- AI Prompt -->
          <section class="hidden bg-white dark:bg-gray-800 rounded-2xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-700">
            <header class="p-6 border-b border-gray-200 dark:border-gray-700">
              <div class="flex items-center justify-between gap-4">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
                  <i data-feather="cpu" class="w-6 h-6 text-amber-500"></i>
                  <span>AI Prompt</span>
                </h2>
                <span id="ai-prompt-state" class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200">
                  已保存
                </span>
              </div>
            </header>
            <div class="p-6 space-y-4">
              <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                <div>
                  <p class="text-sm font-semibold text-gray-900 dark:text-white">启用自定义提示词</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">关闭后不会使用默认提示词。</p>
                </div>
                <input type="checkbox" id="ai-prompt-enabled" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
              </div>

              <div>
                <div class="flex items-center justify-between mb-2">
                  <label for="ai-system-prompt" class="block text-sm font-semibold text-gray-800 dark:text-gray-200">System Prompt</label>
                  <span id="ai-system-count" class="text-xs text-gray-500 dark:text-gray-400">0/4000</span>
                </div>
                <textarea id="ai-system-prompt" rows="5" maxlength="4000" class="w-full rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
              </div>

              <div>
                <div class="flex items-center justify-between mb-2">
                  <label for="ai-user-prompt" class="block text-sm font-semibold text-gray-800 dark:text-gray-200">User Prompt</label>
                  <span id="ai-user-count" class="text-xs text-gray-500 dark:text-gray-400">0/8000</span>
                </div>
                <textarea id="ai-user-prompt" rows="7" maxlength="8000" class="w-full rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">支持占位符 <code>{tags_limit}</code> 或 <code>{% raw %}{{tags_limit}}{% endraw %}</code>。</p>
              </div>

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                  <div class="flex items-center justify-between">
                    <label for="ai-temperature" class="text-sm font-semibold text-gray-800 dark:text-gray-200">temperature</label>
                    <span id="ai-temperature-value" class="text-xs text-gray-500 dark:text-gray-400">0.60</span>
                  </div>
                  <input id="ai-temperature" type="range" min="0" max="2" step="0.1" value="0.6" class="w-full mt-2">
                </div>
                <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                  <label for="ai-tags-limit" class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">tags_limit (1-20)</label>
                  <input id="ai-tags-limit" type="number" min="1" max="20" value="5" class="w-full rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
              </div>

              <div class="flex flex-wrap items-center gap-3 pt-2">
                <button id="ai-prompt-save-btn" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold transition-colors">
                  <i data-feather="save" class="w-4 h-4"></i>
                  保存配置
                </button>
                <button id="ai-prompt-reset-btn" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                  <i data-feather="rotate-ccw" class="w-4 h-4"></i>
                  清空配置
                </button>
              </div>
            </div>
          </section>
        </div>

        <!-- Right Column / Info -->
        <aside class="lg:col-span-1 space-y-8 mt-8 lg:mt-0">
          <!-- Media Stats -->
          <section class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-700">
            <header class="p-6 border-b border-gray-200 dark:border-gray-700">
              <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
                <i data-feather="bar-chart-2" class="w-6 h-6 text-purple-500"></i>
                <span>Statistics</span>
              </h2>
            </header>
            <div class="p-6 space-y-4">
              <div class="flex items-center justify-between p-4 rounded-lg">
                <div class="flex items-center gap-4">
                  <div class="flex-shrink-0 w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-full flex items-center justify-center">
                    <i data-feather="play-circle" class="w-5 h-5 text-indigo-500"></i>
                  </div>
                  <div>
                    <h3 class="font-semibold text-gray-800 dark:text-gray-200">Total Videos</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">In your library</p>
                  </div>
                </div>
                <span id="videos-count" class="text-2xl font-bold text-indigo-500">{{ videos }}</span>
              </div>
              <div class="flex items-center justify-between p-4 rounded-lg">
                <div class="flex items-center gap-4">
                  <div class="flex-shrink-0 w-10 h-10 bg-pink-100 dark:bg-pink-900/30 rounded-full flex items-center justify-center">
                    <i data-feather="image" class="w-5 h-5 text-pink-500"></i>
                  </div>
                  <div>
                    <h3 class="font-semibold text-gray-800 dark:text-gray-200">Total Images</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">In your library</p>
                  </div>
                </div>
                <span id="images-count" class="text-2xl font-bold text-pink-500">{{ images }}</span>
              </div>
              <a href="/favorite" class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                <div class="flex items-center gap-4">
                  <div class="flex-shrink-0 w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
                    <i data-feather="heart" class="w-5 h-5 text-red-500"></i>
                  </div>
                  <div>
                    <h3 class="font-semibold text-gray-800 dark:text-gray-200">My Favorites</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">View saved media</p>
                  </div>
                </div>
                <span id="favorites-count" class="text-2xl font-bold text-red-500">{{ favorites }}</span>
              </a>
              <div class="flex items-center justify-between p-4 rounded-lg">
                <div class="flex items-center gap-4">
                  <div class="flex-shrink-0 w-10 h-10 bg-teal-100 dark:bg-teal-900/30 rounded-full flex items-center justify-center">
                    <i data-feather="database" class="w-5 h-5 text-teal-500"></i>
                  </div>
                  <div>
                    <h3 class="font-semibold text-gray-800 dark:text-gray-200">Cache Size</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400"><span id="cache-count">{{ cache_count }}</span> thumbnails</p>
                  </div>
                </div>
                <span id="cache-size" class="text-2xl font-bold text-teal-500">{{ cache_size_mb }} MB</span>
              </div>
            </div>
          </section>

          <!-- About -->
          <section class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-700">
            <header class="p-6 border-b border-gray-200 dark:border-gray-700">
              <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
                <i data-feather="info" class="w-6 h-6 text-teal-500"></i>
                <span>About</span>
              </h2>
            </header>
            <div class="p-6 space-y-2">
              <a href="https://github.com/ChanMo/TikLocal" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                <div class="flex items-center gap-4">
                  <i data-feather="github" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
                  <span class="font-medium text-gray-700 dark:text-gray-300">GitHub Repository</span>
                </div>
                <i data-feather="external-link" class="w-5 h-5 text-gray-400"></i>
              </a>
              <a href="mailto:chan.mo@outlook.com" class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                <div class="flex items-center gap-4">
                  <i data-feather="mail" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
                  <span class="font-medium text-gray-700 dark:text-gray-300">Contact Email</span>
                </div>
                <i data-feather="external-link" class="w-5 h-5 text-gray-400"></i>
              </a>
              <div class="flex items-center justify-between p-4">
                <div class="flex items-center gap-4">
                  <i data-feather="tag" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
                  <span class="font-medium text-gray-700 dark:text-gray-300">App Version</span>
                </div>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300">
                  v{{version}}
                </span>
              </div>
            </div>
          </section>
        </aside>
      </div>
    </div>
  </main>
</div>
{% endblock %}

{% block extra_body %}
<script>
let promptConfigState = {
  baseline: null,
  dirty: false
};
let llmConfigState = {
  baseline: null,
  dirty: false
};

document.addEventListener('DOMContentLoaded', () => {
  // 页面加载时获取统计信息
  loadStats();
  initLLMConfig();
  initPromptConfig();
});

async function loadStats() {
  try {
    const res = await fetch('/api/library/stats');
    const data = await res.json();

    // 更新统计显示
    document.getElementById('videos-count').textContent = data.videos;
    document.getElementById('images-count').textContent = data.images;
    document.getElementById('favorites-count').textContent = data.favorites;
    document.getElementById('cache-count').textContent = data.cache_count;
    document.getElementById('cache-size').textContent = `${data.cache_mb} MB`;
  } catch (err) {
    console.error('Failed to load stats:', err);
  }
}

async function clearCache() {
  showModal('确定要清除缓存吗？', '这将删除所有缩略图文件，释放存储空间。缩略图会在访问时自动重新生成。', async () => {
    try {
      const res = await fetch('/api/cache/clear', { method: 'POST' });
      const data = await res.json();

      if (data.success) {
        showNotification(`缓存清理成功！删除了 ${data.deleted_count} 个文件，释放了 ${data.freed_mb} MB 空间。`, 'success');
        loadStats(); // 刷新统计
      } else {
        showNotification(`清理失败：${data.error}`, 'error');
      }
    } catch (err) {
      showNotification('清理失败，请重试', 'error');
    }
  });
}

async function refreshLibrary() {
  showModal('确定要刷新媒体库吗？', '这将重新扫描所有媒体文件，可能需要一些时间。', async () => {
    try {
      showNotification('正在刷新媒体库...', 'info');
      const res = await fetch('/api/library/stats');
      const data = await res.json();

      // 更新所有统计数据
      loadStats();
      showNotification('媒体库刷新成功！', 'success');
    } catch (err) {
      showNotification('刷新失败，请重试', 'error');
    }
  });
}

function initLLMConfig() {
  const modelInput = document.getElementById('llm-model-name');
  const baseUrlInput = document.getElementById('llm-base-url');
  const saveBtn = document.getElementById('llm-save-btn');
  const resetBtn = document.getElementById('llm-reset-btn');

  if (!modelInput || !baseUrlInput) return;

  const onInput = () => {
    setLLMDirty(isLLMFormChanged());
  };

  [modelInput, baseUrlInput].forEach((el) => {
    el.addEventListener('input', onInput);
    el.addEventListener('change', onInput);
  });

  saveBtn?.addEventListener('click', saveLLMConfig);
  resetBtn?.addEventListener('click', resetLLMConfig);
  loadLLMConfig();
}

function currentLLMFormValue() {
  const modelInput = document.getElementById('llm-model-name');
  const baseUrlInput = document.getElementById('llm-base-url');
  return {
    model_name: (modelInput?.value || '').trim(),
    base_url: (baseUrlInput?.value || '').trim()
  };
}

function setLLMDirty(dirty) {
  llmConfigState.dirty = !!dirty;
  const state = document.getElementById('llm-config-state');
  if (!state) return;
  if (llmConfigState.dirty) {
    state.textContent = '未保存';
    state.className = 'inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300';
  } else {
    state.textContent = '已保存';
    state.className = 'inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200';
  }
}

function isLLMFormChanged() {
  if (!llmConfigState.baseline) return false;
  return JSON.stringify(currentLLMFormValue()) !== JSON.stringify(llmConfigState.baseline);
}

function applyLLMConfig(data) {
  const modelInput = document.getElementById('llm-model-name');
  const baseUrlInput = document.getElementById('llm-base-url');
  const apiKeyState = document.getElementById('llm-api-key-state');
  const sourceConfig = data.custom || data.default || {};

  if (!modelInput || !baseUrlInput) return;

  modelInput.value = sourceConfig.model_name || '';
  baseUrlInput.value = sourceConfig.base_url || '';
  if (apiKeyState) {
    apiKeyState.textContent = data.has_api_key ? '已配置（环境变量）' : '未配置';
    apiKeyState.className = data.has_api_key
      ? 'text-xs px-2 py-1 rounded bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300'
      : 'text-xs px-2 py-1 rounded bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300';
  }

  llmConfigState.baseline = currentLLMFormValue();
  setLLMDirty(false);
}

async function loadLLMConfig() {
  try {
    const res = await fetch('/api/ai/llm-config');
    const data = await res.json();
    if (!data.success) {
      showNotification(data.error || '读取 LLM 配置失败', 'error');
      return;
    }
    applyLLMConfig(data.data);
  } catch (err) {
    showNotification('读取 LLM 配置失败', 'error');
  }
}

async function saveLLMConfig() {
  const payload = currentLLMFormValue();
  if (payload.base_url && !/^https?:\/\//i.test(payload.base_url)) {
    showNotification('base_url 必须以 http:// 或 https:// 开头', 'error');
    return;
  }

  const saveBtn = document.getElementById('llm-save-btn');
  if (saveBtn) saveBtn.disabled = true;
  try {
    const res = await fetch('/api/ai/llm-config', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    const data = await res.json();
    if (!data.success) {
      showNotification(data.error || '保存 LLM 配置失败', 'error');
      return;
    }
    applyLLMConfig(data.data);
    showNotification('LLM 配置已保存', 'success');
  } catch (err) {
    showNotification('保存 LLM 配置失败', 'error');
  } finally {
    if (saveBtn) saveBtn.disabled = false;
  }
}

async function resetLLMConfig() {
  showModal('恢复默认 LLM 配置？', '这会清空你保存的 model_name/base_url，回退到环境变量。', async () => {
    try {
      const res = await fetch('/api/ai/llm-config/reset', { method: 'POST' });
      const data = await res.json();
      if (!data.success) {
        showNotification(data.error || '恢复失败', 'error');
        return;
      }
      applyLLMConfig(data.data);
      showNotification('已恢复默认 LLM 配置', 'success');
    } catch (err) {
      showNotification('恢复失败，请重试', 'error');
    }
  });
}

function initPromptConfig() {
  const enabledInput = document.getElementById('ai-prompt-enabled');
  const systemInput = document.getElementById('ai-system-prompt');
  const userInput = document.getElementById('ai-user-prompt');
  const temperatureInput = document.getElementById('ai-temperature');
  const tagsLimitInput = document.getElementById('ai-tags-limit');
  const saveBtn = document.getElementById('ai-prompt-save-btn');
  const resetBtn = document.getElementById('ai-prompt-reset-btn');

  if (!enabledInput || !systemInput || !userInput || !temperatureInput || !tagsLimitInput) {
    return;
  }

  const onInput = () => {
    updatePromptCounters();
    setPromptDirty(isPromptFormChanged());
  };

  [enabledInput, systemInput, userInput, temperatureInput, tagsLimitInput].forEach((el) => {
    el.addEventListener('input', onInput);
    el.addEventListener('change', onInput);
  });

  saveBtn?.addEventListener('click', savePromptConfig);
  resetBtn?.addEventListener('click', resetPromptConfig);

  window.addEventListener('beforeunload', (event) => {
    if (!promptConfigState.dirty && !llmConfigState.dirty) return;
    event.preventDefault();
    event.returnValue = '';
  });

  loadPromptConfig();
}

function updatePromptCounters() {
  const systemInput = document.getElementById('ai-system-prompt');
  const userInput = document.getElementById('ai-user-prompt');
  const systemCount = document.getElementById('ai-system-count');
  const userCount = document.getElementById('ai-user-count');
  const temperatureInput = document.getElementById('ai-temperature');
  const temperatureValue = document.getElementById('ai-temperature-value');

  if (systemInput && systemCount) {
    systemCount.textContent = `${systemInput.value.length}/4000`;
  }
  if (userInput && userCount) {
    userCount.textContent = `${userInput.value.length}/8000`;
  }
  if (temperatureInput && temperatureValue) {
    temperatureValue.textContent = Number(temperatureInput.value || 0).toFixed(2);
  }
}

function currentPromptFormValue() {
  const enabledInput = document.getElementById('ai-prompt-enabled');
  const systemInput = document.getElementById('ai-system-prompt');
  const userInput = document.getElementById('ai-user-prompt');
  const temperatureInput = document.getElementById('ai-temperature');
  const tagsLimitInput = document.getElementById('ai-tags-limit');
  return {
    enabled: !!enabledInput?.checked,
    system_prompt: (systemInput?.value || '').trim(),
    user_prompt: (userInput?.value || '').trim(),
    temperature: Number(temperatureInput?.value || 0.6),
    tags_limit: Number(tagsLimitInput?.value || 5)
  };
}

function setPromptDirty(dirty) {
  promptConfigState.dirty = !!dirty;
  const state = document.getElementById('ai-prompt-state');
  if (!state) return;
  if (promptConfigState.dirty) {
    state.textContent = '未保存';
    state.className = 'inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300';
  } else {
    state.textContent = '已保存';
    state.className = 'inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200';
  }
}

function isPromptFormChanged() {
  if (!promptConfigState.baseline) return false;
  return JSON.stringify(currentPromptFormValue()) !== JSON.stringify(promptConfigState.baseline);
}

function applyPromptConfig(data) {
  const enabledInput = document.getElementById('ai-prompt-enabled');
  const systemInput = document.getElementById('ai-system-prompt');
  const userInput = document.getElementById('ai-user-prompt');
  const temperatureInput = document.getElementById('ai-temperature');
  const tagsLimitInput = document.getElementById('ai-tags-limit');
  const sourceConfig = data.custom || data.default;

  if (!sourceConfig || !enabledInput || !systemInput || !userInput || !temperatureInput || !tagsLimitInput) {
    return;
  }

  enabledInput.checked = Boolean(data.custom?.enabled);
  systemInput.value = sourceConfig.system_prompt || '';
  userInput.value = sourceConfig.user_prompt || '';
  temperatureInput.value = Number(sourceConfig.temperature ?? 0.6).toFixed(1);
  tagsLimitInput.value = Number(sourceConfig.tags_limit ?? 5);

  promptConfigState.baseline = currentPromptFormValue();
  setPromptDirty(false);
  updatePromptCounters();
}

async function loadPromptConfig() {
  try {
    const res = await fetch('/api/ai/prompt-config');
    const data = await res.json();
    if (!data.success) {
      showNotification(data.error || '读取提示词配置失败', 'error');
      return;
    }
    applyPromptConfig(data.data);
  } catch (err) {
    showNotification('读取提示词配置失败', 'error');
  }
}

async function savePromptConfig() {
  const payload = currentPromptFormValue();
  if (!payload.system_prompt || !payload.user_prompt) {
    showNotification('System Prompt 和 User Prompt 不能为空', 'error');
    return;
  }
  if (payload.temperature < 0 || payload.temperature > 2) {
    showNotification('temperature 必须在 0 到 2 之间', 'error');
    return;
  }
  if (!Number.isInteger(payload.tags_limit) || payload.tags_limit < 1 || payload.tags_limit > 20) {
    showNotification('tags_limit 必须在 1 到 20 之间', 'error');
    return;
  }

  const saveBtn = document.getElementById('ai-prompt-save-btn');
  if (saveBtn) saveBtn.disabled = true;
  try {
    const res = await fetch('/api/ai/prompt-config', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    const data = await res.json();
    if (!data.success) {
      showNotification(data.error || '保存失败', 'error');
      return;
    }
    applyPromptConfig(data.data);
    showNotification('AI 提示词已保存', 'success');
  } catch (err) {
    showNotification('保存失败，请重试', 'error');
  } finally {
    if (saveBtn) saveBtn.disabled = false;
  }
}

async function resetPromptConfig() {
  showModal('清空提示词配置？', '这会清空当前自定义提示词，之后生成图片标题前需要重新填写提示词。', async () => {
    try {
      const res = await fetch('/api/ai/prompt-config/reset', { method: 'POST' });
      const data = await res.json();
      if (!data.success) {
        showNotification(data.error || '清空失败', 'error');
        return;
      }
      applyPromptConfig(data.data);
      showNotification('已清空提示词配置', 'success');
    } catch (err) {
      showNotification('清空失败，请重试', 'error');
    }
  });
}

// 可复用的模态框
function showModal(title, text, onConfirm) {
  // 先移除已存在的模态框
  const existingModal = document.getElementById('confirmation-modal');
  if (existingModal) existingModal.remove();

  const modalHTML = `
    <div id="confirmation-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm" aria-labelledby="modal-title" role="dialog" aria-modal="true">
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md m-4 transform transition-all" role="document">
        <div class="p-6">
          <div class="flex items-start gap-4">
            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900/30 sm:mx-0 sm:h-10 sm:w-10">
              <i data-feather="alert-triangle" class="h-6 w-6 text-blue-600 dark:text-blue-400"></i>
            </div>
            <div class="mt-0 text-center sm:text-left">
              <h3 class="text-lg leading-6 font-bold text-gray-900 dark:text-white" id="modal-title">${title}</h3>
              <div class="mt-2">
                <p class="text-sm text-gray-500 dark:text-gray-400">${text}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-800/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-2xl">
          <button type="button" id="confirm-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
            确认
          </button>
          <button type="button" id="cancel-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:w-auto sm:text-sm">
            取消
          </button>
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', modalHTML);
  feather.replace();

  const modal = document.getElementById('confirmation-modal');
  const confirmBtn = document.getElementById('confirm-btn');
  const cancelBtn = document.getElementById('cancel-btn');

  function closeModal() {
    modal.remove();
  }

  confirmBtn.onclick = () => {
    onConfirm();
    closeModal();
  };
  cancelBtn.onclick = closeModal;
  modal.onclick = (e) => {
    if (e.target === modal) {
      closeModal();
    }
  }
}

// 可复用的通知
function showNotification(message, type = 'info') {
  const iconMap = {
    success: 'check-circle',
    info: 'info',
    error: 'alert-circle'
  };
  const colorMap = {
    success: 'bg-green-500',
    info: 'bg-blue-500',
    error: 'bg-red-500'
  };

  const notification = document.createElement('div');
  notification.className = `fixed bottom-20 right-5 flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg text-white ${colorMap[type]} transform translate-y-20 opacity-0 transition-all duration-300 ease-out z-50`;
  notification.innerHTML = `
    <i data-feather="${iconMap[type]}" class="w-6 h-6"></i>
    <span class="font-medium">${message}</span>
  `;
  
  document.body.appendChild(notification);
  feather.replace();
  
  // 动画入场
  setTimeout(() => {
    notification.classList.remove('translate-y-20', 'opacity-0');
  }, 10);

  // 动画离场
  setTimeout(() => {
    notification.classList.add('opacity-0');
    setTimeout(() => {
      notification.remove();
    }, 300);
  }, 3000);
}
</script>
{% endblock %}