{% extends 'admin/custom_base.html' %}
{% block body %}
<div class="container-fluid mt-3">
  <h4 class="mb-3">CDN / File Hosting</h4>

  <div class="card mb-4">
    <div class="card-header bg-primary text-white"><strong>Upload File</strong></div>
    <div class="card-body">
      <div class="form-row align-items-end">
        <div class="form-group col-md-3 mb-2">
          <label class="small font-weight-bold">Custom Name <span class="text-muted">(optional)</span></label>
          <input type="text" class="form-control" id="cdn-name" placeholder="my-file.dll">
          <small class="text-muted">Leave blank for auto-generated name</small>
        </div>
        <div class="form-group col-md-3 mb-2">
          <label class="small font-weight-bold">Label <span class="text-muted">(optional)</span></label>
          <input type="text" class="form-control" id="cdn-label" placeholder="Description">
        </div>
        <div class="form-group col-md-4 mb-2">
          <label class="small font-weight-bold">File <span class="text-danger">*</span></label>
          <div class="custom-file">
            <input type="file" class="custom-file-input" id="cdn-file"
              onchange="document.getElementById('cdn-file-label').textContent = this.files[0]?.name || 'Choose file'">
            <label class="custom-file-label" id="cdn-file-label">Choose file (max 10MB)</label>
          </div>
        </div>
        <div class="form-group col-md-2 mb-2">
          <label class="small font-weight-bold">&nbsp;</label>
          <button class="btn btn-success btn-block d-block" onclick="cdnUpload()">Upload</button>
        </div>
      </div>
      <div id="cdn-result" class="alert mt-2" style="display:none"></div>
    </div>
  </div>

  <div class="card">
    <div class="card-header"><strong>Hosted Files</strong></div>
    <div class="card-body p-0">
      <table class="table table-sm table-striped mb-0">
        <thead>
          <tr>
            <th>Name</th>
            <th>Label</th>
            <th>Size</th>
            <th>Uploaded</th>
            <th>URL</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="cdn-table"></tbody>
      </table>
      <div id="cdn-empty" class="text-center text-muted py-3" style="display:none">No files uploaded yet.</div>
    </div>
  </div>
</div>

<script>
const BASE = 'https://kittyrec.tabbycluster.net';

function formatSize(b) {
  if (b < 1024) return b + ' B';
  if (b < 1048576) return (b/1024).toFixed(1) + ' KB';
  return (b/1048576).toFixed(1) + ' MB';
}

async function loadFiles() {
  const res = await fetch('/admin/api/cdn/files');
  const files = await res.json();
  const tbody = document.getElementById('cdn-table');
  const empty = document.getElementById('cdn-empty');
  tbody.innerHTML = '';
  if (!files.length) { empty.style.display = ''; return; }
  empty.style.display = 'none';
  for (const f of files) {
    const url = BASE + '/' + f.name;
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td><code>${f.name}</code></td>
      <td>${f.label || '<span class="text-muted">-</span>'}</td>
      <td>${formatSize(f.size)}</td>
      <td><small>${(f.created_at||'').slice(0,16)}</small></td>
      <td>
        <div class="input-group input-group-sm" style="width:340px">
          <input type="text" class="form-control form-control-sm" value="${url}" readonly onclick="this.select()">
          <div class="input-group-append">
            <button class="btn btn-outline-info btn-sm" onclick="navigator.clipboard.writeText('${url}')">Copy</button>
          </div>
        </div>
      </td>
      <td><button class="btn btn-xs btn-outline-danger" onclick="cdnDelete('${f.name}')">Del</button></td>
    `;
    tbody.appendChild(tr);
  }
}

async function cdnUpload() {
  const fileInput = document.getElementById('cdn-file');
  const result = document.getElementById('cdn-result');
  if (!fileInput.files.length) {
    result.className = 'alert alert-danger mt-2';
    result.textContent = 'Select a file first.';
    result.style.display = '';
    return;
  }
  const fd = new FormData();
  fd.append('file', fileInput.files[0]);
  const name = document.getElementById('cdn-name').value.trim();
  const label = document.getElementById('cdn-label').value.trim();
  if (name) fd.append('name', name);
  if (label) fd.append('label', label);
  const res = await fetch('/admin/api/cdn/upload', {method: 'POST', body: fd});
  const d = await res.json();
  if (d.error) {
    result.className = 'alert alert-danger mt-2';
    result.textContent = d.error;
  } else {
    result.className = 'alert alert-success mt-2';
    result.innerHTML = 'Uploaded! URL: <code>' + d.url + '</code> <button class="btn btn-sm btn-outline-info ml-2" onclick="navigator.clipboard.writeText(\'' + d.url + '\')">Copy</button>';
    fileInput.value = '';
    document.getElementById('cdn-file-label').textContent = 'Choose file (max 10MB)';
    document.getElementById('cdn-name').value = '';
    document.getElementById('cdn-label').value = '';
    loadFiles();
  }
  result.style.display = '';
}

async function cdnDelete(name) {
  if (!confirm('Delete ' + name + '?')) return;
  const d = await KR.apiPost('/admin/api/cdn/delete', {name});
  if (d.error) { KR.toast(d.error, 'error'); return; }
  KR.toast('Deleted ' + name);
  loadFiles();
}

loadFiles();
</script>
{% endblock %}