{% extends "shared/base.html" %}

{% block title %}Settings - YumeZone{% endblock %}
{% block meta_description %}Manage your YumeZone account settings, playback preferences, and appearance.{% endblock %}
{% block og_title %}{{ self.title() }}{% endblock %}
{% block og_description %}{{ self.meta_description() }}{% endblock %}
{% block og_image %}{{ url_for('static', filename='images/logos/no-bg-logo.png', _external=True) }}{% endblock %}

{% block content %}
<div class="container">
    <div class="settings-container">
        <h1 style="margin-bottom: var(--space-xl);">Settings</h1>

        <!-- Account Section -->
        <div class="settings-section">
            <h2 class="settings-section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
                    <circle cx="12" cy="7" r="4" />
                </svg>
                Account
            </h2>

            <div class="settings-row">
                <div class="settings-label">
                    <span class="settings-label-text">Username</span>
                    <span class="settings-label-desc">{{ user.username }}</span>
                </div>
            </div>

            <div class="settings-row">
                <div class="settings-label">
                    <span class="settings-label-text">Email</span>
                    <span class="settings-label-desc">{{ user.email or 'Not set' }}</span>
                </div>
            </div>

            <div class="settings-row">
                <div class="settings-label">
                    <span class="settings-label-text">Member Since</span>
                    <span class="settings-label-desc">{{ user.created_at.strftime('%B %d, %Y') if user.created_at else
                        'Unknown' }}</span>
                </div>
            </div>

            {% if user.auth_method == 'local' or not user.auth_method %}
            <div class="settings-row">
                <div class="settings-label">
                    <span class="settings-label-text">Password</span>
                    <span class="settings-label-desc">Update your account password</span>
                </div>
                <button class="btn btn-secondary" id="change-password-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                    Change Password
                </button>
            </div>
            {% endif %}
        </div>

        <!-- AniList Integration -->
        <div class="settings-section">
            <h2 class="settings-section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
                </svg>
                AniList Connection
            </h2>

            {% if user.anilist_authenticated %}
            <div class="anilist-card" style="margin-bottom: var(--space-md);">
                <div class="anilist-card-avatar">
                    {% if user.avatar %}
                    <img src="{{ user.avatar }}" alt="AniList avatar">
                    {% else %}
                    <img src="https://ui-avatars.com/api/?name={{ user.username }}&size=104&background=1a1a1a&color=fff&bold=true"
                        alt="Avatar">
                    {% endif %}
                </div>
                <div class="anilist-card-info">
                    <div class="anilist-card-title">
                        <span style="color: var(--success);">●</span> Connected
                    </div>
                    <div class="anilist-card-sub">AniList ID: {{ user.anilist_id }}</div>
                </div>
            </div>

            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                <button class="btn btn-secondary" id="disconnect-anilist" style="color: var(--error);">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
                        <line x1="12" y1="2" x2="12" y2="12" />
                    </svg>
                    Disconnect
                </button>
            </div>
            {% else %}
            <div class="anilist-connect-cta">
                <div class="cta-icon">🔗</div>
                <h3>Connect Your AniList</h3>
                <p class="text-muted">Sync your anime list with AniList to track progress across platforms.</p>
                <a href="{{ url_for('auth.connect_anilist_account') }}" class="btn btn-primary">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
                    </svg>
                    Connect
                </a>
            </div>
            {% endif %}

            <!-- MyAnimeList Connection -->
            <h2 class="settings-section-title" style="margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 2rem;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"></circle>
                    <path d="M16 12l-4-4-4 4"></path>
                    <path d="M12 8v8"></path>
                </svg>
                MyAnimeList
            </h2>
            {% if user.mal_authenticated %}
            <div class="anilist-card" style="margin-bottom: var(--space-md);">
                <div class="anilist-card-avatar" style="background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; padding: 0;">
                    {% if user.mal_avatar or session.get('mal_avatar') %}
                    <img src="{{ user.mal_avatar or session.get('mal_avatar') }}" alt="MAL Avatar" style="width: 100%; height: 100%; object-fit: cover;">
                    {% else %}
                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/MyAnimeList_Logo.png" alt="MAL" style="width: 100%; height: 100%; object-fit: cover;">
                    {% endif %}
                </div>
                <div class="anilist-card-info">
                    <div class="anilist-card-title">
                        <span style="color: var(--success);">●</span> Connected
                    </div>
                    <div class="anilist-card-sub">MyAnimeList: {{ user.mal_username }}</div>
                </div>
            </div>

            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                <button class="btn btn-secondary" id="disconnect-mal" style="color: var(--error);" onclick="disconnectMAL()">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
                        <line x1="12" y1="2" x2="12" y2="12" />
                    </svg>
                    Disconnect
                </button>
            </div>
            {% else %}
            <div class="anilist-connect-cta">
                <div class="cta-icon" style="background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; padding: 0;">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/MyAnimeList_Logo.png" alt="MAL" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                <h3>Connect MyAnimeList</h3>
                <p class="text-muted">Sync your anime list with MyAnimeList to track progress across platforms.</p>
                <a href="{{ url_for('auth.connect_mal_account') }}" class="btn btn-primary" style="background: #2e51a2; border-color: #2e51a2; color: white;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
                    </svg>
                    Connect
                </a>
            </div>
            {% endif %}
        </div>

        <!-- Playback Settings -->
        <div class="settings-section">
            <h2 class="settings-section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polygon points="5 3 19 12 5 21 5 3" />
                </svg>
                Playback
            </h2>

            <div class="settings-row">
                <div class="settings-label">
                    <span class="settings-label-text">Preferred Language</span>
                    <span class="settings-label-desc">Default audio language for episodes</span>
                </div>
                <select class="server-select" id="preferred-lang">
                    <option value="sub">Subbed (Japanese)</option>
                    <option value="dub">Dubbed (English)</option>
                </select>
            </div>

            <div class="settings-row">
                <div class="settings-label">
                    <span class="settings-label-text">Autoplay Next Episode</span>
                    <span class="settings-label-desc">Automatically play the next episode</span>
                </div>
                <div class="toggle" id="autoplay-toggle" data-setting="autoplay"></div>
            </div>

            <div class="settings-row">
                <div class="settings-label">
                    <span class="settings-label-text">Player Source</span>
                    <span class="settings-label-desc">Choose your preferred video player</span>
                </div>
                <select class="server-select" id="preferred-player">
                    <option value="internal">Internal</option>
                    <option value="external">External (Megaplay)</option>
                </select>
            </div>

            <div class="settings-row">
                <div class="settings-label">
                    <span class="settings-label-text">MyAnimeList Sync</span>
                    <span class="settings-label-desc">Automatically track watched episodes to MyAnimeList at 80% progress</span>
                </div>
                <div class="toggle" id="mal-sync-toggle" data-setting="mal_sync"></div>
            </div>
        </div>

        <!-- Appearance -->
        <div class="settings-section">
            <h2 class="settings-section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="5" />
                    <line x1="12" y1="1" x2="12" y2="3" />
                    <line x1="12" y1="21" x2="12" y2="23" />
                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
                    <line x1="1" y1="12" x2="3" y2="12" />
                    <line x1="21" y1="12" x2="23" y2="12" />
                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
                </svg>
                Appearance
            </h2>

            <div class="settings-row">
                <div class="settings-label">
                    <span class="settings-label-text">Show Episode Titles</span>
                    <span class="settings-label-desc">Display episode titles in lists (may contain spoilers)</span>
                </div>
                <div class="toggle" id="show-titles-toggle" data-setting="show_episode_titles"></div>
            </div>
        </div>

        <!-- Manga Settings -->
        <div class="settings-section">
            <h2 class="settings-section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
                </svg>
                Manga
            </h2>

            <div class="settings-row">
                <div class="settings-label">
                    <span class="settings-label-text">Hide NSFW Manga</span>
                    <span class="settings-label-desc">Hide 18+ manga content from search and browse results</span>
                </div>
                <div class="toggle" id="manga-nsfw-toggle" data-setting="manga_hide_nsfw"></div>
            </div>
        </div>

        <!-- Danger Zone -->
        <div class="settings-section danger-section">
            <h2 class="settings-section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path
                        d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                    <line x1="12" y1="9" x2="12" y2="13" />
                    <line x1="12" y1="17" x2="12.01" y2="17" />
                </svg>
                Danger Zone
            </h2>

            <div class="settings-row">
                <div class="settings-label">
                    <span class="settings-label-text">Delete Account</span>
                    <span class="settings-label-desc">Completely and permanently delete your YumeZone account and all associated data</span>
                </div>
                <button class="btn btn-secondary" id="delete-account-btn" style="color: var(--error); border-color: rgba(239, 68, 68, 0.2); background: rgba(239, 68, 68, 0.05);">
                    Delete Account
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Change Password Modal -->
<div class="modal" id="change-password-modal" style="display: none;">
    <div class="modal-backdrop" id="close-password-backdrop"></div>
    <div class="modal-content" style="max-width: 400px;">
        <button type="button" class="modal-close" id="close-password-modal" aria-label="Close">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18" />
                <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
        </button>

        <div>
            <h2 style="margin-bottom: var(--space-lg); text-align: center;">Change Password</h2>
            <form id="change-password-form">
                <div class="form-group">
                    <label class="form-label" for="current-password">Current Password</label>
                    <input type="password" id="current-password" class="form-input" placeholder="Current password" required minlength="6">
                </div>
                <div class="form-group">
                    <label class="form-label" for="new-password">New Password</label>
                    <input type="password" id="new-password" class="form-input" placeholder="New password" required minlength="6">
                </div>
                
                <div id="password-error-msg" class="text-error text-sm" style="display: none; margin-bottom: var(--space-md); text-align: center;"></div>


                <button type="submit" class="btn btn-primary w-full" id="submit-password-btn">
                    <span id="submit-password-btn-text">Update Password</span>
                </button>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/settings.js') }}"></script>
{% endblock %}