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

{% block title %}Interface Grid - {{ device.name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>Interface Grid View - {{ device.name }}</h1>
                <a href="{% url 'dcim:device' pk=device.pk %}" class="btn btn-secondary">
                    <i class="mdi mdi-arrow-left"></i> Back to Device
                </a>
            </div>

            <!-- Filter Section -->
            <div class="card mb-4">
                <div class="card-header">
                    <strong>Filters & Options</strong>
                </div>
                <div class="card-body">
                    <form method="get" id="filter-form">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Exclude Interface Types:</label>
                                <select name="exclude_type" multiple class="form-control" id="type-filter">
                                    {% for itype in interface_types %}
                                    <option value="{{ itype }}" {% if itype in excluded_types %}selected{% endif %}>
                                        {{ itype }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label>Grid Order:</label>
                                <select name="grid_order" class="form-control" id="grid-order">
                                    <option value="column-major" {% if grid_order=='column-major' %}selected{% endif %}>
                                        Column-Major (Vertical: 1,2 | 3,4 | 5,6)
                                    </option>
                                    <option value="row-major" {% if grid_order=='row-major' %}selected{% endif %}>
                                        Row-Major (Horizontal: 1,2,3 | 4,5,6)
                                    </option>
                                </select>
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary me-2">Apply</button>
                                <a href="{% url 'plugins:netbox_interface_view:interface_grid' device_id=device.pk %}"
                                    class="btn btn-secondary">Clear</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Grid Info -->
            <div class="alert alert-info">
                <strong>Grid Configuration:</strong> {{ grid_rows }} rows × {{ grid_columns }} columns ({{ total_cells
                }} cells)
                <br>
                <strong>Interfaces Shown:</strong> {{ interfaces|length }}
                <br>
                <small>Configure grid dimensions using custom fields 'grid_rows' and 'grid_columns' on the
                    device.</small>
            </div>

            <!-- Helper -->
            <div class="card mb-4">
                <div class="card-header">
                    <strong>Helper</strong>
                </div>
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-md-3">
                            <span class="badge bg-success">●</span> Connected & Enabled
                        </div>
                        <div class="col-md-3">
                            <span class="badge bg-secondary">●</span> Disconnected
                        </div>
                        <div class="col-md-3">
                            <span class="badge bg-danger">●</span> Disabled
                        </div>
                        <div class="col-md-3">
                            <strong>Border:</strong> Untagged VLAN | <strong>Dots:</strong> Tagged VLANs
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <strong>Interface Types (border style):</strong>
                            <span
                                style="display: inline-block; width: 20px; height: 20px; border: 2px solid #333; border-radius: 2px; margin: 0 3px; vertical-align: middle;"></span>
                            Ethernet (fixed - blocky)
                            <span
                                style="display: inline-block; width: 20px; height: 20px; border: 2px solid #333; border-radius: 6px; margin: 0 3px; vertical-align: middle;"></span>
                            Ethernet (modular - rounded)
                            <span
                                style="display: inline-block; width: 20px; height: 20px; border: 2px dashed #333; border-radius: 0px; margin: 0 3px; vertical-align: middle;"></span>
                            Virtual/LAG (dashed)
                            <span
                                style="display: inline-block; width: 20px; height: 20px; border: 3px solid #333; border-radius: 4px; margin: 0 3px; vertical-align: middle;"></span>
                            Stacking (thick border)
                            <span
                                style="display: inline-block; width: 20px; height: 20px; border: 2px solid #333; border-radius: 25px; margin: 0 3px; vertical-align: middle;"></span>
                            Wireless (pill)
                        </div>
                    </div>
                </div>
            </div>

            <!-- Interface Grid -->
            <div class="interface-grid-container">
                <!-- Interface Grid with port numbers above each cell -->
                <div class="interface-grid" id="interface-grid" style="
                    display: grid; 
                    grid-template-columns: repeat({{ grid_columns }}, 1fr);
                    gap: 4px;
                    margin-bottom: 20px;
                ">
                    {% for interface in interfaces %}
                    <!-- Each grid item is a clickable link that wraps the content -->
                    <a href="{% url 'dcim:interface' pk=interface.id %}" target="_blank" class="grid-item-wrapper"
                        style="display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit;">
                        <!-- Port Number above this specific cell -->
                        <div
                            style="text-align: center; font-size: 0.65em; color: #495057; font-weight: 600; margin-bottom: 2px;">
                            {{ interface.original_index }}
                        </div>

                        <!-- Interface Cell -->
                        <div class="interface-cell interface-type-{{ interface.type }}"
                            data-interface-id="{{ interface.id }}" data-interface-index="{{ forloop.counter0 }}"
                            data-interface-name="{{ interface.name }}" data-interface-type="{{ interface.type }}"
                            data-bs-toggle="tooltip" data-bs-html="true" draggable="true"
                            title="<strong>Port {{ interface.original_index }}: {{ interface.name }}</strong><br>
                                    Type: {{ interface.type }}<br>
                                    {% if interface.untagged_vlan %}Untagged: VLAN {{ interface.untagged_vlan.vid }} ({{ interface.untagged_vlan.name }})<br>{% endif %}
                                    {% if interface.tagged_vlans %}Tagged: {% for vlan in interface.tagged_vlans %}VLAN {{ vlan.vid }}{% if not forloop.last %}, {% endif %}{% endfor %}<br>{% endif %}
                                    {% if interface.description %}{{ interface.description }}<br>{% endif %}
                                    Status: {% if interface.connected and interface.enabled %}Connected & Enabled{% elif not interface.enabled %}Disabled{% else %}Disconnected{% endif %}"
                            style="
                                border: 3px solid {{ interface.untagged_vlan.color|default:'#cccccc' }};
                                padding: 3px;
                                min-height: 85px;
                                max-height: 85px;
                                width: 100%;
                                display: flex;
                                flex-direction: column;
                                position: relative;
                                overflow: hidden;
                                cursor: pointer;
                             ">
                            <!-- Connection Status Indicator (top-right corner) -->
                            <div style="position: absolute; top: 2px; right: 2px;">
                                {% if interface.connected and interface.enabled %}
                                <span style="color: #28a745; font-size: 12px;">●</span>
                                {% elif not interface.enabled %}
                                <span style="color: #dc3545; font-size: 12px;">●</span>
                                {% else %}
                                <span style="color: #6c757d; font-size: 12px;">●</span>
                                {% endif %}
                            </div>

                            <!-- Tagged VLANs dots (bottom) -->
                            {% if interface.tagged_vlans %}
                            <div
                                style="position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px;">
                                {% for vlan in interface.tagged_vlans %}
                                <span style="
                                        width: 7px; 
                                        height: 7px; 
                                        border-radius: 50%; 
                                        background-color: {{ vlan.color }};
                                        display: inline-block;
                                        border: 1px solid #333;
                                    "></span>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </a>
                    {% endfor %}

                    <!-- Empty cells to fill the grid -->
                    {% for i in empty_cells %}
                    <div class="grid-item-wrapper" style="display: flex; flex-direction: column; align-items: center;">
                        <!-- Empty port number -->
                        <div style="text-align: center; font-size: 0.65em; color: #dee2e6; margin-bottom: 2px;">
                            {{ interfaces|length|add:forloop.counter }}
                        </div>

                        <!-- Empty Cell -->
                        <div class="interface-cell-empty" style="
                            border: 1px dashed #dee2e6;
                            border-radius: 3px;
                            padding: 4px;
                            min-height: 45px;
                            max-height: 45px;
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #adb5bd;
                        ">
                            <span style="font-size: 0.6em;">—</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .interface-cell {
        transition: transform 0.1s, box-shadow 0.1s;
        background-color: #f8f9fa;
    }

    .interface-cell-empty {
        background-color: #ffffff;
    }

    html[data-theme="dark"] .interface-cell {
        background-color: #2c3238;
        /* Darker background for cells */
    }

    html[data-theme="dark"] .interface-cell-empty {
        background-color: #1c2023;
        /* Even darker for empty cells */
        border-color: #3a4249 !important;
    }

    .interface-cell:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        z-index: 10;
    }

    .interface-cell.dragging {
        opacity: 0.5;
    }

    .interface-cell.drag-over {
        border-style: dashed !important;
        border-width: 3px !important;
        background-color: #e7f3ff !important;
    }

    /* Remove pointer events from the link when dragging */
    .grid-item-wrapper.dragging {
        pointer-events: none;
    }

    /* Interface Type Visual Differentiation via Border Styling */

    /* Virtual interfaces - no border radius (sharp square corners) */
    .interface-cell[data-interface-type*="virtual"],
    .interface-cell[data-interface-type*="lag"],
    .interface-cell[data-interface-type*="bridge"] {
        border-radius: 0px !important;
        border-style: dashed !important;
    }

    /* Ethernet (fixed) - blocky/square corners (minimal radius) */
    .interface-cell[data-interface-type*="100base"],
    .interface-cell[data-interface-type*="1000base"],
    .interface-cell[data-interface-type*="2.5gbase"],
    .interface-cell[data-interface-type*="5gbase"],
    .interface-cell[data-interface-type*="10gbase"],
    .interface-cell[data-interface-type*="25gbase"],
    .interface-cell[data-interface-type*="40gbase"],
    .interface-cell[data-interface-type*="100gbase"] {
        border-radius: 2px !important;
    }

    /* Ethernet (modular) - rounded corners (SFP, QSFP, etc.) */
    .interface-cell[data-interface-type*="sfp"],
    .interface-cell[data-interface-type*="qsfp"],
    .interface-cell[data-interface-type*="xfp"],
    .interface-cell[data-interface-type*="cfp"],
    .interface-cell[data-interface-type*="cx4"] {
        border-radius: 6px !important;
    }

    /* Ethernet (backplane) - medium square corners */
    .interface-cell[data-interface-type*="backplane"] {
        border-radius: 1px !important;
        border-width: 4px !important;
    }

    /* Wireless - pill shape (very rounded) */
    .interface-cell[data-interface-type*="ieee802.11"],
    .interface-cell[data-interface-type*="80211"] {
        border-radius: 25px !important;
    }

    /* Cellular - octagon-like (medium-high radius) */
    .interface-cell[data-interface-type*="gsm"],
    .interface-cell[data-interface-type*="cdma"],
    .interface-cell[data-interface-type*="lte"],
    .interface-cell[data-interface-type*="5g"] {
        border-radius: 8px !important;
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    }

    /* SONET/SDH - diamond shape */
    .interface-cell[data-interface-type*="sonet"],
    .interface-cell[data-interface-type*="sdh"] {
        border-radius: 0px !important;
        transform: rotate(45deg);
    }

    .interface-cell[data-interface-type*="sonet"]>*,
    .interface-cell[data-interface-type*="sdh"]>* {
        transform: rotate(-45deg);
    }

    /* FibreChannel - rounded square */
    .interface-cell[data-interface-type*="fibrechannel"],
    .interface-cell[data-interface-type*="fc"] {
        border-radius: 6px !important;
        border-width: 4px !important;
    }

    /* Serial - sharp with double border effect */
    .interface-cell[data-interface-type*="t1"],
    .interface-cell[data-interface-type*="e1"],
    .interface-cell[data-interface-type*="t3"],
    .interface-cell[data-interface-type*="e3"],
    .interface-cell[data-interface-type*="serial"] {
        border-radius: 0px !important;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
    }

    /* Stacking - medium rounded with thicker border */
    .interface-cell[data-interface-type*="stackwise"],
    .interface-cell[data-interface-type*="stack"] {
        border-radius: 4px !important;
        border-width: 5px !important;
    }

    /* InfiniBand - hexagon-like */
    .interface-cell[data-interface-type*="infiniband"] {
        border-radius: 3px !important;
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    }

    /* Coaxial - circular */
    .interface-cell[data-interface-type*="coaxial"] {
        border-radius: 50% !important;
    }

    /* PON - rounded rectangle */
    .interface-cell[data-interface-type*="pon"],
    .interface-cell[data-interface-type*="epon"],
    .interface-cell[data-interface-type*="gpon"] {
        border-radius: 10px !important;
    }
</style>

<script>
    // Initialize Bootstrap tooltips
    document.addEventListener('DOMContentLoaded', function () {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });

        // Drag and drop functionality
        const grid = document.getElementById('interface-grid');
        const cells = document.querySelectorAll('.interface-cell');
        let draggedElement = null;

        cells.forEach(cell => {
            cell.addEventListener('dragstart', handleDragStart);
            cell.addEventListener('dragover', handleDragOver);
            cell.addEventListener('drop', handleDrop);
            cell.addEventListener('dragenter', handleDragEnter);
            cell.addEventListener('dragleave', handleDragLeave);
            cell.addEventListener('dragend', handleDragEnd);
        });

        function handleDragStart(e) {
            // The `this` keyword refers to the .interface-cell that is being dragged
            draggedElement = this;
            this.classList.add('dragging');

            // Also add 'dragging' to the parent wrapper to disable pointer events on the link
            this.closest('.grid-item-wrapper').classList.add('dragging');

            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/html', this.innerHTML);
        }

        function handleDragOver(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            e.dataTransfer.dropEffect = 'move';
            return false;
        }

        function handleDragEnter(e) {
            if (this !== draggedElement) {
                this.classList.add('drag-over');
            }
        }

        function handleDragLeave(e) {
            this.classList.remove('drag-over');
        }

        function handleDrop(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }

            if (draggedElement !== this) {
                // Swap the elements
                const draggedHTML = draggedElement.innerHTML;
                const draggedDataId = draggedElement.getAttribute('data-interface-id');
                const draggedDataName = draggedElement.getAttribute('data-interface-name');
                const draggedTitle = draggedElement.getAttribute('title');
                const draggedStyle = draggedElement.getAttribute('style');

                const targetHTML = this.innerHTML;
                const targetDataId = this.getAttribute('data-interface-id');
                const targetDataName = this.getAttribute('data-interface-name');
                const targetTitle = this.getAttribute('title');
                const targetStyle = this.getAttribute('style');

                // Swap content
                draggedElement.innerHTML = targetHTML;
                draggedElement.setAttribute('data-interface-id', targetDataId);
                draggedElement.setAttribute('data-interface-name', targetDataName);
                draggedElement.setAttribute('title', targetTitle);
                draggedElement.setAttribute('style', targetStyle);

                this.innerHTML = draggedHTML;
                this.setAttribute('data-interface-id', draggedDataId);
                this.setAttribute('data-interface-name', draggedDataName);
                this.setAttribute('title', draggedTitle);
                this.setAttribute('style', draggedStyle);

                // Reinitialize tooltips for swapped elements
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                tooltipTriggerList.forEach(function (tooltipTriggerEl) {
                    new bootstrap.Tooltip(tooltipTriggerEl);
                });
            }

            this.classList.remove('drag-over');
            return false;
        }

        function handleDragEnd(e) {
            this.classList.remove('dragging');

            // Remove 'dragging' from the parent wrapper as well
            const wrapper = this.closest('.grid-item-wrapper');
            if (wrapper) {
                wrapper.classList.remove('dragging');
            }

            cells.forEach(cell => {
                cell.classList.remove('drag-over');
            });
        }

        // Prevent navigation on drag, allow on click
        const wrappers = document.querySelectorAll('.grid-item-wrapper');
        wrappers.forEach(wrapper => {
            let isDragging = false;
            let startX, startY;

            wrapper.addEventListener('mousedown', (e) => {
                isDragging = false;
                startX = e.clientX;
                startY = e.clientY;
            });

            wrapper.addEventListener('mousemove', (e) => {
                // If the mouse moves more than a few pixels, assume it's a drag
                if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
                    isDragging = true;
                }
            });

            wrapper.addEventListener('click', (e) => {
                if (isDragging) {
                    e.preventDefault();
                }
            });

            wrapper.addEventListener('dblclick', (e) => {
                e.preventDefault(); // Prevent double-click zoom
                window.open(wrapper.href, '_blank');
            });
        });
    });
</script>
{% endblock %}