{% 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="rack-device-row" style="display: flex; align-items: stretch; margin-bottom: 4px;{% if device_data.device_role_color %} background-color: {{ device_data.device_role_color }}aa;{% endif %}">
        <!-- Device Name (on the left side) -->
        <a href="{{ device_data.device_url }}" class="rack-device-name">{{ device_data.device_name }}</a>
        
        <!-- Interface Grid -->
        <div class="interface-grid" style="
            display: grid; 
            grid-template-columns: repeat({{ device_data.grid_columns }}, minmax(40px, 80px));
            gap: 1px;
            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 %}
            </div>
    </div>
    {% endfor %}
</div>

<style>
    .rack-device-row {
        border: 1px solid var(--tblr-border-color);
        border-radius: 4px;
        padding: 3px;
        background-color: var(--tblr-bg-surface);
    }

    .rack-device-row:hover {
        background-color: var(--tblr-bg-surface-secondary);
    }

    .rack-device-name {
        display: flex;
        align-items: center;
        justify-content: center;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg);
        padding: 4px 6px;
        margin-right: 4px;
        font-size: 0.75em;
        font-weight: 600;
        color: var(--tblr-body-color);
        text-decoration: none;
        background-color: var(--tblr-bg-surface-secondary);
        border-radius: 3px;
        white-space: nowrap;
        min-width: 20px;
    }

    .rack-device-name:hover {
        background-color: var(--tblr-primary);
        color: white !important;
    }

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

    .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 %}