{% extends "base.html" %}
{% block title %}画像ビューア - 画像収集クローラー{% endblock %}
{% block nav %}{% endblock %}
{% block content %}
<style>
  main { padding: 0 !important; max-width: none !important; }
  .viewer-page {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    z-index: 100;
  }
  .viewer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(15, 17, 23, 0.92);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .viewer-top .meta {
    color: var(--muted);
    font-size: 0.85rem;
  }
  .viewer-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.5rem;
    min-height: 0;
    position: relative;
  }
  .viewer-stage img,
  .viewer-stage video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .viewer-stage.emergency-hide img,
  .viewer-stage.emergency-hide video {
    visibility: hidden;
    pointer-events: none;
  }
  .emergency-hide-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: #0f1117;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--muted);
    z-index: 5;
    font-size: 0.95rem;
  }
  .emergency-hide-overlay.active {
    display: flex;
  }
  .emergency-hide-badge {
    display: none;
    background: #3a1a1a;
    border: 1px solid var(--danger);
    color: #ff8a8a;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
  }
  .emergency-hide-badge.active {
    display: inline-block;
  }
  .key-hint {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
    margin-top: 0.25rem;
  }
  .viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(15, 17, 23, 0.95);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .viewer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 4.5rem;
    padding: 0.65rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
  }
  .viewer-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
  }
  .viewer-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .viewer-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    font-weight: 600;
  }
  .viewer-btn.danger {
    border-color: var(--danger);
    color: var(--danger);
  }
  .viewer-btn.favorite.active {
    background: #3a1a2a;
    border-color: #ff6b9d;
    color: #ff8fab;
  }
  .viewer-btn.crown.active {
    background: #3a2f1a;
    border-color: #ffd43b;
    color: #ffe066;
  }
  .viewer-btn.icon-only {
    min-width: 3rem;
    padding: 0.65rem;
    font-size: 1.25rem;
  }
  .viewer-empty {
    color: var(--muted);
    text-align: center;
    line-height: 1.8;
  }
  .viewer-side-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    max-height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    text-decoration: none;
    z-index: 3;
    transition: border-color 0.15s, background 0.15s;
  }
  .viewer-side-nav:hover { border-color: var(--accent); background: rgba(108,158,255,0.12); }
  .viewer-side-nav img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0.8; }
  .viewer-side-nav:hover img { opacity: 1; }
  .viewer-side-prev { left: 0.75rem; }
  .viewer-side-next { right: 0.75rem; }
  .viewer-side-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 6px #000;
    pointer-events: none;
  }
  .viewer-side-prev .viewer-side-arrow { left: 0.3rem; }
  .viewer-side-next .viewer-side-arrow { right: 0.3rem; }
  @media (max-width: 900px) {
    .viewer-side-nav { width: 128px; }
    .viewer-side-arrow { font-size: 1.3rem; }
  }
  .rare-banner {
    background: linear-gradient(90deg, #3a2f1a, #2a2418);
    border: 1px solid #ffd43b;
    color: #ffd43b;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
  }
</style>

<div class="viewer-page" id="viewer-page"
     data-image-id="{{ image.id }}"
     data-status-filter="{{ status_filter }}"
     data-rare-only="{{ 'true' if rare_only else 'false' }}"
     data-media-filter="{{ media_filter }}"
     data-thread-id="{{ thread_id or '' }}"
     data-sort="{{ sort }}"
     data-prev-id="{{ nav.prev_id or '' }}"
     data-next-id="{{ nav.next_id or '' }}"
     data-is-favorite="{{ 'true' if is_favorite else 'false' }}"
     data-is-legendary="{{ 'true' if is_legendary else 'false' }}"
     data-can-delete="{{ 'true' if can_delete else 'false' }}">

  <div class="viewer-top">
    <a href="/{{ list_query(status_filter, rare_only, media_filter, thread_id, sort) }}" class="viewer-btn primary">閉じる</a>
    <a href="/album" class="viewer-btn" style="font-size:0.85rem;">アルバムモード</a>
    <div class="meta">
      {{ nav.position }} / {{ nav.total }}
      · レス {{ image.res_no }}
      {% if image.file_size %}· {{ format_bytes(image.file_size) }}{% endif %}
    </div>
    <span class="meta">{{ image.status.value }}</span>
    {% if is_legendary %}
    <span class="rare-banner">👑 殿堂入り</span>
    {% endif %}
    {% if is_rare %}
    <span class="rare-banner">★ レア（元サイトから消えた画像）</span>
    {% endif %}
    <span class="emergency-hide-badge" id="emergency-hide-badge">緊急ハイド中</span>
  </div>

  <div class="viewer-stage" id="viewer-stage">
    <div class="emergency-hide-overlay" id="emergency-hide-overlay">
      <div style="font-size:1.5rem;opacity:0.5;">🙈</div>
      <div>非表示中</div>
      <div style="font-size:0.8rem;">テンキー2で解除</div>
    </div>
    {% if nav.prev_id %}
    <a href="/view/{{ nav.prev_id }}{{ list_query(status_filter, rare_only, media_filter, thread_id, sort) }}"
       class="viewer-side-nav viewer-side-prev" title="前の画像へ">
      <span class="viewer-side-arrow">‹</span>
      <img src="/thumb/{{ nav.prev_id }}" alt="前の画像" loading="lazy"
           onerror="this.style.display='none'">
    </a>
    {% endif %}
    {% if nav.next_id %}
    <a href="/view/{{ nav.next_id }}{{ list_query(status_filter, rare_only, media_filter, thread_id, sort) }}"
       class="viewer-side-nav viewer-side-next" title="次の画像へ">
      <img src="/thumb/{{ nav.next_id }}" alt="次の画像" loading="lazy"
           onerror="this.style.display='none'">
      <span class="viewer-side-arrow">›</span>
    </a>
    {% endif %}
    {% if is_video and has_media %}
    <video id="viewer-media" src="/original/{{ image.id }}" controls autoplay playsinline preload="auto"></video>
    {% elif has_media %}
    <img id="viewer-media" src="/original/{{ image.id }}" alt="画像 {{ image.id }}">
    {% elif image.thumb_path and file_exists(image.thumb_path) %}
    <img id="viewer-media" src="/thumb/{{ image.id }}" alt="サムネイル {{ image.id }}">
    {% else %}
    <div class="viewer-empty">
      ファイルがありません<br>
      <span style="font-size:0.85rem;">{{ image.error_message or '' }}</span>
    </div>
    {% endif %}
  </div>

  <div class="viewer-toolbar">
    <a href="{% if nav.prev_id %}/view/{{ nav.prev_id }}{{ list_query(status_filter, rare_only, media_filter, thread_id, sort) }}{% else %}#{% endif %}"
       class="viewer-btn {% if not nav.prev_id %}disabled{% endif %}"
       id="btn-prev" {% if not nav.prev_id %}aria-disabled="true" onclick="return false"{% endif %}>
      ← 前へ
    </a>

    <button type="button" class="viewer-btn icon-only favorite {% if is_favorite %}active{% endif %}"
            id="btn-favorite" title="お気に入り" aria-label="お気に入り">
      ♥
    </button>

    <button type="button" class="viewer-btn icon-only crown {% if is_legendary %}active{% endif %}"
            id="btn-legendary" title="殿堂入り" aria-label="殿堂入り">
      👑
    </button>

    <button type="button" class="viewer-btn icon-only danger"
            id="btn-delete" title="{% if is_rare %}レア画像は削除できません{% elif is_favorite %}お気に入りは削除できません{% else %}削除{% endif %}" aria-label="削除"
            {% if not can_delete %}disabled{% endif %}>
      🗑
    </button>

    {% if has_media %}
    <button type="button" class="viewer-btn icon-only" title="別窓で開く（枠なし）" aria-label="別窓で開く"
            onclick="openMediaWindow('/original/{{ image.id }}')">
      🗔
    </button>
    {% endif %}

    <a href="{% if nav.next_id %}/view/{{ nav.next_id }}{{ list_query(status_filter, rare_only, media_filter, thread_id, sort) }}{% else %}#{% endif %}"
       class="viewer-btn {% if not nav.next_id %}disabled{% endif %}"
       id="btn-next" {% if not nav.next_id %}aria-disabled="true" onclick="return false"{% endif %}>
      次へ →
    </a>
  </div>
  <div class="key-hint">テンキー 0=♥　1=削除　2=緊急ハイド　3=👑殿堂入り</div>
</div>

<script>
(function() {
  const page = document.getElementById('viewer-page');
  const imageId = page.dataset.imageId;
  const rareOnly = page.dataset.rareOnly === 'true';
  const mediaFilter = page.dataset.mediaFilter || '';
  const listUrl = '/' + {{ list_query(status_filter, rare_only, media_filter, thread_id, sort) | tojson }};

  function viewUrl(id) {
    let q = {{ list_query(status_filter, rare_only, media_filter, thread_id, sort) | tojson }};
    return '/view/' + id + q;
  }

  let emergencyHide = false;

  function toggleEmergencyHide() {
    emergencyHide = !emergencyHide;
    const stage = document.getElementById('viewer-stage');
    const overlay = document.getElementById('emergency-hide-overlay');
    const badge = document.getElementById('emergency-hide-badge');
    const video = document.getElementById('viewer-media');
    stage.classList.toggle('emergency-hide', emergencyHide);
    overlay.classList.toggle('active', emergencyHide);
    badge.classList.toggle('active', emergencyHide);
    if (video && video.tagName === 'VIDEO') {
      if (emergencyHide) {
        video.muted = true;
        video.pause();
      }
    }
  }

  function applyFavoriteState(data) {
    document.getElementById('btn-favorite').classList.toggle('active', data.is_favorite);
    document.getElementById('btn-legendary').classList.toggle('active', data.is_legendary);
    document.getElementById('btn-delete').disabled = !data.can_delete;
    page.dataset.canDelete = data.can_delete ? 'true' : 'false';
    page.dataset.isFavorite = data.is_favorite ? 'true' : 'false';
    page.dataset.isLegendary = data.is_legendary ? 'true' : 'false';
  }

  async function toggleFavorite() {
    try {
      const r = await fetch('/api/images/' + imageId + '/favorite', { method: 'POST' });
      if (!r.ok) return;
      applyFavoriteState(await r.json());
    } catch (e) {}
  }

  async function toggleLegendary() {
    try {
      const r = await fetch('/api/images/' + imageId + '/legendary', { method: 'POST' });
      if (!r.ok) return;
      applyFavoriteState(await r.json());
    } catch (e) {}
  }

  async function deleteImage(skipConfirm) {
    if (page.dataset.canDelete !== 'true') return;
    if (!skipConfirm && !confirm('この画像を削除しますか？')) return;
    try {
      const url = '/api/images/' + imageId + '/delete' + {{ list_query(status_filter, rare_only, media_filter, thread_id, sort) | tojson }};
      const r = await fetch(url, { method: 'POST' });
      if (!r.ok) {
        const err = await r.json().catch(() => ({}));
        alert(err.detail || '削除できませんでした');
        return;
      }
      const data = await r.json();
      if (data.next_id) {
        window.location.href = viewUrl(data.next_id);
      } else {
        window.location.href = listUrl;
      }
    } catch (e) {
      window.location.href = listUrl;
    }
  }

  document.getElementById('btn-favorite').addEventListener('click', () => toggleFavorite());

  document.getElementById('btn-legendary').addEventListener('click', () => toggleLegendary());

  document.getElementById('btn-delete').addEventListener('click', () => deleteImage(false));

  document.addEventListener('keydown', (e) => {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;

    if (e.code === 'Numpad0') {
      e.preventDefault();
      toggleFavorite();
      return;
    }
    if (e.code === 'Numpad1') {
      e.preventDefault();
      deleteImage(true);
      return;
    }
    if (e.code === 'Numpad2') {
      e.preventDefault();
      toggleEmergencyHide();
      return;
    }
    if (e.code === 'Numpad3') {
      e.preventDefault();
      toggleLegendary();
      return;
    }

    if (e.key === 'Escape') {
      if (emergencyHide) {
        e.preventDefault();
        toggleEmergencyHide();
        return;
      }
      window.location.href = listUrl;
    } else if (e.key === 'ArrowLeft' && page.dataset.prevId) {
      window.location.href = viewUrl(page.dataset.prevId);
    } else if (e.key === 'ArrowRight' && page.dataset.nextId) {
      window.location.href = viewUrl(page.dataset.nextId);
    }
  });
})();
</script>
{% endblock %}