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

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

    <!-- 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-edit text-tea-green-600 mr-2"></i>
            Manage Group — {{ group.name }}
        </h1>
        <p class="text-sm text-gray-600 mt-1">
            Edit group information and manage members.
        </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>

    {% if messages %}
        {% 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 %}
    {% endif %}

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

        <!-- Group Info -->
        <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
                </label>
                <input type="text" name="name" value="{{ group.name }}"
                       {% if not is_admin %}readonly{% endif %}
                       class="w-full border rounded-lg p-3 {% if not is_admin %}bg-gray-100 cursor-not-allowed{% endif %} focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500">
                {% if not is_admin %}
                <p class="text-xs text-gray-500 mt-1">
                    <i class="fas fa-lock mr-1"></i>Only admins can change group name
                </p>
                {% endif %}
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Location
                </label>
                <input type="text" name="location" value="{{ group.location }}"
                       class="w-full border rounded-lg p-3 focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500">
            </div>

            {% if is_admin %}
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Registration Certificate (PDF)
                </label>
                <input type="file" name="registration_document" accept=".pdf"
                       class="w-full border 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">
                {% if group.registration_document %}
                <p class="text-xs text-gray-600 mt-1">
                    <i class="fas fa-file-pdf text-red-600 mr-1"></i>
                    Current: <a href="{{ group.registration_document.url }}" target="_blank" class="text-tea-green-600 hover:underline">View current certificate</a>
                </p>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <!-- Members -->
        <div class="bg-tea-green-50 rounded-lg border p-4 space-y-4">
            <div>
                <h2 class="text-lg font-bold text-tea-green-800">
                    Group Members
                </h2>
                <p class="text-xs text-gray-700 mt-1">
                    <i class="fas fa-info-circle mr-1"></i>
                    {% if can_add_members %}
                        You can add new members to this group.
                    {% endif %}
                    {% if can_remove_members %}
                        You can remove members from this group.
                    {% else %}
                        Only admins and field officers can remove members.
                    {% endif %}
                </p>
            </div>

            <div id="members-container" class="space-y-3">
                {% for m in members %}
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-7 gap-2 items-end member-row bg-white p-3 rounded-lg border" data-row="{{ forloop.counter0 }}" data-existing="true">
                    <!-- Search (disabled for existing) -->
                    <div>
                        <label class="text-xs text-gray-600">Search</label>
                        <input type="text" disabled
                               class="w-full border rounded-md p-2 bg-gray-100 text-xs cursor-not-allowed"
                               placeholder="Existing member">
                    </div>

                    <!-- First Name -->
                    <div>
                        <label class="text-xs text-gray-600">First Name</label>
                        <input type="text" value="{{ m.user.first_name }}" readonly
                               class="w-full border rounded-md p-2 bg-gray-100 text-sm cursor-not-allowed">
                    </div>

                    <!-- Last Name -->
                    <div>
                        <label class="text-xs text-gray-600">Last Name</label>
                        <input type="text" value="{{ m.user.last_name }}" readonly
                               class="w-full border rounded-md p-2 bg-gray-100 text-sm cursor-not-allowed">
                    </div>

                    <!-- Phone -->
                    <div>
                        <label class="text-xs text-gray-600">Phone</label>
                        <input type="text"
                               name="members[{{ forloop.counter0 }}][phone_number]"
                               value="{{ m.user.phone_number }}"
                               readonly
                               class="w-full border rounded-md p-2 bg-gray-100 text-sm cursor-not-allowed">
                    </div>

                    <!-- Email -->
                    <div>
                        <label class="text-xs text-gray-600">Email</label>
                        <input type="email" value="{{ m.user.email }}" readonly
                               class="w-full border rounded-md p-2 bg-gray-100 text-sm cursor-not-allowed">
                    </div>

                    <!-- Role -->
                    <div>
                        <label class="text-xs text-gray-600">Role</label>
                        <select name="members[{{ forloop.counter0 }}][role]"
                                class="role-select w-full border rounded-md p-2 text-sm focus:ring-2 focus:ring-tea-green-500 focus:border-tea-green-500">
                            <option value="CHAIRPERSON" {% if m.role.name == "CHAIRPERSON" %}selected{% endif %}>CHAIRPERSON</option>
                            <option value="SECRETARY" {% if m.role.name == "SECRETARY" %}selected{% endif %}>SECRETARY</option>
                            <option value="TREASURER" {% if m.role.name == "TREASURER" %}selected{% endif %}>TREASURER</option>
                            <option value="MEMBER" {% if m.role.name == "MEMBER" %}selected{% endif %}>MEMBER</option>
                        </select>
                    </div>

                    <!-- Remove Button -->
                    <div class="flex justify-center">
                        {% if can_remove_members %}
                        <button type="button"
                                onclick="removeMember(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>
                        {% else %}
                        <div class="text-xs text-gray-400 text-center">
                            <i class="fas fa-lock"></i>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>

            {% if can_add_members %}
            <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>
            {% endif %}
        </div>

        <!-- Actions -->
        <div class="flex justify-between items-center gap-3 pt-4 border-t">
            {% if is_admin %}
            <button type="button"
                    onclick="confirmDelete()"
                    class="px-5 py-2 rounded-lg bg-red-600 text-white hover:bg-red-700 transition font-medium">
                <i class="fas fa-trash mr-1"></i>
                Delete Group
            </button>
            {% else %}
            <div></div>
            {% endif %}
            
            <div class="flex gap-3">
                <a href="{% url 'contract_market_place:group_detail' group.id %}"
                   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">
                    <i class="fas fa-save mr-1"></i>
                    Save Changes
                </button>
            </div>
        </div>
    </form>
</div>

<script>
let memberIndex = {{ members|length }};
let searchTimeout;
const MAX_GROUPS_PER_USER = {{ max_groups_per_user|default:"null" }};
const GROUP_ID = {{ group.id }};

/**
 * Add a new member row
 */
function addMemberRow() {
    const container = document.getElementById('members-container');
    const row = document.createElement('div');
    row.className = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-7 gap-2 items-end member-row bg-white p-3 rounded-lg border border-tea-green-300";
    row.setAttribute('data-row', memberIndex);
    row.setAttribute('data-existing', 'false');

    row.innerHTML = `
        <!-- Search Existing -->
        <div class="relative">
            <label class="text-xs font-medium text-gray-700 mb-1 block">Search</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</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">
            <button type="button" onclick="removeMember(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>
    `;
    container.appendChild(row);
    memberIndex++;
}

/**
 * Remove a member row
 */
function removeMember(btn) {
    const row = btn.closest('.member-row');
    const isExisting = row.getAttribute('data-existing') === 'true';
    
    if (isExisting) {
        // For existing members, just hide the row (will be deactivated on save)
        if (confirm('Are you sure you want to remove this member from the group?')) {
            row.style.display = 'none';
            // Keep the phone input so it's still submitted but mark it for removal
            const phoneInput = row.querySelector('input[name*="[phone_number]"]');
            if (phoneInput) {
                phoneInput.removeAttribute('name');
            }
        }
    } else {
        // For new members, just remove the row
        row.remove();
    }
}

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

    clearTimeout(searchTimeout);

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

    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);
}

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

/**
 * Check if user exists and validate
 */
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;
                const row = document.querySelector(`[data-row="${index}"]`);
                
                // Auto-fill
                if (type === 'phone' && row) {
                    row.querySelector(`[name="members[${index}][first_name]"]`).value = user.first_name;
                    row.querySelector(`[name="members[${index}][last_name]"]`).value = user.last_name;
                    if (user.email) {
                        row.querySelector(`[name="members[${index}][email]"]`).value = user.email;
                    }
                }
                
                // Show warnings
                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 role uniqueness
 */
document.addEventListener('change', function(e) {
    if (!e.target.classList.contains('role-select')) return;

    const roles = ['CHAIRPERSON', 'SECRETARY', 'TREASURER'];
    const allSelects = document.querySelectorAll('.role-select');
    
    roles.forEach(role => {
        const selectedCount = Array.from(allSelects).filter(select => {
            const row = select.closest('.member-row');
            return row && row.style.display !== 'none' && select.value === role;
        }).length;
        
        if (selectedCount > 1) {
            alert(`Only one ${role} is allowed in a group.`);
            e.target.value = 'MEMBER';
        }
    });
});

/**
 * Validate form before submission
 */
function validateForm() {
    const visibleRows = Array.from(document.querySelectorAll('.member-row')).filter(
        row => row.style.display !== 'none'
    );
    
    if (visibleRows.length < 3) {
        alert("Group must have at least 3 members (Chairperson, Secretary, and Treasurer).");
        return false;
    }

    // Check required roles
    const roles = visibleRows.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 phones
    const phones = visibleRows.map(row => {
        const phoneInput = row.querySelector('input[name*="[phone_number]"]');
        return phoneInput ? phoneInput.value.trim() : '';
    }).filter(p => p);

    if (phones.length !== new Set(phones).size) {
        alert("Duplicate phone numbers detected.");
        return false;
    }

    // Check max groups warnings
    if (document.querySelectorAll('.border-red-500').length > 0) {
        alert("Some users have reached the maximum groups limit.");
        return false;
    }

    return true;
}

/**
 * Confirm group deletion
 */
function confirmDelete() {
    if (confirm('Are you sure you want to delete this group? This action cannot be undone.')) {
        window.location.href = `/groups/{{ group.id }}/delete/`;
    }
}
</script>
{% endblock %}