<!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>Profile - WaifuBoard</title>
    <link rel="stylesheet" href="/views/css/globals.css">
    <link rel="stylesheet" href="/views/css/components/navbar.css">
    <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
    <link rel="stylesheet" href="/views/css/profile.css">
    <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
    <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>

<div class="main-wrapper">
    <section class="profile-header">
        <div class="profile-banner"></div> <div class="profile-body">
        <div class="profile-avatar-wrapper">
            <img id="user-avatar" src="/public/assets/placeholder.svg" alt="Profile" class="avatar-img">
        </div>

        <div class="profile-details">
            <div class="profile-text">
                <div class="username-wrapper">
                    <h1 id="user-username">Loading...</h1>
                    <a id="header-anilist-link" href="#" target="_blank" class="header-anilist-badge" style="display: none;">
                        <img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AniList">
                    </a>
                </div>
            </div>

            <div class="profile-stats-grid">
                <div class="stat-card">
                    <span class="stat-value" id="total-stat">0</span>
                    <span class="stat-label">Total Entries</span>
                </div>
                <div class="stat-card">
                    <span class="stat-value" id="anime-stat">-</span>
                    <span class="stat-label">Anime</span>
                </div>
                <div class="stat-card">
                    <span class="stat-value" id="manga-stat">-</span>
                    <span class="stat-label">Manga</span>
                </div>
            </div>
        </div>
    </div>

        <div class="hub-navigation-modern">
            <button class="nav-pill active" data-target="tracking">Tracking List</button>
            <button class="nav-pill" data-target="local">Local Library</button>
            <button class="nav-pill" data-target="settings">Settings</button>
        </div>
    </section>

    <div class="content-container">

        <div id="section-tracking" class="tab-section active">
            <div class="toolbar">
                <div class="search-box">
                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    <input type="text" id="tracking-search-input" class="search-input" placeholder="Search your list...">

                </div>
                <div class="filters-inline">
                    <select id="status-filter" class="minimal-select"><option value="all">Status: All</option><option value="CURRENT">Watching</option><option value="COMPLETED">Completed</option><option value="PLANNING">Planning</option><option value="PAUSED">Paused</option><option value="DROPPED">Dropped</option></select>
                    <select id="type-filter" class="minimal-select"><option value="all">Type: All</option><option value="ANIME">Anime</option><option value="MANGA">Manga</option><option value="NOVEL">Novel</option></select>
                    <select id="sort-filter" class="minimal-select"><option value="updated">Latest</option><option value="score">Score</option><option value="title">A-Z</option></select>
                    <div class="view-toggle">
                        <button class="view-btn active" data-view="grid">⊞</button>
                        <button class="view-btn" data-view="list">☰</button>
                    </div>
                </div>
            </div>
            <div id="loading-state" class="loading-state"><div class="spinner"></div></div>
            <div id="empty-state" class="empty-state" style="display: none;">
                <p>No content found</p>
                <a href="/anime" class="btn-blur">Discover Content</a>
            </div>
            <div id="list-container" class="list-grid"></div>
        </div>

        <div id="section-local" class="tab-section">

            <div class="toolbar local-toolbar">
                <div class="search-box">
                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    <input type="text" id="local-search-input" class="search-input" placeholder="Filter local files...">
                </div>

                <div class="local-type-switcher">
                    <button class="type-pill-btn active" onclick="switchLocalType('anime', this)">Anime</button>
                    <button class="type-pill-btn" onclick="switchLocalType('manga', this)">Manga</button>
                    <button class="type-pill-btn" onclick="switchLocalType('novels', this)">Novels</button>
                </div>

                <div class="actions-group">
                    <button id="scan-incremental-btn" class="action-icon-btn" title="Update Library (Fast)">
                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                    </button>
                    <button id="scan-full-btn" class="action-icon-btn danger" title="Full Rescan (Slow)">
                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    </button>
                </div>
            </div>

            <div class="console-output" id="scan-console" style="display: none;">
                <div class="spinner small"></div>
                <span id="scan-status-text">Scanning folders...</span>
            </div>

            <div id="local-list-container" class="list-grid"></div>

            <div id="local-loading" class="loading-state" style="display: none;">
                <div class="spinner"></div>
            </div>
        </div>

        <div id="section-settings" class="tab-section">
            <div class="stream-settings-container">

                <div class="stream-section">
                    <h3 class="section-label">Profile</h3>
                    <form id="profile-form" class="stream-profile-row">

                        <div class="stream-avatar-wrapper">
                            <img id="setting-avatar-preview" src="/public/assets/placeholder.svg" alt="Avatar">
                            <div class="avatar-overlay" onclick="document.getElementById('avatar-upload').click()">
                                <span>Edit</span>
                            </div>
                            <input type="file" id="avatar-upload" accept="image/*" style="display: none;">
                        </div>

                        <div class="stream-inputs-col">
                            <div class="stream-input-group">
                                <label>Username</label>
                                <input type="text" id="setting-username" class="stream-input">
                            </div>

                            <div class="stream-actions">
                                <button type="submit" class="btn-stream-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="stream-section">
                    <h3 class="section-label">Change password</h3>
                    <form id="password-form" class="stream-form-row">
                        <div class="stream-input-group">
                            <label>Current password</label>
                            <input type="password" id="current-password" class="stream-input" placeholder="••••••">
                        </div>
                        <div class="stream-input-group">
                            <label>New password</label>
                            <input type="password" id="new-password" class="stream-input" placeholder="••••••">
                        </div>
                        <div class="stream-actions-inline">
                            <button type="submit" class="btn-stream-ghost">Update password</button>
                        </div>
                    </form>
                </div>

                <div class="stream-section">
                    <h3 class="section-label">Connections</h3>
                    <div class="stream-integration-row">
                        <div class="int-info">
                            <img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AL" class="int-logo">
                            <div class="int-text">
                                <span class="int-name">AniList</span>
                                <span id="anilist-status" class="int-status">Checking...</span>
                            </div>
                        </div>
                        <button id="anilist-action-btn" class="btn-stream-outline">Manage</button>
                    </div>
                </div>

            </div>
        </div>

    </div>
</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">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/list-modal-manager.js"></script>
<script src="/src/scripts/profile.js"></script>
</body>
</html>