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

{% block content %}

<div class="row">
    <div class="col-md-12">
        <div class="card card-round">
            <div class="card-header">
                <div class="card-head-row card-tools-still-right">
                    <h4 class="card-title">Invite Management</h4>
                    <div class="card-tools" style="display: flex; align-items: center; gap: 5px;">
                        <button class="btn btn-success btn-sm" onclick="exportInvites()" title="Export Invite Data">
                            Export
                        </button>
                        <button class="btn btn-primary btn-sm" onclick="showAddInviteModal()" title="Add New Invite">
                            Add Invite
                        </button>
                        <button class="btn btn-sm btn-primary" onclick="sendBulkInvite()" title="Send Invite to Selected" id="bulkInviteBtn" disabled>
                            Bulk Send
                        </button>
                        <button class="btn btn-warning btn-sm" onclick="resetInviteStatus()" id="resetInviteStatusBtn" title="Reset Invite Status">
                            Reset All Status
                        </button>
                    </div>
                </div>
                <p class="card-category">Manage your event invitations</p>
            </div>
            <div class="card-body p-0 pb-3">
                <div class="table-responsive">
                    {% if invites %}
                    <div class="container-fluid">
                        <table class="table bg-light myTable" id="inviteTable">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col"><input type="checkbox" id="selectAll"></th>
                                    <th scope="col">#</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Phone</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Message SID</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for invite in invites %}
                                <tr data-invite-id="{{ invite.id }}">
                                    <td><input type="checkbox" class="invite-checkbox" value="{{ invite.id }}"></td>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ invite.name }}</td>
                                    <td>{{ invite.email|default:"-" }}</td>
                                    <td>{{ invite.phone|default:"-" }}</td>
                                    <td>
                                        {% if invite.is_invited %}
                                        <span class="badge badge-success">Invited</span>
                                        {% else %}
                                        <span class="badge badge-secondary">Not Sent</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ invite.message_sid|default:"-" }}</td>
                                    <td class="d-flex gap-1">
                                        {% if invite.is_invited %}
                                            <button class="btn btn-light text-success btn-sm" disabled title="Already Invited">
                                                <i class="fas fa-circle-check"></i>
                                            </button>
                                        {% else %}
                                            <button onclick="sendInviteToGuest({{ invite.id }}, this)" class="btn btn-success btn-sm" title="Send Invite">
                                                <i class="fas fa-paper-plane"></i>
                                            </button>
                                        {% endif %}
                                        <button onclick="editInvite({{ invite.id }})" class="btn btn-warning btn-sm" title="Edit Invite">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button onclick="deleteInvite({{ invite.id }})" class="btn btn-danger btn-sm" title="Delete Invite">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        </div>
                    {% else %}
                        <div class="row my-5" style="padding: 50px 0">
                            <div class="col-md-12 text-center">
                                <h5>Your invite list is empty.</h5>
                                <button class="btn btn-primary mt-3" onclick="showAddInviteModal()">Add Your First Invite</button>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Invite Modal -->
<div class="modal fade" id="addInviteModal" tabindex="-1" role="dialog" aria-labelledby="addInviteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addInviteModalLabel">Add New Invite</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addInviteForm">
                    <div class="form-group">
                        <label for="inviteName">Name *</label>
                        <input type="text" class="form-control" id="inviteName" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="inviteEmail">Email</label>
                        <input type="email" class="form-control" id="inviteEmail" name="email">
                    </div>
                    <div class="form-group">
                        <label for="invitePhone">Phone</label>
                        <input type="text" class="form-control" id="invitePhone" name="phone" placeholder="+1234567890">
                        <small class="form-text text-muted">Include country code for WhatsApp (e.g., +2348012345678)</small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveNewInviteBtn">Add Invite</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Invite Modal -->
<div class="modal fade" id="editInviteModal" tabindex="-1" role="dialog" aria-labelledby="editInviteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editInviteModalLabel">Edit Invite</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editInviteForm">
                    <input type="hidden" id="editInviteId" name="inviteId">
                    <div class="form-group">
                        <label for="editName">Name *</label>
                        <input type="text" class="form-control" id="editName" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="editEmail">Email (optional)</label>
                        <input type="email" class="form-control" id="editEmail" name="email">
                    </div>
                    <div class="form-group">
                        <label for="editPhone">Phone</label>
                        <input type="text" class="form-control" id="editPhone" name="phone">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="updateInviteBtn">Save Changes</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block customJS %}
<script>
    // Ensure showConfirm is defined (fallback)
    function showConfirm(title, message, callback) {
        if (!$('#confirmModal').length) {
            var modalHtml = '<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog">' +
                '<div class="modal-dialog modal-dialog-centered" role="document">' +
                    '<div class="modal-content">' +
                        '<div class="modal-header">' +
                            '<h5 class="modal-title" id="confirmModalTitle"></h5>' +
                            '<button type="button" class="close" data-dismiss="modal">' +
                                '<span>&times;</span>' +
                            '</button>' +
                        '</div>' +
                        '<div class="modal-body" id="confirmModalBody"></div>' +
                        '<div class="modal-footer">' +
                            '<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>' +
                            '<button type="button" class="btn btn-primary" id="confirmModalOk">OK</button>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>';
            $('body').append(modalHtml);
        }
        $('#confirmModalTitle').text(title);
        $('#confirmModalBody').text(message);
        $('#confirmModalOk').off('click').on('click', function() {
            $('#confirmModal').modal('hide');
            if (callback) callback(true);
        });
        $('#confirmModal').off('hidden.bs.modal').on('hidden.bs.modal', function() {
            if (callback) callback(false);
        });
        $('#confirmModal').modal('show');
    }

    // Base URLs
    const URLS = {
        addInvite: "{% url 'add_invite' %}",
        editInvite: (id) => `/invites/edit/${id}/`,
        deleteInvite: (id) => `/invites/delete/${id}/`,
        getInvite: (id) => `/invites/get/${id}/`,
        sendInvite: (id) => `/invites/send/${id}/`,
        sendBulkInvites: "{% url 'send_bulk_invites' %}",
        exportInvites: "{% url 'export_invites' %}"
    };

    // Bulk Send Invites
    function sendBulkInvite() {
        const selectedInvites = $('.invite-checkbox:checked').map(function() {
            return $(this).val();
        }).get();

        if (selectedInvites.length === 0) {
            showAlert('Please select at least one invitee.', 'warning');
            return;
        }

        showConfirm(
            'Send Bulk Invites',
            `Send invites to ${selectedInvites.length} invitee(s)?`,
            function(confirmed) {
                if (confirmed) {
                    const bulkBtn = $('#bulkInviteBtn');
                    const originalHTML = bulkBtn.html();

                    $.ajax({
                        url: URLS.sendBulkInvites,
                        type: 'POST',
                        headers: {
                            'X-CSRFToken': '{{ csrf_token }}',
                            'Content-Type': 'application/json'
                        },
                        data: JSON.stringify({
                            'invite_ids': selectedInvites
                        }),
                        beforeSend: function() {
                            bulkBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Sending...');
                        },
                        success: function(response) {
                            if (response.status === 200) {
                                showAlert(response.message, 'success');
                                setTimeout(() => location.reload(), 1000);
                            } else {
                                showAlert(response.message || 'Failed to send invites.', 'error');
                                bulkBtn.prop('disabled', false).html(originalHTML);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Error:', error);
                            showAlert('An error occurred while sending invites.', 'error');
                            bulkBtn.prop('disabled', false).html(originalHTML);
                        }
                    });
                }
            }
        );
    }

    // Send Invite to single invitee (auto-sends to available channels, no confirmation modal)
    function sendInviteToGuest(inviteId, btnElement) {
        const btn = $(btnElement);
        const originalHTML = btn.html();
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
        $.ajax({
            url: URLS.sendInvite(inviteId),
            type: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}' },
            data: JSON.stringify({}),
            contentType: 'application/json',
            success: function(response) {
                if (response.success) {
                    showAlert(response.message, 'success');
                    // Update button to checkmark
                    btn.removeClass('btn-success')
                       .addClass('btn-light text-success')
                       .prop('disabled', true)
                       .attr('title', 'Invite Sent')
                       .html('<i class="fas fa-circle-check"></i>');
                } else {
                    showAlert(response.message || 'Failed to send invite.', 'error');
                    btn.prop('disabled', false).html(originalHTML);
                }
            },
            error: function(xhr) {
                showAlert('An error occurred while sending invite.', 'error');
                btn.prop('disabled', false).html(originalHTML);
            }
        });
    }

    // Add Invite
    function showAddInviteModal() {
        $('#addInviteForm')[0].reset();
        $('#addInviteModal').modal('show');
    }

    $('#saveNewInviteBtn').on('click', function() {
        const name = $('#inviteName').val().trim();
        const email = $('#inviteEmail').val().trim() || null;
        const phone = $('#invitePhone').val().trim() || null;

        if (!name) {
            showAlert('Name is required', 'error');
            return;
        }

        const btn = $(this);
        const originalText = btn.html();
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

        $.ajax({
            url: URLS.addInvite,
            type: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}' },
            data: JSON.stringify({ name, email, phone }),
            contentType: 'application/json',
            success: function(response) {
                if (response.success) {
                    showAlert(response.message, 'success');
                    $('#addInviteModal').modal('hide');
                    setTimeout(() => location.reload(), 500);
                } else {
                    showAlert(response.message, 'error');
                    btn.prop('disabled', false).html(originalText);
                }
            },
            error: function(xhr) {
                showAlert('An error occurred while adding invite.', 'error');
                btn.prop('disabled', false).html(originalText);
            }
        });
    });

    // Edit Invite
    function editInvite(inviteId) {
        $.ajax({
            url: URLS.getInvite(inviteId),
            type: 'GET',
            success: function(data) {
                $('#editInviteId').val(data.id);
                $('#editName').val(data.name);
                $('#editEmail').val(data.email || '');
                $('#editPhone').val(data.phone || '');
                $('#editInviteModal').modal('show');
            },
            error: function() {
                showAlert('Failed to load invite details.', 'error');
            }
        });
    }

    $('#updateInviteBtn').on('click', function() {
        const inviteId = $('#editInviteId').val();
        const name = $('#editName').val().trim();
        const email = $('#editEmail').val().trim() || null;
        const phone = $('#editPhone').val().trim() || null;

        if (!name) {
            showAlert('Name is required', 'error');
            return;
        }

        const btn = $(this);
        const originalText = btn.html();
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');

        $.ajax({
            url: URLS.editInvite(inviteId),
            type: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}' },
            data: JSON.stringify({ name, email, phone }),
            contentType: 'application/json',
            success: function(response) {
                if (response.success) {
                    showAlert(response.message, 'success');
                    $('#editInviteModal').modal('hide');
                    setTimeout(() => location.reload(), 500);
                } else {
                    showAlert(response.message, 'error');
                    btn.prop('disabled', false).html(originalText);
                }
            },
            error: function(xhr) {
                showAlert('An error occurred while updating invite.', 'error');
                btn.prop('disabled', false).html(originalText);
            }
        });
    });

    // Delete Invite
    function deleteInvite(inviteId) {
        showConfirm(
            'Delete Invite',
            'Are you sure you want to delete this invite? This action cannot be undone.',
            function(confirmed) {
                if (confirmed) {
                    $.ajax({
                        url: URLS.deleteInvite(inviteId),
                        type: 'DELETE',
                        headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                        success: function(data) {
                            if (data.success) {
                                showAlert(data.message, 'success');
                                const row = $(`tr[data-invite-id="${inviteId}"]`);
                                row.remove();
                                if (!$('#inviteTable tbody tr').length) {
                                    location.reload();
                                }
                            } else {
                                showAlert(data.message, 'error');
                            }
                        },
                        error: function() {
                            showAlert('An error occurred while deleting the invite.', 'error');
                        }
                    });
                }
            }
        );
    }

    // Export Invites
    function exportInvites() {
        window.location.href = URLS.exportInvites;
    }

    // Select All Checkbox
    $('#selectAll').on('change', function() {
        $('.invite-checkbox').prop('checked', $(this).prop('checked'));
        toggleBulkButton();
    });

    $(document).on('change', '.invite-checkbox', function() {
        const allChecked = $('.invite-checkbox').length === $('.invite-checkbox:checked').length;
        $('#selectAll').prop('checked', allChecked);
        toggleBulkButton();
    });

    function toggleBulkButton() {
        const hasChecked = $('.invite-checkbox:checked').length > 0;
        $('#bulkInviteBtn').prop('disabled', !hasChecked);
    }

    // Reset All Invite Status
    function resetInviteStatus() {
        showConfirm(
            'Reset All Invite Status',
            'Are you sure you want to reset the invite status for all invitees? This will mark all as not invited and clear sent flags.',
            function(confirmed) {
                if (confirmed) {
                    $.ajax({
                        url: "{% url 'reset_invite_status' %}",
                        type: 'POST',
                        headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                        data: JSON.stringify({}),
                        contentType: 'application/json',
                        beforeSend: function() {
                            $('#resetInviteStatusBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Resetting...');
                        },
                        success: function(response) {
                            if (response.status === 200) {
                                showAlert(response.message, 'success');
                                setTimeout(() => location.reload(), 1500);
                            } else {
                                showAlert(response.message || 'Failed to reset status.', 'error');
                                $('#resetInviteStatusBtn').prop('disabled', false).html('Reset All Status');
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Error:', error);
                            showAlert('An error occurred while resetting status.', 'error');
                            $('#resetInviteStatusBtn').prop('disabled', false).html('Reset All Status');
                        }
                    });
                }
            }
        );
    }

    // Initialize
    $(document).ready(function() {
        // Initialize DataTable for invite table
        if ($('#inviteTable').length && !$.fn.DataTable.isDataTable('#inviteTable')) {
            $('#inviteTable').DataTable({
                dom: 'frtip',
                columnDefs: [
                    { targets: [0, -1], orderable: false, searchable: false }
                ],
                responsive: true,
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']]
            });
        }
        toggleBulkButton();
    });
</script>
{% endblock %}