{{define "admin_imgmeta"}}
<div class="panel" style="max-width:860px;margin:0 auto;">
  <div style="padding:18px 20px 6px;">
    <div style="display:flex;align-items:center;justify-content:space-between;margin:0 0 6px;">
      <h2 style="margin:0;font-size:18px;">图片信息识别</h2>
      <a href="/admin/imgmeta/settings" class="btn btn-sm">识别设置</a>
    </div>
    <p style="margin:0 0 12px;color:#8a94a6;font-size:13px;">上传图片或填写图片 URL，解析格式、分辨率、大小、EXIF 拍摄时间 / 设备 / GPS，并按文件名关键词与同名伴生影像启发式判定 HDR 与 Live 图。支持 JPEG / PNG / GIF / BMP / WebP / HEIC / AVIF。</p>
  </div>
  <div style="padding:0 20px 18px;">
    {{/* 上传区：点击选择或拖拽到虚线框 */}}
    <div id="imDrop" style="border:2px dashed #b9c7e8;border-radius:12px;padding:28px 16px;text-align:center;cursor:pointer;background:#f6f9ff;transition:border-color .2s,background .2s;">
      <div style="font-size:15px;color:#3d5677;margin-bottom:6px;">点击选择图片，或拖拽图片到此处</div>
      <div style="font-size:12px;color:#8a94a6;">单张不超过 25 MB</div>
      <input type="file" id="imFile" accept="image/*" style="display:none;">
    </div>

    {{/* URL 解析区 */}}
    <div style="display:flex;gap:8px;margin-top:12px;">
      <input type="text" id="imUrl" placeholder="粘贴图片 URL（http / https），回车或点「解析 URL」" style="flex:1;padding:9px 12px;border:1px solid #d5ddeb;border-radius:8px;font-size:13px;outline:none;">
      <button type="button" id="imUrlBtn" class="btn btn-primary">解析 URL</button>
    </div>

    {{/* 状态提示 */}}
    <div id="imStatus" style="display:none;margin-top:12px;padding:10px 14px;border-radius:8px;font-size:13px;"></div>

    {{/* 结果信息卡：左缩略图 + 右上角悬浮徽章，右信息区（与前端原型同构） */}}
    <div id="imCard" style="display:none;margin-top:16px;border:1px solid #e3e9f5;border-radius:12px;background:#fff;box-shadow:0 4px 18px rgba(61,86,119,.08);overflow:hidden;">
      <div style="display:flex;gap:16px;padding:16px;flex-wrap:wrap;">
        <div style="position:relative;width:132px;height:132px;flex:0 0 132px;border-radius:10px;overflow:hidden;background:#eef2fb;">
          <img id="imThumb" src="" alt="预览图" style="width:100%;height:100%;object-fit:cover;display:block;">
          {{/* 悬浮徽章：HDR 右上角第一层（top 6px），Live 第二层（top 34px），半透明底 + 阴影 */}}
          <span id="imBadgeHDR" style="display:none;position:absolute;top:6px;right:6px;background:rgba(15,23,42,.55);color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;padding:2px 7px;border-radius:6px;backdrop-filter:blur(3px);box-shadow:0 2px 6px rgba(0,0,0,.25);">HDR</span>
          <span id="imBadgeLive" style="display:none;position:absolute;top:34px;right:6px;background:rgba(15,23,42,.55);color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;padding:2px 7px;border-radius:6px;backdrop-filter:blur(3px);box-shadow:0 2px 6px rgba(0,0,0,.25);">Live</span>
        </div>
        <div style="flex:1;min-width:280px;">
          <div id="imTitle" style="font-size:15px;font-weight:600;color:#2b3a55;margin-bottom:10px;word-break:break-all;"></div>
          <table style="width:100%;border-collapse:collapse;font-size:13px;">
            <tr><td style="padding:5px 8px 5px 0;color:#8a94a6;width:88px;">格式</td><td id="imFmt" style="padding:5px 0;color:#2b3a55;"></td></tr>
            <tr><td style="padding:5px 8px 5px 0;color:#8a94a6;">分辨率</td><td id="imRes" style="padding:5px 0;color:#2b3a55;"></td></tr>
            <tr><td style="padding:5px 8px 5px 0;color:#8a94a6;">大小</td><td id="imSize" style="padding:5px 0;color:#2b3a55;"></td></tr>
            <tr><td style="padding:5px 8px 5px 0;color:#8a94a6;">HDR / Live</td><td id="imHDRLive" style="padding:5px 0;color:#2b3a55;"></td></tr>
            <tr><td style="padding:5px 8px 5px 0;color:#8a94a6;">拍摄时间</td><td id="imDate" style="padding:5px 0;color:#2b3a55;"></td></tr>
            <tr><td style="padding:5px 8px 5px 0;color:#8a94a6;">设备</td><td id="imCam" style="padding:5px 0;color:#2b3a55;"></td></tr>
            <tr><td style="padding:5px 8px 5px 0;color:#8a94a6;">GPS</td><td id="imGps" style="padding:5px 0;color:#2b3a55;"></td></tr>
          </table>
          <div id="imNote" style="margin-top:10px;font-size:12px;color:#8a94a6;line-height:1.7;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  // 会话 CSRF（后台登录态必有值；html/template 在 script 上下文自动转义为安全的 JS 字符串字面量）
  var CSRF = {{.CSRF}};
  var drop = document.getElementById("imDrop");
  var fileInput = document.getElementById("imFile");
  var urlInput = document.getElementById("imUrl");
  var status = document.getElementById("imStatus");

  function showStatus(text, isErr) {
    status.style.display = "block";
    status.style.background = isErr ? "#fdf0ef" : "#eef7f1";
    status.style.color = isErr ? "#b23a34" : "#2f7d56";
    status.textContent = text;
  }

  function analyzeFile(file) {
    if (!file) { return; }
    var fd = new FormData();
    fd.append("csrf", CSRF);
    fd.append("file", file);
    showStatus("正在解析「" + file.name + "」…", false);
    fetch("/api/imgmeta/analyze", { method: "POST", body: fd })
      .then(function (r) { return r.json(); })
      .then(function (d) { renderResult(d); })
      .catch(function () { showStatus("请求失败，请检查网络后重试", true); });
  }

  function analyzeUrl() {
    var u = urlInput.value.trim();
    if (!u) { showStatus("请先填写图片 URL", true); return; }
    var fd = new FormData();
    fd.append("csrf", CSRF);
    fd.append("url", u);
    showStatus("正在抓取并解析 URL…", false);
    fetch("/api/imgmeta/analyze-url", { method: "POST", body: fd })
      .then(function (r) { return r.json(); })
      .then(function (d) { renderResult(d); })
      .catch(function () { showStatus("请求失败，请检查网络后重试", true); });
  }

  function renderResult(d) {
    var card = document.getElementById("imCard");
    if (!d || !d.ok || !d.meta) {
      showStatus((d && d.error) ? d.error : "解析失败", true);
      card.style.display = "none";
      return;
    }
    var m = d.meta;
    card.style.display = "block";
    status.style.display = "none";

    document.getElementById("imThumb").src = m.fileUrl;
    document.getElementById("imTitle").textContent = (m.fileUrl || "未知地址");

    var tags = [];
    if (m.hdr) { tags.push('<span style="display:inline-block;background:#eef4ff;color:#3d6bc4;border:1px solid #d3e0fb;border-radius:6px;padding:1px 8px;margin-right:6px;font-weight:700;">HDR</span>'); }
    if (m.live) { tags.push('<span style="display:inline-block;background:#eefaf2;color:#2f7d56;border:1px solid #cdeeda;border-radius:6px;padding:1px 8px;margin-right:6px;font-weight:700;">Live</span>'); }
    if (!m.hdr && !m.live) { tags.push('<span style="color:#8a94a6;">无</span>'); }
    document.getElementById("imHDRLive").innerHTML = tags.join("");

    document.getElementById("imFmt").textContent = m.format || "—";
    document.getElementById("imRes").textContent = (m.width > 0 && m.height > 0) ? (m.width + " × " + m.height) : "—";
    document.getElementById("imSize").textContent = m.sizeHuman || "—";
    document.getElementById("imDate").textContent = m.exifDate || "—";
    document.getElementById("imCam").textContent = m.camera || "—";
    document.getElementById("imGps").textContent = m.gps || "—";

    // 悬浮徽章：右上角垂直叠放（HDR 上 / Live 下），半透明底 + 阴影
    var bH = document.getElementById("imBadgeHDR");
    var bL = document.getElementById("imBadgeLive");
    bH.style.display = m.hdr ? "block" : "none";
    bL.style.display = m.live ? "block" : "none";

    // 判定依据说明
    var notes = [];
    if (m.error) { notes.push(m.error); }
    if (m.hdr && m.hdrEvidence) { notes.push("HDR 判定：" + m.hdrEvidence); }
    if (m.live && m.liveEvidence) { notes.push("Live 判定：" + m.liveEvidence); }
    document.getElementById("imNote").textContent = notes.join("；");
  }

  drop.addEventListener("click", function () { fileInput.click(); });
  fileInput.addEventListener("change", function () {
    analyzeFile(fileInput.files[0]);
    fileInput.value = "";
  });
  // 拖拽上传
  drop.addEventListener("dragover", function (ev) {
    ev.preventDefault();
    drop.style.borderColor = "#3d6bc4";
    drop.style.background = "#eef4ff";
  });
  drop.addEventListener("dragleave", function () {
    drop.style.borderColor = "#b9c7e8";
    drop.style.background = "#f6f9ff";
  });
  drop.addEventListener("drop", function (ev) {
    ev.preventDefault();
    drop.style.borderColor = "#b9c7e8";
    drop.style.background = "#f6f9ff";
    if (ev.dataTransfer.files && ev.dataTransfer.files.length) {
      analyzeFile(ev.dataTransfer.files[0]);
    }
  });
  document.getElementById("imUrlBtn").addEventListener("click", analyzeUrl);
  urlInput.addEventListener("keydown", function (ev) {
    if (ev.key === "Enter") { analyzeUrl(); }
  });
})();
</script>
{{end}}