{% extends "base.html" %}

{% block title %}Bookish — Reader{% endblock %}

{% block content %}
<div class="reader-page">
    {% if filename %}
    <div class="reader-toolbar">
        <div class="toolbar-left">
            <button class="tool-btn" id="sidebarToggle" title="Indice">☰</button>
            <span class="chapter-title" id="chapterTitle">Caricamento...</span>
        </div>
        <div class="toolbar-center">
            <span class="page-info" id="pageInfo">-- / --</span>
        </div>
        <div class="toolbar-right">
                <div class="toolbar-group" title="Larghezza area di lettura">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="2"/>
                        <line x1="12" y1="3" x2="12" y2="21"/>
                    </svg>
                    <input type="range" id="widthSlider" min="40" max="100" value="100" class="width-slider">
                    <span class="width-label" id="widthLabel">100%</span>
                </div>
            <button class="tool-btn" id="zoomOut" title="Zoom -">A−</button>
            <button class="tool-btn" id="zoomIn" title="Zoom +">A+</button>
            <button class="tool-btn" id="themeToggle" title="Tema">☀️</button>
            <button class="tool-btn" id="searchToggle" title="Cerca">🔍</button>
            <button class="tool-btn" id="bookmarkToggle" title="Segnalibro (Ctrl+B)">🔖</button>
            <button class="tool-btn" id="fullscreenToggle" title="Schermo intero">⛶</button>
            <button class="tool-btn btn-help" id="helpToggle" title="Aiuto e scorciatoie">?</button>
        </div>
    </div>

    <div class="help-overlay" id="helpOverlay">
        <div class="help-modal">
            <div class="help-header">
                <h3>Aiuto e scorciatoie</h3>
                <button class="tool-btn" id="helpClose">✕</button>
            </div>
            <div class="help-body">
                <div class="help-section">
                    <h4>Navigazione</h4>
                    <div class="help-row"><kbd>←</kbd><kbd>→</kbd><span>Pagina precedente/successiva</span></div>
                    <div class="help-row"><kbd>Ctrl</kbd>+<kbd>B</kbd><span>Aggiungi/rimuovi segnalibro</span></div>
                    <div class="help-row"><kbd>Ctrl</kbd>+<kbd>F</kbd><span>Cerca nel libro</span></div>
                    <div class="help-row"><kbd>F</kbd><span>Schermo intero</span></div>
                </div>
                <div class="help-section">
                    <h4>Lettura</h4>
                    <div class="help-row"><kbd>+</kbd><kbd>-</kbd><span>Zoom avanti/indietro (testo)</span></div>
                    <div class="help-row"><span class="help-icon">☰</span><span>Mostra/nascondi indice</span></div>
                    <div class="help-row"><span class="help-icon">🔖</span><span>Aggiunge segnalibro alla pagina corrente</span></div>
                    <div class="help-row"><span class="help-icon">🌙 ☀️ 🟤</span><span>Cicla tema: chiaro, scuro, seppia</span></div>
                </div>
                <div class="help-section">
                    <h4>Slider larghezza</h4>
                    <p>Regola la larghezza dell'area di lettura dal 40% al 100% dello schermo. Utile per files con righe molto lunghe.</p>
                </div>
            </div>
        </div>
    </div>

        <div class="reader-container">
            <div class="reader-sidebar" id="sidebar">
                <div class="sidebar-tabs">
                    <button class="sidebar-tab active" data-tab="toc">Indice</button>
                    <button class="sidebar-tab" data-tab="search">Cerca</button>
                    <button class="sidebar-tab" data-tab="bookmarks">Segnalibri</button>
                </div>
                <div class="sidebar-content">
                    <div class="tab-panel active" id="panel-toc">
                        <ul id="tocList"><li>Caricamento...</li></ul>
                    </div>
                    <div class="tab-panel" id="panel-search">
                        <input type="text" id="searchInput" placeholder="Cerca nel libro..." class="search-input">
                        <div id="searchResults"></div>
                    </div>
                    <div class="tab-panel" id="panel-bookmarks">
                        <ul id="bookmarksList"><li>Nessun segnalibro</li></ul>
                    </div>
                </div>
            </div>

            <div class="reader-view-wrapper">
                <div class="reader-view" id="readerView">
                    {% if file_ext == 'epub' %}
                    <div id="epubViewer"></div>
                    {% elif file_ext == 'pdf' %}
                    <div id="pdfViewer"></div>
                    {% else %}
                    <div id="textViewer" class="text-viewer"></div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% else %}
    <div class="reader-empty">
        <h2>Reader</h2>
        <p class="subtitle">Carica o seleziona un file da leggere</p>

        <div class="reader-upload">
            <form id="reader-upload-form" enctype="multipart/form-data">
                <div class="drop-zone reader-drop-zone" id="readerDropZone">
                    <div class="drop-zone-content">
                        <span class="drop-icon">📖</span>
                        <p>Trascina qui un ebook</p>
                        <p class="drop-hint">oppure clicca per selezionare</p>
                    </div>
                    <input type="file" name="file" id="readerFileInput" class="file-input"
                           accept=".epub,.pdf,.md,.txt,.html,.fb2,.docx">
                </div>
            </form>
        </div>

        <div class="reader-recent" id="recentReads" style="display:none;">
            <h3>Letture recenti</h3>
            <ul id="recentList"></ul>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
{% if file_ext == 'epub' %}
<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>
{% elif file_ext == 'pdf' %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
{% endif %}
<script>
    const BOOKISH_FILE = {{ filename | tojson | safe if filename else 'null' }};
    const BOOKISH_EXT = {{ file_ext | tojson | safe if file_ext else 'null' }};
    const BOOKISH_HASH = {{ content_hash | tojson | safe if content_hash else 'null' }};
</script>
<script src="{{ url_for('static', filename='js/reader.js') }}"></script>
{% endblock %}