{% extends "base.html" %}
{% block title %}{{ t.customize_title }}{% endblock %}
{% block page_title %}{{ t.customize_title }}{% endblock %}
{% block page_desc %}{{ t.customize_desc }}{% endblock %}
{% block content %}
<div class="card" style="margin-bottom:16px;border-left:4px solid var(--primary)">
  <div class="card-b" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
    <span style="font-size:20px">🌐</span>
    <div style="flex:1;min-width:200px">
      <strong>{{ t.language_section }}</strong>
      <div style="font-size:11px;color:var(--muted)">{{ t.language_label }} — {{ t.lang_neko }}</div>
    </div>
    <select class="input" id="languageTop" style="max-width:280px" onchange="document.getElementById('language').value=this.value">
      <option value="zh" {% if appearance.language=='zh' %}selected{% endif %}>{{ t.lang_zh }}</option>
      <option value="neko" {% if appearance.language=='neko' %}selected{% endif %}>{{ t.lang_neko }}</option>
    </select>
  </div>
</div>
<div class="card" style="margin-bottom:16px">
  <div class="card-h"><h3>{{ t.bg_image_section }}</h3></div>
  <div class="card-b">
    <div class="field"><label>{{ t.bg_image_url }}</label><input class="input" id="bgImage" placeholder="https://example.com/bg.jpg" value="{{ appearance.background_image }}"></div>
    <div class="field"><label>{{ t.bg_opacity }}</label><input class="input" id="bgOpacity" type="number" step="0.1" min="0" max="1" value="{{ appearance.background_opacity }}"></div>
    <div style="font-size:11px;color:var(--muted)">{{ t.bg_opacity_hint }}</div>
  </div>
</div>

<div class="card" style="margin-bottom:16px">
  <div class="card-h"><h3>{{ t.accent_section }}</h3></div>
  <div class="card-b">
    <div class="field"><label>{{ t.accent_color }}</label><input class="input" id="accentColor" placeholder="#10b981" value="{{ appearance.accent_color }}"></div>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      <button class="btn sm" onclick="document.getElementById('accentColor').value='#10b981'">绿</button>
      <button class="btn sm" onclick="document.getElementById('accentColor').value='#0ea5e9'">蓝</button>
      <button class="btn sm" onclick="document.getElementById('accentColor').value='#8b5cf6'">紫</button>
      <button class="btn sm" onclick="document.getElementById('accentColor').value='#ef4444'">红</button>
      <button class="btn sm" onclick="document.getElementById('accentColor').value='#f59e0b'">橙</button>
      <button class="btn sm" onclick="document.getElementById('accentColor').value='#ec4899'">粉</button>
      <button class="btn sm" onclick="document.getElementById('accentColor').value=''">清空</button>
    </div>
  </div>
</div>

<div class="card" style="margin-bottom:16px">
  <div class="card-h"><h3>{{ t.css_section }}</h3></div>
  <div class="card-b">
    <div class="field"><label>{{ t.css_label }}</label><textarea class="input" id="customCss" rows="8" style="font-family:monospace;font-size:12px" placeholder="/* 例如：让卡片有圆角和阴影 */
.card{border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.1)}">{{ appearance.custom_css }}</textarea></div>
  </div>
</div>

<div class="card" style="margin-bottom:16px">
  <div class="card-h"><h3>{{ t.favicon_section }}</h3></div>
  <div class="card-b">
    <div class="field"><label>{{ t.favicon_label }}</label><input class="input" id="favicon" placeholder="https://example.com/icon.png 或 data:image/svg+xml,..." value="{{ appearance.favicon }}"></div>
  </div>
</div>

<div class="card" style="margin-bottom:16px">
  <div class="card-h"><h3>{{ t.modules_section }}</h3><button class="btn sm primary" onclick="addModule()">+ {{ t.add }}</button></div>
  <div class="card-b" id="modulesArea">
    <div id="moduleList"></div>
    <div style="font-size:11px;color:var(--muted)">{{ t.modules_hint }}</div>
  </div>
</div>

<div class="card" style="margin-bottom:16px">
  <div class="card-h"><h3>{{ t.pwa_section }}</h3></div>
  <div class="card-b">
    <div class="field" style="display:flex;align-items:center;gap:8px">
      <input type="checkbox" id="pwaEnabled" {% if appearance.pwa_enabled %}checked{% endif %}>
      <label for="pwaEnabled" style="margin:0">{{ t.pwa_label }}</label>
    </div>
  </div>
</div>

<div class="card" style="margin-bottom:16px">
  <div class="card-h"><h3>{{ t.language_section }}</h3></div>
  <div class="card-b">
    <div class="field">
      <label>{{ t.language_label }}</label>
      <select class="input" id="language">
        <option value="zh" {% if appearance.language=='zh' %}selected{% endif %}>{{ t.lang_zh }}</option>
        <option value="neko" {% if appearance.language=='neko' %}selected{% endif %}>{{ t.lang_neko }}</option>
      </select>
    </div>
    <div style="font-size:11px;color:var(--muted)">切换后保存，界面文案将变成对应语言风格。</div>
  </div>
</div>

<div class="toolbar" style="position:sticky;bottom:0;background:var(--bg);padding:12px 0">
  <span></span>
  <div>
    <div class="btn danger" onclick="resetAll()">{{ t.reset_default }}</div>
    <button class="btn primary" onclick="saveAll()">{{ t.save_all }}</button>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
var modules = {{ appearance.modules|tojson }};
function renderModules(){
  var area=document.getElementById('moduleList');
  if(!modules.length){area.innerHTML='<div class="empty">暂无自定义模块，点击右上角添加</div>';return;}
  area.innerHTML=modules.map(function(m,i){
    return '<div class="card" style="margin-bottom:8px"><div class="card-b" style="padding:10px">'
      +'<div class="field"><label>标题</label><input class="input" id="mTitle'+i+'" value="'+esc(m.title||'')+'" oninput="modules['+i+'].title=this.value"></div>'
      +'<div class="field"><label>内容（HTML）</label><textarea class="input" id="mContent'+i+'" rows="3" style="font-family:monospace;font-size:12px" oninput="modules['+i+'].content=this.value">'+esc(m.content||'')+'</textarea></div>'
      +'<button class="btn sm danger" onclick="modules.splice('+i+',1);renderModules()">删除</button>'
      +'</div></div>';
  }).join('');
}
function addModule(){modules.push({title:'新模块',content:'<p>在这里写内容</p>'});renderModules();}
function saveAll(){
  var data={
    background_image:document.getElementById('bgImage').value.trim(),
    background_opacity:parseFloat(document.getElementById('bgOpacity').value)||0,
    accent_color:document.getElementById('accentColor').value.trim(),
    custom_css:document.getElementById('customCss').value,
    favicon:document.getElementById('favicon').value.trim(),
    modules:modules,
    pwa_enabled:document.getElementById('pwaEnabled').checked,
    language:document.getElementById('language').value
  };
  fetch('/api/appearance',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)}).then(function(r){return r.json()}).then(function(r){
    if(r.background_image!==undefined){toast('已保存，刷新生效','ok');setTimeout(function(){location.reload()},800);}
    else toast('保存失败','err');
  });
}
function resetAll(){
  if(!confirm('确认恢复默认外观？所有自定义设置将被清除。'))return;
  fetch('/api/appearance/reset',{method:'POST'}).then(function(r){return r.json()}).then(function(){toast('已恢复默认','ok');setTimeout(function(){location.reload()},600);});
}
renderModules();
</script>
{% endblock %}