{% extends "admin/change_list.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrahead %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'mediaapp/css/browser.css' %}">
  {% endblock %}

{% block result_list %}
  <div class="results media-folder-browser__summary">
    <strong>Unused images:</strong> {{ unused_count|default:0 }}
    {% if unused_count > 0 %}
      <a href="?unused_only=1" class="media-folder-browser__summary-link">Show only unused</a>
    {% endif %}
  </div>

  <div id="media-folder-browser">
    <div class="breadcrumb" id="folder-breadcrumb"></div>
    <div class="view-tabs" id="view-tabs">
      <a href="#" id="view-folder" class="active">Folder</a>
      <a href="#" id="view-table">Table</a>
    </div>
    <div id="folder-browser-content">
      <div id="folder-grid-view">
        <div class="folders-grid" id="folder-list"></div>
        <div class="files-grid" id="file-list"></div>
      </div>
      <div id="folder-table-view" class="media-folder-browser__table-view is-hidden">
        <table class="media-table">
          <thead><tr>
            <th class="media-table__thumb-header"></th>
            <th>Name</th>
            <th>Type</th>
            <th>Status</th>
            <th>Updated</th>
          </tr></thead>
          <tbody id="media-table-body"></tbody>
        </table>
      </div>
      <div class="loading media-folder-browser__loading is-hidden" id="folder-loading">Loading&hellip;</div>
    </div>
  </div>

  <script>
  (function() {
    var apiUrl = '{{ media_browse_api_url|default:"/api/media/admin-browse/"|escapejs }}';
    var changeUrl = '{% url "admin:st_mediaapp_media_changelist" %}';
    var currentPath = '';
    var mediaTypeFilter = new URLSearchParams(window.location.search).get('media_type') || '';
    var currentData = null;
    var tableMode = false;

    function escapeAttr(s) { return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
    function escapeHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
    function typeIcon(t) { return t === 'video' ? '\uD83C\uDFAC' : t === 'pdf' ? '\uD83D\uDCC4' : t === 'audio' ? '\uD83C\uDFB5' : '\uD83D\uDCCE'; }

    function switchView(useTable) {
      tableMode = useTable;
      document.querySelector('#view-folder').classList.toggle('active', !useTable);
      document.querySelector('#view-table').classList.toggle('active', useTable);
      document.getElementById('folder-grid-view').style.display = useTable ? 'none' : '';
      document.getElementById('folder-table-view').style.display = useTable ? '' : 'none';
      if (currentData) renderContent(currentData);
    }

    function renderBreadcrumb(path) {
      var el = document.getElementById('folder-breadcrumb');
      if (!path) { el.innerHTML = '<a href="#" data-path="">Media</a>'; return; }
      var parts = path.split('/');
      var html = '<a href="#" data-path="">Media</a>';
      for (var i = 0; i < parts.length; i++) {
        var p = parts.slice(0, i + 1).join('/');
        html += '<span>/</span><a href="#" data-path="' + escapeAttr(p) + '">' + escapeHtml(parts[i]) + '</a>';
      }
      el.innerHTML = html;
    }

    function renderFolders(folders) {
      document.getElementById('folder-list').innerHTML = folders.map(function(f) {
        return '<a class="folder-item" href="#" data-path="' + escapeAttr(f.path) + '">' +
          '<span class="icon">\uD83D\uDCC1</span><span class="name">' + escapeHtml(f.name) + '</span></a>';
      }).join('');
    }

    function renderFiles(files) {
      document.getElementById('file-list').innerHTML = files.map(function(f) {
        var thumb = f.thumbnail_url
          ? '<img src="' + escapeAttr(f.thumbnail_url) + '" alt="" loading="lazy">'
          : '<span class="file-icon">' + typeIcon(f.media_type) + '</span>';
        var link = changeUrl.replace(/\/?$/, '') + '/' + f.id + '/change/';
        return '<a class="file-item" href="' + escapeAttr(link) + '" title="' + escapeAttr(f.title || f.file_path) + '">' +
          '<div class="thumb-wrap">' + thumb + '</div>' +
          '<span class="name">' + escapeHtml(f.title || f.file_path.split('/').pop() || '\u2014') + '</span></a>';
      }).join('');
    }

    function renderTable(data) {
      var tbody = document.getElementById('media-table-body');
      var html = '';
      (data.folders || []).forEach(function(f) {
        html += '<tr class="folder-row"><td class="thumb-cell">\uD83D\uDCC1</td>' +
          '<td><a href="#" data-path="' + escapeAttr(f.path) + '">' + escapeHtml(f.name) + '</a></td>' +
          '<td>Folder</td><td></td><td></td></tr>';
      });
      (data.files || []).forEach(function(f) {
        var thumb = f.thumbnail_url
          ? '<img src="' + escapeAttr(f.thumbnail_url) + '" alt="" loading="lazy">'
          : '<span class="media-table__status-icon">' + typeIcon(f.media_type) + '</span>';
        var link = changeUrl.replace(/\/?$/, '') + '/' + f.id + '/change/';
        var status = f.usage_count > 0
          ? '<span class="media-table__status--used">\u2713 (' + f.usage_count + ')</span>'
          : '<span class="media-table__status--unused">\u2717</span>';
        html += '<tr><td class="thumb-cell">' + thumb + '</td>' +
          '<td><a href="' + escapeAttr(link) + '">' + escapeHtml(f.title || f.file_path.split('/').pop() || '\u2014') + '</a></td>' +
          '<td>' + escapeHtml(f.media_type) + '</td>' +
          '<td>' + status + '</td>' +
          '<td>' + escapeHtml(f.updated || '') + '</td></tr>';
      });
      if (!html) html = '<tr><td colspan="5" class="media-table__message-row">Empty folder</td></tr>';
      tbody.innerHTML = html;
    }

    function renderContent(data) {
      currentData = data;
      renderBreadcrumb(currentPath);
      if (tableMode) {
        renderTable(data);
      } else {
        renderFolders(data.folders || []);
        renderFiles(data.files || []);
      }
    }

    function loadPath(path) {
      currentPath = path;
      var loading = document.getElementById('folder-loading');
      loading.classList.remove('is-hidden');
      document.getElementById('folder-list').innerHTML = '';
      document.getElementById('file-list').innerHTML = '';
      document.getElementById('media-table-body').innerHTML = '';

      var params = new URLSearchParams();
      if (path) params.set('path', path);
      if (mediaTypeFilter) params.set('media_type', mediaTypeFilter);
      var url = apiUrl + (params.toString() ? '?' + params.toString() : '');
      fetch(url, { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })
        .then(function(r) {
          if (!r.ok) {
            return r.text().then(function(t) {
              try { var j = JSON.parse(t); if (j.traceback) console.error(j.traceback); } catch (_) {}
              throw new Error('Server returned ' + r.status);
            });
          }
          return r.json();
        })
        .then(function(data) { renderContent(data); })
        .catch(function(err) {
          document.getElementById('folder-list').innerHTML = '<p class="loading">Failed to load. Check console for details.</p>';
          document.getElementById('media-table-body').innerHTML = '<tr><td colspan="5" class="media-table__message-row">Failed to load.</td></tr>';
          console.error('Media folder browse failed:', err);
        })
        .finally(function() { loading.classList.add('is-hidden'); });
    }

    // Folder navigation (both views)
    document.getElementById('folder-browser-content').addEventListener('click', function(e) {
      var t = e.target.closest('a[data-path]');
      if (!t) return;
      e.preventDefault();
      var path = t.getAttribute('data-path');
      if (path !== null) loadPath(path);
    });

    // View switching
    document.getElementById('view-tabs').addEventListener('click', function(e) {
      var t = e.target.closest('a');
      if (!t) return;
      e.preventDefault();
      switchView(t.id === 'view-table');
    });

    // Breadcrumb navigation
    document.getElementById('folder-breadcrumb').addEventListener('click', function(e) {
      var t = e.target.closest('a[data-path]');
      if (!t) return;
      e.preventDefault();
      var path = t.getAttribute('data-path');
      if (path !== null) loadPath(path);
    });

    loadPath('');
  })();
  </script>
{% endblock %}