{% extends "base.html" %}
{% block title %}账号配置 · 西湖生存手册{% endblock %}

{% block content %}
<h1 class="page">账号配置</h1>

{% if needs_setup %}
<div class="callout" id="firstRun">
  <span><strong>第 1 步：填一次你自己的账号。</strong>每台电脑各存各的，密码只留在本机、不跨设备同步。
    填完点「保存并检测」，课表 / 成绩 / 作业 / 图书馆这些需要登录的功能就通了。</span>
  <p style="margin:.6rem 0 0"><a class="btn ghost" href="/?skip=1">先看看公开功能（校历 / 班车 / 新闻 / 地图）→</a></p>
</div>
{% else %}
<div class="callout"><span>账号已配置。下面可以改密码、换 Canvas 令牌，或清除令牌。
  公开功能（校历 / 班车 / 新闻 / 培养方案 / 通识课程 / 地图图片）始终不需要账号。</span></div>
{% endif %}

<div id="status" style="margin-bottom:1.2rem">
  <table class="data">
    <thead><tr><th>服务</th><th>状态</th></tr></thead>
    <tbody>
      <tr><td>校园账号（统一密码 → 教务 + Canvas）</td>
          <td id="sisState" style="display:flex;gap:.6rem;align-items:center">
            <span class="chip {{ 'ok' if creds.sis else 'warn' }}" id="sisChip">{{ '已配置' if creds.sis else '未配置' }}</span>
            <button type="button" id="revealBtn"{% if not creds.sis %} style="display:none"{% endif %}>查看密码</button>
            <span id="revealed" style="display:none"></span>
          </td></tr>
      <tr><td>Canvas 访问令牌（选填，优先于统一密码）</td>
          <td id="canvasState" style="display:flex;gap:.6rem;align-items:center">
            <span class="chip {{ 'ok' if canvas.configured else 'plain' }}" id="canvasChip">{{ ('已配置 · ' ~ canvas.source) if canvas.configured else '未配置（走统一密码）' }}</span>
            <button type="button" id="clearCanvasBtn"{% if not canvas.configured %} style="display:none"{% endif %}>清除令牌</button>
            <span id="clearedNote" class="muted"></span>
          </td></tr>
    </tbody>
  </table>
</div>

<form id="setupForm" class="filter" style="flex-direction:column;align-items:stretch">
  <label>学号
    <input name="sid" autocomplete="username" placeholder="学号">
  </label>
  <label>统一身份认证密码（校园门户密码；旧的 SIS 密码也兼容；不会回显）
    <input name="password" type="password" autocomplete="current-password">
  </label>
  <label>Canvas 访问令牌（选填；留空不改动。存了会先试令牌，不行再回退统一密码）
    <input name="canvas_token" autocomplete="off" placeholder="粘贴令牌，或留空">
  </label>
  <label style="display:flex;flex-direction:row;align-items:center;gap:.45rem">
    <input type="checkbox" name="verify" checked style="min-width:auto">
    现在就登录验证（校内网络；校外请先连 VPN。验证没通过也会先保存，并在结果里标明「未验证」）
  </label>
  <div>
    <button type="submit" id="submitBtn">保存并检测</button>
  </div>
</form>

<div id="result" style="display:none;margin-top:1.4rem"></div>

<section class="card" style="margin-top:1.8rem">
  <div class="card-head"><h2 class="section">导航模块显隐</h2></div>
  <div class="callout"><span>只控制导航栏显示哪些模块（本浏览器记忆）。后端数据与各页面 URL 始终全量可用——关掉只是不占导航位，直接访问地址照常打开。</span></div>
  <div id="navToggles" class="chip-cloud" style="margin-top:.9rem;flex-wrap:wrap;gap:.45rem"></div>
  <p class="muted" style="font-size:.82rem;margin-top:.6rem">勾选=显示在导航。改动即时生效。</p>
</section>

<script>
(function () {
  // 导航开关：渲染所有模块 chip，点选切换，写 localStorage wl-nav-hidden
  var MODULES = [
    ['home', '仪表盘'], ['sis', '学业'], ['ams', '教学'], ['canvas', 'Canvas'], ['calendar', '校历'],
    ['shuttle', '班车'], ['events', '讲座活动'], ['careers', '招聘'], ['news', '新闻'],
    ['faculty', '教师'], ['program', '培养方案'], ['courses', '通识课程'],
    ['schools', '学院'], ['sites', '全站'], ['affairs', '办事'], ['map', '地图'],
    ['dining', '餐饮'], ['scholar', '学术'], ['hpc', '集群'], ['vpn', 'VPN'],
    ['finance', '财务'], ['mirrors', '镜像'], ['search', '搜索'],
    ['capabilities', '能力'], ['services', '服务'], ['setup', '设置'],
  ];
  var box = document.getElementById('navToggles');
  if (!box) return;
  function load() {
    try { return JSON.parse(localStorage.getItem('wl-nav-hidden') || '[]'); } catch (e) { return []; }
  }
  function render() {
    var hidden = load();
    box.innerHTML = '';
    MODULES.forEach(function (m) {
      var on = hidden.indexOf(m[0]) === -1;
      var a = document.createElement('button');
      a.type = 'button';
      a.className = 'chip' + (on ? ' ok' : ' plain');
      a.textContent = (on ? '✓ ' : '✕ ') + m[1];
      a.addEventListener('click', function () {
        var cur = load();
        var i = cur.indexOf(m[0]);
        if (i === -1) cur.push(m[0]); else cur.splice(i, 1);
        try { localStorage.setItem('wl-nav-hidden', JSON.stringify(cur)); } catch (e) {}
        render();
        applyNav();
      });
      box.appendChild(a);
    });
  }
  function applyNav() {
    var hidden = load();
    var keep = {};
    hidden.forEach(function (k) { keep[k] = 1; });
    document.querySelectorAll('nav.main a[data-nav]').forEach(function (a) {
      a.style.display = keep[a.getAttribute('data-nav')] ? 'none' : '';
    });
  }
  render();
})();
</script>

<script>
(function () {
  function setChip(id, text, cls) {
    var chip = document.getElementById(id);
    if (chip) { chip.textContent = text; chip.className = 'chip ' + cls; }
  }
  function refreshStatus() {
    return fetch('/setup/api/stored').then(function (res) { return res.json(); }).then(function (data) {
      setChip('sisChip', data.configured ? '已配置' : '未配置', data.configured ? 'ok' : 'warn');
      var revealBtn = document.getElementById('revealBtn');
      if (revealBtn) revealBtn.style.display = data.configured ? '' : 'none';
      var cv = data.canvas || {};
      setChip('canvasChip', cv.configured ? '已配置 · ' + cv.source : '未配置（走统一密码）', cv.configured ? 'ok' : 'plain');
      var clearBtn = document.getElementById('clearCanvasBtn');
      if (clearBtn) clearBtn.style.display = cv.configured ? '' : 'none';
      return data;
    });
  }

  var revealBtn = document.getElementById('revealBtn');
  if (revealBtn) {
    revealBtn.addEventListener('click', async function () {
      var box = document.getElementById('revealed');
      if (box.style.display !== 'none') { box.style.display = 'none'; return; }
      try {
        var res = await fetch('/setup/api/stored');
        var data = await res.json();
        if (!data.configured) { box.textContent = '（未保存）'; }
        else { box.textContent = data.sid + ' · ' + data.password; }
        box.style.display = 'inline';
      } catch (e) { box.textContent = '读取失败：' + e; box.style.display = 'inline'; }
    });
  }

  var clearBtn = document.getElementById('clearCanvasBtn');
  if (clearBtn) {
    clearBtn.addEventListener('click', async function () {
      if (!confirm('删除本地 Canvas 令牌？之后 Canvas 改用统一密码（IAM 会话）。')) return;
      var noteBox = document.getElementById('clearedNote');
      try {
        var res = await fetch('/setup/api/canvas/clear', { method: 'POST' });
        var data = await res.json();
        if (noteBox) noteBox.textContent = data.note || '';
        await refreshStatus();
      } catch (e) {
        if (noteBox) noteBox.textContent = '清除失败：' + e;
      }
    });
  }

  window.wlRefreshStatus = refreshStatus;
})();
(function () {
  var form = document.getElementById('setupForm');
  var box = document.getElementById('result');
  var btn = document.getElementById('submitBtn');
  if (!form) return;
  var refreshStatus = window.wlRefreshStatus || function () { return Promise.resolve(); };

  form.addEventListener('submit', async function (event) {
    event.preventDefault();
    btn.disabled = true;
    btn.textContent = '正在检测…';
    box.style.display = 'block';
    box.innerHTML = '<p class="muted">正在验证并保存…（验证要连学校网络，可能需要几秒）</p>';
    var data = {
      sid: form.sid.value.trim(),
      password: form.password.value,
      'canvas_token': form.canvas_token.value.trim(),
      verify: form.verify.checked,
    };
    try {
      var res = await fetch('/setup/api/save', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      var payload = await res.json();
      if (!res.ok) {
        box.innerHTML = '<div class="note">保存失败：' + (payload.error || res.status) + '</div>';
      } else {
        var rows = '';
        if (payload.sis) {
          var sis = payload.sis;
          var state = sis.verified ? '已验证并保存' : '未验证已保存';
          rows += '<tr><td>校园账号（统一密码）</td><td>' + (sis.ok ? '✓ ' : '✗ ') +
            (sis.note || '') + ' · ' + state +
            (sis.stored_in ? '（' + sis.stored_in + '）' : '') + '</td></tr>';
        }
        if (payload.canvas) {
          var cv = payload.canvas;
          var rest = cv.state ? '；当前' + (cv.state.configured ? '已配置（' + cv.state.source + '）' : '无令牌') : '';
          rows += '<tr><td>Canvas 令牌</td><td>' + (cv.note || '') + rest + '</td></tr>';
        }
        var done = !!(payload.sis && payload.sis.verified);
        box.innerHTML =
          '<table class="data"><thead><tr><th>服务</th><th>结果</th></tr></thead><tbody>' + rows + '</tbody></table>' +
          '<p class="muted" style="font-size:.84rem">验证没通过也保住了输入，之后再查会重新验证；打印系统（pms）是另一套密码，需要时再单独配置。</p>' +
          '<p>' + (done ? '配置完成，可以去用需要登录的功能了。' : '已保存，联网后可再点一次「保存并检测」确认。') +
          ' <a class="btn" href="/">进首页 →</a>' +
          (done ? ' <span class="muted">（<span id="jumpSec">3</span> 秒后自动进入）</span>' : '') + '</p>';
        await refreshStatus();
        if (done) {
          // 配置好即见前端（2026-10-29 用户裁定）：验证通过 3 秒自动进仪表盘；
          // 未验证已保存则留在本页，方便看到原因或联网后重试。
          var left = 3;
          var secEl = document.getElementById('jumpSec');
          var timer = setInterval(function () {
            left -= 1;
            if (secEl) secEl.textContent = String(left);
            if (left <= 0) { clearInterval(timer); window.location.assign('/'); }
          }, 1000);
        }
      }
    } catch (err) {
      box.innerHTML = '<div class="note">请求失败：' + err + '</div>';
    }
    btn.disabled = false;
    btn.textContent = '保存并检测';
  });
})();
</script>
{% endblock %}