{% extends "base.htm" %}

{% block title %}NanoShare - Edit file{% endblock %}

{% block meta %}
  <meta name="description" content="NanoShare file editing page.">
  <meta name="robots" content="noindex, nofollow" />
{% endblock %}

{% block head %}
<style>
  .file-edit-page { margin: clamp(16px, 3vw, 32px) auto; }
  .info-line { margin-top: 12px; color: var(--muted); font-size: .95rem; }
  .save-row { margin-top: 18px; display: flex; justify-content: space-evenly; align-items: center; gap: 10px; flex-wrap: wrap; }
  .status-row { margin-top: 8px; text-align: center; }
  .status { color: var(--muted); font-size: .92rem; }
  .status.ok { color: #8ee28e; }
  .status.err { color: #f08f8f; }
  .btn-danger { border-color: #8f3b3b; color: #ffd4d4; }
  .btn-danger:hover { background: #4d1f1f; }
  .meta-table-wrap { margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .meta-table { width: 100%; border-collapse: collapse; }
  .meta-table th, .meta-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
  .meta-table tr:last-child th, .meta-table tr:last-child td { border-bottom: 0; }
  .meta-table th { width: 160px; color: var(--muted); font-weight: 700; }
  .danger-zone { margin-top: 20px; border: 1px solid #6a2c2c; border-radius: 12px; padding: 12px; background: rgba(120, 32, 32, 0.14); }
  .danger-zone h2 { margin: 0 0 6px; font-size: 1rem; }
  .danger-zone p { margin: 0 0 10px; color: var(--muted); font-size: .92rem; }
</style>
{% endblock %}

{% block content %}
<main class="file-edit-page">
  <section class="card" aria-labelledby="edit-title">
    <h1 id="edit-title" class="page-title">Edit file</h1>
    <p class="subtle">Update filename, note and expiration date.</p>

    <div class="meta-table-wrap" role="region" aria-label="File metadata">
      <table class="meta-table">
        <tbody>
          <tr>
            <th scope="row">URL</th>
            <td><a href="{{ share_url }}">{{ share_url }}</a></td>
          </tr>
          <tr>
            <th scope="row">File ID</th>
            <td><code>{{ file.file_id }}</code></td>
          </tr>
          <tr>
            <th scope="row">Uploaded at</th>
            <td><time class="local-time" data-ts="{{ file.uploaded_at }}"></time></td>
          </tr>
          <tr>
            <th scope="row">File size</th>
            <td><span class="badge">{{ file.file_size }}</span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="field">
      <label for="fileName" class="label">Filename</label>
      <input id="fileName" class="input" type="text" maxlength="255" value="{{ file.file_name }}" />
    </div>

    <div class="field">
      <label for="note" class="label">Note</label>
      <input id="note" class="input" type="text" maxlength="500" value="{{ file.note or '' }}" />
    </div>

    <div class="row">
      <div class="field">
        <label for="expiresMode" class="label">Expiration</label>
        <select id="expiresMode" class="select">
          <option value="1h">1 hour</option>
          <option value="24h">24 hours</option>
          <option value="7d">7 days</option>
          <option value="30d">30 days</option>
          <option value="never">Never</option>
          <option value="custom">Custom date</option>
        </select>
      </div>
      <div class="field" id="customWrap" style="display:none;">
        <label for="customExpire" class="label">Custom expiration</label>
        <input type="datetime-local" id="customExpire" class="datetime" />
      </div>
    </div>

    <div class="save-row">
      <button id="saveBtn" class="btn" type="button">Save changes</button>
      <a class="btn btn-ghost" href="{{ url_for('side_main.file_info', file_id=file.file_id) }}">View info</a>
      <a class="btn btn-ghost" href="{{ url_for('side_main.files_list') }}">Back to files</a>
    </div>
    <div class="status-row"><span id="status" class="status"></span></div>

    <section class="danger-zone" aria-labelledby="danger-title">
      <h2 id="danger-title">Danger zone</h2>
      <p>Deleting a file is permanent and cannot be undone.</p>
      <button id="deleteBtn" class="btn btn-ghost btn-danger" type="button">Delete file</button>
    </section>
  </section>
</main>

<script>
  const fileId = '{{ file.file_id }}';
  const initialExpires = '{{ file.expires_at }}';
  const expiresMode = document.getElementById('expiresMode');
  const customWrap = document.getElementById('customWrap');
  const customExpire = document.getElementById('customExpire');
  const statusEl = document.getElementById('status');

  function formatDate(value) {
    if (!value) return 'Never';
    const date = new Date(Number.parseInt(String(value), 10));
    if (Number.isNaN(date.getTime())) return 'Invalid date';
    return date.toLocaleString(undefined, {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false,
    });
  }

  function toLocalInputValue(timestampMs) {
    const d = new Date(Number.parseInt(String(timestampMs), 10));
    if (Number.isNaN(d.getTime())) return '';
    const local = new Date(d.getTime() - d.getTimezoneOffset() * 60000);
    return local.toISOString().slice(0, 16);
  }

  function setStatus(msg, type) {
    statusEl.textContent = msg;
    statusEl.className = 'status';
    if (type) statusEl.classList.add(type);
  }

  function syncExpireUI() {
    customWrap.style.display = expiresMode.value === 'custom' ? 'block' : 'none';
  }

  if (initialExpires) {
    expiresMode.value = 'custom';
    customExpire.value = toLocalInputValue(initialExpires);
  } else {
    expiresMode.value = 'never';
  }
  syncExpireUI();
  expiresMode.addEventListener('change', syncExpireUI);

  document.querySelectorAll('time.local-time').forEach((el) => {
    el.textContent = formatDate(el.dataset.ts || '');
  });

  document.getElementById('saveBtn').addEventListener('click', async () => {
    const fileName = document.getElementById('fileName').value.trim();
    const note = document.getElementById('note').value.trim();

    if (!fileName) {
      setStatus('Filename is required.', 'err');
      return;
    }

    let expires = expiresMode.value;
    if (expiresMode.value === 'custom') {
      if (!customExpire.value) {
        setStatus('Pick a custom date.', 'err');
        return;
      }
      expires = new Date(customExpire.value).toISOString();
    }

    setStatus('Saving...');
    try {
      const response = await fetch(`/api/files/${encodeURIComponent(fileId)}/edit`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ file_name: fileName, note, expires }),
      });
      const data = await response.json();
      if (!response.ok || !data.ok) {
        throw new Error(data.error || 'Could not update file');
      }
      setStatus('Saved.', 'ok');
    } catch (error) {
      setStatus(error.message || 'Could not update file.', 'err');
    }
  });

  document.getElementById('deleteBtn').addEventListener('click', async () => {
    const ok = window.confirm('Delete this file? This cannot be undone.');
    if (!ok) return;

    setStatus('Deleting...');
    try {
      const response = await fetch(`/api/files/${encodeURIComponent(fileId)}/delete`, {
        method: 'POST',
      });
      const data = await response.json();
      if (!response.ok || !data.ok) {
        throw new Error(data.error || 'Could not delete file');
      }
      window.location.href = '{{ url_for("side_main.files_list") }}';
    } catch (error) {
      setStatus(error.message || 'Could not delete file.', 'err');
    }
  });
</script>
{% endblock %}