/**
 * @fileoverview Settings Page Component for Rantii
 * @author retoor <retoor@molodetz.nl>
 * @description Application settings and preferences page
 * @keywords settings, page, preferences, options, config
 */

import { BaseComponent } from '../components/base-component.js';

class SettingsPage extends BaseComponent {
    init() {
        this.installHandler = () => this.render();
        this.render();
        this.bindEvents();
    }

    render() {
        const isLoggedIn = this.isLoggedIn();
        const user = this.getCurrentUser();
        const canInstall = this.getApp()?.canInstall();

        this.addClass('page', 'settings-page');

        this.setHtml(`
            <header class="settings-header">
                <button class="back-btn" aria-label="Go back">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                    </svg>
                </button>
                <h1>Settings</h1>
            </header>
            <div class="settings-content">
                ${canInstall ? `
                    <section class="settings-section">
                        <h2>Install App</h2>
                        <p>Install Rantii for quick access</p>
                        <button class="btn btn-primary install-btn">
                            <svg viewBox="0 0 24 24" width="20" height="20" style="margin-right: 8px;">
                                <path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
                            </svg>
                            Install Rantii
                        </button>
                    </section>
                ` : ''}
                ${isLoggedIn ? `
                    <section class="settings-section">
                        <h2>Account</h2>
                        <div class="setting-item">
                            <span class="setting-label">Logged in as</span>
                            <span class="setting-value">${user?.username || ''}</span>
                        </div>
                        <button class="btn btn-danger logout-btn">Sign Out</button>
                    </section>
                ` : `
                    <section class="settings-section">
                        <h2>Account</h2>
                        <p>Sign in to access all features</p>
                        <button class="btn btn-primary login-btn">Sign In</button>
                    </section>
                `}
                <section class="settings-section">
                    <h2>Appearance</h2>
                    <theme-selector></theme-selector>
                </section>
                <section class="settings-section">
                    <h2>About</h2>
                    <div class="about-info">
                        <p><strong>Rantii</strong> - A DevRant Client</p>
                        <p>Version 1.0.0</p>
                        <p>Made with care by retoor</p>
                    </div>
                </section>
                <section class="settings-section">
                    <h2>Data</h2>
                    <button class="btn btn-secondary clear-cache-btn">Clear Cache</button>
                </section>
            </div>
        `);
    }

    bindEvents() {
        this.on(this, 'click', this.handleClick);
        window.addEventListener('rantii:install-available', this.installHandler);
        window.addEventListener('rantii:app-installed', this.installHandler);
    }

    onDisconnected() {
        window.removeEventListener('rantii:install-available', this.installHandler);
        window.removeEventListener('rantii:app-installed', this.installHandler);
    }

    handleClick(e) {
        const backBtn = e.target.closest('.back-btn');
        const loginBtn = e.target.closest('.login-btn');
        const logoutBtn = e.target.closest('.logout-btn');
        const clearCacheBtn = e.target.closest('.clear-cache-btn');
        const installBtn = e.target.closest('.install-btn');

        if (backBtn) {
            window.history.back();
            return;
        }

        if (loginBtn) {
            this.getRouter()?.goToLogin();
            return;
        }

        if (logoutBtn) {
            this.logout();
            return;
        }

        if (clearCacheBtn) {
            this.clearCache();
            return;
        }

        if (installBtn) {
            this.installApp();
        }
    }

    async installApp() {
        const installed = await this.getApp()?.installApp();
        if (installed) {
            this.getApp()?.toast?.success('App installed');
            this.render();
        }
    }

    logout() {
        this.getAuth()?.logout();
        this.render();
        this.getApp()?.toast?.success('Signed out successfully');
    }

    clearCache() {
        const storage = this.getStorage();
        if (storage) {
            storage.clear();
            storage.setTheme(this.getTheme()?.getTheme() || 'dark');
        }
        this.getApp()?.toast?.success('Cache cleared');
    }
}

customElements.define('settings-page', SettingsPage);

export { SettingsPage };