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

{% block title %}Rack Interface Grid - {{ rack.name }}{% endblock %}

{% block content %}
<div class="container-fluid" style="position: relative;">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>Rack Interface Grid: {{ rack.name }}</h1>
                <div>
                    <div class="form-check form-switch d-inline-block me-3">
                        <input class="form-check-input" type="checkbox" id="showCablesToggle">
                        <label class="form-check-label" for="showCablesToggle">Show Cables</label>
                    </div>
                    <a href="{% url 'dcim:rack' pk=rack.pk %}" class="btn btn-secondary">
                        <i class="mdi mdi-arrow-left"></i> Back to Rack
                    </a>
                </div>
            </div>
        </div>
    </div>

    <svg id="cable-overlay"
        style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10; display: none;"></svg>

    {% for device_data in devices_with_interfaces %}
    <div class="card mb-4">
        <div class="card-header">
            <a href="{{ device_data.device_url }}"><strong>{{ device_data.device_name }}</strong></a>
        </div>
        <div class="card-body">
            <!-- Grid Info -->
            <div class="alert alert-info">
                <strong>Grid Configuration:</strong> {{ device_data.grid_rows }} rows × {{ device_data.grid_columns }}
                columns ({{ device_data.total_cells }} cells)
                <br>
                <strong>Interfaces Shown:</strong> {{ device_data.interfaces|length }}
            </div>

            <!-- Interface Grid -->
            <div class="interface-grid" style="
                display: grid; 
                grid-template-columns: repeat({{ device_data.grid_columns }}, minmax(40px, 80px));
                gap: 2px;
                margin-bottom: 20px;
                width: fit-content;
            ">
                {% for interface in device_data.interfaces %}
                <a href="{{ interface.url }}" 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 }}"
                        id="{{ interface.model_type }}-{{ interface.id }}"
                        data-connected-endpoints='{% if interface.connected_endpoints %}[{% for ep in interface.connected_endpoints %}"{{ ep.id }}"{% if not forloop.last %},{% endif %}{% endfor %}]{% else %}[]{% endif %}'
                        data-cable-color="{{ interface.cable_color|default:'' }}" data-cable-id="{{ interface.cable_id|default:'' }}" 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"
                        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 %}
                                {% if interface.connected_endpoints %}Connected to: {% for ep in interface.connected_endpoints %}{{ ep.name }}{% if ep.device_name %} ({{ ep.device_name }}){% endif %}{% if not forloop.last %}, {% endif %}{% endfor %}<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;
                            {% if interface.is_compact %}
                            height: 77px;
                            width: 73px;
                            {% else %}
                            min-height: 85px;
                            max-height: 85px;
                            width: 100%;
                            {% endif %}
                            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>
                        
                        <!-- Multi-termination indicator (top-left corner) -->
                        {% if interface.connected_endpoints|length > 1 %}
                        <div style="position: absolute; top: 2px; left: 2px;">
                            <span style="color: #007bff; font-size: 10px; font-weight: bold;" title="Multi-termination: {{ interface.connected_endpoints|length }} endpoints">{{ interface.connected_endpoints|length }}×</span>
                        </div>
                        {% endif %}

                        <!-- 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 device_data.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;">
                        {{ device_data.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>
    {% if not forloop.last %}
    <hr>{% endif %}
    {% endfor %}
</div>

<style>
    .interface-cell {
        transition: transform 0.1s, box-shadow 0.1s;
        background-color: var(--tblr-bg-surface-tertiary);
    }

    .interface-cell-empty {
        background-color: var(--tblr-bg-surface-tertiary);
    }

    html[data-theme="dark"] .interface-cell-empty {
        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 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)
        });
    });

    // Cable visualization
    document.addEventListener('DOMContentLoaded', function () {
        const toggle = document.getElementById('showCablesToggle');
        const svg = document.getElementById('cable-overlay');
        const container = document.querySelector('.container-fluid');

        function highlightPath(path, startElem, endElem) {
            if (!path) return;
            path.setAttribute('stroke-width', '5');
            path.style.opacity = '1';
            const color = path.getAttribute('stroke');
            startElem.style.boxShadow = '0 0 10px #' + color;
            endElem.style.boxShadow = '0 0 10px #' + color;
        }

        function unhighlightPath(path, startElem, endElem) {
            if (!path) return;
            path.setAttribute('stroke-width', '2');
            path.style.opacity = '0.6';
            startElem.style.boxShadow = '';
            endElem.style.boxShadow = '';
        }
        
        function highlightMultiPath(paths, startElem, endElems) {
            if (!paths || paths.length === 0) return;
            const color = paths[0].getAttribute('stroke');
            startElem.style.boxShadow = '0 0 10px #' + color;
            paths.forEach((path, i) => {
                path.setAttribute('stroke-width', '5');
                path.style.opacity = '1';
                if (endElems[i]) {
                    endElems[i].style.boxShadow = '0 0 10px #' + color;
                }
            });
        }

        function unhighlightMultiPath(paths, startElem, endElems) {
            if (!paths || paths.length === 0) return;
            startElem.style.boxShadow = '';
            paths.forEach((path, i) => {
                path.setAttribute('stroke-width', '2');
                path.style.opacity = '0.6';
                if (endElems[i]) {
                    endElems[i].style.boxShadow = '';
                }
            });
        }

        function drawCables() {
            svg.innerHTML = ''; // Clear existing
            if (!toggle.checked) {
                svg.style.display = 'none';
                return;
            }
            svg.style.display = 'block';

            svg.setAttribute('width', window.innerWidth);
            svg.setAttribute('height', window.innerHeight);

            const interfaces = document.querySelectorAll('.interface-cell[data-connected-endpoints]');
            const drawnConnections = new Set();

            interfaces.forEach(iface => {
                const startId = iface.id;
                let endpointsData = iface.dataset.connectedEndpoints;
                
                // Parse the endpoints array
                let endpoints = [];
                try {
                    endpoints = JSON.parse(endpointsData || '[]');
                } catch (e) {
                    // Fallback: if parsing fails, treat as empty
                    endpoints = [];
                }

                if (endpoints.length === 0) return;

                // For multi-termination cables, we draw lines to each endpoint
                const paths = [];
                const targetElements = [];
                
                endpoints.forEach(endId => {
                    const connectionKey = [startId, endId].sort().join('-');
                    if (drawnConnections.has(connectionKey)) return;

                    const target = document.getElementById(endId);
                    if (target) {
                        drawnConnections.add(connectionKey);
                        const path = drawLine(iface, target, iface.dataset.cableColor, iface.dataset.cableId);
                        paths.push(path);
                        targetElements.push(target);
                    }
                });
                
                // Set up hover handlers for multi-termination highlighting
                if (paths.length > 0) {
                    iface.onmouseenter = () => highlightMultiPath(paths, iface, targetElements);
                    iface.onmouseleave = () => unhighlightMultiPath(paths, iface, targetElements);
                    
                    // Also set up hover on each target
                    targetElements.forEach((target, i) => {
                        const originalEnter = target.onmouseenter;
                        const originalLeave = target.onmouseleave;
                        target.onmouseenter = () => {
                            highlightMultiPath(paths, iface, targetElements);
                            if (originalEnter) originalEnter();
                        };
                        target.onmouseleave = () => {
                            unhighlightMultiPath(paths, iface, targetElements);
                            if (originalLeave) originalLeave();
                        };
                    });
                }
            });
        }

        function drawLine(startElem, endElem, color, cableId) {
            const startRect = startElem.getBoundingClientRect();
            const endRect = endElem.getBoundingClientRect();

            // Use viewport-relative coordinates since SVG is fixed
            const x1 = startRect.left + startRect.width / 2;
            const y1 = startRect.top + startRect.height / 2;
            const x2 = endRect.left + endRect.width / 2;
            const y2 = endRect.top + endRect.height / 2;

            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

            const dy = Math.abs(y2 - y1);
            const controlPointOffset = Math.max(dy / 2, 50);
            const d = `M ${x1} ${y1} C ${x1} ${y1 + controlPointOffset}, ${x2} ${y2 - controlPointOffset}, ${x2} ${y2}`;

            path.setAttribute('d', d);
            path.setAttribute('stroke', color || '000000');
            path.setAttribute('stroke-width', '2');
            path.setAttribute('fill', 'none');
            path.setAttribute('style', 'pointer-events: stroke; cursor: pointer; opacity: 0.6; transition: opacity 0.2s, stroke-width 0.2s;');
            if (cableId) {
                path.setAttribute('data-cable-id', cableId);
            }

            path.addEventListener('mouseenter', () => highlightPath(path, startElem, endElem));
            path.addEventListener('mouseleave', () => unhighlightPath(path, startElem, endElem));
            
            // Double-click to navigate to cable view
            path.addEventListener('dblclick', (e) => {
                e.preventDefault();
                if (cableId) {
                    window.open('/dcim/cables/' + cableId + '/', '_blank');
                }
            });

            svg.appendChild(path);
            return path;
        }

        if (toggle) {
            toggle.addEventListener('change', drawCables);
        }
        window.addEventListener('resize', drawCables);
        window.addEventListener('scroll', drawCables);
    });
</script>
{% endblock %}