{% extends "base.html" %}

{% block title %}{{ network_name }} - Node Tags Admin{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-3xl font-bold">Node Tags</h1>
        <div class="text-sm breadcrumbs">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/a/">Admin</a></li>
                <li>Node Tags</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">
    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>{{ message }}</span>
</div>
{% endif %}

{% if error %}
<div class="alert alert-error mb-4">
    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>{{ error }}</span>
</div>
{% endif %}

<!-- Node Selector -->
<div class="card bg-base-100 shadow-xl mb-6">
    <div class="card-body">
        <h2 class="card-title">Select Node</h2>
        <form method="get" action="/a/node-tags" class="flex gap-4 items-end">
            <div class="form-control flex-1">
                <label class="label">
                    <span class="label-text">Node</span>
                </label>
                <select name="public_key" class="select select-bordered w-full" onchange="this.form.submit()">
                    <option value="">-- Select a node --</option>
                    {% for node in nodes %}
                    <option value="{{ node.public_key }}" {% if node.public_key == selected_public_key %}selected{% endif %}>
                        {{ node.name or 'Unnamed' }} ({{ node.public_key[:8] }}...{{ node.public_key[-4:] }})
                    </option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Load Tags</button>
        </form>
    </div>
</div>

{% if selected_public_key and selected_node %}
<!-- Selected Node Info -->
<div class="card bg-base-100 shadow-xl mb-6">
    <div class="card-body">
        <div class="flex justify-between items-start">
            <div class="flex items-start gap-3">
                <span class="text-2xl" title="{{ selected_node.adv_type or 'Unknown' }}">{% if selected_node.adv_type and selected_node.adv_type|lower == 'chat' %}💬{% elif selected_node.adv_type and selected_node.adv_type|lower == 'repeater' %}📡{% elif selected_node.adv_type and selected_node.adv_type|lower == 'room' %}🪧{% else %}📍{% endif %}</span>
                <div>
                    <h2 class="card-title">{{ selected_node.name or 'Unnamed Node' }}</h2>
                    <p class="text-sm opacity-70 font-mono">{{ selected_public_key }}</p>
                </div>
            </div>
            <div class="flex gap-2">
                {% if tags %}
                <button class="btn btn-outline btn-sm" onclick="copyAllModal.showModal()">Copy All</button>
                <button class="btn btn-outline btn-error btn-sm" onclick="deleteAllModal.showModal()">Delete All</button>
                {% endif %}
                <a href="/nodes/{{ selected_public_key }}" class="btn btn-ghost btn-sm">View Node</a>
            </div>
        </div>
    </div>
</div>

<!-- Tags Table -->
<div class="card bg-base-100 shadow-xl mb-6">
    <div class="card-body">
        <h2 class="card-title">Tags ({{ tags|length }})</h2>

        {% if tags %}
        <div class="overflow-x-auto">
            <table class="table table-zebra">
                <thead>
                    <tr>
                        <th>Key</th>
                        <th>Value</th>
                        <th>Type</th>
                        <th>Updated</th>
                        <th class="w-48">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tag in tags %}
                    <tr data-tag-key="{{ tag.key }}" data-tag-value="{{ tag.value or '' }}" data-tag-type="{{ tag.value_type }}">
                        <td class="font-mono font-semibold">{{ tag.key }}</td>
                        <td class="max-w-xs truncate" title="{{ tag.value or '' }}">{{ tag.value or '-' }}</td>
                        <td>
                            <span class="badge badge-ghost badge-sm">{{ tag.value_type }}</span>
                        </td>
                        <td class="text-sm opacity-70">{{ tag.updated_at[:10] if tag.updated_at else '-' }}</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 btn-move">
                                    Move
                                </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 tags found for this node.</p>
            <p class="text-sm mt-2">Add a new tag below.</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- Add New Tag Form -->
<div class="card bg-base-100 shadow-xl">
    <div class="card-body">
        <h2 class="card-title">Add New Tag</h2>
        <form method="post" action="/a/node-tags" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <input type="hidden" name="public_key" value="{{ selected_public_key }}">

            <div class="form-control">
                <label class="label">
                    <span class="label-text">Key</span>
                </label>
                <input type="text" name="key" class="input input-bordered" placeholder="tag_name" required maxlength="100">
            </div>

            <div class="form-control">
                <label class="label">
                    <span class="label-text">Value</span>
                </label>
                <input type="text" name="value" class="input input-bordered" placeholder="tag value">
            </div>

            <div class="form-control">
                <label class="label">
                    <span class="label-text">Type</span>
                </label>
                <select name="value_type" class="select select-bordered">
                    <option value="string">string</option>
                    <option value="number">number</option>
                    <option value="boolean">boolean</option>
                                    </select>
            </div>

            <div class="form-control">
                <label class="label">
                    <span class="label-text">&nbsp;</span>
                </label>
                <button type="submit" class="btn btn-primary">Add Tag</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Modal -->
<dialog id="editModal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg">Edit Tag</h3>
        <form method="post" action="/a/node-tags/update" class="py-4">
            <input type="hidden" name="public_key" value="{{ selected_public_key }}">
            <input type="hidden" name="key" id="editKey">

            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Key</span>
                </label>
                <input type="text" id="editKeyDisplay" class="input input-bordered" disabled>
            </div>

            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Value</span>
                </label>
                <input type="text" name="value" id="editValue" class="input input-bordered">
            </div>

            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Type</span>
                </label>
                <select name="value_type" id="editValueType" class="select select-bordered w-full">
                    <option value="string">string</option>
                    <option value="number">number</option>
                    <option value="boolean">boolean</option>
                                    </select>
            </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>

<!-- Move Modal -->
<dialog id="moveModal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg">Move Tag to Another Node</h3>
        <form method="post" action="/a/node-tags/move" class="py-4">
            <input type="hidden" name="public_key" value="{{ selected_public_key }}">
            <input type="hidden" name="key" id="moveKey">

            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Tag Key</span>
                </label>
                <input type="text" id="moveKeyDisplay" class="input input-bordered" disabled>
            </div>

            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Destination Node</span>
                </label>
                <select name="new_public_key" id="moveDestination" class="select select-bordered w-full" required>
                    <option value="">-- Select destination node --</option>
                    {% for node in nodes %}
                    {% if node.public_key != selected_public_key %}
                    <option value="{{ node.public_key }}">
                        {{ node.name or 'Unnamed' }} ({{ node.public_key[:8] }}...{{ node.public_key[-4:] }})
                    </option>
                    {% endif %}
                    {% endfor %}
                </select>
            </div>

            <div class="alert alert-warning mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                <span>This will move the tag from the current node to the destination node.</span>
            </div>

            <div class="modal-action">
                <button type="button" class="btn" onclick="moveModal.close()">Cancel</button>
                <button type="submit" class="btn btn-warning">Move Tag</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 Tag</h3>
        <form method="post" action="/a/node-tags/delete" class="py-4">
            <input type="hidden" name="public_key" value="{{ selected_public_key }}">
            <input type="hidden" name="key" id="deleteKey">

            <p class="py-4">Are you sure you want to delete the tag "<span id="deleteKeyDisplay" class="font-mono font-semibold"></span>"?</p>

            <div class="alert alert-error mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                <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>

<!-- Copy All Tags Modal -->
<dialog id="copyAllModal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg">Copy All Tags to Another Node</h3>
        <form method="post" action="/a/node-tags/copy-all" class="py-4">
            <input type="hidden" name="public_key" value="{{ selected_public_key }}">

            <p class="mb-4">Copy all {{ tags|length }} tag(s) from <strong>{{ selected_node.name or 'Unnamed' }}</strong> to another node.</p>

            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Destination Node</span>
                </label>
                <select name="dest_public_key" class="select select-bordered w-full" required>
                    <option value="">-- Select destination node --</option>
                    {% for node in nodes %}
                    {% if node.public_key != selected_public_key %}
                    <option value="{{ node.public_key }}">
                        {{ node.name or 'Unnamed' }} ({{ node.public_key[:8] }}...{{ node.public_key[-4:] }})
                    </option>
                    {% endif %}
                    {% endfor %}
                </select>
            </div>

            <div class="alert alert-info mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>Tags that already exist on the destination node will be skipped. Original tags remain on this node.</span>
            </div>

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

<!-- Delete All Tags Modal -->
<dialog id="deleteAllModal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg">Delete All Tags</h3>
        <form method="post" action="/a/node-tags/delete-all" class="py-4">
            <input type="hidden" name="public_key" value="{{ selected_public_key }}">

            <p class="mb-4">Are you sure you want to delete all {{ tags|length }} tag(s) from <strong>{{ selected_node.name or 'Unnamed' }}</strong>?</p>

            <div class="alert alert-error mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                <span>This action cannot be undone. All tags will be permanently deleted.</span>
            </div>

            <div class="modal-action">
                <button type="button" class="btn" onclick="deleteAllModal.close()">Cancel</button>
                <button type="submit" class="btn btn-error">Delete All Tags</button>
            </div>
        </form>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>

{% elif selected_public_key and not selected_node %}
<div class="alert alert-warning">
    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <span>Node not found: {{ selected_public_key }}</span>
</div>
{% else %}
<div class="card bg-base-100 shadow-xl">
    <div class="card-body text-center py-12">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a4 4 0 014-4z" />
        </svg>
        <h2 class="text-xl font-semibold mb-2">Select a Node</h2>
        <p class="opacity-70">Choose a node from the dropdown above to view and manage its tags.</p>
    </div>
</div>
{% endif %}
{% 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');
            var key = row.dataset.tagKey;
            var value = row.dataset.tagValue;
            var valueType = row.dataset.tagType;
            document.getElementById('editKey').value = key;
            document.getElementById('editKeyDisplay').value = key;
            document.getElementById('editValue').value = value;
            document.getElementById('editValueType').value = valueType;
            editModal.showModal();
        });
    });

    // Move button handler
    document.querySelectorAll('.btn-move').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var row = this.closest('tr');
            var key = row.dataset.tagKey;
            document.getElementById('moveKey').value = key;
            document.getElementById('moveKeyDisplay').value = key;
            document.getElementById('moveDestination').selectedIndex = 0;
            moveModal.showModal();
        });
    });

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