{% extends 'auth/dashboard.html' %}
{% load static %}

{% block content %}
<div class="max-w-6xl mx-auto px-3 sm:px-6 py-6 space-y-6">

    <!-- Page Header -->
    <div class="bg-white rounded-xl shadow p-4 sm:p-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800 flex items-center">
            <i class="fas fa-users-cog text-tea-green-600 mr-2"></i>
            Register Farmer Group
        </h1>
        <p class="text-sm text-gray-600 mt-1">
            Provide accurate group information and register at least the group officials.
        </p>
        {% if max_groups_per_user %}
        <p class="text-xs text-amber-700 mt-2 bg-amber-50 p-2 rounded border border-amber-200">
            <i class="fas fa-info-circle mr-1"></i>
            <strong>Note:</strong> Each member can belong to a maximum of {{ max_groups_per_user }} group(s).
        </p>
        {% endif %}
    </div>

    <!-- Messages -->
    {% if messages %}
        <div class="space-y-2">
            {% for message in messages %}
                <div class="p-4 rounded-lg {% if message.tags == 'error' %}bg-red-100 text-red-700 border border-red-300{% elif message.tags == 'success' %}bg-green-100 text-green-700 border border-green-300{% else %}bg-blue-100 text-blue-700 border border-blue-300{% endif %}">
                    <div class="flex items-start">
                        <i class="fas {% if message.tags == 'error' %}fa-exclamation-circle{% elif message.tags == 'success' %}fa-check-circle{% else %}fa-info-circle{% endif %} mr-2 mt-0.5"></i>
                        <div class="flex-1">{{ message }}</div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <!-- Form -->
    <form method="post"
          enctype="multipart/form-data"
          class="bg-white rounded-xl shadow p-4 sm:p-6 space-y-8"
          id="group-form"
          onsubmit="return validateForm()">
        {% csrf_token %}

        <!-- Group Info -->
        <div class="space-y-4">
            <h2 class="text-lg font-bold text-gray-800 border-b pb-2">
                Group Information
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Group Name <span class="text-red-600">*</span>
                    </label>
                    <input type="text" 
                           name="name" 
                           id="group_name"
                           required
                           class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500"
                           placeholder="Enter group name">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Registration Number <span class="text-red-600">*</span>
                    </label>
                    <input type="text" 
                           name="registration_number" 
                           id="registration_number"
                           required
                           class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500"
                           placeholder="e.g., FG/2024/001">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Location <span class="text-red-600">*</span>
                    </label>
                    <input type="text" 
                           name="location" 
                           id="location"
                           required
                           class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500"
                           placeholder="Enter location (e.g., Nakuru County)">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Registration Certificate (PDF) <span class="text-red-600">*</span>
                    </label>
                    <input type="file" 
                           name="registration_document"
                           id="registration_document"
                           accept=".pdf" 
                           required
                           class="w-full border border-gray-300 rounded-lg p-2 bg-gray-50 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-tea-green-50 file:text-tea-green-700 hover:file:bg-tea-green-100">
                    <p class="text-xs text-gray-500 mt-1">
                        <i class="fas fa-info-circle mr-1"></i>
                        Upload the official group registration certificate (PDF only, max 5MB).
                    </p>
                </div>
            </div>
        </div>

        <!-- Members -->
        <div class="bg-tea-green-50 rounded-lg border border-tea-green-200 p-4 space-y-4">
            <div>
                <h2 class="text-lg font-bold text-tea-green-800 flex items-center">
                    <i class="fas fa-users mr-2"></i>
                    Group Members
                </h2>
                <p class="text-sm text-gray-700 mt-1">
                    <i class="fas fa-exclamation-triangle text-amber-600 mr-1"></i>
                    You must register at least <strong>3 members</strong>: Chairperson, Secretary, and Treasurer.
                </p>
            </div>

            <div id="members-container" class="space-y-3"></div>

            <button type="button"
                    onclick="addMemberRow()"
                    class="text-tea-green-700 font-semibold text-sm flex items-center hover:text-tea-green-800 transition">
                <i class="fas fa-plus-circle mr-1"></i>
                Add Member
            </button>
        </div>

        <!-- Submit -->
        <div class="flex flex-col sm:flex-row justify-between items-center gap-3 pt-4 border-t">
            <p class="text-xs text-gray-600 text-center sm:text-left">
                <i class="fas fa-shield-alt text-tea-green-600 mr-1"></i>
                All information will be securely stored and members will be notified via SMS and email.
            </p>
            
            <div class="flex gap-3">
                <a href="{% url 'contract_market_place:my_groups' %}"
                   class="px-5 py-2 rounded-lg bg-gray-500 text-white hover:bg-gray-600 transition font-medium">
                    Cancel
                </a>
                <button type="submit"
                        class="px-6 py-2 rounded-lg bg-tea-green-600 text-white font-bold hover:bg-tea-green-700 transition shadow-md hover:shadow-lg">
                    <i class="fas fa-check-circle mr-1"></i>
                    Register Group
                </button>
            </div>
        </div>
    </form>
</div>

<script>
let memberIndex = 0;
let searchTimeout;
const MAX_GROUPS_PER_USER = {{ max_groups_per_user|default:"null" }};

/**
 * Add a new member row to the form
 */
function addMemberRow() {
    const container = document.getElementById('members-container');

    const row = document.createElement('div');
    row.className = "bg-white rounded-lg p-3 border border-gray-200 shadow-sm";
    row.setAttribute('data-row', memberIndex);

    row.innerHTML = `
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-7 gap-2 items-end">
            <!-- Search Existing -->
            <div class="relative">
                <label class="text-xs font-medium text-gray-700 mb-1 block">
                    Search Existing
                </label>
                <input type="text"
                       placeholder="Phone / Email / Name"
                       oninput="searchUser(this, ${memberIndex})"
                       class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500">
                <div id="search-results-${memberIndex}"
                     class="absolute z-10 bg-white border border-gray-300 rounded-md shadow-lg mt-1 hidden max-h-40 overflow-y-auto w-full">
                </div>
            </div>

            <!-- First Name -->
            <div>
                <label class="text-xs font-medium text-gray-700 mb-1 block">
                    First Name <span class="text-red-600">*</span>
                </label>
                <input required 
                       name="members[${memberIndex}][first_name]"
                       placeholder="John"
                       class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500">
            </div>

            <!-- Last Name -->
            <div>
                <label class="text-xs font-medium text-gray-700 mb-1 block">
                    Last Name <span class="text-red-600">*</span>
                </label>
                <input required 
                       name="members[${memberIndex}][last_name]"
                       placeholder="Doe"
                       class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500">
            </div>

            <!-- Phone -->
            <div>
                <label class="text-xs font-medium text-gray-700 mb-1 block">
                    Phone <span class="text-red-600">*</span>
                </label>
                <input required 
                       name="members[${memberIndex}][phone_number]"
                       type="tel"
                       placeholder="0712345678"
                       onblur="checkUserExists(this, ${memberIndex}, 'phone')"
                       class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500">
                <div id="phone-warning-${memberIndex}" class="text-xs mt-1 hidden"></div>
            </div>

            <!-- Email -->
            <div>
                <label class="text-xs font-medium text-gray-700 mb-1 block">
                    Email
                </label>
                <input type="email" 
                       name="members[${memberIndex}][email]"
                       placeholder="john@example.com"
                       onblur="checkUserExists(this, ${memberIndex}, 'email')"
                       class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500">
                <div id="email-warning-${memberIndex}" class="text-xs mt-1 hidden"></div>
            </div>

            <!-- Role -->
            <div>
                <label class="text-xs font-medium text-gray-700 mb-1 block">
                    Role <span class="text-red-600">*</span>
                </label>
                <select required 
                        name="members[${memberIndex}][role]"
                        class="role-select w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500">
                    <option value="">Select Role</option>
                    <option value="CHAIRPERSON">Chairperson</option>
                    <option value="SECRETARY">Secretary</option>
                    <option value="TREASURER">Treasurer</option>
                    <option value="MEMBER">Member</option>
                </select>
            </div>

            <!-- Remove Button -->
            <div class="flex justify-center items-end">
                <button type="button"
                        onclick="removeRow(this)"
                        class="text-red-600 hover:text-red-800 hover:bg-red-50 p-2 rounded transition"
                        title="Remove member">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </div>
    `;

    container.appendChild(row);
    memberIndex++;
}

/**
 * Remove a member row
 */
function removeRow(btn) {
    const rows = document.querySelectorAll('#members-container > div');
    if (rows.length <= 1) {
        alert("At least one member is required.");
        return;
    }
    btn.closest('[data-row]').remove();
}

/**
 * Search for existing users (debounced)
 */
function searchUser(input, index) {
    const query = input.value.trim();
    const resultsBox = document.getElementById(`search-results-${index}`);

    // Clear previous timeout
    clearTimeout(searchTimeout);

    if (query.length < 3) {
        resultsBox.classList.add('hidden');
        return;
    }

    // Debounce search (wait 300ms)
    searchTimeout = setTimeout(() => {
        fetch(`/groups/search-users/?q=${encodeURIComponent(query)}`)
            .then(res => res.json())
            .then(users => {
                resultsBox.innerHTML = '';
                
                if (users.length === 0) {
                    resultsBox.innerHTML = '<div class="px-3 py-2 text-xs text-gray-500">No users found</div>';
                    resultsBox.classList.remove('hidden');
                    return;
                }

                users.forEach(u => {
                    const div = document.createElement('div');
                    div.className = "px-3 py-2 hover:bg-tea-green-50 cursor-pointer text-sm border-b last:border-b-0";
                    div.innerHTML = `
                        <div class="font-medium">${u.full_name}</div>
                        <div class="text-xs text-gray-600">${u.phone_number}${u.email ? ' • ' + u.email : ''}</div>
                    `;
                    div.onclick = () => selectUser(index, u);
                    resultsBox.appendChild(div);
                });

                resultsBox.classList.remove('hidden');
            })
            .catch(err => {
                console.error('Search error:', err);
                resultsBox.classList.add('hidden');
            });
    }, 300); // 300ms debounce
}

/**
 * Auto-fill form when user is selected
 */
function selectUser(index, user) {
    document.querySelector(`[name="members[${index}][first_name]"]`).value = user.first_name;
    document.querySelector(`[name="members[${index}][last_name]"]`).value = user.last_name;
    document.querySelector(`[name="members[${index}][phone_number]"]`).value = user.phone_number;
    document.querySelector(`[name="members[${index}][email]"]`).value = user.email || '';
    
    // Hide results
    document.getElementById(`search-results-${index}`).classList.add('hidden');
    
    // Trigger validation to check max groups
    const phoneInput = document.querySelector(`[name="members[${index}][phone_number]"]`);
    checkUserExists(phoneInput, index, 'phone');
}

/**
 * Check if user exists and validate max groups
 */
function checkUserExists(input, index, type) {
    const value = input.value.trim();
    const warningDiv = document.getElementById(`${type}-warning-${index}`);
    
    if (!value) {
        warningDiv.classList.add('hidden');
        return;
    }
    
    const params = new URLSearchParams();
    if (type === 'phone') {
        params.append('phone', value);
    } else if (type === 'email') {
        params.append('email', value);
    }
    
    fetch(`/groups/check-user-exists/?${params.toString()}`)
        .then(res => res.json())
        .then(data => {
            if (data.exists) {
                const user = data.user;
                
                // Auto-fill form fields if user exists
                if (type === 'phone') {
                    document.querySelector(`[name="members[${index}][first_name]"]`).value = user.first_name;
                    document.querySelector(`[name="members[${index}][last_name]"]`).value = user.last_name;
                    if (user.email) {
                        document.querySelector(`[name="members[${index}][email]"]`).value = user.email;
                    }
                }
                
                // Show warning if max groups reached
                if (data.max_groups_reached) {
                    warningDiv.innerHTML = `<i class="fas fa-exclamation-triangle text-red-600 mr-1"></i><span class="text-red-600 font-medium">User has reached maximum groups limit (${data.groups_count}/${MAX_GROUPS_PER_USER})</span>`;
                    warningDiv.classList.remove('hidden');
                    input.classList.add('border-red-500');
                } else if (data.groups_count > 0) {
                    warningDiv.innerHTML = `<i class="fas fa-info-circle text-blue-600 mr-1"></i><span class="text-blue-600">Existing user (${data.groups_count} group${data.groups_count > 1 ? 's' : ''})</span>`;
                    warningDiv.classList.remove('hidden');
                    input.classList.remove('border-red-500');
                } else {
                    warningDiv.innerHTML = `<i class="fas fa-check-circle text-green-600 mr-1"></i><span class="text-green-600">Existing user</span>`;
                    warningDiv.classList.remove('hidden');
                    input.classList.remove('border-red-500');
                }
            } else {
                warningDiv.innerHTML = `<i class="fas fa-user-plus text-amber-600 mr-1"></i><span class="text-amber-600">New user will be created</span>`;
                warningDiv.classList.remove('hidden');
                input.classList.remove('border-red-500');
            }
        })
        .catch(err => {
            console.error('Check user error:', err);
            warningDiv.classList.add('hidden');
        });
}

/**
 * Hide search results when clicking outside
 */
document.addEventListener('click', function(e) {
    if (!e.target.closest('.relative')) {
        document.querySelectorAll('[id^="search-results-"]').forEach(box => {
            box.classList.add('hidden');
        });
    }
});

/**
 * Validate form before submission
 */
function validateForm() {
    const rows = document.querySelectorAll('#members-container > div');
    
    if (rows.length < 3) {
        alert("You must add at least 3 members (Chairperson, Secretary, and Treasurer).");
        return false;
    }

    // Check for required roles
    const roles = Array.from(rows).map(row => {
        const roleSelect = row.querySelector('select[name*="[role]"]');
        return roleSelect ? roleSelect.value : '';
    });

    const requiredRoles = ['CHAIRPERSON', 'SECRETARY', 'TREASURER'];
    const missingRoles = requiredRoles.filter(role => !roles.includes(role));

    if (missingRoles.length > 0) {
        alert(`Missing required roles: ${missingRoles.join(', ')}`);
        return false;
    }

    // Check for duplicate official roles
    const officialRoles = roles.filter(r => requiredRoles.includes(r));
    const uniqueOfficialRoles = new Set(officialRoles);
    if (officialRoles.length !== uniqueOfficialRoles.size) {
        alert("Cannot have duplicate official roles (Chairperson, Secretary, or Treasurer).");
        return false;
    }

    // Check for duplicate phone numbers
    const phones = Array.from(rows).map(row => {
        const phoneInput = row.querySelector('input[name*="[phone_number]"]');
        return phoneInput ? phoneInput.value.trim() : '';
    }).filter(p => p);

    const uniquePhones = new Set(phones);
    if (phones.length !== uniquePhones.size) {
        alert("Duplicate phone numbers detected. Each member must have a unique phone number.");
        return false;
    }

    // Check for duplicate emails (only non-empty ones)
    const emails = Array.from(rows).map(row => {
        const emailInput = row.querySelector('input[name*="[email]"]');
        return emailInput ? emailInput.value.trim() : '';
    }).filter(e => e);

    const uniqueEmails = new Set(emails);
    if (emails.length !== uniqueEmails.size) {
        alert("Duplicate email addresses detected. Each member must have a unique email address.");
        return false;
    }

    // Check if any users have reached max groups
    const maxGroupsWarnings = document.querySelectorAll('.border-red-500');
    if (maxGroupsWarnings.length > 0) {
        alert("Some users have reached the maximum groups limit. Please remove them or choose different members.");
        return false;
    }

    return true;
}

// Initialize with one member row
addMemberRow();
</script>
{% endblock %}