{% extends "base.htm" %}

{% block title %}NanoShare - File info{% endblock %}

{% block meta %}
  <meta name="description" content="NanoShare file details and access information.">
  <meta name="robots" content="noindex, nofollow" />
{% endblock %}

{% block head %}
<style>
  .file-info-page { padding: clamp(16px, 3vw, 28px); }
  .top-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
  .kv { display: grid; grid-template-columns: 180px 1fr; gap: 10px 14px; margin-top: 14px; }
  .kv dt { color: var(--muted); font-weight: 700; }
  .kv dd { margin: 0; word-break: break-word; }
  .toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .92rem; }
  .preview-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
  .preview-head { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .9rem; font-weight: 700; }
  .preview-body { min-height: 230px; display: grid; place-items: center; padding: 10px; }
  .preview-body img, .preview-body video, .preview-body audio, .preview-body iframe { width: 100%; max-width: 100%; border: 0; border-radius: 8px; }
  .preview-body video { max-height: 260px; }
  .preview-body pre { width: 100%; max-height: 260px; overflow: auto; margin: 0; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: rgba(0,0,0,.16); white-space: pre-wrap; word-break: break-word; }
  .preview-note { color: var(--muted); font-size: .88rem; text-align: center; }
  @media (max-width: 980px) { .top-grid { grid-template-columns: 1fr; } }
  @media (max-width: 720px) { .kv { grid-template-columns: 1fr; gap: 4px; } }
</style>
{% endblock %}

{% block content %}
<main class="file-info-page">
  <section class="card" style="padding: clamp(18px, 2.6vw, 28px);">
    <div class="top-grid">
      <div>
        <h1 class="page-title">File details</h1>
        <p class="subtle">Everything about this file, including expiration date and recent accesses.</p>

        <dl class="kv">
          <dt>Filename</dt>
          <dd>{{ file.file_name }}</dd>

          <dt>Note</dt>
          <dd>{{ file.note or 'No note' }}</dd>

          <dt>Size</dt>
          <dd><span class="badge">{{ file.file_size }}</span></dd>

          <dt>Uploaded at</dt>
          <dd><time class="local-time" data-ts="{{ file.uploaded_at }}"></time></dd>

          <dt>Expires at</dt>
          <dd>
            {% if file.expires_at %}
              <time class="local-time" data-ts="{{ file.expires_at }}"></time>
            {% else %}
              Never
            {% endif %}
          </dd>

          <dt>Public URL</dt>
          <dd><a class="mono" href="{{ share_url }}">{{ share_url }}</a></dd>
        </dl>
      </div>

      <aside class="preview-card" aria-label="File preview">
        <div class="preview-head">Preview</div>
        <div id="previewBody" class="preview-body">
          <p class="preview-note">Loading preview...</p>
        </div>
      </aside>
    </div>

    <div class="toolbar">
      <a class="btn" href="{{ url_for('side_main.file_edit', file_id=file.file_id) }}">Edit</a>
      <button id="copyUrlBtn" class="btn btn-ghost" type="button">Copy link</button>
      <a class="btn btn-ghost" href="{{ url_for('side_main.files_list') }}">Back to files</a>
    </div>
  </section>

  <section class="card" style="padding: clamp(18px, 2.6vw, 28px); margin-top: 16px;">
    <h2 style="margin:0 0 8px;">Access history</h2>
    <p class="subtle">Latest request metadata for this file.</p>

    <div class="table-wrap" role="region" aria-label="Access history" tabindex="0">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Time</th>
            <th scope="col">Status</th>
            <th scope="col">IP</th>
            <th scope="col">User Agent</th>
          </tr>
        </thead>
        <tbody>
          {% if accesses %}
            {% for access in accesses %}
              <tr>
                <td><time class="local-time" data-ts="{{ access.accessed_at }}"></time></td>
                <td><span class="badge">{{ access.status }}</span></td>
                <td>{{ access.ip or '-' }}</td>
                <td>{{ access.user_agent or '-' }}</td>
              </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="4">No access records yet.</td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </section>
</main>

<script>
  function formatDate(value) {
    if (!value) return '';
    const raw = String(value);
    let date;
    if (/^\d+$/.test(raw)) {
      date = new Date(Number.parseInt(raw, 10));
    } else {
      date = new Date(raw);
    }
    if (Number.isNaN(date.getTime())) return raw;
    return date.toLocaleString(undefined, {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false,
    });
  }

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

  async function loadPreview() {
    const previewBody = document.getElementById('previewBody');
    if (!previewBody) return;

    let url = '{{ share_url }}';
    if (window.location.protocol === 'https:' && url.startsWith('http://')) {
      const parsed = new URL(url);
      if (parsed.host === window.location.host) {
        parsed.protocol = 'https:';
        url = parsed.toString();
      }
    }
    try {
      const response = await fetch(url, { method: 'GET' });
      if (!response.ok) {
        previewBody.innerHTML = '<p class="preview-note">Preview unavailable.</p>';
        return;
      }

      const contentType = (response.headers.get('content-type') || '').toLowerCase();

      if (contentType.startsWith('image/')) {
        previewBody.innerHTML = `<img src="${url}" alt="File preview">`;
        return;
      }
      if (contentType.startsWith('video/')) {
        previewBody.innerHTML = `<video controls src="${url}"></video>`;
        return;
      }
      if (contentType.startsWith('audio/')) {
        previewBody.innerHTML = `<audio controls src="${url}"></audio>`;
        return;
      }
      if (contentType.includes('pdf')) {
        previewBody.innerHTML = `<iframe src="${url}" title="PDF preview" height="260"></iframe>`;
        return;
      }
      if (contentType.startsWith('text/') || contentType.includes('json') || contentType.includes('xml')) {
        const text = await response.text();
        const safe = text
          .replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;');
        previewBody.innerHTML = `<pre>${safe.slice(0, 6000) || 'Empty text file.'}</pre>`;
        return;
      }

      previewBody.innerHTML = `<p class="preview-note">No inline preview for this file type.<br><a href="${url}" target="_blank" rel="noopener">Open file</a></p>`;
    } catch {
      previewBody.innerHTML = '<p class="preview-note">Preview unavailable.</p>';
    }
  }

  loadPreview();

  document.getElementById('copyUrlBtn')?.addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText('{{ share_url }}');
      const btn = document.getElementById('copyUrlBtn');
      if (!btn) return;
      const label = btn.textContent;
      btn.textContent = 'Copied';
      setTimeout(() => { btn.textContent = label; }, 1200);
    } catch {
      alert('Could not copy link.');
    }
  });
</script>
{% endblock %}