<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="icon"
            href="/public/assets/waifuboards.ico"
            type="image/x-icon"
        />
        <title>WaifuBoard</title>
        <link rel="stylesheet" href="/views/css/globals.css" />
        <link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
        <link rel="stylesheet" href="/views/css/components/hero.css" />
        <link rel="stylesheet" href="/views/css/anime/anime.css" />
        <link
            rel="stylesheet"
            href="/views/css/components/updateNotifier.css"
        />
        <script src="/src/scripts/titlebar.js"></script>
        <link rel="stylesheet" href="/views/css/components/titlebar.css" />
    </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>

        <div class="modal-overlay" id="desc-modal">
            <div class="modal-content">
                <button class="modal-close" onclick="closeModal()">✕</button>
                <h2 class="modal-title">Synopsis</h2>
                <div class="modal-text" id="full-description"></div>
            </div>
        </div>

        <div class="modal-overlay" id="add-list-modal">
            <div class="modal-content modal-list">
                <button class="modal-close" onclick="closeAddToListModal()">
                    ✕
                </button>
                <h2 class="modal-title" id="modal-title">Add to List</h2>

                <div class="modal-body">
                    <div class="modal-fields-grid">
                        <div class="form-group">
                            <label>Status</label>
                            <select id="entry-status" class="form-input">
                                <option value="WATCHING">Watching</option>
                                <option value="COMPLETED">Completed</option>
                                <option value="PLANNING">Planning</option>
                                <option value="PAUSED">Paused</option>
                                <option value="DROPPED">Dropped</option>
                                <option value="REPEATING">Rewatching</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Episodes Watched</label>
                            <input
                                type="number"
                                id="entry-progress"
                                class="form-input"
                                min="0"
                                placeholder="0"
                            />
                        </div>

                        <div class="form-group">
                            <label>Your Score (0-10)</label>
                            <input
                                type="number"
                                id="entry-score"
                                class="form-input"
                                min="0"
                                max="10"
                                step="0.1"
                                placeholder="Optional"
                            />
                        </div>

                        <div class="form-group full-width">
                            <div class="date-group">
                                <div class="date-input-pair">
                                    <label for="entry-start-date"
                                        >Start Date</label
                                    >
                                    <input
                                        type="date"
                                        id="entry-start-date"
                                        class="form-input"
                                    />
                                </div>
                                <div class="date-input-pair">
                                    <label for="entry-end-date">End Date</label>
                                    <input
                                        type="date"
                                        id="entry-end-date"
                                        class="form-input"
                                    />
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="entry-repeat-count"
                                >Rewatch Count</label
                            >
                            <input
                                type="number"
                                id="entry-repeat-count"
                                class="form-input"
                                min="0"
                            />
                        </div>

                        <div class="form-group notes-group">
                            <label for="entry-notes">Notes</label>
                            <textarea
                                id="entry-notes"
                                class="form-input notes-textarea"
                                rows="4"
                                placeholder="Personal notes..."
                            ></textarea>
                        </div>

                        <div class="form-group checkbox-group">
                            <input
                                type="checkbox"
                                id="entry-is-private"
                                class="form-checkbox"
                            />
                            <label for="entry-is-private"
                                >Mark as Private</label
                            >
                        </div>
                    </div>
                </div>

                <div class="modal-actions">
                    <button
                        class="btn-danger"
                        id="modal-delete-btn"
                        onclick="deleteFromList()"
                    >
                        Remove
                    </button>
                    <button
                        class="btn-secondary"
                        onclick="closeAddToListModal()"
                    >
                        Cancel
                    </button>
                    <button class="btn-primary" onclick="saveToList()">
                        Save Changes
                    </button>
                </div>
            </div>
        </div>

        <a href="/anime" class="back-btn">
            <svg
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                stroke-width="2.5"
                viewBox="0 0 24 24"
            >
                <path d="M15 19l-7-7 7-7" />
            </svg>
            Back to Home
        </a>

        <div class="hero-wrapper">
            <div class="video-background">
                <div id="player"></div>
            </div>
            <div class="hero-overlay"></div>
        </div>

        <div class="content-container">
            <aside class="sidebar">
                <div class="poster-card">
                    <img id="poster" src="" alt="" />
                </div>

                <div class="info-grid">
                    <div class="info-item">
                        <h4>Format</h4>
                        <span id="format">--</span>
                    </div>
                    <div class="info-item">
                        <h4>Episodes</h4>
                        <span id="episodes">--</span>
                    </div>
                    <div class="info-item">
                        <h4>Status</h4>
                        <span id="status">--</span>
                    </div>
                    <div class="info-item">
                        <h4>Season</h4>
                        <span id="season">--</span>
                    </div>
                    <div class="info-item">
                        <h4>Studio</h4>
                        <span id="studio">--</span>
                    </div>
                </div>

                <div class="info-grid">
                    <div class="info-item">
                        <h4>Main Characters</h4>
                        <div class="character-list" id="char-list"></div>
                    </div>
                </div>
            </aside>

            <main class="main-content">
                <div class="anime-header">
                    <h1 class="anime-title" id="title">Loading...</h1>

                    <div class="meta-row">
                        <div
                            class="pill extension-pill"
                            id="extension-pill"
                            style="display: none; background: #8b5cf6"
                        ></div>
                        <div class="pill score" id="score">--% Score</div>
                        <div class="pill" id="year">----</div>
                        <div class="pill" id="genres">Action</div>
                    </div>

                    <div class="action-row">
                        <button class="btn-watch" id="watch-btn">
                            <svg
                                width="24"
                                height="24"
                                fill="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path d="M8 5v14l11-7z" />
                            </svg>
                            Start Watching
                        </button>
                        <button
                            class="btn-secondary"
                            id="add-to-list-btn"
                            onclick="openAddToListModal()"
                        >
                            + Add to List
                        </button>
                    </div>
                </div>

                <div class="description-box">
                    <div id="description-preview"></div>
                    <button
                        id="read-more-btn"
                        class="read-more-btn"
                        style="display: none"
                        onclick="openModal()"
                    >
                        Read More
                        <svg
                            width="16"
                            height="16"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            viewBox="0 0 24 24"
                        >
                            <path d="M19 9l-7 7-7-7" />
                        </svg>
                    </button>
                </div>

                <div class="episodes-section">
                    <div class="episodes-header-row">
                        <div
                            class="section-title"
                            style="margin: 0; border: none; padding: 0"
                        >
                            <h2
                                style="
                                    font-size: 1.8rem;
                                    border-left: 4px solid #8b5cf6;
                                    padding-left: 1rem;
                                "
                            >
                                Episodes
                            </h2>
                        </div>
                        <div class="episode-search-wrapper">
                            <input
                                type="number"
                                id="ep-search"
                                class="episode-search-input"
                                placeholder="Jump to Ep #"
                                min="1"
                            />
                        </div>
                    </div>

                    <div class="episodes-grid" id="episodes-grid"></div>

                    <div class="pagination-controls" id="pagination-controls">
                        <button
                            class="page-btn"
                            id="prev-page"
                            onclick="changePage(-1)"
                        >
                            Previous
                        </button>
                        <span class="page-info" id="page-info"
                            >Page 1 of 1</span
                        >
                        <button
                            class="page-btn"
                            id="next-page"
                            onclick="changePage(1)"
                        >
                            Next
                        </button>
                    </div>
                </div>
            </main>
        </div>

        <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/rpc-inapp.js"></script>
        <script src="/src/scripts/auth-guard.js"></script>

        <script src="/src/scripts/utils/auth-utils.js"></script>
        <script src="/src/scripts/utils/notification-utils.js"></script>
        <script src="/src/scripts/utils/url-utils.js"></script>
        <script src="/src/scripts/utils/pagination-manager.js"></script>
        <script src="/src/scripts/utils/media-metadata-utils.js"></script>
        <script src="/src/scripts/utils/youtube-player-utils.js"></script>
        <script src="/src/scripts/utils/list-modal-manager.js"></script>
        <script src="/src/scripts/anime/anime.js"></script>
    </body>
</html>
