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

    <div class="privacy-content">
        <section class="privacy-section">
            <div class="section-icon">👁️</div>
            <h2><?= \App\Helpers\Lang::t('visibility') ?></h2>
            <div class="option-group">
                <label class="option-radio">
                    <input type="radio" name="visibility" value="public" checked>
                    <span class="option-title"><?= \App\Helpers\Lang::t('public_profile') ?></span>
                    <span class="option-desc"><?= \App\Helpers\Lang::t('public_profile_desc') ?></span>
                </label>
            </div>
            <div class="option-group">
                <label class="option-radio">
                    <input type="radio" name="visibility" value="private">
                    <span class="option-title"><?= \App\Helpers\Lang::t('private_profile') ?></span>
                    <span class="option-desc"><?= \App\Helpers\Lang::t('private_profile_desc') ?></span>
                </label>
            </div>
            <div class="option-group">
                <label class="option-radio">
                    <input type="radio" name="visibility" value="friends">
                    <span class="option-title"><?= \App\Helpers\Lang::t('friends_profile') ?></span>
                    <span class="option-desc"><?= \App\Helpers\Lang::t('friends_profile_desc') ?></span>
                </label>
            </div>
        </section>

        <section class="privacy-section">
            <div class="section-icon">📧</div>
            <h2><?= \App\Helpers\Lang::t('email_contacts') ?></h2>
            <div class="option-group">
                <label class="option-checkbox">
                    <input type="checkbox" checked>
                    <span class="option-title"><?= \App\Helpers\Lang::t('email_visible_mod') ?></span>
                    <span class="option-desc"><?= \App\Helpers\Lang::t('email_visible_mod_desc') ?></span>
                </label>
            </div>
            <div class="option-group">
                <label class="option-checkbox">
                    <input type="checkbox">
                    <span class="option-title"><?= \App\Helpers\Lang::t('allow_email_comm') ?></span>
                    <span class="option-desc"><?= \App\Helpers\Lang::t('allow_email_comm_desc') ?></span>
                </label>
            </div>
            <button class="btn btn-secondary" onclick="changeEmail()"><?= \App\Helpers\Lang::t('change_email') ?></button>
        </section>

        <section class="privacy-section">
            <div class="section-icon">🔑</div>
            <h2><?= \App\Helpers\Lang::t('password_access') ?></h2>
            <div class="security-info">
                <p><?= \App\Helpers\Lang::t('password_access_desc') ?></p>
            </div>
            <button class="btn btn-secondary" onclick="changePassword()"><?= \App\Helpers\Lang::t('change_password') ?></button>
            <button class="btn btn-secondary" onclick="enable2FA()"><?= \App\Helpers\Lang::t('enable_2fa') ?></button>
            <button class="btn btn-danger-light" onclick="logoutAllDevices()"><?= \App\Helpers\Lang::t('logout_all') ?></button>
        </section>

        <section class="privacy-section">
            <div class="section-icon">📱</div>
            <h2><?= \App\Helpers\Lang::t('active_sessions') ?></h2>
            <div class="sessions-list">
                <div class="session-card">
                    <div class="session-device">
                        <i class="fas fa-laptop"></i>
                        <div>
                            <strong>Chrome на Windows</strong>
                            <small>202.54.1.2</small>
                        </div>
                    </div>
                    <div class="session-time">
                        <small><?= \App\Helpers\Lang::t('last_access') ?>: <?= sprintf(\App\Helpers\Lang::t('ago_min'), 5) ?></small>
                    </div>
                    <button class="btn btn-sm btn-text"><?= \App\Helpers\Lang::t('logout') ?></button>
                </div>
                <div class="session-card">
                    <div class="session-device">
                        <i class="fas fa-mobile"></i>
                        <div>
                            <strong>Safari на iOS</strong>
                            <small>192.168.1.5</small>
                        </div>
                    </div>
                    <div class="session-time">
                        <small><?= \App\Helpers\Lang::t('last_access') ?>: <?= sprintf(\App\Helpers\Lang::t('ago_hours'), 2) ?></small>
                    </div>
                    <button class="btn btn-sm btn-text"><?= \App\Helpers\Lang::t('logout') ?></button>
                </div>
            </div>
        </section>

        <section class="privacy-section">
            <div class="section-icon">📊</div>
            <h2><?= \App\Helpers\Lang::t('data_analytics') ?></h2>
            <div class="option-group">
                <label class="option-checkbox">
                    <input type="checkbox" checked>
                    <span class="option-title"><?= \App\Helpers\Lang::t('collect_analytics') ?></span>
                    <span class="option-desc"><?= \App\Helpers\Lang::t('collect_analytics_desc') ?></span>
                </label>
            </div>
            <div class="option-group">
                <label class="option-checkbox">
                    <input type="checkbox">
                    <span class="option-title"><?= \App\Helpers\Lang::t('personalized_rec') ?></span>
                    <span class="option-desc"><?= \App\Helpers\Lang::t('personalized_rec_desc') ?></span>
                </label>
            </div>
            <button class="btn btn-secondary" onclick="downloadData()"><?= \App\Helpers\Lang::t('download_data') ?></button>
            <button class="btn btn-danger-light" onclick="deleteAllData()"><?= \App\Helpers\Lang::t('delete_all_data') ?></button>
        </section>

        <section class="privacy-section">
            <div class="section-icon">🚫</div>
            <h2><?= \App\Helpers\Lang::t('blocking_filtering') ?></h2>
            <div class="blocked-users">
                <h3><?= \App\Helpers\Lang::t('blocked_users_title') ?></h3>
                <p class="no-blocked"><?= \App\Helpers\Lang::t('no_blocked_users') ?></p>
                <button class="btn btn-secondary" onclick="viewBlocked()"><?= \App\Helpers\Lang::t('manage_blocked') ?></button>
            </div>
            <div class="blocked-words" style="margin-top: 2rem;">
                <h3><?= \App\Helpers\Lang::t('word_filter') ?></h3>
                <textarea class="setting-textarea" placeholder="<?= \App\Helpers\Lang::t('word_filter_placeholder') ?>"></textarea>
                <button class="btn btn-secondary" style="margin-top: 1rem;"><?= \App\Helpers\Lang::t('save_filter') ?></button>
            </div>
        </section>

        <section class="privacy-section danger-zone">
            <div class="section-icon">⚠️</div>
            <h2><?= \App\Helpers\Lang::t('danger_zone') ?></h2>
            <div class="warning-box">
                <h3><?= \App\Helpers\Lang::t('delete_account') ?></h3>
                <p><?= \App\Helpers\Lang::t('delete_account_desc') ?></p>
                <button class="btn btn-danger" onclick="confirmDeleteAccount()"><?= \App\Helpers\Lang::t('delete_my_account') ?></button>
            </div>
        </section>

        <div class="save-actions">
            <button class="btn btn-primary" onclick="savePrivacySettings()">💾 <?= \App\Helpers\Lang::t('save_settings') ?></button>
        </div>
    </div>
</div>

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

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

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

.privacy-header p {
    color: var(--text-muted);
}

.privacy-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.privacy-section {
    padding: 2rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.privacy-section.danger-zone {
    border-color: rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.05);
}

.section-icon {
    font-size: 2rem;
    text-align: center;
}

.privacy-section h2 {
    grid-column: 2;
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.option-group {
    grid-column: 2;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(99,102,241,0.05);
    border-radius: 0.5rem;
    transition: all 0.3s;
}

.option-group:hover {
    background: rgba(99,102,241,0.1);
}

.option-radio, .option-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.option-radio input, .option-checkbox input {
    margin-top: 0.25rem;
    cursor: pointer;
}

.option-title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.option-desc {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.security-info {
    grid-column: 2;
}

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

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

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

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-secondary:hover {
    background: rgba(99,102,241,0.05);
    border-color: #6366f1;
}

.btn-danger {
    background: #ef4444;
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-danger-light {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
}

.btn-danger-light:hover {
    background: rgba(239,68,68,0.2);
}

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

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

.sessions-list {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.session-card {
    padding: 1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.session-device {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.session-device i {
    font-size: 1.5rem;
    color: #6366f1;
}

.session-device strong {
    display: block;
}

.session-device small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.session-time {
    flex-shrink: 0;
}

.blocked-users {
    grid-column: 2;
}

.no-blocked {
    color: var(--text-muted);
    margin: 1rem 0;
}

.blocked-words {
    grid-column: 2;
}

.setting-textarea {
    width: 100%;
    height: 120px;
    padding: 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text);
    font-family: inherit;
    resize: vertical;
}

.warning-box {
    grid-column: 2;
    padding: 1.5rem;
    background: rgba(239,68,68,0.05);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 0.5rem;
}

.warning-box h3 {
    margin-top: 0;
    color: #ef4444;
}

.save-actions {
    text-align: right;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
    .privacy-section {
        grid-template-columns: 1fr;
    }

    .privacy-section h2,
    .option-group,
    .security-info,
    .sessions-list,
    .blocked-users,
    .blocked-words,
    .warning-box {
        grid-column: 1;
    }

    .session-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .save-actions {
        text-align: center;
    }

    .btn {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.75rem;
    }
}
</style>

<script>
function changeEmail() {
    alert(window.translations.feature_change_email || 'Change email feature');
}

function changePassword() {
    alert(window.translations.feature_change_password || 'Change password feature');
}

function enable2FA() {
    alert(window.translations.feature_enable_2fa || 'Enable 2FA feature');
}

function logoutAllDevices() {
    if (confirm(window.translations.confirm_logout_all || 'Are you sure? All active sessions will be terminated.')) {
        fetch('/api/logout-all-devices', { method: 'POST' })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    alert(window.translations.logout_all_success || 'You have been logged out from all devices');
                    location.href = '/login';
                }
            });
    }
}

function viewBlocked() {
    alert(window.translations.feature_view_blocked || 'View blocked users feature');
}

function downloadData() {
    alert(window.translations.downloading_data || 'Downloading your data...');
}

function deleteAllData() {
    if (confirm(window.translations.confirm_delete_all_data || 'This will delete all your data. This action is irreversible!')) {
        alert(window.translations.data_delete_notice || 'Data will be deleted within 30 days');
    }
}

function confirmDeleteAccount() {
    if (confirm(window.translations.confirm_delete_account_final || 'Are you sure you want to delete your account? This action is irreversible!')) {
        const password = prompt(window.translations.enter_password_confirm || 'Enter your password to confirm:');
        if (password) {
            alert(window.translations.account_will_be_deleted || 'Account will be deleted');
        }
    }
}

function savePrivacySettings() {
    alert(window.translations.privacy_settings_saved || '✓ Privacy settings saved');
}
</script>
