{% extends "settings/layout.html.twig" %}
{% trans_default_domain "Settings" %}

{% block settings_content %}
    {# Profile Visibility #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'privacy.profile_visibility_title'|trans }}</h3>
        <p class="form-hint" style="margin-bottom: 16px;">{{ 'privacy.profile_visibility_desc'|trans }}</p>

        <div class="privacy-radio-group">
            <label class="privacy-radio-option {{ user.profileVisibility == 'public' ? 'selected' : '' }}">
                <input type="radio" name="profileVisibility" value="public" {{ user.profileVisibility == 'public' ? 'checked' : '' }} onchange="updatePrivacySetting('profileVisibility', this.value)">
                <div class="privacy-radio-content">
                    <i class="fa fa-globe"></i>
                    <div>
                        <div class="privacy-radio-label">{{ 'privacy.visibility_public'|trans }}</div>
                        <div class="privacy-radio-desc">{{ 'privacy.visibility_public_desc'|trans }}</div>
                    </div>
                </div>
            </label>
            <label class="privacy-radio-option {{ user.profileVisibility == 'followers_only' ? 'selected' : '' }}">
                <input type="radio" name="profileVisibility" value="followers_only" {{ user.profileVisibility == 'followers_only' ? 'checked' : '' }} onchange="updatePrivacySetting('profileVisibility', this.value)">
                <div class="privacy-radio-content">
                    <i class="fa fa-users"></i>
                    <div>
                        <div class="privacy-radio-label">{{ 'privacy.visibility_followers'|trans }}</div>
                        <div class="privacy-radio-desc">{{ 'privacy.visibility_followers_desc'|trans }}</div>
                    </div>
                </div>
            </label>
            <label class="privacy-radio-option {{ user.profileVisibility == 'private' ? 'selected' : '' }}">
                <input type="radio" name="profileVisibility" value="private" {{ user.profileVisibility == 'private' ? 'checked' : '' }} onchange="updatePrivacySetting('profileVisibility', this.value)">
                <div class="privacy-radio-content">
                    <i class="fa fa-lock"></i>
                    <div>
                        <div class="privacy-radio-label">{{ 'privacy.visibility_private'|trans }}</div>
                        <div class="privacy-radio-desc">{{ 'privacy.visibility_private_desc'|trans }}</div>
                    </div>
                </div>
            </label>
        </div>
    </div>

    {# Field-Level Visibility #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'privacy.field_visibility_title'|trans }}</h3>
        <p class="form-hint" style="margin-bottom: 16px;">{{ 'privacy.field_visibility_desc'|trans }}</p>

        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'privacy.show_bio'|trans }}</div>
                <div class="toggle-desc">{{ 'privacy.show_bio_desc'|trans }}</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" data-field="showBio" {{ user.showBio ? 'checked' : '' }} onchange="updatePrivacySetting('showBio', this.checked)">
                <span class="toggle-slider"></span>
            </label>
        </div>

        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'privacy.show_employment'|trans }}</div>
                <div class="toggle-desc">{{ 'privacy.show_employment_desc'|trans }}</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" data-field="showEmployment" {{ user.showEmployment ? 'checked' : '' }} onchange="updatePrivacySetting('showEmployment', this.checked)">
                <span class="toggle-slider"></span>
            </label>
        </div>

        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'privacy.show_social_links'|trans }}</div>
                <div class="toggle-desc">{{ 'privacy.show_social_links_desc'|trans }}</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" data-field="showSocialLinks" {{ user.showSocialLinks ? 'checked' : '' }} onchange="updatePrivacySetting('showSocialLinks', this.checked)">
                <span class="toggle-slider"></span>
            </label>
        </div>

        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'privacy.show_interests'|trans }}</div>
                <div class="toggle-desc">{{ 'privacy.show_interests_desc'|trans }}</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" data-field="showInterests" {{ user.showInterests ? 'checked' : '' }} onchange="updatePrivacySetting('showInterests', this.checked)">
                <span class="toggle-slider"></span>
            </label>
        </div>

        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'privacy.show_follower_count'|trans }}</div>
                <div class="toggle-desc">{{ 'privacy.show_follower_count_desc'|trans }}</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" data-field="showFollowerCount" {{ user.showFollowerCount ? 'checked' : '' }} onchange="updatePrivacySetting('showFollowerCount', this.checked)">
                <span class="toggle-slider"></span>
            </label>
        </div>

        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'privacy.show_followers_list'|trans }}</div>
                <div class="toggle-desc">{{ 'privacy.show_followers_list_desc'|trans }}</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" data-field="showFollowersList" {{ user.showFollowersList ? 'checked' : '' }} onchange="updatePrivacySetting('showFollowersList', this.checked)">
                <span class="toggle-slider"></span>
            </label>
        </div>

        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'privacy.show_following_list'|trans }}</div>
                <div class="toggle-desc">{{ 'privacy.show_following_list_desc'|trans }}</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" data-field="showFollowingList" {{ user.showFollowingList ? 'checked' : '' }} onchange="updatePrivacySetting('showFollowingList', this.checked)">
                <span class="toggle-slider"></span>
            </label>
        </div>

        <div class="toggle-row">
            <div>
                <div class="toggle-label">{{ 'privacy.show_visitor_count'|trans }}</div>
                <div class="toggle-desc">{{ 'privacy.show_visitor_count_desc'|trans }}</div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" data-field="showVisitorCount" {{ user.showVisitorCount ? 'checked' : '' }} onchange="updatePrivacySetting('showVisitorCount', this.checked)">
                <span class="toggle-slider"></span>
            </label>
        </div>
    </div>

    {# Messaging Privacy #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'privacy.messaging_title'|trans }}</h3>
        <p class="form-hint" style="margin-bottom: 16px;">{{ 'privacy.messaging_desc'|trans }}</p>

        <div class="privacy-radio-group">
            <label class="privacy-radio-option {{ user.messagingPrivacy == 'everyone' ? 'selected' : '' }}">
                <input type="radio" name="messagingPrivacy" value="everyone" {{ user.messagingPrivacy == 'everyone' ? 'checked' : '' }} onchange="updatePrivacySetting('messagingPrivacy', this.value)">
                <div class="privacy-radio-content">
                    <i class="fa fa-globe"></i>
                    <div>
                        <div class="privacy-radio-label">{{ 'privacy.messaging_everyone'|trans }}</div>
                        <div class="privacy-radio-desc">{{ 'privacy.messaging_everyone_desc'|trans }}</div>
                    </div>
                </div>
            </label>
            <label class="privacy-radio-option {{ user.messagingPrivacy == 'followers_only' ? 'selected' : '' }}">
                <input type="radio" name="messagingPrivacy" value="followers_only" {{ user.messagingPrivacy == 'followers_only' ? 'checked' : '' }} onchange="updatePrivacySetting('messagingPrivacy', this.value)">
                <div class="privacy-radio-content">
                    <i class="fa fa-users"></i>
                    <div>
                        <div class="privacy-radio-label">{{ 'privacy.messaging_followers'|trans }}</div>
                        <div class="privacy-radio-desc">{{ 'privacy.messaging_followers_desc'|trans }}</div>
                    </div>
                </div>
            </label>
            <label class="privacy-radio-option {{ user.messagingPrivacy == 'nobody' ? 'selected' : '' }}">
                <input type="radio" name="messagingPrivacy" value="nobody" {{ user.messagingPrivacy == 'nobody' ? 'checked' : '' }} onchange="updatePrivacySetting('messagingPrivacy', this.value)">
                <div class="privacy-radio-content">
                    <i class="fa fa-ban"></i>
                    <div>
                        <div class="privacy-radio-label">{{ 'privacy.messaging_nobody'|trans }}</div>
                        <div class="privacy-radio-desc">{{ 'privacy.messaging_nobody_desc'|trans }}</div>
                    </div>
                </div>
            </label>
        </div>
    </div>

    {# Default Post Visibility #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'privacy.default_post_title'|trans }}</h3>
        <p class="form-hint" style="margin-bottom: 16px;">{{ 'privacy.default_post_desc'|trans }}</p>

        <div class="privacy-radio-group">
            <label class="privacy-radio-option {{ user.defaultPostVisibility == 'public' ? 'selected' : '' }}">
                <input type="radio" name="defaultPostVisibility" value="public" {{ user.defaultPostVisibility == 'public' ? 'checked' : '' }} onchange="updatePrivacySetting('defaultPostVisibility', this.value)">
                <div class="privacy-radio-content">
                    <i class="fa fa-globe"></i>
                    <div>
                        <div class="privacy-radio-label">{{ 'privacy.post_public'|trans }}</div>
                        <div class="privacy-radio-desc">{{ 'privacy.post_public_desc'|trans }}</div>
                    </div>
                </div>
            </label>
            <label class="privacy-radio-option {{ user.defaultPostVisibility == 'followers' ? 'selected' : '' }}">
                <input type="radio" name="defaultPostVisibility" value="followers" {{ user.defaultPostVisibility == 'followers' ? 'checked' : '' }} onchange="updatePrivacySetting('defaultPostVisibility', this.value)">
                <div class="privacy-radio-content">
                    <i class="fa fa-users"></i>
                    <div>
                        <div class="privacy-radio-label">{{ 'privacy.post_followers'|trans }}</div>
                        <div class="privacy-radio-desc">{{ 'privacy.post_followers_desc'|trans }}</div>
                    </div>
                </div>
            </label>
            <label class="privacy-radio-option {{ user.defaultPostVisibility == 'private' ? 'selected' : '' }}">
                <input type="radio" name="defaultPostVisibility" value="private" {{ user.defaultPostVisibility == 'private' ? 'checked' : '' }} onchange="updatePrivacySetting('defaultPostVisibility', this.value)">
                <div class="privacy-radio-content">
                    <i class="fa fa-lock"></i>
                    <div>
                        <div class="privacy-radio-label">{{ 'privacy.post_private'|trans }}</div>
                        <div class="privacy-radio-desc">{{ 'privacy.post_private_desc'|trans }}</div>
                    </div>
                </div>
            </label>
        </div>
    </div>

    <style>
    .privacy-radio-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .privacy-radio-option {
        display: block;
        border: 2px solid var(--border-color);
        border-radius: 10px;
        padding: 14px 16px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .privacy-radio-option:hover {
        border-color: var(--primary-color);
        background: var(--bg-light);
    }
    .privacy-radio-option.selected {
        border-color: var(--primary-color);
        background: rgba(0, 165, 80, 0.04);
    }
    .privacy-radio-option input[type="radio"] {
        display: none;
    }
    .privacy-radio-content {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .privacy-radio-content > i {
        font-size: 18px;
        color: var(--text-muted);
        width: 24px;
        text-align: center;
        flex-shrink: 0;
    }
    .privacy-radio-option.selected .privacy-radio-content > i {
        color: var(--primary-color);
    }
    .privacy-radio-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-color);
    }
    .privacy-radio-desc {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
    }
    </style>

    <script>
    function updatePrivacySetting(field, value) {
        var fd = new FormData();
        fd.append('field', field);
        fd.append('value', value);

        fetch('{{ path("app_settings_privacy_update") }}', {
            method: 'POST',
            body: fd
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                showToast('{{ "toast.saved"|trans }}', 'success');
                // Update radio visual state
                updateRadioVisuals(field, value);
            } else {
                showToast('{{ "toast.error"|trans }}', 'error');
            }
        })
        .catch(function() {
            showToast('{{ "toast.error"|trans }}', 'error');
        });
    }

    function updateRadioVisuals(field, value) {
        var radios = document.querySelectorAll('input[name="' + field + '"]');
        radios.forEach(function(radio) {
            var option = radio.closest('.privacy-radio-option');
            if (option) {
                if (radio.value === value) {
                    option.classList.add('selected');
                } else {
                    option.classList.remove('selected');
                }
            }
        });
    }
    </script>
{% endblock %}