@include(snippets/header)
<div class="pagewrapper">
<div id="main">
  <style>
  .hm-btn {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 3px;
    font-size: 0.85em;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1;
  }
  </style>
  <div class="container" style="padding-top: 20px;">
    <h1>{{ t('hall.manager_title') }}</h1>
    <p style="color: #aaa; margin-bottom: 20px;">{{ t('hall.manager_desc') }}</p>

    <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px;">
      <input type="text" id="new-hall-name" placeholder="{{ t('hall.new_hall_placeholder') }}" style="flex:1;min-width:180px;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:0 10px;height:28px;border-radius:3px;font-family:var(--font);font-size:0.9em;">
      <select id="new-hall-rating" style="background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:0 10px;height:28px;border-radius:3px;font-family:var(--font);font-size:0.9em;">
        <option value="sfw">🟢 SFW</option>
        <option value="nsfw">🔴 NSFW</option>
        <option value="nsfl">💀 NSFL</option>
      </select>
      <span id="new-hall-slug-preview" style="font-size:0.78em;color:#555;min-width:80px;"></span>
      <button id="btn-create-hall" class="hm-btn" style="background:rgba(255,255,255,0.1);color:var(--white);border:1px solid rgba(255,255,255,0.2);font-weight:bold;">{{ t('hall.create_hall_btn') }}</button>
      <span id="create-hall-status" style="font-size:0.8em;color:#888;"></span>
    </div>
    <hr>

    <div id="hall-manager-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 20px;">
      @each(hallsList as h)
      <div class="hall-manager-card" id="hall-card-{{ h.slug }}" data-slug="{{ h.slug }}">
        <div class="hall-manager-image" style="position:relative; height: 140px; overflow:hidden; background:#111; cursor:pointer;" title="{{ t('hall.click_upload_hint') }}">
          <img src="/hall_image/{{ h.slug }}" alt="{!! h.name !!}" style="width:100%;height:100%;object-fit:cover;opacity:0.8;" id="hall-img-{{ h.slug }}">
          <span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.1em;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.05em;text-shadow:0 0 10px rgba(0,0,0,0.9),0 1px 3px rgba(0,0,0,0.8);pointer-events:none;">{!! h.name !!}</span>
          @if(h.custom_image)
          <button class="btn-del-img" title="Remove custom image" style="position:absolute;top:6px;right:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.7);color:#fff;border:1px solid rgba(255,255,255,0.3);border-radius:50%;cursor:pointer;font-size:0.75em;line-height:1;z-index:2;padding:0;">✕</button>
          @endif
          <input type="file" class="hall-img-upload" accept="image/*" style="display:none;">
        </div>
        <div style="padding: 12px;">
          <div style="margin-bottom: 8px;">
            <label style="font-size:0.8em;color:#888;display:block;">{{ t('common.name') }}</label>
            <input type="text" class="hall-name-input" value="{!! h.name !!}" style="width:100%;box-sizing:border-box;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:5px 8px;border-radius:3px;font-family:var(--font);">
          </div>
          <div style="margin-bottom: 8px;">
            <label style="font-size:0.8em;color:#888;display:block;">{{ t('hall.slug') }}</label>
            <input type="text" class="hall-slug-input" value="{!! h.slug !!}" style="width:100%;box-sizing:border-box;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:5px 8px;border-radius:3px;font-family:var(--font);font-size:0.9em;color:#aaa;">
          </div>
          <div style="margin-bottom: 8px;">
            <label style="font-size:0.8em;color:#888;display:block;">{{ t('common.description') }}</label>
            <textarea class="hall-desc-input" style="width:100%;box-sizing:border-box;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:5px 8px;border-radius:3px;font-family:var(--font);resize:vertical;min-height:60px;">{!! h.description || '' !!}</textarea>
          </div>
          <div style="margin-bottom: 8px;">
            <label style="font-size:0.8em;color:#888;display:block;">{{ t('hall.rating') }}</label>
            <select class="hall-rating-input" style="width:100%;box-sizing:border-box;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:5px 8px;border-radius:3px;font-family:var(--font);">
              <option value="sfw" @if(h.rating === 'sfw' || !h.rating) selected @endif>🟢 SFW</option>
              <option value="nsfw" @if(h.rating === 'nsfw') selected @endif>🔴 NSFW</option>
              <option value="nsfl" @if(h.rating === 'nsfl') selected @endif>💀 NSFL</option>
            </select>
          </div>
          <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
            <button class="btn-save-hall hm-btn" style="background:var(--accent);color:#000;border:none;font-weight:bold;">{{ t('common.save') }}</button>
            <a href="/h/{{ h.slug }}" class="hall-view-link hm-btn" style="background:rgba(255,255,255,0.05);color:#aaa;border:1px solid rgba(255,255,255,0.1);">{{ t('common.view') }} →</a>
            <span style="margin-left:4px;font-size:0.8em;color:#666;">{{ t('hall.posts', { count: h.item_count || 0 }) }}</span>
            <button class="btn-delete-hall hm-btn" style="margin-left:auto;background:rgba(200,0,0,0.25);color:#f55;border:1px solid rgba(200,0,0,0.4);">🗑 {{ t('common.delete') }}</button>
          </div>
          <div class="hall-status" style="margin-top:6px;font-size:0.8em;color:#888;min-height:1.2em;"></div>
        </div>
      </div>
      @endeach
    </div>

    @if(!hallsList || !hallsList.length)
    <p style="color:#888;text-align:center;padding:40px 0;">{{ t('hall.no_halls') }}</p>
    @endif
  </div>

<script>
(function() {
  var grid = document.getElementById('hall-manager-grid');
  var i18n = window.f0ckI18n || {};

  // ── Card wiring ─────────────────────────────────────────────────────────
  function wireCard(card) {
    var slug = card.dataset.slug;
    var status = card.querySelector('.hall-status');
    var nameInput = card.querySelector('.hall-name-input');
    var slugInput = card.querySelector('.hall-slug-input');
    var descInput = card.querySelector('.hall-desc-input');
    var ratingInput = card.querySelector('.hall-rating-input');
    var imgEl = card.querySelector('.hall-manager-image img');
    var imgContainer = card.querySelector('.hall-manager-image');
    var fileInput = card.querySelector('.hall-img-upload');
    var viewLink = card.querySelector('.hall-view-link');

    function setStatus(msg, color) {
      status.textContent = msg;
      status.style.color = color || '#aaa';
    }

    // Live name overlay
    var nameOverlay = imgContainer.querySelector('span');
    nameInput.addEventListener('input', function() {
      if (nameOverlay) nameOverlay.textContent = nameInput.value;
    });

    // Auto-sanitize slug on blur
    slugInput.addEventListener('blur', function() {
      slugInput.value = slugInput.value.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
    });

    // Click image → open file picker
    imgContainer.addEventListener('click', function(e) {
      if (e.target.classList.contains('btn-del-img')) return;
      fileInput.click();
    });

    // Save name + slug + description
    card.querySelector('.btn-save-hall').addEventListener('click', async function() {
      setStatus(i18n.hall_saving || 'Saving...');
      var newSlug = slugInput.value.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
      if (!newSlug) { setStatus("✗ " + (i18n.hall_slug_empty_error || 'Slug cannot be empty'), '#f55'); return; }
      try {
        var r = await fetch('/api/v2/admin/halls/' + encodeURIComponent(slug), {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json', 'x-csrf-token': (window.f0ckSession && window.f0ckSession.csrf_token) || '' },
          body: JSON.stringify({ name: nameInput.value, slug: newSlug, description: descInput.value, rating: ratingInput.value })
        });
        var d = await r.json();
        if (d.success) {
          // If slug changed, update all references in the DOM
          if (newSlug !== slug) {
            slug = newSlug;                          // update closure variable — all future fetches use new slug
            card.dataset.slug = newSlug;
            card.id = 'hall-card-' + newSlug;
            imgEl.src = '/hall_image/' + newSlug + '?v=' + Date.now();
            if (viewLink) viewLink.href = '/h/' + newSlug;
            slugInput.value = newSlug;
          }
          setStatus("✓ " + (i18n.hall_saved || 'Saved'), 'var(--accent)');
        } else {
          setStatus('✗ ' + d.msg, '#f55');
        }
      } catch (e) { setStatus("✗ " + (i18n.hall_error || 'Error'), '#f55'); }
    });

    // Upload image
    fileInput.addEventListener('change', async function(e) {
      var file = e.target.files[0];
      if (!file) return;
      setStatus(i18n.uploading || 'Uploading...');
      var fd = new FormData();
      fd.append('file', file);
      try {
        var r = await fetch('/api/v2/admin/halls/' + encodeURIComponent(slug) + '/image', {
          method: 'POST',
          headers: { 'x-csrf-token': (window.f0ckSession && window.f0ckSession.csrf_token) || '' },
          body: fd
        });
        var d = await r.json();
        if (d.success) {
          imgEl.src = '/hall_image/' + slug + '?v=' + Date.now();
          setStatus("✓ " + (i18n.hall_image_uploaded || 'Image uploaded'), 'var(--accent)');
          if (!imgContainer.querySelector('.btn-del-img')) {
            var xBtn = document.createElement('button');
            xBtn.className = 'btn-del-img';
            xBtn.title = i18n.hall_click_upload_hint || 'Click to upload';
            xBtn.textContent = '✕';
            xBtn.style.cssText = 'position:absolute;top:6px;right:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.7);color:#fff;border:1px solid rgba(255,255,255,0.3);border-radius:50%;cursor:pointer;font-size:0.75em;line-height:1;z-index:2;padding:0;';
            imgContainer.appendChild(xBtn);
            wireDelBtn(xBtn);
          }
        } else {
          setStatus('✗ ' + d.msg, '#f55');
        }
      } catch (e) { setStatus("✗ " + (i18n.hall_error || 'Error'), '#f55'); }
      e.target.value = '';
    });

    function wireDelBtn(btn) {
      btn.addEventListener('click', async function(e) {
        e.stopPropagation();
        setStatus(i18n.hall_removing || 'Removing...');
        try {
          var r = await fetch('/api/v2/admin/halls/' + encodeURIComponent(slug) + '/image', {
            method: 'DELETE',
            headers: { 'x-csrf-token': (window.f0ckSession && window.f0ckSession.csrf_token) || '' }
          });
          var d = await r.json();
          if (d.success) {
            imgEl.src = '/hall_image/' + slug + '?v=' + Date.now();
            btn.remove();
            setStatus("✓ " + (i18n.hall_image_removed || 'Image removed'), 'var(--accent)');
          } else { setStatus('✗ ' + d.msg, '#f55'); }
        } catch (e) { setStatus("✗ " + (i18n.hall_error || 'Error'), '#f55'); }
      });
    }

    var existingDelBtn = imgContainer.querySelector('.btn-del-img');
    if (existingDelBtn) wireDelBtn(existingDelBtn);

    // Delete hall
    card.querySelector('.btn-delete-hall').addEventListener('click', async function() {
      var confirmMsg = (i18n.hall_delete_confirm || 'Really delete hall "{slug}"?').replace('{slug}', slug);
      if (!confirm(confirmMsg)) return;
      setStatus(i18n.hall_deleting || 'Deleting...');
      try {
        var r = await fetch('/api/v2/admin/halls/' + encodeURIComponent(slug), {
          method: 'DELETE',
          headers: { 'x-csrf-token': (window.f0ckSession && window.f0ckSession.csrf_token) || '' }
        });
        var d = await r.json();
        if (d.success) {
          card.style.transition = 'opacity 0.3s';
          card.style.opacity = '0';
          setTimeout(function() { card.remove(); }, 300);
        } else { setStatus('✗ ' + d.msg, '#f55'); }
      } catch (e) { setStatus('✗ Error', '#f55'); }
    });
  }

  // Wire all existing cards on load
  document.querySelectorAll('.hall-manager-card').forEach(wireCard);

  // ── Create Hall ──────────────────────────────────────────────────────────
  var newHallName = document.getElementById('new-hall-name');
  var newHallRating = document.getElementById('new-hall-rating');
  var slugPreview = document.getElementById('new-hall-slug-preview');
  var createBtn = document.getElementById('btn-create-hall');
  var createStatus = document.getElementById('create-hall-status');

  function toSlug(s) {
    return s.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
  }

  newHallName.addEventListener('input', function() {
    var slug = toSlug(newHallName.value);
    slugPreview.textContent = slug ? '/' + slug : '';
  });

  function buildCard(name, slug, rating) {
    var ratingOpts = ['sfw','nsfw','nsfl'].map(function(r) {
      return '<option value="' + r + '"' + (r === rating ? ' selected' : '') + '>' + (r === 'sfw' ? '🟢 SFW' : r === 'nsfw' ? '🔴 NSFW' : '💀 NSFL') + '</option>';
    }).join('');
    var div = document.createElement('div');
    div.className = 'hall-manager-card';
    div.id = 'hall-card-' + slug;
    div.dataset.slug = slug;
    div.innerHTML =
      '<div class="hall-manager-image" style="position:relative;height:140px;overflow:hidden;background:#111;cursor:pointer;" title="Click to upload a custom image">' +
        '<img src="/hall_image/' + slug + '" alt="' + name + '" style="width:100%;height:100%;object-fit:cover;opacity:0.8;">' +
        '<span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.1em;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.05em;text-shadow:0 0 10px rgba(0,0,0,0.9),0 1px 3px rgba(0,0,0,0.8);pointer-events:none;">' + name + '</span>' +
        '<input type="file" class="hall-img-upload" accept="image/*" style="display:none;">' +
      '</div>' +
      '<div style="padding:12px;">' +
        '<div style="margin-bottom:8px;"><label style="font-size:0.8em;color:#888;display:block;">' + (i18n.common_name || 'Name') + '</label>' +
          '<input type="text" class="hall-name-input" value="' + name + '" style="width:100%;box-sizing:border-box;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:5px 8px;border-radius:3px;font-family:var(--font);"></div>' +
        '<div style="margin-bottom:8px;"><label style="font-size:0.8em;color:#888;display:block;">' + (i18n.hall_slug || 'Slug') + '</label>' +
          '<input type="text" class="hall-slug-input" value="' + slug + '" style="width:100%;box-sizing:border-box;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:5px 8px;border-radius:3px;font-family:var(--font);font-size:0.9em;color:#aaa;"></div>' +
        '<div style="margin-bottom:8px;"><label style="font-size:0.8em;color:#888;display:block;">' + (i18n.common_description || 'Description') + '</label>' +
          '<textarea class="hall-desc-input" style="width:100%;box-sizing:border-box;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:5px 8px;border-radius:3px;font-family:var(--font);resize:vertical;min-height:60px;"></textarea></div>' +
        '<div style="margin-bottom:8px;"><label style="font-size:0.8em;color:#888;display:block;">' + (i18n.hall_rating || 'Rating') + '</label>' +
          '<select class="hall-rating-input" style="width:100%;box-sizing:border-box;background:var(--badge-bg);border:1px solid rgba(255,255,255,0.15);color:var(--white);padding:5px 8px;border-radius:3px;font-family:var(--font);">' + ratingOpts + '</select></div>' +
        '<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">' +
          '<button class="btn-save-hall hm-btn" style="background:var(--accent);color:#000;border:none;font-weight:bold;">' + (i18n.common_save || 'Save') + '</button>' +
          '<a href="/h/' + slug + '" class="hall-view-link hm-btn" style="background:rgba(255,255,255,0.05);color:#aaa;border:1px solid rgba(255,255,255,0.1);">' + (i18n.common_view || 'View') + ' →</a>' +
          '<span style="margin-left:4px;font-size:0.8em;color:#666;">' + (i18n.hall_posts || '{count} posts').replace('{count}', '0') + '</span>' +
          '<button class="btn-delete-hall hm-btn" style="margin-left:auto;background:rgba(200,0,0,0.25);color:#f55;border:1px solid rgba(200,0,0,0.4);">🗑 ' + (i18n.common_delete || 'Delete') + '</button>' +
        '</div>' +
        '<div class="hall-status" style="margin-top:6px;font-size:0.8em;color:#888;min-height:1.2em;"></div>' +
      '</div>';
    return div;
  }

  async function createHall() {
    var name = newHallName.value.trim();
    if (!name) { createStatus.textContent = i18n.hall_enter_name_error || 'Enter a name'; return; }
    var slug = toSlug(name);
    var rating = newHallRating ? newHallRating.value : 'sfw';
    createStatus.textContent = i18n.hall_creating || 'Creating...';
    createStatus.style.color = '#888';
    try {
      var r = await fetch('/api/v2/admin/halls', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'x-csrf-token': (window.f0ckSession && window.f0ckSession.csrf_token) || '' },
        body: JSON.stringify({ name: name, slug: slug, rating: rating })
      });
      var d = await r.json();
      if (d.success) {
        createStatus.textContent = "✓ " + (i18n.hall_saved || 'Saved') + "!";
        createStatus.style.color = 'var(--accent)';
        var card = buildCard(name, slug, rating);
        grid.appendChild(card);
        wireCard(card);
        // Scroll new card into view
        card.scrollIntoView({ behavior: 'smooth', block: 'center' });
        // Reset form
        newHallName.value = '';
        slugPreview.textContent = '';
        setTimeout(function() { createStatus.textContent = ''; }, 2000);
      } else {
        createStatus.textContent = '✗ ' + d.msg;
        createStatus.style.color = '#f55';
      }
    } catch (e) { createStatus.textContent = "✗ " + (i18n.hall_error || 'Error'); createStatus.style.color = '#f55'; }
  }

  createBtn.addEventListener('click', createHall);
  newHallName.addEventListener('keydown', function(e) { if (e.key === 'Enter') createHall(); });
})();
</script>
</div>
</div>
@include(snippets/footer)