{% extends "base.html" %}
{% block title %}资源安装助手 · {{ brand.home_title }}{% endblock %}
{% block topbar %}{% endblock %}

{% block content %}
<main class="home-shell">
  <style>
    .res-card{background:#fff;border:1px solid #e6ebf3;border-radius:14px;padding:18px 20px;margin-bottom:14px}
    .res-card h2{margin:0 0 6px;font-size:17px}
    .res-sub{color:#66748c;font-size:13px;margin:0 0 12px}
    .res-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
    .res-tbl th,.res-tbl td{padding:10px 10px;border-bottom:1px solid #f0f3f9;text-align:left;vertical-align:middle}
    .res-tbl th{background:#f7f9fd;color:#5b6982;font-size:12.5px}
    .res-ok{color:#0f7b3d;font-weight:700}
    .res-bad{color:#b45309;font-weight:700}
    .res-bar{height:10px;border-radius:999px;background:#eaeff8;overflow:hidden;margin-top:8px}
    .res-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4f8cff,#6d5dfc)}
    .res-note{background:#f7f9fd;border-radius:10px;padding:10px 12px;color:#41506b;font-size:13px;margin-top:10px}
  </style>

  <div class="res-card">
    <h2>运行资源状态</h2>
    <p class="res-sub">程序运行需要的公开资源（运行环境 / ComfyUI / 模型）。缺哪一项就补哪一项，不必重复下载。</p>
    <table class="res-tbl">
      <tr><th>目录</th><th>状态</th><th>文件数</th></tr>
      {% for key, st in resource_local.items() %}
      <tr>
        <td><b>{{ key }}</b></td>
        <td>{% if st.exists %}<span class="res-ok">已就位</span>{% else %}<span class="res-bad">缺失</span>{% endif %}</td>
        <td>{{ st.files }}</td>
      </tr>
      {% endfor %}
    </table>
  </div>

  <div class="res-card">
    <h2>资源清单</h2>
    <p class="res-sub">清单由云端下发（管理员在下载页维护）。<b>网盘链接</b>点「打开网盘」手动下载；<b>http(s) 直链</b>可点「下载到本机」由软件断点续传下载（中断后可继续）。</p>
    {% if not resource_specs %}
      <div class="note" style="color:#66748c">云端未配置资源清单：请到 <a href="https://ai.pddty.cn/download.php" target="_blank" rel="noopener">下载页</a> 查看，或联系管理员。</div>
    {% else %}
    <table class="res-tbl">
      <tr><th>资源</th><th>说明</th><th>大小</th><th>目标目录</th><th>操作</th></tr>
      {% for it in resource_specs %}
      <tr>
        <td><b>{{ it.name }}</b></td>
        <td>{{ it.desc }}{% if it.code %}（提取码 {{ it.code }}）{% endif %}</td>
        <td>{{ it.size or '—' }}</td>
        <td>{{ it.target or '—' }}</td>
        <td>
          {% if it.url %}
            <a class="btn secondary" href="{{ it.url }}" target="_blank" rel="noopener nofollow" style="padding:5px 12px">打开网盘</a>
            {% if it.url.startswith('http') and ('.zip' in it.url or '.7z' in it.url or '.tar' in it.url or it.target) %}
            <button type="button" class="btn primary" style="padding:5px 12px"
                    data-res-download="{{ it.url }}" data-res-name="{{ it.name }}" data-res-target="{{ it.target or '' }}">下载到本机</button>
            {% endif %}
          {% else %}
            <span style="color:#98a2b8;font-size:12.5px">待管理员填写</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </table>
    {% endif %}
    <div id="resProgress" style="display:none">
      <div class="res-bar"><i id="resBar"></i></div>
      <div class="res-note" id="resMsg">准备中…</div>
    </div>
  </div>

  <div class="res-card">
    <h2>环境自检</h2>
    <p class="res-sub">显卡 / 显存 / 驱动 / 磁盘 / ComfyUI 一屏结论，装完资源后点一次确认环境可用。</p>
    <button type="button" class="btn primary" id="envBtn">运行环境自检</button>
    <div id="envResult" style="margin-top:12px"></div>
  </div>
</main>

<script>
(function () {
  var btn = document.getElementById("envBtn");
  btn.addEventListener("click", function () {
    btn.disabled = true; btn.textContent = "检测中…";
    fetch("/api/env-check", { cache: "no-store" }).then(function (r) { return r.json(); }).then(function (d) {
      var html = "<div class='res-note' style='font-weight:" + (d.all_ok ? 700 : 400) + "'>" + (d.summary || "") + "</div>";
      html += "<table class='res-tbl' style='margin-top:10px'><tr><th>项</th><th>结果</th><th>状态</th><th>建议</th></tr>";
      (d.items || []).forEach(function (i) {
        html += "<tr><td>" + i.name + "</td><td>" + i.value + "</td><td>" + (i.ok ? "<span class='res-ok'>正常</span>" : "<span class='res-bad'>需处理</span>") + "</td><td style='color:#66748c'>" + (i.ok ? "" : i.advice) + "</td></tr>";
      });
      html += "</table>";
      document.getElementById("envResult").innerHTML = html;
    }).catch(function (e) {
      document.getElementById("envResult").innerHTML = "<div class='res-note res-bad'>检测失败：" + e.message + "</div>";
    }).finally(function () { btn.disabled = false; btn.textContent = "运行环境自检"; });
  });

  var btns = document.querySelectorAll("[data-res-download]");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {
      var b = this;
      var url = b.getAttribute("data-res-download");
      var name = b.getAttribute("data-res-name");
      var target = b.getAttribute("data-res-target");
      document.getElementById("resProgress").style.display = "block";
      document.getElementById("resMsg").textContent = "正在下载 " + name + " …（可中断，稍后重新点「下载到本机」会从中断处继续）";
      fetch("/api/resource-download", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ url: url, name: name, target: target })
      }).then(function (r) { return r.json(); }).then(function (d) {
        if (!d || !d.ok) { document.getElementById("resMsg").textContent = "启动失败：" + ((d && d.error) || "未知错误"); return; }
        var timer = setInterval(function () {
          fetch("/api/resource-progress", { cache: "no-store" }).then(function (r) { return r.json(); }).then(function (p) {
            var pct = p.percent || 0;
            document.getElementById("resBar").style.width = pct + "%";
            document.getElementById("resMsg").textContent =
              (p.finished ? "✅ 下载完成：" : "下载中 ") + p.name +
              " · " + pct + "% （" + (p.done / 1048576).toFixed(0) + " MB" + (p.total ? " / " + (p.total / 1048576).toFixed(0) + " MB" : "") + "）" +
              (p.error ? " · 出错：" + p.error : "");
            if (p.finished || p.error) { clearInterval(timer); }
          }).catch(function () {});
        }, 1500);
      });
    });
  }
})();
</script>
{% endblock %}