{% extends "base.html" %}
{% from "macros/icons.html" import icon_success, icon_error, icon_alert %}

{% block title %}Admin: Members - {{ network_name }}{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-3xl font-bold">Members</h1>
        <div class="text-sm breadcrumbs">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/a/">Admin</a></li>
                <li>Members</li>
            </ul>
        </div>
    </div>
    <a href="/oauth2/sign_out" class="btn btn-outline btn-sm">Sign Out</a>
</div>

<!-- Flash Messages -->
{% if message %}
<div class="alert alert-success mb-4">
    {{ icon_success("stroke-current shrink-0 h-6 w-6") }}
    <span>{{ message }}</span>
</div>
{% endif %}

{% if error %}
<div class="alert alert-error mb-4">
    {{ icon_error("stroke-current shrink-0 h-6 w-6") }}
    <span>{{ error }}</span>
</div>
{% endif %}

<!-- Members Table -->
<div class="card bg-base-100 shadow-xl">
    <div class="card-body">
        <div class="flex justify-between items-center">
            <h2 class="card-title">Network Members ({{ members|length }})</h2>
            <button class="btn btn-primary btn-sm" onclick="addModal.showModal()">Add Member</button>
        </div>

        {% if members %}
        <div class="overflow-x-auto">
            <table class="table table-zebra">
                <thead>
                    <tr>
                        <th>Member ID</th>
                        <th>Name</th>
                        <th>Callsign</th>
                        <th>Contact</th>
                        <th class="w-32">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for member in members %}
                    <tr data-member-id="{{ member.id }}"
                        data-member-name="{{ member.name }}"
                        data-member-member-id="{{ member.member_id }}"
                        data-member-callsign="{{ member.callsign or '' }}"
                        data-member-description="{{ member.description or '' }}"
                        data-member-contact="{{ member.contact or '' }}">
                        <td class="font-mono font-semibold">{{ member.member_id }}</td>
                        <td>{{ member.name }}</td>
                        <td>
                            {% if member.callsign %}
                            <span class="badge badge-primary">{{ member.callsign }}</span>
                            {% else %}
                            <span class="text-base-content/40">-</span>
                            {% endif %}
                        </td>
                        <td class="max-w-xs truncate" title="{{ member.contact or '' }}">{{ member.contact or '-' }}</td>
                        <td>
                            <div class="flex gap-1">
                                <button class="btn btn-ghost btn-xs btn-edit">
                                    Edit
                                </button>
                                <button class="btn btn-ghost btn-xs text-error btn-delete">
                                    Delete
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-8 text-base-content/60">
            <p>No members configured yet.</p>
            <p class="text-sm mt-2">Click "Add Member" to create the first member.</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- Add Modal -->
<dialog id="addModal" class="modal">
    <div class="modal-box w-11/12 max-w-2xl">
        <h3 class="font-bold text-lg">Add New Member</h3>
        <form method="post" action="/a/members" class="py-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Member ID <span class="text-error">*</span></span>
                    </label>
                    <input type="text" name="member_id" id="add_member_id" class="input input-bordered"
                           placeholder="walshie86" required maxlength="50"
                           pattern="[a-zA-Z0-9_]+"
                           title="Letters, numbers, and underscores only">
                    <label class="label">
                        <span class="label-text-alt">Unique identifier (letters, numbers, underscore)</span>
                    </label>
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Name <span class="text-error">*</span></span>
                    </label>
                    <input type="text" name="name" id="add_name" class="input input-bordered"
                           placeholder="John Smith" required maxlength="255">
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Callsign</span>
                    </label>
                    <input type="text" name="callsign" id="add_callsign" class="input input-bordered"
                           placeholder="VK4ABC" maxlength="20">
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Contact</span>
                    </label>
                    <input type="text" name="contact" id="add_contact" class="input input-bordered"
                           placeholder="john@example.com or phone number" maxlength="255">
                </div>

                <div class="form-control md:col-span-2">
                    <label class="label">
                        <span class="label-text">Description</span>
                    </label>
                    <textarea name="description" id="add_description" rows="3" class="textarea textarea-bordered"
                              placeholder="Brief description of member's role and responsibilities..."></textarea>
                </div>
            </div>

            <div class="modal-action">
                <button type="button" class="btn" onclick="addModal.close()">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Member</button>
            </div>
        </form>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>

<!-- Edit Modal -->
<dialog id="editModal" class="modal">
    <div class="modal-box w-11/12 max-w-2xl">
        <h3 class="font-bold text-lg">Edit Member</h3>
        <form method="post" action="/a/members/update" class="py-4">
            <input type="hidden" name="id" id="edit_id">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Member ID <span class="text-error">*</span></span>
                    </label>
                    <input type="text" name="member_id" id="edit_member_id" class="input input-bordered"
                           required maxlength="50" pattern="[a-zA-Z0-9_]+"
                           title="Letters, numbers, and underscores only">
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Name <span class="text-error">*</span></span>
                    </label>
                    <input type="text" name="name" id="edit_name" class="input input-bordered"
                           required maxlength="255">
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Callsign</span>
                    </label>
                    <input type="text" name="callsign" id="edit_callsign" class="input input-bordered"
                           maxlength="20">
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Contact</span>
                    </label>
                    <input type="text" name="contact" id="edit_contact" class="input input-bordered"
                           maxlength="255">
                </div>

                <div class="form-control md:col-span-2">
                    <label class="label">
                        <span class="label-text">Description</span>
                    </label>
                    <textarea name="description" id="edit_description" rows="3"
                              class="textarea textarea-bordered"></textarea>
                </div>
            </div>

            <div class="modal-action">
                <button type="button" class="btn" onclick="editModal.close()">Cancel</button>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>

<!-- Delete Modal -->
<dialog id="deleteModal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg">Delete Member</h3>
        <form method="post" action="/a/members/delete" class="py-4">
            <input type="hidden" name="id" id="delete_id">

            <p class="py-4">Are you sure you want to delete member <strong id="delete_member_name"></strong>?</p>

            <div class="alert alert-error mb-4">
                {{ icon_alert("stroke-current shrink-0 h-6 w-6") }}
                <span>This action cannot be undone.</span>
            </div>

            <div class="modal-action">
                <button type="button" class="btn" onclick="deleteModal.close()">Cancel</button>
                <button type="submit" class="btn btn-error">Delete</button>
            </div>
        </form>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>
{% endblock %}

{% block extra_scripts %}
<script>
// Use event delegation to handle button clicks safely
document.addEventListener('DOMContentLoaded', function() {
    // Edit button handler
    document.querySelectorAll('.btn-edit').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var row = this.closest('tr');
            document.getElementById('edit_id').value = row.dataset.memberId;
            document.getElementById('edit_member_id').value = row.dataset.memberMemberId;
            document.getElementById('edit_name').value = row.dataset.memberName;
            document.getElementById('edit_callsign').value = row.dataset.memberCallsign;
            document.getElementById('edit_description').value = row.dataset.memberDescription;
            document.getElementById('edit_contact').value = row.dataset.memberContact;
            editModal.showModal();
        });
    });

    // Delete button handler
    document.querySelectorAll('.btn-delete').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var row = this.closest('tr');
            document.getElementById('delete_id').value = row.dataset.memberId;
            document.getElementById('delete_member_name').textContent = row.dataset.memberName;
            deleteModal.showModal();
        });
    });
});
</script>
{% endblock %}