{% extends "base.html" %}
{% block title %}إنشاء حساب جديد{% endblock %}
{% block content %}
<div class="min-h-[calc(100vh-80px)] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
    <!-- Background Decor -->
    <div class="absolute bottom-0 right-0 w-[600px] h-[600px] bg-emerald-500/5 rounded-full blur-[120px] -z-10 animate-pulse-slow"></div>
    <div class="absolute top-0 left-0 w-[600px] h-[600px] bg-gold-500/5 rounded-full blur-[120px] -z-10 animate-pulse-slow"></div>

    <div class="max-w-md w-full bg-slate-900/70 backdrop-blur-xl p-10 rounded-3xl border border-slate-700 shadow-2xl relative">
        <div class="text-center mb-8">
            <a href="/" class="block mx-auto mb-6 w-28">
                <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Jadwa AI Logo">
            </a>
            <h2 class="text-3xl font-serif font-bold text-white mb-2">إنشاء حساب جديد</h2>
            <p class="text-slate-400 text-sm">املأ بياناتك لإنشاء حساب</p>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                <div class="mb-4 p-4 rounded-xl {% if category == 'error' %}bg-red-500/20 border-red-500/50{% else %}bg-emerald-500/20 border-emerald-500/50{% endif %} text-sm text-white">
                    {{ message }}
                </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <form class="space-y-5" action="{{ url_for('auth.register') }}" method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <!-- Full Name -->
            <div>
                <label for="name" class="block text-sm font-medium text-slate-300 mb-2">الاسم الكامل *</label>
                <input id="name" name="name" type="text" autocomplete="name" required
                       class="appearance-none relative block w-full px-4 py-4 rounded-xl bg-black/50 border border-white/10 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-gold-500/50 focus:border-gold-500 sm:text-sm transition duration-300"
                       placeholder="أدخل اسمك الكامل">
            </div>

            <!-- Email -->
            <div>
                <label for="email" class="block text-sm font-medium text-slate-300 mb-2">البريد الإلكتروني *</label>
                <input id="email" name="email" type="email" autocomplete="email" required
                       class="appearance-none relative block w-full px-4 py-4 rounded-xl bg-black/50 border border-white/10 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-gold-500/50 focus:border-gold-500 sm:text-sm transition duration-300"
                       placeholder="example@email.com">
            </div>

            <!-- Password -->
            <div>
                <label for="password" class="block text-sm font-medium text-slate-300 mb-2">كلمة المرور *</label>
                <input id="password" name="password" type="password" autocomplete="new-password" required minlength="8"
                       class="appearance-none relative block w-full px-4 py-4 rounded-xl bg-black/50 border border-white/10 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-gold-500/50 focus:border-gold-500 sm:text-sm transition duration-300"
                       placeholder="كلمة المرور (8 أحرف على الأقل)">
            </div>

            <!-- Account Type -->
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">نوع الحساب *</label>
                <div class="grid grid-cols-2 gap-2" id="accountTypeGrid">
                    <label class="account-type-card cursor-pointer">
                        <input type="radio" name="account_type" value="entrepreneur" checked class="hidden peer">
                        <div class="flex items-center gap-2 px-3 py-3 rounded-xl bg-black/50 border border-white/10 peer-checked:border-gold-500 peer-checked:bg-gold-500/10 transition text-sm text-slate-300 peer-checked:text-gold-400">
                            <span>💡</span><span>صاحب فكرة</span>
                        </div>
                    </label>
                    <label class="account-type-card cursor-pointer">
                        <input type="radio" name="account_type" value="investor" class="hidden peer">
                        <div class="flex items-center gap-2 px-3 py-3 rounded-xl bg-black/50 border border-white/10 peer-checked:border-gold-500 peer-checked:bg-gold-500/10 transition text-sm text-slate-300 peer-checked:text-gold-400">
                            <span>💰</span><span>مستثمر</span>
                        </div>
                    </label>
                    <label class="account-type-card cursor-pointer">
                        <input type="radio" name="account_type" value="factory" class="hidden peer">
                        <div class="flex items-center gap-2 px-3 py-3 rounded-xl bg-black/50 border border-white/10 peer-checked:border-gold-500 peer-checked:bg-gold-500/10 transition text-sm text-slate-300 peer-checked:text-gold-400">
                            <span>🏭</span><span>مصنع</span>
                        </div>
                    </label>
                    <label class="account-type-card cursor-pointer">
                        <input type="radio" name="account_type" value="incubator" class="hidden peer">
                        <div class="flex items-center gap-2 px-3 py-3 rounded-xl bg-black/50 border border-white/10 peer-checked:border-gold-500 peer-checked:bg-gold-500/10 transition text-sm text-slate-300 peer-checked:text-gold-400">
                            <span>🏢</span><span>حاضنة أعمال</span>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Company Name (shown for non-entrepreneur) -->
            <div id="companyNameField" class="hidden">
                <label for="company_name" class="block text-sm font-medium text-slate-300 mb-2">اسم الشركة / المصنع / الحاضنة *</label>
                <input id="company_name" name="company_name" type="text"
                       class="appearance-none relative block w-full px-4 py-4 rounded-xl bg-black/50 border border-white/10 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-gold-500/50 focus:border-gold-500 sm:text-sm transition duration-300"
                       placeholder="اسم الكيان">
            </div>

            <!-- Organization Selection (for entrepreneur) -->
            <div id="organizationField">
                <label class="block text-sm font-medium text-slate-300 mb-2">المنظمة / الشركة (اختياري)</label>
                <div class="relative">
                    <select id="organizationSelect" name="organization_id"
                            class="appearance-none relative block w-full px-4 py-4 rounded-xl bg-black/50 border border-white/10 text-white focus:outline-none focus:ring-2 focus:ring-gold-500/50 focus:border-gold-500 sm:text-sm transition duration-300 cursor-pointer">
                        <option value="">اختر منظمة...</option>
                        <!-- Organizations loaded via AJAX -->
                    </select>
                    <div class="absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none text-slate-500">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z"></path>
                        </svg>
                    </div>
                </div>
                <p class="text-xs text-slate-500 mt-1">إذا كانت منظمتك غير موجودة، اختر "لا شيء"</p>
            </div>

            <!-- Interests / Sectors -->
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">القطاعات المهتم بها (اختياري)</label>
                <div class="flex flex-wrap gap-2">
                    {% set sectors = ['صناعي', 'تقني', 'تجاري', 'غذائي', 'طبي', 'تعليمي', 'عقاري', 'زراعي', 'سياحي', 'لوجستي'] %}
                    {% for s in sectors %}
                    <label class="cursor-pointer">
                        <input type="checkbox" name="interests" value="{{ s }}" class="hidden peer">
                        <span class="inline-block px-3 py-1.5 rounded-full text-xs bg-black/50 border border-white/10 text-slate-400 peer-checked:border-gold-500 peer-checked:bg-gold-500/10 peer-checked:text-gold-400 transition">{{ s }}</span>
                    </label>
                    {% endfor %}
                </div>
            </div>

            <div class="flex items-center">
                <input id="terms" name="terms" type="checkbox" required class="h-4 w-4 text-gold-600 focus:ring-gold-500 border-gray-600 rounded bg-black/50">
                <label for="terms" class="mr-2 block text-xs text-slate-400">
                    أوافق على <a href="#" class="text-gold-400 hover:text-gold-300">الشروط والأحكام</a> و <a href="#" class="text-gold-400 hover:text-gold-300">سياسة الخصوصية</a>
                </label>
            </div>

            <button type="submit" class="group relative w-full flex justify-center py-4 px-4 border border-transparent text-sm font-bold rounded-xl text-white bg-gradient-to-r from-gold-400 to-gold-600 hover:from-gold-300 hover:to-gold-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gold-500 transition duration-300 shadow-[0_0_20px_rgba(210,175,32,0.3)] hover:shadow-[0_0_30px_rgba(210,175,32,0.5)] hover:-translate-y-0.5">
                إنشاء حساب
            </button>

            <!-- Link Google Account Option -->
            <div class="text-center">
                <span class="text-slate-500 text-sm">أو</span>
            </div>

            <a href="{{ url_for('auth.google_login') }}" target="_self" class="group relative w-full flex justify-center items-center gap-3 py-4 px-4 rounded-xl text-gray-800 bg-white hover:bg-gray-100 transition duration-300 shadow-lg hover:shadow-xl">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/>
                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                </svg>
                <span class="font-bold">التسجيل بحساب Google</span>
            </a>

            <p class="text-center mt-4">
                <a href="{{ url_for('auth.login') }}" class="text-slate-500 text-sm hover:text-slate-400 transition border-b border-transparent hover:border-slate-500 pb-0.5">
                    ← العودة لصفحة الدخول
                </a>
            </p>
        </form>
    </div>
</div>
<script>
document.querySelectorAll('input[name="account_type"]').forEach(radio => {
    radio.addEventListener('change', () => {
        const companyField = document.getElementById('companyNameField');
        const orgField = document.getElementById('organizationField');
        if (radio.value === 'entrepreneur') {
            companyField.classList.add('hidden');
            orgField.classList.remove('hidden');
        } else {
            companyField.classList.remove('hidden');
            orgField.classList.add('hidden');
        }
    });
});

// Load organizations on page load
loadOrganizations('');

// Search organizations with debounce
let searchTimeout;
const orgSelect = document.getElementById('organizationSelect');
if (orgSelect) {
    orgSelect.addEventListener('input', (e) => {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            loadOrganizations(e.target.value);
        }, 300);
    });
}

async function loadOrganizations(search = '') {
    const orgSelect = document.getElementById('organizationSelect');
    if (!orgSelect) return;

    const currentValue = orgSelect.value;

    try {
        const response = await fetch(`{{ url_for('auth.search_organizations') }}?q=${encodeURIComponent(search)}`);
        const data = await response.json();

        // Preserve current selection
        orgSelect.innerHTML = '<option value="">اختر منظمة...</option>';
        data.organizations.forEach(org => {
            const option = document.createElement('option');
            option.value = org.id;
            option.textContent = org.name;
            if (org.name_ar) {
                option.textContent += ` (${org.name_ar})`;
            }
            orgSelect.appendChild(option);
        });

        // Restore selection
        if (currentValue) {
            orgSelect.value = currentValue;
        }
    } catch (error) {
        console.error('Error loading organizations:', error);
    }
}
</script>
{% endblock %}