{% extends 'dashboard/layout.html' %}
{% block title %}{{ _('Edit Profile - Dashboard') }}{% endblock %}
{% set active_page = 'profile' %}

{% block dashboard_content %}
<div class="mb-6">
    <h1 class="text-xl font-bold text-gray-900 dark:text-white"><i class="fa fa-user-pen mr-2 text-indigo-500"></i>{{ _('Edit Profile') }}</h1>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ _('Manage your account information, security, and notification preferences.') }}</p>
</div>

<!-- Alert area (filled by JS) -->
<div id="profile-alert" class="hidden mb-5"></div>

<!-- Tabs -->
<div class="flex gap-1 mb-5 border-b border-gray-200 dark:border-gray-700">
    <button onclick="switchTab('profile')" id="tab-profile"
        class="tab-btn px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors border-indigo-500 text-indigo-600 dark:text-indigo-400" data-testid="tab-profile">
        <i class="fa fa-user mr-1.5"></i>{{ _('Profile') }}
    </button>
    <button onclick="switchTab('password')" id="tab-password"
        class="tab-btn px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700" data-testid="tab-password">
        <i class="fa fa-lock mr-1.5"></i>{{ _('Password') }}
    </button>
    <button onclick="switchTab('notifications')" id="tab-notifications"
        class="tab-btn px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700" data-testid="tab-notifications">
        <i class="fa fa-bell mr-1.5"></i>{{ _('Notifications') }}
    </button>
    <button onclick="switchTab('social')" id="tab-social"
        class="tab-btn px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700" data-testid="tab-social">
        <i class="fa fa-link mr-1.5"></i>{{ _('Social Login') }}
    </button>
</div>

<!-- Profile Tab -->
<div id="section-profile">
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden">
    <form id="form-profile" enctype="multipart/form-data">
        <input type="hidden" name="action" value="profile">
        <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800">
            <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-4">{{ _('Account Info') }}</h2>

            <!-- Profile Picture -->
            <div class="flex items-center gap-5 mb-5">
                {%- set _upic_raw = user.get('profile_picture') or '' -%}
                {%- set _upic = _upic_raw if _upic_raw.startswith('/') else ('/static/avatars/' ~ _upic_raw if _upic_raw else '') -%}
                <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-full overflow-hidden bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center flex-shrink-0" data-testid="img-avatar" id="avatar-wrapper">
                    {% if _upic %}
                    <img id="avatar-preview" src="{{ _upic }}" alt="{{ user.username }}" class="w-full h-full object-cover">
                    <span id="avatar-initials" class="text-xl sm:text-2xl font-bold text-white hidden">{{ user.username[0].upper() }}</span>
                    {% else %}
                    <img id="avatar-preview" src="" alt="" class="w-full h-full object-cover hidden">
                    <span id="avatar-initials" class="text-xl sm:text-2xl font-bold text-white">{{ user.username[0].upper() }}</span>
                    {% endif %}
                </div>
                <div class="min-w-0 flex-1">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _('Profile Picture') }}</label>
                    <input type="file" name="profile_picture" id="input-avatar" accept="image/jpeg,image/png,image/gif,image/webp"
                           class="w-full text-sm text-gray-600 dark:text-gray-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-indigo-50 file:text-indigo-700 dark:file:bg-indigo-900/30 dark:file:text-indigo-300 hover:file:bg-indigo-100 transition-all"
                           data-testid="input-profile-picture">
                    <p class="text-xs text-gray-400 mt-1">{{ _('JPG, PNG, GIF, WebP · Max 2 MB') }}</p>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="username">{{ _('Username') }} <span class="text-red-500">*</span></label>
                    <input type="text" id="username" name="username" value="{{ user.username }}"
                           class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           data-testid="input-profile-username" required minlength="3">
                    <p class="text-xs text-gray-400 mt-0.5">{{ _('Used to log in. Min 3 characters.') }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="display_name">{{ _('Display Name') }}</label>
                    <input type="text" id="display_name" name="display_name" value="{{ user.get('display_name','') }}"
                           class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           data-testid="input-display-name" maxlength="80">
                    <p class="text-xs text-gray-400 mt-0.5">{{ _('How your name appears publicly.') }}</p>
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="email">{{ _('Email Address') }} <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input type="email" id="email" name="email" value="{{ user.email }}"
                               class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white px-3 py-2 pr-24 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                               data-testid="input-profile-email" required>
                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs font-semibold
                            {% if user.get('email_verified') %}text-green-600 dark:text-green-400{% else %}text-amber-600 dark:text-amber-400{% endif %}">
                            {% if user.get('email_verified') %}<i class="fa fa-circle-check mr-0.5"></i>{{ _('Verified') }}{% else %}<i class="fa fa-clock mr-0.5"></i>{{ _('Unverified') }}{% endif %}
                        </span>
                    </div>
                    {% if not user.get('email_verified') %}
                    <p class="text-xs text-amber-600 dark:text-amber-400 mt-0.5">
                        <i class="fa fa-triangle-exclamation mr-0.5"></i>{{ _('Your email is not verified.') }}
                        <button type="button" onclick="resendVerification(this)" class="underline font-medium hover:no-underline" data-testid="btn-resend-inline">{{ _('Resend verification') }}</button>
                    </p>
                    {% endif %}
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="country">{{ _('Country') }}</label>
                    <input type="text" id="country" name="country" autocomplete="country-name"
                           value="{{ user.get('country', '') }}"
                           class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           placeholder="{{ _('Your country') }}"
                           data-testid="input-country">
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="bio">{{ _('Bio / About Me') }}</label>
                    <textarea id="bio" name="bio" rows="3" maxlength="500"
                              class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
                              data-testid="input-bio" placeholder="{{ _('Tell us a bit about yourself...') }}">{{ user.get('bio','') }}</textarea>
                    <p class="text-xs text-gray-400 mt-0.5">{{ _('Max 500 characters.') }}</p>
                </div>
            </div>
        </div>

        <!-- Account metadata -->
        <div class="px-6 py-4 flex items-center justify-between bg-gray-50 dark:bg-gray-800/50">
            <div class="text-xs text-gray-400 dark:text-gray-500">
                {{ _('Plan') }}: <span class="font-medium text-gray-600 dark:text-gray-300">{{ plan.name if plan else _('Free') }}</span>
                &nbsp;·&nbsp; {{ _('Member since') }} <span class="font-medium text-gray-600 dark:text-gray-300">{{ user.created_at[:10] if user.created_at else '—' }}</span>
            </div>
            <button type="submit" class="px-5 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-60" data-testid="button-save-profile" id="btn-save-profile">
                <i class="fa fa-floppy-disk mr-1.5"></i>{{ _('Save Profile') }}
            </button>
        </div>
    </form>
</div>

<!-- Account info cards -->
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
    <a href="{{ full_url('/account/2fa') }}" class="block rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 hover:border-purple-400 transition-colors" data-testid="card-2fa">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
                <i class="fa fa-shield-halved text-purple-600 dark:text-purple-400"></i>
            </div>
            <div>
                <div class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ _('Two-Factor Auth') }}</div>
                <div class="text-xs text-gray-500 dark:text-gray-400">
                    {% if user.get('user_totp_enabled') %}<span class="text-green-600 dark:text-green-400 font-medium">{{ _('Enabled') }}</span>{% else %}{{ _('Not enabled') }}{% endif %}
                    {% if not plan or plan.price_monthly == 0 %} · <span class="text-indigo-500">{{ _('Paid only') }}</span>{% endif %}
                </div>
            </div>
            <i class="fa fa-arrow-right text-gray-400 ml-auto"></i>
        </div>
    </a>
    <a href="{{ full_url('/pricing') }}" class="block rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 hover:border-indigo-400 transition-colors" data-testid="card-plan">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
                <i class="fa fa-credit-card text-indigo-600 dark:text-indigo-400"></i>
            </div>
            <div>
                <div class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ _('%(name)s Plan', name=plan.name if plan else _('Free')) }}</div>
                <div class="text-xs text-gray-500 dark:text-gray-400">
                    {% if plan and plan.price_monthly > 0 %}${{ "%.2f"|format(plan.price_monthly) }}/{{ _('month') }}{% else %}{{ _('Upgrade to unlock more features') }}{% endif %}
                </div>
            </div>
            <i class="fa fa-arrow-right text-gray-400 ml-auto"></i>
        </div>
    </a>
</div>
</div>

<!-- Password Tab -->
<div id="section-password" class="hidden">
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden">
    <form id="form-password">
        <input type="hidden" name="action" value="password">
        <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800">
            <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-1">{{ _('Change Password') }}</h2>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">{{ _('Your password must be at least 8 characters.') }}</p>
            <div class="space-y-4 max-w-md">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="current_password">{{ _('Current Password') }}</label>
                    <input type="password" id="current_password" name="current_password"
                           class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           data-testid="input-current-password" autocomplete="current-password">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="new_password">{{ _('New Password') }}</label>
                    <input type="password" id="new_password" name="new_password"
                           class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           data-testid="input-new-password" autocomplete="new-password" minlength="8">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="confirm_password">{{ _('Confirm New Password') }}</label>
                    <input type="password" id="confirm_password" name="confirm_password"
                           class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           data-testid="input-confirm-password" autocomplete="new-password" minlength="8">
                </div>
            </div>
        </div>
        <div class="px-6 py-4 flex items-center justify-between bg-gray-50 dark:bg-gray-800/50">
            <p class="text-xs text-gray-400">
                <a href="{{ full_url('/forgot-password') }}" class="text-indigo-500 hover:underline">{{ _('Forgot your password?') }}</a>
            </p>
            <button type="submit" class="px-5 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition-colors disabled:opacity-60" data-testid="button-change-password" id="btn-save-password">
                <i class="fa fa-lock mr-1.5"></i>{{ _('Change Password') }}
            </button>
        </div>
    </form>
</div>
</div>

<!-- Notifications Tab -->
<div id="section-notifications" class="hidden">
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden">
    <form id="form-notifications">
        <input type="hidden" name="action" value="notifications">
        <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800">
            <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-1">{{ _('Email Notification Preferences') }}</h2>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">{{ _('Choose which events trigger an email to you. All events are always stored in your in-app inbox.') }}</p>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {% set notif_labels = [
                    ('login', _('Login Alerts'), 'fa-right-to-bracket', _('New login to your account')),
                    ('file_uploaded', _('File Uploads'), 'fa-file-arrow-up', _('When a file is uploaded')),
                    ('blog_reviewed', _('Blog Reviewed'), 'fa-check-circle', _('When admin reviews your blog post')),
                    ('blog_published', _('Blog Published'), 'fa-newspaper', _('When your blog post goes live')),
                    ('plan_changed', _('Plan Changed'), 'fa-credit-card', _('When your subscription changes')),
                    ('payment_received', _('Payment Received'), 'fa-money-bill-wave', _('When payment is confirmed')),
                    ('referral_signup', _('Referral Signup'), 'fa-user-plus', _('When someone uses your referral')),
                    ('password_changed', _('Password Changed'), 'fa-lock', _('When your password changes')),
                ] %}
                {% for key, label, icon, desc in notif_labels %}
                <label class="flex items-start gap-3 p-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-all" data-testid="label-notif-{{ key }}">
                    <input type="checkbox" name="notif_{{ key }}" value="1"
                           {% if prefs and prefs.get(key, 1) %}checked{% endif %}
                           class="mt-0.5 rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
                           data-testid="check-notif-{{ key }}">
                    <div>
                        <div class="text-sm font-medium text-gray-800 dark:text-gray-200 flex items-center gap-1.5">
                            <i class="fa {{ icon }} text-indigo-500 text-xs"></i> {{ label }}
                        </div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ desc }}</div>
                    </div>
                </label>
                {% endfor %}
            </div>
        </div>
        <div class="px-6 py-4 bg-gray-50 dark:bg-gray-800/50 text-right">
            <button type="submit" class="px-5 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition-colors disabled:opacity-60" data-testid="button-save-notifications" id="btn-save-notifications">
                <i class="fa fa-floppy-disk mr-1.5"></i>{{ _('Save Preferences') }}
            </button>
        </div>
    </form>
</div>
</div>

<!-- Social Login Tab -->
<div id="section-social" class="hidden">
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden">
    <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800">
        <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">{{ _('Connected Accounts') }}</h2>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Link social accounts to sign in more easily.') }}</p>
    </div>
    <div class="px-6 py-5">
        <!-- Google -->
        <div class="py-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center flex-shrink-0">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="w-6 h-6">
                            <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
                            <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
                            <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
                            <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Google</p>
                        {% if user.get('google_email') %}
                        <p class="text-xs text-green-600 dark:text-green-400"><i class="fa fa-circle-check mr-1"></i>{{ _('Connected as') }} {{ user['google_email'] }}</p>
                        {% else %}
                        <p class="text-xs text-gray-400">{{ _('Not connected') }}</p>
                        {% endif %}
                    </div>
                </div>
                {% if user.get('google_email') %}
                <button type="button" onclick="document.getElementById('google-disconnect-form').classList.toggle('hidden')"
                    class="px-4 py-1.5 rounded-lg border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 text-xs font-semibold hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                    data-testid="btn-unlink-google">
                    <i class="fa fa-link-slash mr-1"></i>{{ _('Disconnect') }}
                </button>
                {% else %}
                <button type="button" onclick="document.getElementById('google-connect-form').classList.toggle('hidden')"
                    class="px-4 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold transition-colors"
                    data-testid="btn-link-google">
                    <i class="fa fa-plus mr-1"></i>{{ _('Connect') }}
                </button>
                {% endif %}
            </div>
            {% if user.get('google_email') %}
            <form id="google-disconnect-form" method="POST" action="{{ full_url('/account/social/unlink-google') }}" class="hidden mt-3 p-4 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-800 rounded-xl">
                <p class="text-xs text-red-700 dark:text-red-400 mb-3 font-medium">{{ _('Enter your current password to disconnect Google.') }}</p>
                <div class="flex gap-2 items-center">
                    <input type="password" name="current_password" placeholder="{{ _('Current password') }}"
                        class="flex-1 px-3 py-2 rounded-lg border border-red-300 dark:border-red-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-red-400"
                        required autocomplete="current-password">
                    <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-xs font-semibold transition-colors whitespace-nowrap">
                        <i class="fa fa-link-slash mr-1"></i>{{ _('Confirm Disconnect') }}
                    </button>
                </div>
            </form>
            {% else %}
            <form id="google-connect-form" method="POST" action="{{ full_url('/account/social/verify-for-google-link') }}" class="hidden mt-3 p-4 bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 rounded-xl">
                <p class="text-xs text-blue-700 dark:text-blue-400 mb-3 font-medium">{{ _('Enter your current password to connect your Google account.') }}</p>
                <div class="flex gap-2 items-center">
                    <input type="password" name="current_password" placeholder="{{ _('Current password') }}"
                        class="flex-1 px-3 py-2 rounded-lg border border-blue-300 dark:border-blue-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                        required autocomplete="current-password">
                    <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold transition-colors whitespace-nowrap">
                        <i class="fab fa-google mr-1"></i>{{ _('Continue with Google') }}
                    </button>
                </div>
            </form>
            {% endif %}
        </div>

        <div class="border-t border-gray-100 dark:border-gray-800"></div>

        <!-- Microsoft -->
        <div class="py-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center flex-shrink-0">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" class="w-6 h-6"><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Microsoft</p>
                        {% if user.get('microsoft_email') %}
                        <p class="text-xs text-green-600 dark:text-green-400"><i class="fa fa-circle-check mr-1"></i>{{ _('Connected as') }} {{ user['microsoft_email'] }}</p>
                        {% else %}
                        <p class="text-xs text-gray-400">{{ _('Not connected') }}</p>
                        {% endif %}
                    </div>
                </div>
                {% if user.get('microsoft_email') %}
                <button type="button" onclick="document.getElementById('microsoft-disconnect-form').classList.toggle('hidden')"
                    class="px-4 py-1.5 rounded-lg border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 text-xs font-semibold hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                    data-testid="btn-unlink-microsoft">
                    <i class="fa fa-link-slash mr-1"></i>{{ _('Disconnect') }}
                </button>
                {% else %}
                <button type="button" onclick="document.getElementById('microsoft-connect-form').classList.toggle('hidden')"
                    class="px-4 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold transition-colors"
                    data-testid="btn-link-microsoft">
                    <i class="fa fa-plus mr-1"></i>{{ _('Connect') }}
                </button>
                {% endif %}
            </div>
            {% if user.get('microsoft_email') %}
            <form id="microsoft-disconnect-form" method="POST" action="{{ full_url('/account/social/unlink-microsoft') }}" class="hidden mt-3 p-4 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-800 rounded-xl">
                <p class="text-xs text-red-700 dark:text-red-400 mb-3 font-medium">{{ _('Enter your current password to disconnect Microsoft.') }}</p>
                <div class="flex gap-2 items-center">
                    <input type="password" name="current_password" placeholder="{{ _('Current password') }}"
                        class="flex-1 px-3 py-2 rounded-lg border border-red-300 dark:border-red-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-red-400"
                        required autocomplete="current-password">
                    <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-xs font-semibold transition-colors whitespace-nowrap">
                        <i class="fa fa-link-slash mr-1"></i>{{ _('Confirm Disconnect') }}
                    </button>
                </div>
            </form>
            {% else %}
            <form id="microsoft-connect-form" method="POST" action="{{ full_url('/account/social/verify-for-microsoft-link') }}" class="hidden mt-3 p-4 bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 rounded-xl">
                <p class="text-xs text-blue-700 dark:text-blue-400 mb-3 font-medium">{{ _('Enter your current password to connect your Microsoft account.') }}</p>
                <div class="flex gap-2 items-center">
                    <input type="password" name="current_password" placeholder="{{ _('Current password') }}"
                        class="flex-1 px-3 py-2 rounded-lg border border-blue-300 dark:border-blue-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                        required autocomplete="current-password">
                    <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold transition-colors whitespace-nowrap">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" class="w-4 h-4 inline mr-1"><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>{{ _('Continue with Microsoft') }}
                    </button>
                </div>
            </form>
            {% endif %}
        </div>

        <div class="border-t border-gray-100 dark:border-gray-800"></div>

        <!-- Apple -->
        <div class="py-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center flex-shrink-0">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000" class="w-5 h-5 fill-current text-gray-800 dark:text-white"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 376.6 0 312 0 259C0 201 39.2 168.4 52.4 148c18-26.5 49.5-44 80.8-44 44 0 78 25.7 105.5 25.7C266.1 129.7 299.7 102 355 102c16.2 0 62.2 1.3 95.1 40.8c-18.7 18-95.8 61.1-95.8 165.6 0 121.4 100.6 161.2 109.4 164.4l-.1 3.2z"/></svg>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Apple</p>
                        {% if user.get('apple_email') %}
                        <p class="text-xs text-green-600 dark:text-green-400"><i class="fa fa-circle-check mr-1"></i>{{ _('Connected as') }} {{ user['apple_email'] }}</p>
                        {% else %}
                        <p class="text-xs text-gray-400">{{ _('Not connected') }}</p>
                        {% endif %}
                    </div>
                </div>
                {% if user.get('apple_email') %}
                <button type="button" onclick="document.getElementById('apple-disconnect-form').classList.toggle('hidden')"
                    class="px-4 py-1.5 rounded-lg border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 text-xs font-semibold hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                    data-testid="btn-unlink-apple">
                    <i class="fa fa-link-slash mr-1"></i>{{ _('Disconnect') }}
                </button>
                {% else %}
                <button type="button" onclick="document.getElementById('apple-connect-form').classList.toggle('hidden')"
                    class="px-4 py-1.5 rounded-lg bg-gray-800 hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 text-white text-xs font-semibold transition-colors"
                    data-testid="btn-link-apple">
                    <i class="fa fa-plus mr-1"></i>{{ _('Connect') }}
                </button>
                {% endif %}
            </div>
            {% if user.get('apple_email') %}
            <form id="apple-disconnect-form" method="POST" action="{{ full_url('/account/social/unlink-apple') }}" class="hidden mt-3 p-4 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-800 rounded-xl">
                <p class="text-xs text-red-700 dark:text-red-400 mb-3 font-medium">{{ _('Enter your current password to disconnect Apple.') }}</p>
                <div class="flex gap-2 items-center">
                    <input type="password" name="current_password" placeholder="{{ _('Current password') }}"
                        class="flex-1 px-3 py-2 rounded-lg border border-red-300 dark:border-red-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-red-400"
                        required autocomplete="current-password">
                    <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-xs font-semibold transition-colors whitespace-nowrap">
                        <i class="fa fa-link-slash mr-1"></i>{{ _('Confirm Disconnect') }}
                    </button>
                </div>
            </form>
            {% else %}
            <form id="apple-connect-form" method="POST" action="{{ full_url('/account/social/verify-for-apple-link') }}" class="hidden mt-3 p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-xl">
                <p class="text-xs text-gray-700 dark:text-gray-400 mb-3 font-medium">{{ _('Enter your current password to connect your Apple account.') }}</p>
                <div class="flex gap-2 items-center">
                    <input type="password" name="current_password" placeholder="{{ _('Current password') }}"
                        class="flex-1 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-gray-400"
                        required autocomplete="current-password">
                    <button type="submit" class="px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 text-white text-xs font-semibold transition-colors whitespace-nowrap">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000" class="w-4 h-4 inline mr-1 fill-current"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 376.6 0 312 0 259C0 201 39.2 168.4 52.4 148c18-26.5 49.5-44 80.8-44 44 0 78 25.7 105.5 25.7C266.1 129.7 299.7 102 355 102c16.2 0 62.2 1.3 95.1 40.8c-18.7 18-95.8 61.1-95.8 165.6 0 121.4 100.6 161.2 109.4 164.4l-.1 3.2z"/></svg>{{ _('Continue with Apple') }}
                    </button>
                </div>
            </form>
            {% endif %}
        </div>
    </div>
</div>
</div>

<script>
(function(){
    var tabs = ['profile', 'password', 'notifications', 'social'];

    function switchTab(name) {
        tabs.forEach(function(t) {
            var section = document.getElementById('section-' + t);
            var btn = document.getElementById('tab-' + t);
            if (t === name) {
                section.classList.remove('hidden');
                btn.classList.add('border-indigo-500', 'text-indigo-600', 'dark:text-indigo-400');
                btn.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
            } else {
                section.classList.add('hidden');
                btn.classList.remove('border-indigo-500', 'text-indigo-600', 'dark:text-indigo-400');
                btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
            }
        });
    }
    window.switchTab = switchTab;

    // Restore active tab from URL param
    var url = new URL(window.location.href);
    var t = url.searchParams.get('tab');
    if (t && tabs.indexOf(t) !== -1) { switchTab(t); }

    // Show inline alert
    function showAlert(type, msgs) {
        var box = document.getElementById('profile-alert');
        var isSuccess = (type === 'success');
        var html = msgs.map(function(m) {
            return '<div class="flex items-center gap-2">' +
                '<i class="fa ' + (isSuccess ? 'fa-circle-check text-green-500' : 'fa-circle-exclamation text-red-500') + '"></i>' +
                '<span>' + m + '</span></div>';
        }).join('');
        box.className = 'mb-5 rounded-lg border px-4 py-3 text-sm ' +
            (isSuccess
                ? 'border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-300'
                : 'border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400');
        box.innerHTML = html;
        box.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        setTimeout(function() {
            if (isSuccess) box.classList.add('hidden');
        }, 6000);
    }

    // Generic form submit via fetch (works with file uploads via FormData)
    function bindForm(formId, btnId) {
        var form = document.getElementById(formId);
        var btn = document.getElementById(btnId);
        if (!form) return;
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            btn.disabled = true;
            var origHtml = btn.innerHTML;
            btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1.5"></i>Saving…';
            var fd = new FormData(form);
            fetch('/dashboard/profile/save', {
                method: 'POST',
                body: fd,
                credentials: 'same-origin'
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                btn.disabled = false;
                btn.innerHTML = origHtml;
                if (data.ok) {
                    showAlert('success', [data.msg]);
                    // Update avatar in page if a new one was saved
                    if (data.avatar_url) {
                        var preview = document.getElementById('avatar-preview');
                        if (preview) {
                            preview.src = data.avatar_url;
                            preview.classList.remove('hidden');
                        }
                        var initials = document.getElementById('avatar-initials');
                        if (initials) initials.classList.add('hidden');
                    }
                } else {
                    showAlert('error', data.errors || ['An error occurred.']);
                }
            })
            .catch(function(err) {
                btn.disabled = false;
                btn.innerHTML = origHtml;
                showAlert('error', ['Network error. Please try again.']);
            });
        });
    }

    bindForm('form-profile', 'btn-save-profile');
    bindForm('form-password', 'btn-save-password');
    bindForm('form-notifications', 'btn-save-notifications');

    // Avatar preview on file select
    var avatarInput = document.getElementById('input-avatar');
    if (avatarInput) {
        avatarInput.addEventListener('change', function() {
            var file = this.files && this.files[0];
            if (!file) return;
            var reader = new FileReader();
            reader.onload = function(e) {
                var preview = document.getElementById('avatar-preview');
                var initials = document.getElementById('avatar-initials');
                preview.src = e.target.result;
                preview.classList.remove('hidden');
                if (initials) initials.classList.add('hidden');
            };
            reader.readAsDataURL(file);
        });
    }

    // Resend verification via fetch
    window.resendVerification = function(btn) {
        btn.disabled = true;
        btn.textContent = 'Sending…';
        fetch('/resend-verification', {
            method: 'POST',
            headers: {'X-Requested-With': 'XMLHttpRequest'}
        }).then(function() {
            btn.textContent = 'Sent!';
        }).catch(function() {
            btn.disabled = false;
            btn.textContent = 'Resend verification';
        });
    };
})();
</script>
{% endblock %}