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

{% block title %}Cable Patcher{% endblock %}

{% block head %}
<link rel="stylesheet" href="{% static 'netbox_cable_patcher/css/patcher.css' %}">
{% endblock %}

{% block tabs %}
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Patch Bay View</a>
    </li>
</ul>
{% endblock %}

{% block content %}
{% csrf_token %}
<div class="container-fluid">
    <!-- Header Controls -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <!-- Row 1: Location Filters + Mode -->
                    <div class="row g-3 align-items-end mb-3">
                        <div class="col-md-2">
                            <label for="site-select" class="form-label">Site</label>
                            <select id="site-select" class="form-control">
                                <option value="">Select Site...</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="location-select" class="form-label">Location <small class="text-muted">(multi)</small></label>
                            <select id="location-select" class="form-control" multiple disabled>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="rack-select" class="form-label">Rack <small class="text-muted">(multi)</small></label>
                            <select id="rack-select" class="form-control" multiple disabled>
                            </select>
                        </div>

                        <!-- Mode Tabs -->
                        <div class="col-md-4">
                            <label class="form-label">Mode</label>
                            <div class="btn-group w-100" role="group">
                                <input type="radio" class="btn-check" name="mode" id="mode-network" value="network" checked>
                                <label class="btn btn-outline-primary" for="mode-network">
                                    <i class="mdi mdi-ethernet"></i> Network
                                </label>

                                <input type="radio" class="btn-check" name="mode" id="mode-power" value="power">
                                <label class="btn btn-outline-primary" for="mode-power">
                                    <i class="mdi mdi-power-plug"></i> Power
                                </label>

                                <input type="radio" class="btn-check" name="mode" id="mode-console" value="console">
                                <label class="btn btn-outline-primary" for="mode-console">
                                    <i class="mdi mdi-console"></i> Console
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Row 2: Left / Right Device Selectors -->
                    <div class="row g-3 mb-3">
                        <!-- Left Side Device Selector -->
                        <div class="col-md-6">
                            <div class="device-panel-selector device-panel-selector--left">
                                <div class="device-panel-selector__header">
                                    <span class="device-panel-selector__label">
                                        <i class="mdi mdi-arrow-right-bold-circle text-primary"></i>
                                        Left Devices
                                        <small class="text-muted">(ports face right)</small>
                                    </span>
                                    <button type="button" class="btn btn-sm btn-outline-primary ms-auto" id="add-all-left-btn" disabled title="Add all remaining devices to Left">
                                        All <i class="mdi mdi-arrow-right"></i>
                                    </button>
                                </div>
                                <div class="device-panel-selector__body mt-2">
                                    <select id="left-device-select" class="form-control device-listbox" disabled>
                                    </select>
                                    <div id="left-device-chips" class="device-chips"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Right Side Device Selector -->
                        <div class="col-md-6">
                            <div class="device-panel-selector device-panel-selector--right">
                                <div class="device-panel-selector__header">
                                    <span class="device-panel-selector__label">
                                        <i class="mdi mdi-arrow-left-bold-circle text-success"></i>
                                        Right Devices
                                        <small class="text-muted">(ports face left)</small>
                                    </span>
                                    <button type="button" class="btn btn-sm btn-outline-success ms-auto" id="add-all-right-btn" disabled title="Add all remaining devices to Right">
                                        <i class="mdi mdi-arrow-left"></i> All
                                    </button>
                                </div>
                                <div class="device-panel-selector__body mt-2">
                                    <select id="right-device-select" class="form-control device-listbox" disabled>
                                    </select>
                                    <div id="right-device-chips" class="device-chips"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Row 3: Cable Defaults -->
                    <div class="row g-3 align-items-end">
                        <div class="col-12">
                            <div class="cable-defaults-bar">
                                <div class="cable-defaults-bar__label">
                                    <i class="mdi mdi-cable-data"></i>
                                    Cable Defaults
                                </div>
                                <div class="cable-defaults-bar__fields">
                                    <div class="cable-defaults-field">
                                        <label class="form-label" for="default-cable-type">Type</label>
                                        <select class="form-select form-select-sm" id="default-cable-type">
                                            <option value="">-- Auto --</option>
                                            <option value="cat3">CAT3</option>
                                            <option value="cat5">CAT5</option>
                                            <option value="cat5e">CAT5e</option>
                                            <option value="cat6" selected>CAT6</option>
                                            <option value="cat6a">CAT6a</option>
                                            <option value="cat7">CAT7</option>
                                            <option value="cat7a">CAT7a</option>
                                            <option value="cat8">CAT8</option>
                                            <option value="dac-active">DAC (Active)</option>
                                            <option value="dac-passive">DAC (Passive)</option>
                                            <option value="mmf">Multimode Fiber</option>
                                            <option value="mmf-om1">MMF (OM1)</option>
                                            <option value="mmf-om2">MMF (OM2)</option>
                                            <option value="mmf-om3">MMF (OM3)</option>
                                            <option value="mmf-om4">MMF (OM4)</option>
                                            <option value="mmf-om5">MMF (OM5)</option>
                                            <option value="smf">Singlemode Fiber</option>
                                            <option value="smf-os1">SMF (OS1)</option>
                                            <option value="smf-os2">SMF (OS2)</option>
                                            <option value="coaxial">Coaxial</option>
                                            <option value="power">Power</option>
                                        </select>
                                    </div>
                                    <div class="cable-defaults-field">
                                        <label class="form-label" for="default-cable-color">Color</label>
                                        <input type="color" class="form-control form-control-sm form-control-color" id="default-cable-color" value="#3498db" title="Cable color">
                                    </div>
                                    <div class="cable-defaults-field cable-defaults-field--label">
                                        <label class="form-label" for="default-cable-label">Label</label>
                                        <input type="text" class="form-control form-control-sm" id="default-cable-label" placeholder="Optional label">
                                    </div>
                                </div>
                                <div class="cable-defaults-bar__toggle">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="quick-patch-toggle" checked>
                                        <label class="form-check-label" for="quick-patch-toggle">
                                            Quick Patch
                                        </label>
                                    </div>
                                    <small class="text-muted d-block">Skip confirmation dialog</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Patcher Canvas -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="mdi mdi-cable-data"></i> Patch Bay View
                    </h5>
                    <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn btn-sm btn-outline-danger" id="clear-all-btn" title="Clear all devices">
                            <i class="mdi mdi-close-circle"></i> Clear
                        </button>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-outline-secondary" id="zoom-out" title="Zoom Out">
                                <i class="mdi mdi-magnify-minus"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="zoom-reset" title="Reset Zoom">
                                <i class="mdi mdi-magnify"></i> 100%
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="zoom-in" title="Zoom In">
                                <i class="mdi mdi-magnify-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div id="patcher-container">
                        <div id="patcher-scroll">
                            <svg id="patcher-svg">
                                <defs>
                                    <!-- Cable glow filter -->
                                    <filter id="cable-glow" x="-50%" y="-50%" width="200%" height="200%">
                                        <feGaussianBlur stdDeviation="2" result="blur"/>
                                        <feMerge>
                                            <feMergeNode in="blur"/>
                                            <feMergeNode in="SourceGraphic"/>
                                        </feMerge>
                                    </filter>
                                    <!-- Port highlight gradient -->
                                    <radialGradient id="port-highlight">
                                        <stop offset="0%" stop-color="#fff" stop-opacity="0.3"/>
                                        <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
                                    </radialGradient>
                                </defs>
                                <g id="cables-layer"></g>
                                <g id="devices-layer"></g>
                                <g id="temp-cable-layer"></g>
                            </svg>
                        </div>

                        <!-- Empty state -->
                        <div id="empty-state" class="text-center py-5">
                            <i class="mdi mdi-cable-data mdi-48px text-muted"></i>
                            <h4 class="mt-3 text-muted">Add Devices to Get Started</h4>
                            <p class="text-muted">Filter by site, then add devices to the Left and Right panels above.</p>
                        </div>

                        <!-- Loading state -->
                        <div id="loading-state" class="text-center py-5" style="display: none;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-3 text-muted">Loading devices...</p>
                        </div>

                        <!-- Cable Info Panel (floating right sidebar) -->
                        <div id="cable-info-panel" style="display: none;">
                            <div class="cable-panel-header">
                                <h6 class="mb-0"><i class="mdi mdi-information"></i> Cable Details</h6>
                                <button type="button" class="btn-close btn-close-white" id="close-cable-panel"></button>
                            </div>
                            <div class="cable-panel-body">
                                <div class="cable-panel-field">
                                    <strong>From</strong>
                                    <p id="cable-from" class="mb-0">-</p>
                                </div>
                                <div class="cable-panel-field">
                                    <strong>To</strong>
                                    <p id="cable-to" class="mb-0">-</p>
                                </div>
                                <div class="cable-panel-field">
                                    <strong>Type</strong>
                                    <p id="cable-type" class="mb-0">-</p>
                                </div>
                                <div class="cable-panel-field">
                                    <strong>Status</strong>
                                    <p id="cable-status" class="mb-0">-</p>
                                </div>
                                <div id="cable-multi-info" class="cable-panel-field" style="display: none;">
                                    <strong>Selected</strong>
                                    <p id="cable-multi-count" class="mb-0">-</p>
                                </div>
                                <div class="cable-panel-actions">
                                    <a id="cable-netbox-link" href="#" class="btn btn-sm btn-outline-light w-100 mb-2" target="_blank">
                                        <i class="mdi mdi-open-in-new"></i> View in NetBox
                                    </a>
                                    <button type="button" class="btn btn-sm btn-outline-danger w-100" id="delete-cable-btn">
                                        <i class="mdi mdi-delete"></i> Delete Cable
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Cable Modal -->
<div class="modal fade" id="create-cable-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="mdi mdi-cable-data"></i> Create Cable</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">From</label>
                    <input type="text" class="form-control" id="cable-from-input" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label">To</label>
                    <input type="text" class="form-control" id="cable-to-input" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label">Cable Type</label>
                    <select class="form-select" id="cable-type-select">
                        <option value="">-- Select Type --</option>
                        <option value="cat3">CAT3</option>
                        <option value="cat5">CAT5</option>
                        <option value="cat5e">CAT5e</option>
                        <option value="cat6">CAT6</option>
                        <option value="cat6a">CAT6a</option>
                        <option value="cat7">CAT7</option>
                        <option value="cat7a">CAT7a</option>
                        <option value="cat8">CAT8</option>
                        <option value="dac-active">Direct Attach Copper (Active)</option>
                        <option value="dac-passive">Direct Attach Copper (Passive)</option>
                        <option value="mmf">Multimode Fiber</option>
                        <option value="mmf-om1">Multimode Fiber (OM1)</option>
                        <option value="mmf-om2">Multimode Fiber (OM2)</option>
                        <option value="mmf-om3">Multimode Fiber (OM3)</option>
                        <option value="mmf-om4">Multimode Fiber (OM4)</option>
                        <option value="mmf-om5">Multimode Fiber (OM5)</option>
                        <option value="smf">Singlemode Fiber</option>
                        <option value="smf-os1">Singlemode Fiber (OS1)</option>
                        <option value="smf-os2">Singlemode Fiber (OS2)</option>
                        <option value="coaxial">Coaxial</option>
                        <option value="power">Power</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Color</label>
                    <input type="color" class="form-control form-control-color" id="cable-color-input" value="#000000">
                </div>
                <div class="mb-3">
                    <label class="form-label">Label</label>
                    <input type="text" class="form-control" id="cable-label-input" placeholder="Optional label">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="create-cable-btn">
                    <i class="mdi mdi-check"></i> Create Cable
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Install Module Modal -->
<div class="modal fade" id="install-module-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="mdi mdi-puzzle"></i> Install Module</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Module Bay</label>
                    <div id="install-module-bay-name" class="form-control-plaintext fw-bold">-</div>
                </div>
                <div class="mb-3">
                    <label for="module-type-search" class="form-label">Search Module Type</label>
                    <input type="text" class="form-control" id="module-type-search"
                           placeholder="Type to search module types..." autocomplete="off">
                </div>
                <div id="module-type-results" class="module-type-results">
                    <div class="text-muted small p-2">Type at least 2 characters to search...</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="install-module-btn" disabled>
                    <i class="mdi mdi-check"></i> Install Module
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Port Tooltip -->
<div id="port-tooltip" class="port-tooltip" style="display: none;">
    <div class="port-tooltip-content">
        <strong id="tooltip-port-name"></strong>
        <div id="tooltip-port-type" class="text-muted small"></div>
        <div id="tooltip-connection" class="mt-1"></div>
    </div>
</div>
{% endblock content %}

{% block javascript %}
<script src="{% static 'netbox_cable_patcher/js/patcher.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value ||
                         document.cookie.split('; ').find(row => row.startsWith('csrftoken='))?.split('=')[1];

        window.patcher = new CablePatcher({
            container: document.getElementById('patcher-container'),
            svg: document.getElementById('patcher-svg'),
            csrfToken: csrfToken
        });
    });
</script>
{% endblock %}