{% extends "base.html" %}
{% block title %}外观定制{% endblock %}
{% block page_title %}外观定制{% endblock %}
{% block page_desc %}背景图 / 自定义 CSS / favicon / 模块 / PWA{% endblock %}
{% block content %}
<div class="card" style="margin-bottom:16px">
  <div class="card-h"><h3>🖼️ 全局背景图</h3></div>
  <div class="card-b">
    <div class="field"><label>背景图 URL（留空则不显示）</label><input class="input" id="bgImage" placeholder="https://example.com/bg.jpg" value="{{ appearance.background_image }}"></div>
    <div class="field"><label>背景蒙层透明度（0~1，0=无蒙层，建议 0.6）</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)">提示：蒙层用于让背景图不影响内容可读性。0=完全显示背景图，1=完全遮盖。</div>
  </div>
</div>

<div class="card" style="margin-bottom:16px">
  <div class="card-h"><h3>🎨 主题强调色</h3></div>
  <div class="card-b">
    <div class="field"><label>强调色（CSS 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>✏️ 自定义 CSS</h3></div>
  <div class="card-b">
    <div class="field"><label>注入全局 CSS（会影响所有页面）</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>🔑 自定义 Favicon</h3></div>
  <div class="card-b">
    <div class="field"><label>Favicon URL 或 data URI（留空用默认）</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>🧩 自定义模块</h3><button class="btn sm primary" onclick="addModule()">+ 添加模块</button></div>
  <div class="card-b" id="modulesArea">
    <div id="moduleList"></div>
    <div style="font-size:11px;color:var(--muted)">自定义模块会显示在每个页面顶部（仪表盘、子域名等），可用于放置公告、说明等。</div>
  </div>
</div>

<div class="card" style="margin-bottom:16px">
  <div class="card-h"><h3>📱 PWA 支持</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">启用 PWA（可安装到桌面/主屏幕，离线缓存）</label>
    </div>
  </div>
</div>

<div class="toolbar" style="position:sticky;bottom:0;background:var(--bg);padding:12px 0">
  <span></span>
  <div>
    <button class="btn danger" onclick="resetAll()">↺ 恢复默认</button>
    <button class="btn primary" onclick="saveAll()">💾 保存全部设置</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
  };
  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 %}