<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reader</title>
    <link rel="stylesheet" href="/views/css/globals.css">
    <link rel="stylesheet" href="/views/css/books/reader.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
    <link rel="stylesheet" href="/views/css/components/titlebar.css">
    <script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
    <img class="app-icon" src="/public/assets/waifuboards.ico"  alt=""/>
    <span class="app-title">WaifuBoard</span>
</div>
    <div class="title-right">
        <button class="min">—</button>
        <button class="max">🗖</button>
        <button class="close">✕</button>
    </div>
</div>

<header class="top-bar">
    <button id="back-btn" class="glass-btn">
        ← Back
    </button>

    <div class="chapter-info">
        <button id="prev-chapter" class="nav-arrow">‹</button>
        <span id="chapter-label">Loading...</span>
        <button id="next-chapter" class="nav-arrow">›</button>
    </div>

    <button id="settings-btn" class="glass-btn">
        ⚙ Settings
    </button>
</header>

<aside id="settings-panel" class="settings-panel">
    <div class="panel-header">
        <h3>Reader Settings</h3>
        <button id="close-panel" class="close-btn">×</button>
    </div>

    <div class="panel-content">

        <div id="ln-settings" class="hidden">

            <div class="settings-section">
                <h4>Typography</h4>

                <div class="control">
                    <label>
                        Font Size
                        <span id="font-size-value">18px</span>
                    </label>
                    <input type="range" id="font-size" min="12" max="40" value="18" step="1">
                </div>

                <div class="control">
                    <label>
                        Line Height
                        <span id="line-height-value">1.8</span>
                    </label>
                    <input type="range" id="line-height" min="1.2" max="3" step="0.1" value="1.8">
                </div>

                <div class="control">
                    <label>
                        Content Width
                        <span id="max-width-value">750px</span>
                    </label>
                    <input type="range" id="max-width" min="500" max="1200" value="750" step="50">
                </div>

                <div class="control">
                    <label>Font Family</label>
                    <select id="font-family">
                        <option value='"Georgia", serif'>Georgia (Serif)</option>
                        <option value='"Charter", serif'>Charter (Serif)</option>
                        <option value='"Merriweather", serif'>Merriweather</option>
                        <option value='"Inter", system-ui, sans-serif'>Inter (Sans)</option>
                        <option value='system-ui, sans-serif'>System UI</option>
                        <option value='"JetBrains Mono", monospace'>JetBrains Mono</option>
                    </select>
                </div>

                <div class="control">
                    <label>Text Alignment</label>
                    <div class="toggle-group">
                        <button class="toggle-btn" data-align="left">Left</button>
                        <button class="toggle-btn active" data-align="justify">Justify</button>
                        <button class="toggle-btn" data-align="center">Center</button>
                    </div>
                </div>
            </div>


            <div class="settings-section">
                <h4>Color Theme</h4>

                <div class="control">
                    <label>Text Color</label>
                    <input type="color" id="text-color" value="#e5e7eb">
                </div>

                <div class="control">
                    <label>Background Color</label>
                    <input type="color" id="bg-color" value="#14141b">
                </div>

                <div class="presets">
                    <button data-preset="dark">Dark</button>
                    <button data-preset="sepia">Sepia</button>
                    <button data-preset="light">Light</button>
                    <button data-preset="amoled">AMOLED</button>
                </div>
            </div>
        </div>


        <div id="manga-settings" class="hidden">

            <div class="settings-section">
                <h4>Display</h4>

                <div class="control">
                    <label>Layout Mode</label>
                    <select id="display-mode">
                        <option value="auto">Auto Detect</option>
                        <option value="single">Single Page</option>
                        <option value="double">Double Page</option>
                        <option value="longstrip">Long Strip</option>
                    </select>
                </div>

                <div class="control">
                    <label>Reading Direction</label>
                    <div class="toggle-group">
                        <button class="toggle-btn" data-direction="ltr">← LTR</button>
                        <button class="toggle-btn active" data-direction="rtl">RTL →</button>
                    </div>
                </div>

                <div class="control">
                    <label>Image Fit</label>
                    <select id="image-fit">
                        <option value="width">Fit Width</option>
                        <option value="height">Fit Height</option>
                        <option value="screen" selected>Fit Screen</option>
                    </select>
                </div>
            </div>


            <div class="settings-section">
                <h4>Appearance</h4>

                <div class="control">
                    <label>
                        Page Spacing
                        <span id="page-spacing-value">16px</span>
                    </label>
                    <input type="range" id="page-spacing" min="0" max="60" value="16" step="4">
                </div>
            </div>


            <div class="settings-section">
                <h4>Performance</h4>

                <div class="control">
                    <label>Preload Pages</label>
                    <input type="number" id="preload-count" min="0" max="10" value="3">
                </div>
            </div>
        </div>
    </div>
</aside>

<div id="overlay" class="overlay"></div>

<main id="reader">
    <div class="loading-container">
        <div class="loading-spinner"></div>
        <span>Loading chapter...</span>
    </div>
</main>

<div id="updateToast" class="hidden">
    <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>

    <a
            id="downloadButton"
            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
            target="_blank"
    >
        Click To Download
    </a>
</div>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/books/reader.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
</body>
</html>