{% extends "base.html" %}
{% block title %}{{ _('profile.title') }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-serif font-bold text-white mb-8">{{ _('profile.title') }}</h1>

    {% if not current_user.email_verified %}
    <div class="glass p-4 rounded-xl mb-6 border border-yellow-500/30 bg-yellow-900/10">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <span class="text-yellow-400 text-xl">!</span>
                <span class="text-yellow-200 text-sm">{{ _('profile.email_not_verified') }}</span>
            </div>
            <a href="{{ url_for('auth.resend_verification') }}" class="text-xs bg-yellow-500/20 text-yellow-300 px-3 py-1.5 rounded-lg hover:bg-yellow-500/30 transition">{{ _('profile.resend') }}</a>
        </div>
    </div>
    {% endif %}

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="glass p-8 rounded-2xl">
            <h2 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
                <span class="text-gold-400">*</span> {{ _('profile.account_info') }}
            </h2>
            <form method="POST" class="space-y-5">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="action" value="update_profile">
                <div>
                    <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">{{ _('auth.name') }}</label>
                    <input type="text" name="name" value="{{ current_user.name }}" required class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-gold-500/50 transition">
                </div>
                <div>
                    <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">{{ _('auth.email') }}</label>
                    <input type="email" value="{{ current_user.email }}" disabled class="w-full bg-black/10 border border-white/5 rounded-xl px-4 py-3 text-slate-500 cursor-not-allowed">
                </div>
                <div>
                    <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">{{ _('profile.language') }}</label>
                    <select name="language" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-gold-500/50 transition">
                        <option value="ar" {% if current_user.language_pref == 'ar' %}selected{% endif %}>العربية</option>
                        <option value="en" {% if current_user.language_pref == 'en' %}selected{% endif %}>English</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">{{ _('profile.currency') }}</label>
                    <select name="currency" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-gold-500/50 transition">
                        <option value="SAR" {% if current_user.currency == 'SAR' %}selected{% endif %}>ريال سعودي (SAR)</option>
                        <option value="AED" {% if current_user.currency == 'AED' %}selected{% endif %}>درهم إماراتي (AED)</option>
                        <option value="USD" {% if current_user.currency == 'USD' %}selected{% endif %}>دولار أمريكي (USD)</option>
                        <option value="EUR" {% if current_user.currency == 'EUR' %}selected{% endif %}>يورو (EUR)</option>
                        <option value="GBP" {% if current_user.currency == 'GBP' %}selected{% endif %}>جنيه استرليني (GBP)</option>
                        <option value="KWD" {% if current_user.currency == 'KWD' %}selected{% endif %}>دينار كويتي (KWD)</option>
                        <option value="BHD" {% if current_user.currency == 'BHD' %}selected{% endif %}>دينار بحريني (BHD)</option>
                        <option value="QAR" {% if current_user.currency == 'QAR' %}selected{% endif %}>ريال قطري (QAR)</option>
                        <option value="OMR" {% if current_user.currency == 'OMR' %}selected{% endif %}>ريال عماني (OMR)</option>
                        <option value="EGP" {% if current_user.currency == 'EGP' %}selected{% endif %}>جنيه مصري (EGP)</option>
                    </select>
                </div>
                <button type="submit" class="w-full bg-gold-500 text-black py-3 rounded-xl font-bold hover:bg-gold-400 transition">{{ _('common.save') }}</button>
            </form>
        </div>

        <div class="space-y-6">
            <div class="glass p-8 rounded-2xl">
                <h2 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
                    <span class="text-gold-400">*</span> {{ _('profile.change_password') }}
                </h2>
                <form method="POST" class="space-y-5">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="action" value="change_password">
                    <div>
                        <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">{{ _('profile.current_password') }}</label>
                        <input type="password" name="current_password" required class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-gold-500/50 transition">
                    </div>
                    <div>
                        <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">{{ _('profile.new_password') }}</label>
                        <input type="password" name="new_password" required minlength="8" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-gold-500/50 transition">
                    </div>
                    <button type="submit" class="w-full bg-white/10 border border-white/20 text-white py-3 rounded-xl font-bold hover:bg-white/20 transition">{{ _('profile.change_password') }}</button>
                </form>
            </div>

            <div class="glass p-8 rounded-2xl">
                <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                    <span class="text-gold-400">*</span> {{ _('profile.2fa') }}
                </h2>
                {% if current_user.two_factor_enabled %}
                <div class="flex items-center gap-3 mb-4">
                    <span class="bg-emerald-500/20 text-emerald-400 text-xs px-3 py-1 rounded-full">{{ _('profile.2fa_enabled') }}</span>
                    <span class="text-slate-400 text-sm">{{ _('profile.2fa_protected') }}</span>
                </div>
                <form method="POST" action="{{ url_for('auth.disable_2fa') }}" class="flex gap-3">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="text" name="code" placeholder="{{ _('profile.verify_code') }}" maxlength="6" required class="bg-black/20 border border-white/10 rounded-xl px-4 py-2 text-white text-sm w-32">
                    <button type="submit" class="bg-red-500/20 border border-red-500/30 text-red-400 px-4 py-2 rounded-xl text-sm hover:bg-red-500/30 transition">{{ _('profile.disable_2fa') }}</button>
                </form>
                {% else %}
                <p class="text-slate-400 text-sm mb-4">{{ _('profile.2fa_desc') }}</p>
                <a href="{{ url_for('auth.setup_2fa') }}" class="inline-block bg-gold-500/20 border border-gold-500/30 text-gold-400 px-6 py-2.5 rounded-xl text-sm font-medium hover:bg-gold-500/30 transition">{{ _('profile.enable_2fa') }}</a>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- ═══ Platform Keys Section ═══ -->
    <div id="platforms" class="glass p-8 rounded-2xl mt-6">
        <h2 class="text-lg font-bold text-white mb-2 flex items-center gap-2">
            {% if current_user.is_admin %}
            <span class="text-gold-400">🔗</span> ربط المنصات وإدارة المفاتيح
            {% else %}
            <span class="text-gold-400">🔗</span> حسابات التواصل الاجتماعي
            {% endif %}
        </h2>
        <p class="text-slate-500 text-xs mb-6">
            {% if current_user.is_admin %}
            إدارة حسابات التواصل الاجتماعي ومفاتيح API للخدمات الخارجية. المفاتيح مشفّرة ومحفوظة بأمان.
            {% else %}
            اربط حسابات التواصل الاجتماعي الخاصة بك لتفعيل النشر التلقائي والحملات التسويقية.
            {% endif %}
        </p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            {% for key, info in platform_registry.items() %}
            {% set existing = user_keys.get(key) %}
            <div class="bg-black/20 border border-white/5 rounded-xl p-5 hover:border-gold-500/20 transition-all">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-2">
                        <span class="text-xl">{{ info.icon }}</span>
                        <span class="text-white font-bold text-sm">{{ info.name_ar }}</span>
                    </div>
                    {% if existing %}
                    <span class="text-[10px] bg-emerald-500/20 text-emerald-400 px-2 py-0.5 rounded-full font-bold">متصل</span>
                    {% else %}
                    <span class="text-[10px] bg-slate-500/20 text-slate-500 px-2 py-0.5 rounded-full font-bold">غير متصل</span>
                    {% endif %}
                </div>

                <form method="POST" action="{{ url_for('auth.save_platform_key') }}" class="space-y-2">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="platform" value="{{ key }}">
                    {% for field in info.fields %}
                    <div>
                        <label class="block text-[10px] text-slate-500 mb-1 uppercase tracking-wider">{{ info.field_labels[field] if info.field_labels is defined and field in info.field_labels else field | replace('_', ' ') }}</label>
                        <input type="password" name="{{ field }}"
                               placeholder="{{ existing.mask(field) if existing else info.placeholder }}"
                               class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-white text-xs focus:outline-none focus:border-gold-500/50 transition"
                               autocomplete="off">
                    </div>
                    {% endfor %}
                    <div class="flex items-center gap-2 pt-1">
                        <button type="submit" class="flex-1 bg-gold-500/10 border border-gold-500/20 text-gold-400 px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-gold-500/20 transition">
                            {{ 'تحديث' if existing else 'ربط' }}
                        </button>
                        {% if existing %}
                        <button type="submit" formaction="{{ url_for('auth.delete_platform_key') }}" class="bg-red-500/10 border border-red-500/20 text-red-400 px-3 py-1.5 rounded-lg text-xs hover:bg-red-500/20 transition">
                            إلغاء الربط
                        </button>
                        {% endif %}
                        {% if info.help_url %}
                        <a href="{{ info.help_url }}" target="_blank" class="text-slate-500 hover:text-slate-300 text-xs transition">
                            مساعدة ↗
                        </a>
                        {% endif %}
                    </div>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="glass p-8 rounded-2xl mt-6">
        <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
            <span class="text-gold-400">*</span> {{ _('profile.subscription_info') }}
        </h2>
        <div class="grid grid-cols-3 gap-4">
            <div class="bg-black/20 rounded-xl p-4 text-center">
                <div class="text-xs text-slate-400 mb-1">{{ _('profile.current_plan') }}</div>
                <div class="text-gold-400 font-bold text-lg">{{ current_user.active_plan.display_name if current_user.active_plan else _('profile.free') }}</div>
            </div>
            <div class="bg-black/20 rounded-xl p-4 text-center">
                <div class="text-xs text-slate-400 mb-1">{{ _('profile.reports_this_month') }}</div>
                <div class="text-white font-bold text-lg">{{ current_user.reports_this_month }}</div>
            </div>
            <div class="bg-black/20 rounded-xl p-4 text-center">
                <div class="text-xs text-slate-400 mb-1">{{ _('profile.created_at') }}</div>
                <div class="text-white font-bold text-lg">{{ current_user.created_at.strftime('%Y-%m-%d') }}</div>
            </div>
        </div>
        <div class="mt-4 text-center">
            <a href="{{ url_for('billing.plans') }}" class="text-sm text-gold-400 hover:text-gold-300 transition">{{ _('profile.upgrade') }}</a>
        </div>
    </div>
</div>
{% endblock %}