{% extends "base.html" %}
{% block title %}画像一覧 - 画像収集クローラー{% endblock %}
{% block nav %}
<nav>
  <span class="brand">画像収集クローラー</span>
  <a href="/" class="active">画像一覧</a>
  <a href="/boards">掲示板別</a>
  <a href="/bookmarks">ブックマーク</a>
  <a href="/album">アルバムモード</a>
  <a href="/threads">スレッド管理</a>
  <a href="/settings">設定</a>
  <div id="job-status" class="job-status hidden">
    <span class="spinner"></span>
    <span id="job-status-text">処理中...</span>
  </div>
  <a href="/logout">ログアウト</a>
</nav>
{% endblock %}
{% block content %}
<style>
  body.index-liquid main { max-width: none; padding: 1rem 1.25rem 2rem; }
  .image-liquid-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
  }
  .image-card {
    width: 260px;
    flex: 0 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  .image-card.rare-card { border-color: #ffd43b; box-shadow: 0 0 0 1px rgba(255,212,59,0.25); }
  .image-card-thumb {
    height: 170px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .image-index {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    z-index: 3;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.35rem;
    border-radius: 4px;
    background: rgba(0,0,0,0.72);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .image-badge-left {
    position: absolute;
    top: 0.4rem;
    left: 2.4rem;
    z-index: 2;
  }
  .image-favorite-stack {
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
  }
  .image-favorite {
    font-size: 1.2rem;
    color: #ff6b9d;
    text-shadow: 0 1px 4px #000;
  }
  .image-crown {
    font-size: 1.05rem;
    color: #ffd43b;
    text-shadow: 0 1px 4px #000;
  }
  .image-card-link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
  }
  .image-card-link img {
    max-height: 170px;
    max-width: 100%;
    object-fit: contain;
  }
  .video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0,0,0,0.25);
  }
  .video-overlay span {
    font-size: 2.2rem;
    color: #fff;
    text-shadow: 0 2px 8px #000;
  }
  .image-card-placeholder {
    flex-direction: column;
    color: var(--muted);
    font-size: 0.85rem;
    gap: 0.3rem;
  }
  .image-card-placeholder div:first-child { font-size: 2rem; }
  .image-card-nothumb { color: var(--muted); font-size: 0.85rem; }
  .image-card-body { padding: 0.65rem 0.75rem 0.75rem; }
  .image-card-source {
    margin-bottom: 0.5rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--border);
  }
  .badge.source-badge {
    background: #1a2540;
    color: var(--accent);
    margin-bottom: 0.3rem;
  }
  .image-card-thread-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .image-card-thread-url {
    font-size: 0.75rem;
    margin-top: 0.2rem;
    max-width: 100%;
  }
  .image-card-thread-url a { color: var(--accent); text-decoration: none; }
  .image-card-badges {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
  }
  .image-card-meta {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.55;
  }
  .image-card-meta a { color: var(--accent); text-decoration: none; }
  .image-card-error { color: var(--danger); margin-top: 0.25rem; }
  .image-card-actions {
    margin-top: 0.55rem;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
  }
  .image-card-actions form { display: inline; }
  .btn-sm { font-size: 0.72rem; padding: 0.18rem 0.45rem; }
  .image-card-hint { font-size: 0.72rem; color: var(--muted); }
  .infinite-sentinel {
    width: 100%;
    flex: 1 1 100%;
    text-align: center;
    padding: 1.25rem 0 0.5rem;
    color: var(--muted);
    font-size: 0.85rem;
  }
  .infinite-sentinel.loading .spinner { display: inline-block; vertical-align: middle; margin-right: 0.4rem; }
  .infinite-sentinel.hidden { display: none; }
</style>
<script>document.body.classList.add('index-liquid');</script>

{% if fetch_ok %}
<div class="alert alert-success" style="margin-bottom:1rem;">
  ♥ {{ fetch_msg or 'お気に入りに保存しました' }}
  <a href="/view/{{ fetch_ok }}?status=お気に入り" style="color:var(--accent);margin-left:0.5rem;">開く</a>
</div>
{% endif %}
{% if fetch_error %}
<div class="alert alert-error" style="margin-bottom:1rem;">{{ fetch_error }}</div>
{% endif %}

<div style="background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0.75rem 1rem;margin-bottom:1rem;">
  <form method="post" action="/fetch-url" class="busy-form" data-busy-message="URLから取得中..." style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;">
    <label style="font-size:0.85rem;white-space:nowrap;font-weight:500;">単体取得 ♥</label>
    <input type="url" name="url" required placeholder="https://example.com/image.jpg または .mp4 など" style="flex:1;min-width:220px;">
    <button type="submit" class="btn btn-primary">保存</button>
  </form>
  <p style="color:var(--muted);font-size:0.78rem;margin-top:0.5rem;line-height:1.5;">
    jpg / png / gif / webp / bmp / mp4 / mov のURLを貼ると、自動で<strong>お気に入り</strong>として保存します。以前削除したURLは再取得しません。
  </p>
</div>

<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;flex-wrap:wrap;gap:1rem;">
  <div>
    {% if board_thread %}
    <div style="margin-bottom:0.4rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
      <span class="badge source-badge" style="background:#1a2540;color:var(--accent);">{{ thread_board_label(board_thread.board_type) }}</span>
      <span style="font-size:0.9rem;font-weight:600;">{{ thread_display_title(board_thread) }}</span>
      <a href="/{{ list_query(status_filter, rare_only, media_filter) }}" class="btn btn-sm">絞り込み解除</a>
    </div>
    {% endif %}
    <h1>メディア一覧
      <span style="color:var(--muted);font-size:0.9rem;">
        ({{ stats.total_count }}件 / {{ format_bytes(stats.total_size) }})
      </span>
    </h1>
    <div style="color:var(--muted);font-size:0.85rem;margin-top:0.3rem;line-height:1.6;">
      <div>保存済み: {{ stats.saved_count }}件 / {{ format_bytes(stats.total_size) }}</div>
      {% if status_filter %}
      <div>全体: {{ all_stats.total_count }}件 / {{ format_bytes(all_stats.total_size) }}</div>
      {% endif %}
    </div>
  </div>
  <form method="post" action="/crawl-now" class="busy-form" data-busy-message="スレッドをチェック中..." style="display:inline;">
    <button type="submit" class="btn btn-primary">今すぐチェック</button>
  </form>
</div>

<div style="margin-bottom:0.75rem;display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;">
  <span style="font-size:0.82rem;color:var(--muted);margin-right:0.15rem;">種別</span>
  <a href="/{{ list_query(status_filter, rare_only, '', thread_id, sort, save_filter) }}" class="btn {% if not media_filter %}btn-primary{% endif %}">すべて</a>
  <a href="/{{ list_query(status_filter, rare_only, 'image', thread_id, sort, save_filter) }}" class="btn {% if media_filter == 'image' %}btn-primary{% endif %}">🖼 画像 ({{ image_count }})</a>
  <a href="/{{ list_query(status_filter, rare_only, 'video', thread_id, sort, save_filter) }}" class="btn {% if media_filter == 'video' %}btn-primary{% endif %}">▶ 動画 ({{ video_count }})</a>
  <span style="font-size:0.82rem;color:var(--muted);margin:0 0.15rem 0 0.5rem;">並び順</span>
  <a href="/{{ list_query(status_filter, rare_only, media_filter, thread_id, '', save_filter) }}" class="btn {% if sort != 'size' %}btn-primary{% endif %}">新着順</a>
  <a href="/{{ list_query(status_filter, rare_only, media_filter, thread_id, 'size', save_filter) }}" class="btn {% if sort == 'size' %}btn-primary{% endif %}">容量が大きい順</a>
</div>

<div style="margin-bottom:1rem;display:flex;gap:0.5rem;flex-wrap:wrap;">
  <a href="/{{ list_query('', False, media_filter, thread_id, sort, save_filter) }}" class="btn {% if not status_filter and not rare_only %}btn-primary{% endif %}">すべて</a>
  <a href="/{{ list_query('', True, media_filter, thread_id, sort, save_filter) }}" class="btn {% if rare_only %}btn-primary{% endif %}">★レア ({{ rare_count }})</a>
  {% for st in statuses %}
  <a href="/{{ list_query(st.value, False, media_filter, thread_id, sort, save_filter) }}" class="btn {% if status_filter == st.value %}btn-primary{% endif %}">{{ st.value }}</a>
  {% endfor %}
</div>

{% if save_filter == 'pending' %}
<div class="alert" style="background:#1a2540;color:var(--accent);margin-bottom:1rem;display:flex;align-items:center;gap:0.75rem;">
  <span>ダウンロード待ちの画像だけを表示中</span>
  <a href="/{{ list_query(status_filter, rare_only, media_filter, thread_id, sort, '') }}" class="btn btn-sm">解除</a>
</div>
{% endif %}

<div id="image-grid" class="image-liquid-grid"
     data-total="{{ total }}"
     data-loaded="{{ images|length }}"
     data-chunk-size="{{ chunk_size }}"
     data-status="{{ status_filter }}"
     data-rare="{{ '1' if rare_only else '0' }}"
     data-media="{{ media_filter }}"
     data-thread="{{ thread_id or '' }}"
     data-sort="{{ sort }}"
     data-save="{{ save_filter }}">
  {% if images %}
  {% with start_index=1 %}
  {% include "partials/image_cards.html" %}
  {% endwith %}
  {% else %}
  <p style="color:var(--muted);flex:1 1 100%;">画像がありません。スレッドを登録して監視を開始してください。</p>
  {% endif %}
  <div id="infinite-sentinel" class="infinite-sentinel{% if images|length >= total %} hidden{% endif %}">
    <span class="spinner" style="display:none;"></span>
    <span class="sentinel-text">スクロールで続きを読み込み…</span>
  </div>
</div>

<script>
(function () {
  const grid = document.getElementById('image-grid');
  const sentinel = document.getElementById('infinite-sentinel');
  if (!grid || !sentinel) return;

  let offset = parseInt(grid.dataset.loaded || '0', 10);
  const total = parseInt(grid.dataset.total || '0', 10);
  const chunkSize = parseInt(grid.dataset.chunkSize || '100', 10);
  let loading = false;

  function buildChunkUrl() {
    const params = new URLSearchParams({
      offset: String(offset),
      limit: String(chunkSize),
    });
    if (grid.dataset.status) params.set('status', grid.dataset.status);
    if (grid.dataset.rare === '1') params.set('rare', '1');
    if (grid.dataset.media) params.set('media', grid.dataset.media);
    if (grid.dataset.thread) params.set('thread_id', grid.dataset.thread);
    if (grid.dataset.sort) params.set('sort', grid.dataset.sort);
    if (grid.dataset.save) params.set('save', grid.dataset.save);
    return '/api/images/chunk?' + params.toString();
  }

  async function loadMore() {
    if (loading || offset >= total) return;
    loading = true;
    sentinel.classList.add('loading');
    sentinel.querySelector('.spinner').style.display = 'inline-block';
    sentinel.querySelector('.sentinel-text').textContent = '読み込み中…';
    try {
      const res = await fetch(buildChunkUrl());
      if (!res.ok) throw new Error('load failed');
      const html = await res.text();
      if (html.trim()) {
        sentinel.insertAdjacentHTML('beforebegin', html);
        const added = (html.match(/class="image-card"/g) || []).length;
        offset += added;
        grid.dataset.loaded = String(offset);
      }
      if (offset >= total) {
        sentinel.classList.add('hidden');
      } else {
        sentinel.querySelector('.sentinel-text').textContent =
          offset + ' / ' + total + ' 件 — スクロールで続きを読み込み…';
      }
    } catch (e) {
      sentinel.querySelector('.sentinel-text').textContent = '読み込みに失敗しました。スクロールで再試行';
    } finally {
      loading = false;
      sentinel.classList.remove('loading');
      sentinel.querySelector('.spinner').style.display = 'none';
    }
  }

  const observer = new IntersectionObserver((entries) => {
    if (entries.some((e) => e.isIntersecting)) loadMore();
  }, { rootMargin: '800px 0px' });

  if (offset < total) {
    observer.observe(sentinel);
    sentinel.querySelector('.sentinel-text').textContent =
      offset + ' / ' + total + ' 件 — スクロールで続きを読み込み…';
  }
})();
</script>
{% endblock %}