{% extends "base.html" %}
{% block body %}
<div class="toolbar">
  <div>
    <h1>Raw-посты</h1>
    <div class="muted">Исходный пост, этап обработки и AI-оценка.</div>
  </div>
</div>
<div class="catalog-layout">
  <section class="panel catalog-main">
    <div class="list-toolbar">
      <div class="muted">Всего: {{ pagination.total }}</div>
    </div>
    <table class="raw-table">
      <tr>
        <th><a class="sort-head {% if sort_headers.id.active %}active {{ sort_headers.id.direction }}{% endif %}" href="{{ sort_headers.id.url }}">#</a></th>
        <th><a class="sort-head {% if sort_headers.source.active %}active {{ sort_headers.source.direction }}{% endif %}" href="{{ sort_headers.source.url }}">Источник</a></th>
        <th><a class="sort-head {% if sort_headers.stage.active %}active {{ sort_headers.stage.direction }}{% endif %}" href="{{ sort_headers.stage.url }}">Этап</a></th>
        <th><a class="sort-head {% if sort_headers.post.active %}active {{ sort_headers.post.direction }}{% endif %}" href="{{ sort_headers.post.url }}">Пост</a></th>
        <th><a class="sort-head {% if sort_headers.ai.active %}active {{ sort_headers.ai.direction }}{% endif %}" href="{{ sort_headers.ai.url }}">AI</a></th>
      </tr>
      {% for p in posts %}
      <tr>
        <td><a class="raw-id" href="/raw/{{ p.id }}">{{ p.id }}</a></td>
        <td class="source-cell">
          <a href="{{ p.original_url }}" target="_blank">{{ p.source_name }}</a>
          <div class="muted">{{ p.source_platform }} · #{{ p.source_tag or "—" }}</div>
          {% if p.posted_at_fmt %}<div class="muted">{{ p.posted_at_fmt }}</div>{% endif %}
        </td>
        <td class="stage-cell">
          <span class="pill {{ p.stage.class }}" title="{{ p.stage.key }}">{{ p.stage.label }}</span>
          {% if p.error_reason %}<div class="muted">{{ p.error_reason }}</div>{% endif %}
        </td>
        <td class="raw-content-cell">
          <div class="media-strip">
            {% for m in p.media_items %}
              {% if m.type == "photo" and m.url %}
              <button class="media-thumb" type="button" data-gallery-src="{{ m.url }}" data-gallery-title="#{{ p.id }} · фото {{ loop.index }}" title="{{ m.status }}">
                <img src="{{ m.url }}" alt="photo">
              </button>
              {% elif m.url %}
              <a class="media-thumb media-video" href="{{ m.url }}" target="_blank" title="{{ m.error or m.status }}">
                <span>▶</span>
              </a>
              {% endif %}
            {% endfor %}
          </div>
          {% if p.media_count %}<div class="muted media-count">{{ p.media_count }} медиа</div>{% endif %}
          {% if p.raw_text|length > 520 %}
          <details class="raw-text-details">
            <summary>{{ p.raw_text[:520] }}...</summary>
            <div class="raw-full-text">{{ p.raw_text }}</div>
          </details>
          {% else %}
          <div class="raw-full-text">{{ p.raw_text }}</div>
          {% endif %}
          <div class="post-meta">Загружен парсером: {{ p.created_at_fmt }}</div>
        </td>
        <td class="ai-cell">
          <a class="ai-badge {{ p.ai_badge.class }}" href="/raw/{{ p.id }}#ai" title="{{ p.ai_badge.reason or p.ai_badge.sublabel }}">
            <span>{{ p.ai_badge.label }}</span>
            <small>итог: {{ p.ai_badge.sublabel }}</small>
          </a>
          {% if p.qualification_model_decision %}<div class="muted ai-model-decision">модель: {{ p.qualification_model_decision }}</div>{% endif %}
          {% if p.rewrite_category %}<div class="muted ai-model-decision">{{ p.rewrite_category }}</div>{% endif %}
        </td>
      </tr>
      {% endfor %}
    </table>
    <div class="list-footer">
      <form class="row per-page-form" method="get" action="/raw">
        {% for item in preserved_query %}
          {% if item.key != "per_page" %}
          <input type="hidden" name="{{ item.key }}" value="{{ item.value }}">
          {% endif %}
        {% endfor %}
        <label><span>На странице</span>
          <select name="per_page" data-autosubmit>
            {% for n in [25,50,100,200] %}
            <option value="{{ n }}" {% if pagination.per_page == n %}selected{% endif %}>{{ n }}</option>
            {% endfor %}
          </select>
        </label>
      </form>
      {% include "pagination.html" %}
    </div>
  </section>

  <aside class="filter-sidebar panel">
    <form method="get" action="/raw" data-filter-form>
      <input type="hidden" name="sort" value="{{ sort }}">
      <div class="filter-head">
        <h2>Фильтры</h2>
        <a href="/raw">Сбросить</a>
      </div>
      <div class="filter-section">
        <div class="filter-title">Оценка AI</div>
        <div class="range-row">
          <input name="score_min" inputmode="numeric" placeholder="От" value="{{ score_min }}">
          <input name="score_max" inputmode="numeric" placeholder="До" value="{{ score_max }}">
        </div>
      </div>
      <div class="filter-section">
        <div class="filter-title">Дата поста</div>
        <div class="range-row">
          <input type="date" name="date_from" value="{{ date_from }}">
          <input type="date" name="date_to" value="{{ date_to }}">
        </div>
      </div>
      <div class="filter-section">
        <div class="filter-title">Источник</div>
        <input class="facet-search" type="search" placeholder="Найти источник" data-facet-search="raw-sources">
        <div class="facet-list" data-facet-list="raw-sources">
          {% for item in facets.sources %}
          <label class="facet-option"><input type="checkbox" name="source_id" value="{{ item.id }}" {% if item.id in source_ids %}checked{% endif %}> <span>{{ item.name }}</span><small>{{ item.count }}</small></label>
          {% endfor %}
        </div>
      </div>
      <div class="filter-section">
        <div class="filter-title">Категория</div>
        <input class="facet-search" type="search" placeholder="Найти категорию" data-facet-search="raw-categories">
        <div class="facet-list" data-facet-list="raw-categories">
          {% for item in facets.categories %}
          <label class="facet-option"><input type="checkbox" name="category" value="{{ item.value }}" {% if item.value in categories_selected %}checked{% endif %}> <span>{{ item.value }}</span><small>{{ item.count }}</small></label>
          {% endfor %}
        </div>
      </div>
      <div class="filter-section">
        <div class="filter-title">Raw-статус</div>
        <div class="facet-list compact">
          {% for item in facets.statuses %}
          <label class="facet-option"><input type="checkbox" name="raw_status" value="{{ item.value }}" {% if item.value in raw_statuses %}checked{% endif %}> <span>{{ item.value }}</span><small>{{ item.count }}</small></label>
          {% endfor %}
        </div>
      </div>
      <div class="filter-section">
        <div class="filter-title">Квалификация</div>
        <div class="facet-list compact">
          {% for item in facets.qualification_statuses %}
          <label class="facet-option"><input type="checkbox" name="qualification_status" value="{{ item.value }}" {% if item.value in qualification_statuses %}checked{% endif %}> <span>{{ item.value }}</span><small>{{ item.count }}</small></label>
          {% endfor %}
        </div>
      </div>
      <div class="filter-section">
        <div class="filter-title">Рерайт</div>
        <div class="facet-list compact">
          {% for item in facets.rewrite_statuses %}
          <label class="facet-option"><input type="checkbox" name="rewrite_status" value="{{ item.value }}" {% if item.value in rewrite_statuses %}checked{% endif %}> <span>{{ item.value }}</span><small>{{ item.count }}</small></label>
          {% endfor %}
        </div>
      </div>
      <button class="btn primary filter-apply" type="submit">Показать</button>
    </form>
  </aside>
</div>
<div class="gallery-modal" id="galleryModal" aria-hidden="true">
  <button class="gallery-close" type="button" aria-label="Закрыть">×</button>
  <button class="gallery-nav gallery-prev" type="button" aria-label="Назад">‹</button>
  <img id="galleryImage" src="" alt="">
  <button class="gallery-nav gallery-next" type="button" aria-label="Вперёд">›</button>
  <div class="gallery-title" id="galleryTitle"></div>
</div>
<script>
(() => {
  const items = Array.from(document.querySelectorAll("[data-gallery-src]"));
  const modal = document.getElementById("galleryModal");
  const image = document.getElementById("galleryImage");
  const title = document.getElementById("galleryTitle");
  let index = 0;

  function show(nextIndex) {
    if (!items.length) return;
    index = (nextIndex + items.length) % items.length;
    const item = items[index];
    image.src = item.dataset.gallerySrc;
    title.textContent = item.dataset.galleryTitle || "";
    modal.classList.add("open");
    modal.setAttribute("aria-hidden", "false");
  }
  function close() {
    modal.classList.remove("open");
    modal.setAttribute("aria-hidden", "true");
    image.src = "";
  }

  items.forEach((item, i) => item.addEventListener("click", () => show(i)));
  modal.querySelector(".gallery-close").addEventListener("click", close);
  modal.querySelector(".gallery-prev").addEventListener("click", () => show(index - 1));
  modal.querySelector(".gallery-next").addEventListener("click", () => show(index + 1));
  modal.addEventListener("click", (event) => { if (event.target === modal) close(); });
  document.addEventListener("keydown", (event) => {
    if (!modal.classList.contains("open")) return;
    if (event.key === "Escape") close();
    if (event.key === "ArrowLeft") show(index - 1);
    if (event.key === "ArrowRight") show(index + 1);
  });
  document.querySelectorAll("[data-autosubmit]").forEach((control) => {
    control.addEventListener("change", () => control.form?.submit());
  });
  document.querySelectorAll("[data-facet-search]").forEach((input) => {
    input.addEventListener("input", () => {
      const list = document.querySelector(`[data-facet-list="${input.dataset.facetSearch}"]`);
      const q = input.value.trim().toLowerCase();
      list?.querySelectorAll(".facet-option").forEach((option) => {
        option.hidden = q && !option.textContent.toLowerCase().includes(q);
      });
    });
  });
})();
</script>
{% endblock %}