{% extends "bookkeeper/base.html" %}
{% load static %}

{% block title %}{{ book.title }} — Reader{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'bookkeeper/css/reader.css' %}">
{% endblock %}

{% block content %}
<div class="bk-reader" id="bk-reader"
     data-slug="{{ book.slug }}"
     data-format="{{ book.format }}"
     data-file-url="{{ book.file.url }}"
     data-position="{{ progress.position|default:'' }}"
     data-page="{{ progress.page_number|default:1 }}"
     data-highlights="{{ highlights_json }}"
     data-bookmarks="{{ bookmarks_json }}"
     data-snippets="{{ snippets_json }}"
     data-settings='{"fontSize":{{ reader_settings.font_size }},"fontFamily":"{{ reader_settings.font_family }}","lineHeight":{{ reader_settings.line_height }},"theme":"{{ reader_settings.theme }}","columnWidth":"{{ reader_settings.column_width }}"}'
     data-has-chapters="{{ has_chapters|yesno:'true,false' }}"
     data-chapter-count="{{ chapter_count }}"
     data-chapter-index="{{ initial_chapter_index }}"
     {% if has_chapters %}data-url-chapter="{% url 'bookkeeper:api_chapter' book.slug 0 %}"{% endif %}
     data-url-progress="{% url 'bookkeeper:api_progress' book.slug %}"
     data-url-rate="{% url 'bookkeeper:api_rate' book.slug %}"
     data-url-finish="{% url 'bookkeeper:api_finish' book.slug %}"
     data-url-highlight-create="{% url 'bookkeeper:api_highlight_create' book.slug %}"
     data-url-bookmark-create="{% url 'bookkeeper:api_bookmark_create' book.slug %}"
     data-url-snippet-create="{% url 'bookkeeper:api_snippet_create' book.slug %}"
     data-url-reader-settings="{% url 'bookkeeper:api_reader_settings' %}"
     {% if book.format == 'cbr' %}data-url-comic-page="{% url 'bookkeeper:api_comic_page' book.slug 0 %}"{% endif %}>

  <!-- Top toolbar -->
  <header class="bk-reader-header">
    <div class="bk-reader-header-left">
      <a href="{{ book.get_absolute_url }}" class="bk-reader-back" title="Back to book details">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="15 18 9 12 15 6"/>
        </svg>
      </a>
      <div class="bk-reader-book-info">
        <span class="bk-reader-title">{{ book.title }}</span>
        {% if book.author %}<span class="bk-reader-author">{{ book.author }}</span>{% endif %}
      </div>
    </div>

    <div class="bk-reader-header-center">
      <span class="bk-reader-progress-text" id="reader-progress-text">
        <span id="reader-loc-text">p.{{ progress.page_number|default:1 }}</span>
        · <span id="current-pct">{{ progress.percentage|floatformat:0|default:0 }}</span>%
      </span>
    </div>

    <div class="bk-reader-header-right">
      <button class="bk-reader-btn" id="btn-bookmark" title="Add bookmark">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
        </svg>
      </button>
      <button class="bk-reader-btn" id="btn-toc" title="Table of contents">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/>
          <line x1="8" y1="18" x2="21" y2="18"/>
          <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/>
          <line x1="3" y1="18" x2="3.01" y2="18"/>
        </svg>
      </button>
      <button class="bk-reader-btn" id="btn-fit-width" title="Fit to full width">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 9H3M21 15H3"/><path d="M4 6l-2 3 2 3"/><path d="M20 6l2 3-2 3"/>
        </svg>
      </button>
      <button class="bk-reader-btn" id="btn-fullscreen" title="Toggle full-screen">
        <svg id="icon-fullscreen-enter" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
        </svg>
        <svg id="icon-fullscreen-exit" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" hidden>
          <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
        </svg>
      </button>
      <button class="bk-reader-btn" id="btn-settings" title="Reader settings">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="3"/>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
        </svg>
      </button>
    </div>
  </header>

  <!-- Progress bar strip -->
  <div class="bk-reader-progress-strip">
    <div class="bk-reader-progress-fill" id="reader-progress-fill"
         style="width: {{ progress.percentage|default:0 }}%"></div>
  </div>

  <!-- Footer with prev/next chapter buttons for touch nav -->
  <footer class="bk-reader-footer" id="reader-footer" aria-label="Reader navigation">
    <button class="bk-reader-btn bk-nav-footer-btn" id="footer-prev" title="Previous chapter" disabled>
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
    </button>
    <span class="bk-reader-progress-text" id="footer-loc-text">—</span>
    <button class="bk-reader-btn bk-nav-footer-btn" id="footer-next" title="Next chapter" disabled>
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
    </button>
  </footer>

  <!-- Main reading area -->
  <div class="bk-reader-body">
    <!-- Sidebar: TOC / Bookmarks / Highlights -->
    <aside class="bk-reader-sidebar" id="reader-sidebar" hidden>
      <div class="bk-sidebar-tabs">
        <button class="bk-sidebar-tab active" data-tab="toc">Contents</button>
        <button class="bk-sidebar-tab" data-tab="bookmarks">Bookmarks</button>
        <button class="bk-sidebar-tab" data-tab="highlights">Highlights</button>
        <button class="bk-sidebar-tab" data-tab="snippets">Snippets</button>
      </div>
      <div class="bk-sidebar-panel" id="tab-toc">{% if has_chapters %}<ul>{% for ch in all_chapters %}<li class="bk-toc-h1" data-chapter-index="{{ ch.spine_index }}">{% if ch.title %}{{ ch.title }}{% else %}Chapter {{ ch.spine_index }}{% endif %}</li>{% endfor %}</ul>{% endif %}</div>
      <div class="bk-sidebar-panel" id="tab-bookmarks" hidden></div>
      <div class="bk-sidebar-panel" id="tab-highlights" hidden></div>
      <div class="bk-sidebar-panel" id="tab-snippets" hidden></div>
    </aside>

    <!-- The book viewport -->
    <div class="bk-reader-viewport" id="reader-viewport">
      <div id="reader-loading" class="bk-reader-loading">
        <div class="bk-spinner"></div>
        <p>Loading book…</p>
      </div>
      <!-- Tap / swipe zones — overlay on top of content, pointer-events handled per zone -->
      <div class="bk-tap-zones" id="tap-zones">
        <div class="bk-tap-zone bk-tap-zone-left"  id="zone-prev"  aria-label="Previous page"></div>
        <div class="bk-tap-zone bk-tap-zone-center" id="zone-center" aria-label="Toggle chrome"></div>
        <div class="bk-tap-zone bk-tap-zone-right" id="zone-next"  aria-label="Next page"></div>
      </div>
      <!-- Native EPUB: extracted chapter HTML rendered directly -->
      <div id="native-epub-viewer" hidden>
        <div id="native-epub-content">
          <div id="bk-chapter-content"></div>
        </div>
        <div class="bk-epub-nav">
          <button class="bk-epub-nav-btn" id="native-prev" title="Previous chapter">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <span id="native-chapter-loc" class="bk-muted"></span>
          <button class="bk-epub-nav-btn" id="native-next" title="Next chapter">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
        </div>
      </div>
      <!-- EPUB via epub.js (fixed-layout or books without extracted chapters) -->
      <div id="epub-viewer" hidden>
        <div id="epub-area"></div>
        <div class="bk-epub-nav">
          <button class="bk-epub-nav-btn" id="epub-prev" title="Previous page">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <span id="epub-loc" class="bk-muted"></span>
          <button class="bk-epub-nav-btn" id="epub-next" title="Next page">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
        </div>
      </div>
      <!-- PDF: rendered page-by-page -->
      <div id="pdf-viewer" hidden></div>
      <!-- CBZ: image pages -->
      <div id="cbz-viewer" hidden></div>
      <!-- CBR: image pages served via API -->
      <div id="cbr-viewer" hidden></div>
    </div>

    <!-- Settings backdrop (mobile bottom sheet only) -->
    <div class="bk-settings-backdrop" id="settings-backdrop"></div>
    <!-- Settings panel -->
    <aside class="bk-settings-panel" id="settings-panel" hidden>
      <h3>Reader Settings</h3>

      <label>Theme</label>
      <div class="bk-theme-btns">
        <button class="bk-theme-btn" data-theme="light">Light</button>
        <button class="bk-theme-btn" data-theme="sepia">Sepia</button>
        <button class="bk-theme-btn" data-theme="dark">Dark</button>
      </div>

      <label>Font size</label>
      <div class="bk-font-size-row">
        <button class="bk-reader-btn" id="font-decrease">A−</button>
        <span id="font-size-display">16px</span>
        <button class="bk-reader-btn" id="font-increase">A+</button>
      </div>

      <label>Font family</label>
      <select id="font-family-select" class="bk-select">
        <option value="serif">Serif</option>
        <option value="sans-serif">Sans-serif</option>
        <option value="Georgia, serif">Georgia</option>
        <option value="'Palatino Linotype', serif">Palatino</option>
        <option value="'Open Sans', sans-serif">Open Sans</option>
        <option value="monospace">Monospace</option>
      </select>

      <label>Line spacing</label>
      <input type="range" id="line-height-range" min="1.2" max="2.4" step="0.1" value="1.6">

      <label>Column width</label>
      <div class="bk-theme-btns">
        <button class="bk-theme-btn" data-width="narrow">Narrow</button>
        <button class="bk-theme-btn" data-width="normal">Normal</button>
        <button class="bk-theme-btn" data-width="wide">Wide</button>
      </div>

      <!-- Fullscreen: shown only on mobile (hidden in toolbar on small screens) -->
      <div class="bk-settings-fullscreen" id="settings-fullscreen-btn">
        <button class="bk-reader-btn bk-btn-block" id="btn-fullscreen-settings">
          <svg id="icon-fs-enter" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
          </svg>
          <svg id="icon-fs-exit" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" hidden>
            <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
          </svg>
          <span id="fs-label">Enter fullscreen</span>
        </button>
      </div>
    </aside>
  </div>

  <!-- Highlight context menu -->
  <div class="bk-highlight-menu" id="highlight-menu" hidden>
    <button class="bk-hl-color" data-color="yellow" style="background:#fef08a" title="Yellow"></button>
    <button class="bk-hl-color" data-color="green" style="background:#bbf7d0" title="Green"></button>
    <button class="bk-hl-color" data-color="blue" style="background:#bfdbfe" title="Blue"></button>
    <button class="bk-hl-color" data-color="pink" style="background:#fbcfe8" title="Pink"></button>
    <button class="bk-hl-color" data-color="orange" style="background:#fed7aa" title="Orange"></button>
    <button class="bk-hl-remove" id="hl-remove" title="Remove highlight">✕</button>
    <button class="bk-hl-snippet" id="hl-snippet" title="Save as snippet">"</button>
  </div>

  <!-- Bookmark dialog -->
  <div class="bk-modal" id="bookmark-modal" hidden>
    <div class="bk-modal-backdrop"></div>
    <div class="bk-modal-box bk-modal-sm">
      <div class="bk-modal-header">
        <h2>Add Bookmark</h2>
        <button class="bk-modal-close">&times;</button>
      </div>
      <div class="bk-field">
        <label for="bm-title">Title</label>
        <input type="text" id="bm-title" class="bk-input" placeholder="My bookmark…">
      </div>
      <div class="bk-field">
        <label for="bm-note">Note (optional)</label>
        <textarea id="bm-note" class="bk-input" rows="3"></textarea>
      </div>
      <div class="bk-modal-footer">
        <button class="bk-btn" id="bm-cancel">Cancel</button>
        <button class="bk-btn bk-btn-primary" id="bm-save">Save Bookmark</button>
      </div>
    </div>
  </div>

  <!-- Snippet dialog -->
  <div class="bk-modal" id="snippet-modal" hidden>
    <div class="bk-modal-backdrop"></div>
    <div class="bk-modal-box bk-modal-sm">
      <div class="bk-modal-header">
        <h2>Save Snippet</h2>
        <button class="bk-modal-close">&times;</button>
      </div>
      <div class="bk-field">
        <label>Selected text</label>
        <blockquote id="sn-preview" class="bk-snippet-preview"></blockquote>
      </div>
      <div class="bk-field">
        <label for="sn-title">Title (optional)</label>
        <input type="text" id="sn-title" class="bk-input" placeholder="Give this excerpt a name…">
      </div>
      <div class="bk-field">
        <label for="sn-note">Note (optional)</label>
        <textarea id="sn-note" class="bk-input" rows="2"></textarea>
      </div>
      <div class="bk-modal-footer">
        <button class="bk-btn" id="sn-cancel">Cancel</button>
        <button class="bk-btn bk-btn-primary" id="sn-save">Save Snippet</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
{# epub.js only for EPUB books without extracted chapters (fixed-layout fallback) #}
{% if book.format == 'epub' and not has_chapters %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/epubjs@0.3.93/dist/epub.min.js"></script>
{% endif %}
{# PDF.js for PDF rendering #}
{% if book.format == 'pdf' %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
{% endif %}
{# JSZip for CBZ rendering #}
{% if book.format == 'cbz' %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
{% endif %}
<script src="{% static 'bookkeeper/js/reader.js' %}"></script>
{% endblock %}