<div class="settings-container">
    <div class="settings-header">
        <h1><?= \App\Helpers\Lang::t('settings') ?></h1>
        <p><?= \App\Helpers\Lang::t('settings_desc') ?></p>
    </div>

    <div class="settings-layout">
        <aside class="settings-sidebar">
            <nav class="settings-nav">
                <a href="#general" class="nav-item active" onclick="switchTab(event, 'general')">
                    <i class="fas fa-cog"></i> <?= \App\Helpers\Lang::t('general') ?>
                </a>
                <a href="#appearance" class="nav-item" onclick="switchTab(event, 'appearance')">
                    <i class="fas fa-palette"></i> <?= \App\Helpers\Lang::t('appearance') ?>
                </a>
                <a href="#notifications" class="nav-item" onclick="switchTab(event, 'notifications')">
                    <i class="fas fa-bell"></i> <?= \App\Helpers\Lang::t('notifications') ?>
                </a>
                <a href="#shortcuts" class="nav-item" onclick="switchTab(event, 'shortcuts')">
                    <i class="fas fa-keyboard"></i> <?= \App\Helpers\Lang::t('shortcuts') ?>
                </a>
                <a href="#privacy" class="nav-item" onclick="switchTab(event, 'privacy')">
                    <i class="fas fa-shield"></i> <?= \App\Helpers\Lang::t('privacy') ?>
                </a>
                <a href="#accessibility" class="nav-item" onclick="switchTab(event, 'accessibility')">
                    <i class="fas fa-wheelchair"></i> <?= \App\Helpers\Lang::t('accessibility') ?>
                </a>
            </nav>
        </aside>

        <main class="settings-content">
            <!-- General Settings -->
            <section id="general" class="settings-section active">
                <h2><?= \App\Helpers\Lang::t('general_settings') ?></h2>
                
                <div class="setting-group">
                    <label><?= \App\Helpers\Lang::t('language') ?></label>
                    <select class="setting-select" onchange="changeLang(this.value)">
                        <option value="uk" <?= \App\Helpers\Lang::get() == 'uk' ? 'selected' : '' ?>>Українська</option>
                        <option value="en" <?= \App\Helpers\Lang::get() == 'en' ? 'selected' : '' ?>>English</option>
                        <option value="ru" <?= \App\Helpers\Lang::get() == 'ru' ? 'selected' : '' ?>>Русский</option>
                    </select>
                </div>

                <div class="setting-group">
                    <label><?= \App\Helpers\Lang::t('timezone') ?></label>
                    <select class="setting-select">
                        <option selected>UTC + 2 (Київ)</option>
                        <option>UTC + 0</option>
                        <option>UTC - 5 (Нью-Йорк)</option>
                    </select>
                </div>

                <div class="setting-group">
                    <label><?= \App\Helpers\Lang::t('items_per_page') ?></label>
                    <input type="number" class="setting-input" value="20" min="5" max="100">
                </div>

                <div class="setting-group">
                    <label>
                        <input type="checkbox" checked> <?= \App\Helpers\Lang::t('auto_load') ?>
                    </label>
                </div>

                <button class="btn btn-primary" onclick="saveSettings('general')"><?= \App\Helpers\Lang::t('save') ?></button>
            </section>

            <!-- Appearance Settings -->
            <section id="appearance" class="settings-section">
                <h2><?= \App\Helpers\Lang::t('appearance_settings') ?></h2>
                
                <div class="setting-group">
                    <label><?= \App\Helpers\Lang::t('theme') ?></label>
                    <div class="theme-selector">
                        <div class="theme-option" onclick="setTheme('light')" data-theme="light">
                            <div class="theme-preview light"></div>
                            <span><?= \App\Helpers\Lang::t('light') ?></span>
                        </div>
                        <div class="theme-option" onclick="setTheme('dark')" data-theme="dark">
                            <div class="theme-preview dark"></div>
                            <span><?= \App\Helpers\Lang::t('dark') ?></span>
                        </div>
                        <div class="theme-option" onclick="setTheme('auto')" data-theme="auto">
                            <div class="theme-preview auto"></div>
                            <span><?= \App\Helpers\Lang::t('auto') ?></span>
                        </div>
                    </div>
                </div>

                <div class="setting-group">
                    <label>
                        <input type="checkbox" checked> <?= \App\Helpers\Lang::t('compact_view') ?>
                    </label>
                    <small><?= \App\Helpers\Lang::t('compact_view_desc') ?></small>
                </div>

                <div class="setting-group">
                    <label>
                        <input type="checkbox" checked> <?= \App\Helpers\Lang::t('animations') ?>
                    </label>
                    <small><?= \App\Helpers\Lang::t('animations_desc') ?></small>
                </div>

                <div class="setting-group">
                    <label><?= \App\Helpers\Lang::t('font_size') ?></label>
                    <div class="slider-group">
                        <input type="range" min="90" max="120" value="100" class="slider">
                        <span id="fontSize">100%</span>
                    </div>
                </div>

                <button class="btn btn-primary" onclick="saveSettings('appearance')"><?= \App\Helpers\Lang::t('save') ?></button>
            </section>

            <!-- Notification Settings -->
            <section id="notifications" class="settings-section">
                <h2><?= \App\Helpers\Lang::t('notification_settings') ?></h2>
                
                <div class="notification-categories">
                    <div class="notif-category">
                        <h3><?= \App\Helpers\Lang::t('email_notifications') ?></h3>
                        <div class="setting-group">
                            <label><input type="checkbox" checked> <?= \App\Helpers\Lang::t('replies_to_posts') ?></label>
                        </div>
                        <div class="setting-group">
                            <label><input type="checkbox" checked> <?= \App\Helpers\Lang::t('likes_on_posts') ?></label>
                        </div>
                        <div class="setting-group">
                            <label><input type="checkbox"> <?= \App\Helpers\Lang::t('daily_trends') ?></label>
                        </div>
                    </div>

                    <div class="notif-category">
                        <h3><?= \App\Helpers\Lang::t('push_notifications') ?></h3>
                        <div class="setting-group">
                            <label><input type="checkbox" checked> <?= \App\Helpers\Lang::t('realtime_notif') ?></label>
                        </div>
                        <div class="setting-group">
                            <label><input type="checkbox"> <?= \App\Helpers\Lang::t('notif_sound') ?></label>
                        </div>
                        <div class="setting-group">
                            <label>
                                <?= \App\Helpers\Lang::t('quiet_hours_from') ?>
                                <input type="time" value="22:00" class="time-input">
                            </label>
                        </div>
                        <div class="setting-group">
                            <label>
                                <?= \App\Helpers\Lang::t('quiet_hours_to') ?>
                                <input type="time" value="09:00" class="time-input">
                            </label>
                        </div>
                    </div>
                </div>

                <button class="btn btn-primary" onclick="saveSettings('notifications')"><?= \App\Helpers\Lang::t('save') ?></button>
            </section>

            <!-- Keyboard Shortcuts -->
            <section id="shortcuts" class="settings-section">
                <h2><?= \App\Helpers\Lang::t('keyboard_shortcuts') ?></h2>
                <p><?= sprintf(\App\Helpers\Lang::t('shortcut_hint'), '<strong>Shift + ?</strong>') ?></p>
                
                <div class="shortcuts-table">
                    <div class="shortcut-row header">
                        <div class="col-keys"><?= \App\Helpers\Lang::t('keys') ?></div>
                        <div class="col-action"><?= \App\Helpers\Lang::t('action') ?></div>
                        <div class="col-enabled"><?= \App\Helpers\Lang::t('enabled') ?></div>
                    </div>
                    
                    <div class="shortcut-row">
                        <div class="col-keys"><kbd>Ctrl</kbd> + <kbd>S</kbd></div>
                        <div class="col-action"><?= \App\Helpers\Lang::t('focus_search') ?></div>
                        <div class="col-enabled"><input type="checkbox" checked></div>
                    </div>
                    
                    <div class="shortcut-row">
                        <div class="col-keys"><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>N</kbd></div>
                        <div class="col-action"><?= \App\Helpers\Lang::t('new_post_shortcut') ?></div>
                        <div class="col-enabled"><input type="checkbox" checked></div>
                    </div>
                    
                    <div class="shortcut-row">
                        <div class="col-keys"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd></div>
                        <div class="col-action"><?= \App\Helpers\Lang::t('notif_shortcut') ?></div>
                        <div class="col-enabled"><input type="checkbox" checked></div>
                    </div>
                    
                    <div class="shortcut-row">
                        <div class="col-keys"><kbd>Ctrl</kbd> + <kbd>D</kbd></div>
                        <div class="col-action"><?= \App\Helpers\Lang::t('panel_shortcut') ?></div>
                        <div class="col-enabled"><input type="checkbox" checked></div>
                    </div>
                    
                    <div class="shortcut-row">
                        <div class="col-keys"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd></div>
                        <div class="col-action"><?= \App\Helpers\Lang::t('toggle_theme_shortcut') ?></div>
                        <div class="col-enabled"><input type="checkbox" checked></div>
                    </div>
                </div>

                <button class="btn btn-primary" onclick="saveSettings('shortcuts')"><?= \App\Helpers\Lang::t('save') ?></button>
            </section>

            <!-- Privacy Settings (Summary) -->
            <section id="privacy" class="settings-section">
                <h2><?= \App\Helpers\Lang::t('privacy_security') ?></h2>
                
                <div class="privacy-group">
                    <h3>👁️ <?= \App\Helpers\Lang::t('visibility') ?></h3>
                    <div class="setting-group">
                        <label>
                            <input type="radio" name="profile-visibility" value="public" checked>
                            <?= \App\Helpers\Lang::t('public_profile') ?> - <?= \App\Helpers\Lang::t('public_profile_desc') ?>
                        </label>
                    </div>
                    <div class="setting-group">
                        <label>
                            <input type="radio" name="profile-visibility" value="private">
                            <?= \App\Helpers\Lang::t('private_profile') ?> - <?= \App\Helpers\Lang::t('private_profile_desc') ?>
                        </label>
                    </div>
                </div>

                <div class="privacy-group">
                    <h3>📊 <?= \App\Helpers\Lang::t('data_analytics') ?></h3>
                    <div class="setting-group">
                        <label>
                            <input type="checkbox" checked> <?= \App\Helpers\Lang::t('collect_analytics') ?>
                        </label>
                    </div>
                    <div class="setting-group">
                        <label>
                            <input type="checkbox"> <?= \App\Helpers\Lang::t('show_online_status') ?>
                        </label>
                    </div>
                </div>

                <div class="privacy-group">
                    <h3>🔐 <?= \App\Helpers\Lang::t('active_sessions') ?></h3>
                    <div class="session-list">
                        <div class="session-item">
                            <div>Chrome на Windows</div>
                            <small><?= \App\Helpers\Lang::t('last_access') ?>: <?= sprintf(\App\Helpers\Lang::t('ago_min'), 5) ?></small>
                            <button class="btn btn-sm btn-text"><?= \App\Helpers\Lang::t('logout') ?></button>
                        </div>
                    </div>
                </div>

                <button class="btn btn-primary" onclick="saveSettings('privacy')"><?= \App\Helpers\Lang::t('save') ?></button>
            </section>

            <!-- Accessibility Settings -->
            <section id="accessibility" class="settings-section">
                <h2><?= \App\Helpers\Lang::t('accessibility') ?></h2>
                
                <div class="setting-group">
                    <label>
                        <input type="checkbox"> <?= \App\Helpers\Lang::t('high_contrast') ?>
                    </label>
                </div>

                <div class="setting-group">
                    <label>
                        <input type="checkbox"> <?= \App\Helpers\Lang::t('reduce_motion') ?>
                    </label>
                </div>

                <div class="setting-group">
                    <label>
                        <input type="checkbox" checked> <?= \App\Helpers\Lang::t('focus_indicator') ?>
                    </label>
                </div>

                <div class="setting-group">
                    <label><?= \App\Helpers\Lang::t('cursor_size') ?></label>
                    <select class="setting-select">
                        <option><?= \App\Helpers\Lang::t('normal') ?></option>
                        <option><?= \App\Helpers\Lang::t('large') ?></option>
                        <option><?= \App\Helpers\Lang::t('very_large') ?></option>
                    </select>
                </div>

                <button class="btn btn-primary" onclick="saveSettings('accessibility')"><?= \App\Helpers\Lang::t('save') ?></button>
            </section>
        </main>
    </div>
</div>

<style>
.settings-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.settings-header {
    text-align: center;
    margin-bottom: 3rem;
}

.settings-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.settings-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 3rem;
}

.settings-sidebar {
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-item {
    padding: 0.75rem 1rem;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-item:hover {
    color: var(--text);
    background: rgba(99,102,241,0.05);
}

.nav-item.active {
    color: #6366f1;
    border-left-color: #6366f1;
    background: rgba(99,102,241,0.1);
}

.settings-content {
    min-height: 600px;
}

.settings-section {
    display: none;
    animation: slideIn 0.3s ease;
}

.settings-section.active {
    display: block;
}

.settings-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.setting-group {
    margin-bottom: 2rem;
}

.setting-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.setting-group small {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.setting-select, .setting-input {
    padding: 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text);
    font-size: 0.95rem;
    width: 100%;
    max-width: 400px;
}

.setting-input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
}

.theme-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.theme-option {
    padding: 1rem;
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s;
}

.theme-option:hover {
    border-color: #6366f1;
}

.theme-option.active {
    border-color: #6366f1;
    background: rgba(99,102,241,0.1);
}

.theme-preview {
    width: 100%;
    height: 60px;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.theme-preview.light {
    background: linear-gradient(135deg, #ffffff, #f3f4f6);
}

.theme-preview.dark {
    background: linear-gradient(135deg, #1f2937, #111827);
}

.theme-preview.auto {
    background: linear-gradient(90deg, #ffffff 50%, #1f2937 50%);
}

.slider-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.slider {
    flex: 1;
    max-width: 300px;
}

.notification-categories {
    display: grid;
    gap: 2rem;
}

.notif-category {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

.notif-category h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #6366f1;
}

.time-input {
    padding: 0.5rem;
    max-width: 150px;
}

.shortcuts-table {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.shortcut-row {
    display: grid;
    grid-template-columns: 1fr 2fr 100px;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.shortcut-row.header {
    background: rgba(99,102,241,0.05);
    font-weight: 600;
}

.shortcut-row:last-child {
    border-bottom: none;
}

.col-keys {
    display: flex;
    gap: 0.25rem;
}

kbd {
    padding: 0.25rem 0.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    font-family: monospace;
    font-size: 0.85rem;
}

.privacy-group {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    margin-bottom: 2rem;
}

.privacy-group h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #6366f1;
}

.session-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.session-item {
    padding: 1rem;
    background: rgba(99,102,241,0.05);
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-primary {
    background: #6366f1;
    color: white;
}

.btn-primary:hover {
    background: #4f46e5;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.btn-text {
    background: transparent;
    color: #6366f1;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .settings-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .settings-sidebar {
        position: relative;
        top: auto;
    }

    .settings-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .theme-selector {
        grid-template-columns: 1fr;
    }

    .shortcut-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}
</style>

<script>
function switchTab(event, tabId) {
    event.preventDefault();
    
    document.querySelectorAll('.settings-section').forEach(section => {
        section.classList.remove('active');
    });
    document.querySelectorAll('.nav-item').forEach(item => {
        item.classList.remove('active');
    });
    
    document.getElementById(tabId).classList.add('active');
    event.target.closest('.nav-item').classList.add('active');
}

function setTheme(theme) {
    document.querySelectorAll('.theme-option').forEach(opt => {
        opt.classList.remove('active');
    });
    document.querySelector(`[data-theme="${theme}"]`).classList.add('active');
    
    if (window.themeManager) {
        window.themeManager.applyTheme(theme);
    }
}

function changeLang(lang) {
    if (window.setLang) window.setLang(lang);
    else window.location.href = '/language?lang=' + lang;
}

function saveSettings(section) {
    const sectionName = window.translations[section] || section;
    alert(window.translations.settings_saved_section?.replace('%s', sectionName) || 'Settings saved');
}

document.addEventListener('DOMContentLoaded', () => {
    const currentTheme = localStorage.getItem('theme') || 'light';
    document.querySelector(`[data-theme="${currentTheme}"]`)?.classList.add('active');
    
    document.querySelector('.slider')?.addEventListener('input', (e) => {
        document.getElementById('fontSize').textContent = e.target.value + '%';
    });
});
</script>
