{{define "admin/storage_cleanup.html"}}
{{template "admin_shell_open" .}}

<style>
/* storage page */
.admin-storage-page { max-width: 100%; }
.admin-storage-page .admin-storage-lead {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary, #64748b);
  max-width: 54rem;
  margin-bottom: 0;
}
.admin-storage-page .admin-storage-lead code {
  font-size: 0.8125em;
  padding: 0.12em 0.35em;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
}
.admin-storage-page .admin-storage-main {
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  border: 1px solid var(--surface-border, #e2e8f0);
}
.admin-storage-page .admin-storage-main > .card-header {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 992px) {
  .admin-storage-page .admin-storage-main > .card-header {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
  }
}
.admin-storage-page .admin-storage-main .nav-tabs {
  border-bottom: none;
  gap: 0.25rem;
}
.admin-storage-page .admin-storage-main .nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 10px 10px 0 0;
  font-weight: 500;
}
.admin-storage-page .admin-storage-main .nav-tabs .nav-link i {
  font-size: 1.15rem;
  opacity: 0.85;
}
.admin-storage-page .admin-storage-pane {
  padding: 1.15rem 1rem 1.35rem;
}
@media (min-width: 992px) {
  .admin-storage-page .admin-storage-pane {
    padding: 1.35rem 1.35rem 1.5rem;
  }
}
.admin-storage-page .admin-storage-toolbar {
  border-radius: 12px;
  border: 1px solid var(--surface-border, #e2e8f0);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.admin-storage-page .admin-storage-toolbar .form-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: #475569;
  letter-spacing: 0.02em;
}
.admin-storage-page .admin-storage-toolbar .form-control {
  border-radius: 10px;
  border-color: #cbd5e1;
}
.admin-storage-page .admin-storage-toolbar .form-control:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.2);
}
.admin-storage-page .admin-storage-meta {
  gap: 0.5rem 0.75rem;
  align-items: center;
  font-size: 0.8125rem;
  color: #64748b;
}
.admin-storage-page .admin-storage-meta .meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--surface-border, #e2e8f0);
  color: #334155;
  font-weight: 500;
  font-size: 0.8125rem;
}
.admin-storage-page .admin-storage-meta .meta-chip i {
  font-size: 1rem;
  color: #0ea5e9;
}
.admin-storage-page .admin-storage-meta .meta-chip code {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0f172a;
}
.admin-storage-page .admin-storage-table-wrap {
  border-radius: 12px;
  border: 1px solid var(--surface-border, #e2e8f0);
  overflow: hidden;
  background: #fff;
}
.admin-storage-page .admin-storage-table-wrap table thead th {
  background: #f8fafc;
  border-bottom-color: var(--surface-border, #e2e8f0);
  vertical-align: middle;
}
.admin-storage-page .admin-storage-table-wrap table tbody td {
  vertical-align: middle;
}
.admin-storage-page .mono-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  word-break: break-all;
  color: #334155;
}
.admin-storage-page .js-storage-preview-key {
  color: #2563eb;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed rgba(37, 99, 235, 0.35);
}
.admin-storage-page .js-storage-preview-key:hover {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}
.admin-storage-page #storageFilePreviewModal .modal-body {
  min-height: 120px;
  background: #f8fafc;
}
.admin-storage-page #storageFilePreviewModal img {
  max-height: min(72vh, 640px);
  object-fit: contain;
}
.admin-storage-page .badge-orphan {
  font-weight: 600;
  background-color: rgba(220, 53, 69, 0.12);
  color: #b02a37;
  border: 1px solid rgba(220, 53, 69, 0.2);
}
.admin-storage-page .badge-ok {
  font-weight: 600;
  background-color: rgba(25, 135, 84, 0.12);
  color: #146c43;
  border: 1px solid rgba(25, 135, 84, 0.2);
}
.admin-storage-page .admin-storage-actions {
  gap: 0.65rem;
  flex-wrap: wrap;
}
.admin-storage-page .admin-storage-actions .btn {
  border-radius: 10px;
  font-weight: 600;
}
.admin-storage-page .admin-storage-empty {
  padding: 2.25rem 1rem !important;
}
.admin-storage-page .admin-storage-empty .empty-icon {
  font-size: 2.25rem;
  line-height: 1;
  opacity: 0.35;
  color: #64748b;
}
.admin-storage-page .admin-storage-hint {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.55;
  border-left: 3px solid #38bdf8;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0;
  background: rgba(56, 189, 248, 0.06);
  border-radius: 0 10px 10px 0;
}
.admin-storage-page .admin-storage-alert-r2 {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 18px rgba(234, 179, 8, 0.12);
}
.admin-storage-page .admin-storage-alert-r2 i {
  font-size: 1.25rem;
  vertical-align: -0.15em;
}
.admin-storage-page .admin-storage-spin {
  display: inline-block;
  animation: adminStorageSpin 0.85s linear infinite;
}
@keyframes adminStorageSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

<div class="admin-storage-page cs-admin-page">
<header class="cs-admin-pagehead">
  <div class="d-flex align-items-start gap-3 flex-grow-1 min-w-0">
    <div class="cs-admin-pagehead__icon" aria-hidden="true"><i class="bx bx-trash-alt"></i></div>
    <div class="cs-admin-pagehead__body">
      <h1 class="cs-admin-pagehead__title">{{T "admin.storage.title"}}</h1>
      <p class="cs-admin-pagehead__desc">{{html (T "admin.storage.desc_html")}}</p>
    </div>
  </div>
  <div class="cs-admin-pagehead__links">
    <a href="/admin/r2" class="btn btn-sm btn-outline-primary"><i class="bx bx-cloud me-1"></i>{{T "admin.storage.link_r2"}}</a>
  </div>
</header>

{{if not .Data.R2Configured}}
<div class="alert alert-warning admin-storage-alert-r2 d-flex align-items-start gap-2 mb-4" role="alert">
  <i class="bx bx-cloud-off flex-shrink-0" aria-hidden="true"></i>
  <div>{{html (T "admin.storage.r2_warn_html")}}</div>
</div>
{{end}}

<div class="card admin-storage-main border-0 shadow-sm">
  <div class="card-header bg-white border-bottom py-0">
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tab-r2-scan" data-bs-toggle="tab" data-bs-target="#pane-r2-scan" type="button" role="tab" aria-controls="pane-r2-scan" aria-selected="true">
          <i class="bx bx-cloud" aria-hidden="true"></i><span>{{T "admin.storage.tab_orphan"}}</span>
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-db-bad" data-bs-toggle="tab" data-bs-target="#pane-db-bad" type="button" role="tab" aria-controls="pane-db-bad" aria-selected="false">
          <i class="bx bx-data" aria-hidden="true"></i><span>{{T "admin.storage.tab_db"}}</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="card-body p-0">
    <div class="tab-content border-0">
      <div class="tab-pane fade show active admin-storage-pane" id="pane-r2-scan" role="tabpanel" aria-labelledby="tab-r2-scan">
        <div class="card admin-storage-toolbar border-0 mb-3">
          <div class="card-body p-3 p-md-3">
            <div class="row g-3 align-items-end">
              <div class="col-md-5 col-lg-4">
                <label class="form-label mb-1" for="r2Prefix">{{T "admin.storage.prefix_label"}}</label>
                <input type="text" class="form-control form-control-sm" id="r2Prefix" placeholder="{{T "admin.storage.prefix_ph"}}" autocomplete="off">
                <div class="form-text small mt-1 mb-0">{{T "admin.storage.prefix_hint"}}</div>
              </div>
              <div class="col-md-4 col-lg-4">
                <div class="form-check mt-md-4 pt-md-1">
                  <input class="form-check-input" type="checkbox" id="r2DateOnly" checked>
                  <label class="form-check-label small fw-medium" for="r2DateOnly">{{T "admin.storage.date_only"}} <code class="small">YYYY/mm/dd/…</code></label>
                </div>
              </div>
              <div class="col-md-3 col-lg-4">
                <div class="d-flex flex-wrap gap-2 justify-content-md-end">
                  <button type="button" class="btn btn-outline-secondary btn-sm" id="btnR2Reset"><i class="bx bx-revision me-1" aria-hidden="true"></i>{{T "admin.storage.reset_cursor"}}</button>
                  <button type="button" class="btn btn-primary btn-sm" id="btnR2Scan" {{if not .Data.R2Configured}}disabled{{end}}><i class="bx bx-search-alt me-1" aria-hidden="true"></i>{{T "admin.storage.scan"}}</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="admin-storage-meta d-flex flex-wrap mb-2">
          <span class="meta-chip"><i class="bx bx-cloud" aria-hidden="true"></i>{{T "admin.storage.bucket"}} <code id="r2BucketLabel">—</code></span>
          <span class="meta-chip"><i class="bx bx-list-ul" aria-hidden="true"></i><span id="r2ScanHint">{{T "admin.storage.not_scanned"}}</span></span>
        </div>

        <div class="admin-storage-table-wrap">
          <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0">
              <thead>
                <tr>
                  <th scope="col" style="width:2.25rem;" class="text-center" title="{{T "admin.storage.chk_all_title"}}"><input type="checkbox" id="r2ChkAll" class="form-check-input" aria-label="{{T "admin.storage.chk_all_orphan"}}"></th>
                  <th scope="col">{{T "admin.storage.col_key"}}</th>
                  <th scope="col" class="text-end">{{T "admin.storage.col_size"}}</th>
                  <th scope="col" class="text-end">{{T "admin.storage.col_mtime"}}</th>
                  <th scope="col">{{T "admin.storage.col_ref"}}</th>
                </tr>
              </thead>
              <tbody id="r2Tbody">
                <tr><td colspan="5" class="admin-storage-empty text-center text-muted"><i class="bx bx-folder-open d-block empty-icon mb-2" aria-hidden="true"></i>{{T "admin.storage.empty_scan"}}</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="admin-storage-actions d-flex flex-wrap justify-content-between align-items-center mt-3 pt-3 border-top">
          <button type="button" class="btn btn-outline-danger btn-sm" id="btnR2Delete" {{if not .Data.R2Configured}}disabled{{end}}><i class="bx bx-trash me-1" aria-hidden="true"></i>{{T "admin.storage.del_orphan"}}</button>
          <button type="button" class="btn btn-link btn-sm text-decoration-none" id="btnR2More" {{if not .Data.R2Configured}}disabled{{end}} style="display:none;"><i class="bx bx-chevron-down-circle me-1" aria-hidden="true"></i>{{T "admin.storage.load_more"}}</button>
        </div>
      </div>

      <div class="tab-pane fade admin-storage-pane" id="pane-db-bad" role="tabpanel" aria-labelledby="tab-db-bad">
        <p class="admin-storage-hint mb-3">{{html (T "admin.storage.db_hint_html")}}</p>
        <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
          <button type="button" class="btn btn-primary btn-sm" id="btnDbReload"><i class="bx bx-refresh me-1" aria-hidden="true"></i>{{T "admin.storage.refresh"}}</button>
        </div>
        <div class="admin-storage-table-wrap">
          <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0">
              <thead>
                <tr>
                  <th scope="col" style="width:2.25rem;" class="text-center"><input type="checkbox" id="dbChkAll" class="form-check-input" aria-label="{{T "admin.storage.chk_all_page"}}"></th>
                  <th scope="col">{{T "admin.storage.col_id"}}</th>
                  <th scope="col">{{T "admin.storage.col_reason"}}</th>
                  <th scope="col">{{T "admin.storage.col_kind"}}</th>
                  <th scope="col">{{T "admin.storage.col_status"}}</th>
                  <th scope="col">item_id</th>
                  <th scope="col">object_key</th>
                  <th scope="col" class="text-end">{{T "admin.storage.col_size"}}</th>
                </tr>
              </thead>
              <tbody id="dbTbody">
                <tr><td colspan="8" class="admin-storage-empty text-center text-muted"><i class="bx bx-loader-alt d-block empty-icon mb-2 admin-storage-spin" aria-hidden="true"></i>{{T "admin.storage.loading_tab"}}</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="admin-storage-actions d-flex flex-wrap justify-content-between align-items-center mt-3 pt-3 border-top">
          <div class="small text-secondary" id="dbPageLabel"></div>
          <div class="d-flex flex-wrap gap-2">
            <button type="button" class="btn btn-outline-secondary btn-sm" id="dbPrev"><i class="bx bx-chevron-left me-1" aria-hidden="true"></i>{{T "admin.storage.prev"}}</button>
            <button type="button" class="btn btn-outline-secondary btn-sm" id="dbNext">{{T "admin.storage.next"}}<i class="bx bx-chevron-right ms-1" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-danger btn-sm" id="btnDbPurge" {{if not .Data.R2Configured}}disabled{{end}}><i class="bx bx-trash me-1" aria-hidden="true"></i>{{T "admin.storage.purge"}}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<div id="adminStorageCfg" class="d-none" data-r2-public-base="{{.Data.R2PublicBase}}"></div>

<div class="modal fade" id="storageFilePreviewModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title small text-truncate" id="storageFilePreviewTitle">{{T "admin.storage.preview_title"}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "admin.storage.close"}}"></button>
      </div>
      <div class="modal-body text-center p-3">
        <img id="storageFilePreviewImg" class="img-fluid d-none" alt="">
        <div id="storageFilePreviewHint" class="small text-muted d-none"></div>
      </div>
      <div class="modal-footer py-2 justify-content-between">
        <span class="small text-muted text-truncate me-2" id="storageFilePreviewKey"></span>
        <div class="d-flex gap-2 flex-shrink-0">
          <a class="btn btn-sm btn-outline-primary d-none" id="storageFilePreviewOpen" href="#" target="_blank" rel="noopener">{{T "admin.storage.open_new"}}</a>
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{{T "admin.storage.close"}}</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function ($) {
  'use strict';
  var L = {
    clickPreview: {{jsString (T "admin.storage.js.click_preview")}},
    imgPreview: {{jsString (T "admin.storage.js.img_preview")}},
    videoPreview: {{jsString (T "admin.storage.js.video_preview")}},
    filePreview: {{jsString (T "admin.storage.js.file_preview")}},
    videoHint: {{jsString (T "admin.storage.js.video_hint")}},
    clickOpen: {{jsString (T "admin.storage.js.click_open")}},
    r2NotCfg: {{jsString (T "admin.storage.js.r2_not_cfg")}},
    presignFail: {{jsString (T "admin.storage.js.presign_fail")}},
    badKey: {{jsString (T "admin.storage.js.bad_key")}},
    network: {{jsString (T "admin.storage.js.network")}},
    previewFail: {{jsString (T "admin.storage.js.preview_fail")}},
    ok: {{jsString (T "admin.storage.js.ok")}},
    cancel: {{jsString (T "admin.storage.js.cancel")}},
    cursorResetEmpty: {{jsString (T "admin.storage.js.cursor_reset_empty")}},
    cursorReset: {{jsString (T "admin.storage.js.cursor_reset")}},
    batchPrefix: {{jsString (T "admin.storage.js.batch_prefix")}},
    batchMid: {{jsString (T "admin.storage.js.batch_mid")}},
    batchMore: {{jsString (T "admin.storage.js.batch_more")}},
    batchEmpty: {{jsString (T "admin.storage.js.batch_empty")}},
    orphan: {{jsString (T "admin.storage.js.orphan")}},
    referenced: {{jsString (T "admin.storage.js.referenced")}},
    scanFail: {{jsString (T "admin.storage.js.scan_fail")}},
    reqFailPrefix: {{jsString (T "admin.storage.js.req_fail_prefix")}},
    needOrphan: {{jsString (T "admin.storage.js.need_orphan")}},
    delConfirmPre: {{jsString (T "admin.storage.js.del_confirm_pre")}},
    delConfirmSuf: {{jsString (T "admin.storage.js.del_confirm_suf")}},
    delTitle: {{jsString (T "admin.storage.js.del_title")}},
    delOk: {{jsString (T "admin.storage.js.del_ok")}},
    fail: {{jsString (T "admin.storage.js.fail")}},
    delFailPrefix: {{jsString (T "admin.storage.js.del_fail_prefix")}},
    deletedPrefix: {{jsString (T "admin.storage.js.deleted_prefix")}},
    deletedSuffix: {{jsString (T "admin.storage.js.deleted_suffix")}},
    reqFail: {{jsString (T "admin.storage.js.req_fail")}},
    loading: {{jsString (T "admin.storage.js.loading")}},
    loadFail: {{jsString (T "admin.storage.js.load_fail")}},
    reasonUnbound: {{jsString (T "admin.storage.js.reason_unbound")}},
    reasonMissing: {{jsString (T "admin.storage.js.reason_missing")}},
    reasonLoose: {{jsString (T "admin.storage.js.reason_loose")}},
    noAnomaly: {{jsString (T "admin.storage.js.no_anomaly")}},
    pagePre: {{jsString (T "admin.storage.js.page_pre")}},
    pageMid: {{jsString (T "admin.storage.js.page_mid")}},
    pageMid2: {{jsString (T "admin.storage.js.page_mid2")}},
    pageSuf: {{jsString (T "admin.storage.js.page_suf")}},
    needDb: {{jsString (T "admin.storage.js.need_db")}},
    purgeConfirmPre: {{jsString (T "admin.storage.js.purge_confirm_pre")}},
    purgeConfirmSuf: {{jsString (T "admin.storage.js.purge_confirm_suf")}},
    purgeTitle: {{jsString (T "admin.storage.js.purge_title")}},
    purgeOk: {{jsString (T "admin.storage.js.purge_ok")}},
    purgeFailPrefix: {{jsString (T "admin.storage.js.purge_fail_prefix")}},
    purgedPre: {{jsString (T "admin.storage.js.purged_pre")}},
    purgedMid: {{jsString (T "admin.storage.js.purged_mid")}},
    purgedSuf: {{jsString (T "admin.storage.js.purged_suf")}}
  };

  function esc(s) {
    return $('<div/>').text(s == null ? '' : String(s)).html();
  }

  function escAttr(s) {
    return String(s == null ? '' : s)
      .replace(/&/g, '&amp;')
      .replace(/"/g, '&quot;')
      .replace(/</g, '&lt;');
  }

  function r2PublicBase() {
    return $.trim($('#adminStorageCfg').attr('data-r2-public-base') || '');
  }

  function buildR2PublicURL(key) {
    var base = r2PublicBase().replace(/\/+$/, '');
    key = $.trim(String(key || '')).replace(/^\/+/, '');
    if (!base || !key) return '';
    return base + '/' + key.split('/').map(function (p) {
      return encodeURIComponent(p);
    }).join('/');
  }

  function isImageKey(key) {
    return /\.(png|jpe?g|gif|webp|bmp|svg|ico)$/i.test(String(key || ''));
  }

  function isVideoKey(key) {
    return /\.(mp4|webm|ogg|mov|m4v)$/i.test(String(key || ''));
  }

  function renderObjectKeyLink(key) {
    key = String(key == null ? '' : key);
    if (!key) return '—';
    return '<a href="#" class="js-storage-preview-key" data-key="' + escAttr(key) + '" title="' + L.clickPreview + '">' + esc(key) + '</a>';
  }

  function resolvePreviewURL(key) {
    return new Promise(function (resolve, reject) {
      var direct = buildR2PublicURL(key);
      if (direct) {
        resolve(direct);
        return;
      }
      $.ajax({
        url: '/admin/storage/api/preview-url',
        type: 'GET',
        data: { key: key },
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        dataType: 'json'
      }).done(function (res) {
        if (res && res.success && res.data && res.data.url) {
          resolve(res.data.url);
        } else {
          reject((res && res.data && res.data.error) || 'preview_failed');
        }
      }).fail(function () {
        reject('network');
      });
    });
  }

  function showStorageFilePreview(key, url) {
    var $img = $('#storageFilePreviewImg');
    var $hint = $('#storageFilePreviewHint');
    var $open = $('#storageFilePreviewOpen');
    $('#storageFilePreviewTitle').text(isImageKey(key) ? L.imgPreview : (isVideoKey(key) ? L.videoPreview : L.filePreview));
    $('#storageFilePreviewKey').text(key);
    $open.attr('href', url).removeClass('d-none');
    if (isImageKey(key)) {
      $hint.addClass('d-none').text('');
      $img.removeClass('d-none').attr('src', url).attr('alt', key);
      if (window.bootstrap && bootstrap.Modal) {
        bootstrap.Modal.getOrCreateInstance(document.getElementById('storageFilePreviewModal')).show();
      } else {
        window.open(url, '_blank', 'noopener');
      }
      return;
    }
    if (isVideoKey(key)) {
      $img.addClass('d-none').attr('src', '');
      $hint.removeClass('d-none').html(L.videoHint + ' <a href="' + escAttr(url) + '" target="_blank" rel="noopener">' + L.clickOpen + '</a>');
      if (window.bootstrap && bootstrap.Modal) {
        bootstrap.Modal.getOrCreateInstance(document.getElementById('storageFilePreviewModal')).show();
      } else {
        window.open(url, '_blank', 'noopener');
      }
      return;
    }
    window.open(url, '_blank', 'noopener');
  }

  function openStorageFilePreview(key) {
    key = $.trim(String(key || ''));
    if (!key) return;
    resolvePreviewURL(key).then(function (url) {
      showStorageFilePreview(key, url);
    }).catch(function (err) {
      var msgs = {
        r2_not_configured: L.r2NotCfg,
        presign_failed: L.presignFail,
        bad_key: L.badKey,
        network: L.network
      };
      toastMsg(msgs[err] || L.previewFail, 0);
    });
  }

  function fmtBytes(n) {
    n = Number(n) || 0;
    if (n < 1024) return n + ' B';
    var u = ['KB','MB','GB'];
    var i = -1;
    do { n /= 1024; i++; } while (n >= 1024 && i < u.length - 1);
    return n.toFixed(i === 0 ? 0 : 1) + ' ' + u[i];
  }

  function fmtTime(ts) {
    ts = Number(ts) || 0;
    if (!ts) return '—';
    var d = new Date(ts * 1000);
    return d.toLocaleString();
  }

  function emptyRowR2(msg) {
    return '<tr><td colspan="5" class="admin-storage-empty text-center text-muted"><i class="bx bx-folder-open d-block empty-icon mb-2" aria-hidden="true"></i>' + esc(msg) + '</td></tr>';
  }

  function emptyRowDb(msg, iconClass, spin, isError) {
    var ic = iconClass || 'bx-info-circle';
    var spinCls = spin ? ' admin-storage-spin' : '';
    var cls = isError ? 'text-danger' : 'text-muted';
    return '<tr><td colspan="8" class="admin-storage-empty text-center ' + cls + '"><i class="bx ' + ic + ' d-block empty-icon mb-2' + spinCls + '" aria-hidden="true"></i>' + esc(msg) + '</td></tr>';
  }

  function ajaxJSON(method, url, data) {
    var opt = {
      url: url,
      type: method,
      headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json; charset=UTF-8' },
      dataType: 'json'
    };
    if (data != null) opt.data = JSON.stringify(data);
    return $.ajax(opt);
  }

  /** confirmDanger */
  function confirmDanger(title, message, btnOk, btnCancel) {
    btnOk = btnOk || L.ok;
    btnCancel = btnCancel || L.cancel;
    if (window.layer && typeof window.layer.confirm === 'function') {
      return window.layer.confirm(message, {
        title: title,
        icon: 3,
        btn: [btnOk, btnCancel]
      });
    }
    return Promise.resolve(window.confirm(title + '\n\n' + message));
  }

  /** toastMsg */
  function toastMsg(msg, icon, time) {
    msg = msg == null ? '' : String(msg);
    icon = icon == null ? 0 : icon;
    time = time == null ? 2200 : time;
    if (window.layer && typeof window.layer.msg === 'function') {
      window.layer.msg(msg, { icon: icon, time: time });
      return;
    }
    if (window.myModal && typeof window.myModal.msg === 'function') {
      window.myModal.msg(msg, { icon: icon, time: time });
      return;
    }
    alert(msg);
  }

  $(document).on('click', '.js-storage-preview-key', function (e) {
    e.preventDefault();
    openStorageFilePreview($(this).attr('data-key') || '');
  });

  $('#storageFilePreviewModal').on('hidden.bs.modal', function () {
    $('#storageFilePreviewImg').attr('src', '').addClass('d-none');
    $('#storageFilePreviewHint').addClass('d-none').empty();
  });

  var r2Cursor = '';
  var dbPage = 1;
  var dbTotal = 0;
  var dbPageSize = 30;

  $('#btnR2Reset').on('click', function () {
    r2Cursor = '';
    $('#r2Tbody').html(emptyRowR2(L.cursorResetEmpty));
    $('#btnR2More').hide();
    $('#r2ScanHint').text(L.cursorReset);
  });

  function renderR2Rows(items, truncated, nextCursor, bucket, orphanInBatch) {
    $('#r2BucketLabel').text(bucket || '—');
    $('#r2ScanHint').text(L.batchPrefix + items.length + L.batchMid + orphanInBatch + (truncated ? L.batchMore : ''));
    if (!items.length) {
      $('#r2Tbody').html(emptyRowR2(L.batchEmpty));
    } else {
      var rows = items.map(function (it) {
        var orphan = !!it.is_orphan;
        var badge = orphan
          ? '<span class="badge badge-orphan rounded-pill">' + L.orphan + '</span>'
          : '<span class="badge badge-ok rounded-pill">' + L.referenced + '</span>';
        var chk = orphan ? '<input type="checkbox" class="form-check-input r2-row-chk" value="' + encodeURIComponent(it.key) + '" aria-label="' + L.orphan + ' ' + esc(it.key) + '">' : '';
        return '<tr><td class="text-center">' + chk + '</td><td class="mono-key">' + renderObjectKeyLink(it.key) + '</td><td class="text-end text-nowrap">' + fmtBytes(it.size_bytes) + '</td><td class="text-end text-nowrap small text-secondary">' + fmtTime(it.last_modified) + '</td><td>' + badge + '</td></tr>';
      });
      $('#r2Tbody').html(rows.join(''));
    }
    r2Cursor = nextCursor || '';
    if (truncated && nextCursor) {
      $('#btnR2More').show();
    } else {
      $('#btnR2More').hide();
    }
  }

  function scanR2() {
    var prefix = $('#r2Prefix').val() || '';
    var dateOnly = $('#r2DateOnly').is(':checked') ? '1' : '0';
    var url = '/admin/storage/api/r2-scan?max_keys=160&date_only=' + encodeURIComponent(dateOnly)
      + '&prefix=' + encodeURIComponent(prefix)
      + (r2Cursor ? '&cursor=' + encodeURIComponent(r2Cursor) : '');
    $('#btnR2Scan').prop('disabled', true);
    $('#btnR2More').prop('disabled', true);
    $.ajax({ url: url, type: 'GET', headers: { 'X-Requested-With': 'XMLHttpRequest' }, dataType: 'json' })
      .done(function (res) {
        if (!res || !res.success || !res.data) {
          toastMsg((res && res.data && res.data.error) ? res.data.error : L.scanFail, 2);
          return;
        }
        var d = res.data;
        renderR2Rows(d.items || [], !!d.is_truncated, d.next_cursor, d.bucket, d.orphan_in_batch || 0);
      })
      .fail(function (xhr) {
        toastMsg(L.reqFailPrefix + (xhr.status || '') + ' ' + (xhr.statusText || ''), 2);
      })
      .always(function () {
        $('#btnR2Scan').prop('disabled', false);
        $('#btnR2More').prop('disabled', false);
      });
  }

  $('#btnR2Scan').on('click', scanR2);
  $('#btnR2More').on('click', scanR2);

  $('#r2ChkAll').on('change', function () {
    var on = $(this).prop('checked');
    $('.r2-row-chk').prop('checked', on);
  });

  $('#btnR2Delete').on('click', function () {
    var keys = [];
    $('.r2-row-chk:checked').each(function () {
      keys.push(decodeURIComponent($(this).val()));
    });
    if (!keys.length) {
      toastMsg(L.needOrphan, 0);
      return;
    }
    var n = keys.length;
    var msg = L.delConfirmPre + n + L.delConfirmSuf;
    confirmDanger(L.delTitle, msg, L.delOk, L.cancel).then(function (ok) {
      if (!ok) return;
      ajaxJSON('POST', '/admin/storage/api/r2-delete', { keys: keys })
        .done(function (res) {
          if (!res || !res.success) {
            var er = (res && res.data) ? (res.data.error || JSON.stringify(res.data)) : L.fail;
            toastMsg(L.delFailPrefix + er, 2);
            return;
          }
          toastMsg(L.deletedPrefix + (res.data.deleted || keys.length) + L.deletedSuffix, 1);
          r2Cursor = '';
          scanR2();
        })
        .fail(function () {
          toastMsg(L.reqFail, 2);
        });
    });
  });

  function loadDb(page) {
    dbPage = Math.max(1, page | 0);
    var url = '/admin/storage/api/db-anomalies?page=' + encodeURIComponent(dbPage) + '&page_size=' + encodeURIComponent(dbPageSize);
    $('#btnDbReload').prop('disabled', true);
    $('#dbTbody').html(emptyRowDb(L.loading, 'bx-loader-alt', true));
    $.ajax({ url: url, type: 'GET', headers: { 'X-Requested-With': 'XMLHttpRequest' }, dataType: 'json' })
      .done(function (res) {
        if (!res || !res.success || !res.data) {
          $('#dbTbody').html(emptyRowDb(L.loadFail, 'bx-error-circle', false, true));
          return;
        }
        dbTotal = Number(res.data.total) || 0;
        var rows = res.data.rows || [];
        var rcn = { unbound: L.reasonUnbound, missing_item: L.reasonMissing, loose_ref: L.reasonLoose };
        if (!rows.length) {
          $('#dbTbody').html(emptyRowDb(L.noAnomaly, 'bx-check-circle', false));
        } else {
          $('#dbTbody').html(rows.map(function (r) {
            var id = Number(r.id) || 0;
            var reason = rcn[r.reason] || r.reason;
            return '<tr>'
              + '<td class="text-center"><input type="checkbox" class="form-check-input db-row-chk" data-id="' + id + '" aria-label="ID ' + id + '"></td>'
              + '<td class="text-nowrap fw-semibold">' + id + '</td>'
              + '<td><span class="small">' + esc(reason) + '</span></td>'
              + '<td><code class="small">' + esc(r.kind) + '</code></td>'
              + '<td><span class="badge bg-light text-dark border">' + esc(r.status) + '</span></td>'
              + '<td class="text-nowrap">' + esc(r.item_id) + '</td>'
              + '<td class="mono-key">' + renderObjectKeyLink(r.object_key) + '</td>'
              + '<td class="text-end text-nowrap">' + fmtBytes(r.size_bytes) + '</td>'
              + '</tr>';
          }).join(''));
        }
        var maxPage = Math.max(1, Math.ceil(dbTotal / dbPageSize));
        $('#dbPageLabel').html('<i class="bx bx-file me-1" aria-hidden="true"></i>' + L.pagePre + '<strong>' + dbPage + '</strong>' + L.pageMid + maxPage + L.pageMid2 + '<strong>' + dbTotal + '</strong>' + L.pageSuf);
      })
      .fail(function () {
        $('#dbTbody').html(emptyRowDb(L.reqFail, 'bx-wifi-off', false, true));
      })
      .always(function () {
        $('#btnDbReload').prop('disabled', false);
      });
  }

  $('#btnDbReload').on('click', function () { loadDb(dbPage); });
  $('#dbPrev').on('click', function () { loadDb(dbPage - 1); });
  $('#dbNext').on('click', function () { loadDb(dbPage + 1); });
  $('#dbChkAll').on('change', function () {
    $('.db-row-chk').prop('checked', $('#dbChkAll').prop('checked'));
  });

  var dbTabLoaded = false;
  $('button[data-bs-target="#pane-db-bad"]').on('shown.bs.tab', function () {
    if (!dbTabLoaded) {
      dbTabLoaded = true;
      loadDb(1);
    }
  });

  $('#btnDbPurge').on('click', function () {
    var ids = [];
    $('.db-row-chk:checked').each(function () {
      var id = Number($(this).data('id'));
      if (id > 0) ids.push(id);
    });
    if (!ids.length) {
      toastMsg(L.needDb, 0);
      return;
    }
    var m = ids.length;
    var msg = L.purgeConfirmPre + m + L.purgeConfirmSuf;
    confirmDanger(L.purgeTitle, msg, L.purgeOk, L.cancel).then(function (ok) {
      if (!ok) return;
      ajaxJSON('POST', '/admin/storage/api/db-purge', { ids: ids })
        .done(function (res) {
          if (!res || !res.success) {
            var er = (res && res.data) ? (res.data.error || JSON.stringify(res.data)) : L.fail;
            toastMsg(L.purgeFailPrefix + er, 2);
            return;
          }
          toastMsg(L.purgedPre + (res.data.deleted_db || 0) + L.purgedMid + (res.data.deleted_r2 || 0) + L.purgedSuf, 1, 2800);
          loadDb(dbPage);
        })
        .fail(function () {
          toastMsg(L.reqFail, 2);
        });
    });
  });
})(jQuery);
</script>

{{template "admin_shell_close" .}}
{{end}}