{% extends "base.html" %}
{% block title %}{{ _("Library") }} · {{ _("AssetCacheMCP") }}{% endblock %}

{% block content %}
<div class="library-page" x-data="{}">
  {# 상단 검색 바 — 엔터 또는 검색 버튼 클릭으로만 검색 (자동 디바운스 없음) #}
  <form class="search-bar"
        hx-post="/ui/search-results"
        hx-target="#results"
        hx-swap="innerHTML"
        hx-trigger="submit, load"
        x-data="{}"
        @submit.prevent>
    <input type="search" name="query"
           placeholder="{{ _('Natural language search…  (Enter or 🔍 button)') }}"
           x-model="$store.search.query"
           autocomplete="off" />
    <input type="hidden" name="count" value="20" />
    <input type="hidden" name="offset" value="0" />
    <input type="hidden" name="sort" :value="$store.search.sort" />
    {# Task 3.9 — B 탭 사이드 패널 필터값을 form 직렬화로 서버에 전달 #}
    <input type="hidden" name="match_mode" :value="$store.search.matchMode" />
    <input type="hidden" name="labels" :value="JSON.stringify($store.b.selectedLabels)" />
    <input type="hidden" name="pack_ids" :value="JSON.stringify($store.b.selectedPackIds)" />
    <button type="submit"
            class="search-submit"
            aria-label="{{ _('Search') }}">
      🔍 <span class="label">{{ _("Search") }}</span>
    </button>
    <button type="button"
            class="advanced-toggle"
            :class="{ active: $store.advanced.open }"
            @click="$store.advanced.open = !$store.advanced.open"
            aria-label="{{ _('Advanced') }}">
      ⚙ <span class="label">{{ _("Advanced") }}</span>
    </button>
  </form>

  <div class="library-body">
    {# 결과 영역 #}
    <section class="results-section">
      <div id="results" class="results">
        {# hx-trigger="load" 가 페이지 로드 시 즉시 호출되어 디폴트 결과를 채움 #}
      </div>
    </section>

    {# 우측 사이드 패널 (Phase 3 가 B/C/D 탭 채움) #}
    <aside class="side-panel"
           x-show="$store.advanced.open"
           x-transition:enter="side-panel-enter"
           x-transition:enter-start="translate-x-full"
           x-transition:enter-end="translate-x-0"
           x-transition:leave="side-panel-enter"
           x-transition:leave-start="translate-x-0"
           x-transition:leave-end="translate-x-full"
           :style="{ width: $store.advanced.sidePanelWidth + 'px' }">
      {# 리사이즈 핸들 — 왼쪽 가장자리 드래그로 폭 240~640px 조절 #}
      <div class="resize-handle"
           x-data="resizeHandle()"
           @mousedown.prevent="startDrag($event)"
           @mousemove.window="onDrag($event)"
           @mouseup.window="stopDrag"></div>

      {# ✕ 닫기 — 우상단 corner (탭과 시각적 분리). 좁은 화면 fixed full-height
         상태에서도 dead-end 회피. #}
      <button class="side-panel-close"
              @click="$store.advanced.open = false"
              aria-label="{{ _('Close') }}">✕</button>

      {# B/C/D 탭 헤더 #}
      <nav class="side-tabs">
        <button @click="$store.advanced.activeTab='b'"
                :class="{ active: $store.advanced.activeTab === 'b' }">{{ _("B Filters") }}</button>
        <button @click="$store.advanced.activeTab='c'"
                :class="{ active: $store.advanced.activeTab === 'c' }">{{ _("C Display") }}</button>
        <button @click="$store.advanced.activeTab='d'"
                :class="{ active: $store.advanced.activeTab === 'd' }">{{ _("D Adjust") }}</button>
      </nav>

      {# B/C/D 탭 컨테이너 — Jinja include 로 모두 렌더, Alpine x-show 로 가시성 제어 #}
      <div class="side-tab-content" x-show="$store.advanced.activeTab === 'b'">
        {% include "_side_panel_b.html" %}
      </div>
      <div class="side-tab-content" x-show="$store.advanced.activeTab === 'c'">
        {% include "_side_panel_c.html" %}
      </div>
      <div class="side-tab-content" x-show="$store.advanced.activeTab === 'd'">
        {% include "_side_panel_d.html" %}
      </div>
    </aside>
  </div>

  {# M5 Phase 4B — Claude pick 요청 카드 컨테이너.
     SSE user_pick_request 수신 시 htmx.ajax 로 /ui/pick-card/{rid} 를
     afterbegin 으로 삽입한다. 빈 상태에서는 DOM 에 존재하지만 숨겨지지 않는다. #}
  <div id="pick-cards"></div>

  {# 자산 상세 모달 — Task 2.10 #}
  <div id="asset-detail-modal" class="modal-container"></div>
</div>

{# 라이브러리 페이지 한정 Alpine 컴포넌트 #}
<script>
  function resizeHandle() {
    return {
      dragging: false,
      startX: 0,
      startW: 0,
      startDrag(e) {
        this.dragging = true;
        this.startX = e.clientX;
        this.startW = Alpine.store('advanced').sidePanelWidth;
      },
      onDrag(e) {
        if (this.dragging) {
          Alpine.store('advanced').sidePanelWidth = Math.max(
            240,
            Math.min(640, this.startW + (this.startX - e.clientX))
          );
        }
      },
      stopDrag() { this.dragging = false; },
    };
  }

  /* 반응형: 768px 이하에서 사이드 패널 자동 닫힘 (Task 3.16) */
  window.addEventListener('resize', function() {
    if (window.innerWidth <= 768) {
      /* resize 이벤트는 Alpine 초기화 후 발생하므로 직접 store 조작 */
      if (typeof Alpine !== 'undefined' && Alpine.store) {
        try {
          if (Alpine.store('advanced').open) {
            Alpine.store('advanced').open = false;
          }
        } catch (e) { /* Alpine 미초기화 시 무시 */ }
      }
    }
  });
</script>
{% endblock %}