{% extends 'generic/_base.html' %}
{% load static %}
{% load form_helpers %}
{% load helpers %}
{% load django_htmx %}

{% block head %}
{{ block.super }}
<script src="{% static 'netbox_dwg/js/vendor/fabric.min.js' %}"></script>
<script src="{% static 'netbox_dwg/js/vendor/jquery.min.js' %}"></script>
{% endblock head %}

{% block title %}Edit: {{ obj }}{% endblock title %}

{% block tabs %}
<ul class="nav nav-tabs px-3">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="edit-tab" data-bs-toggle="tab" data-bs-target="#edit-pane" type="button"
            role="tab" aria-controls="edit-pane" aria-selected="true">
            Editor
        </button>
    </li>
</ul>
{% endblock tabs %}

{% block content %}
<!-- JS Variables -->
<input type="hidden" id="obj_pk" value="{{ obj.pk }}">
<input type="hidden" id="obj_name" value="{{ obj.name }}">
<input type="hidden" id="csrf" value="{{ csrf_token }}">
<input type="hidden" id="site_id" value="{{ site.id }}">
<!-- Server-computed placed IDs across ALL floors of this site -->
<input type="hidden" id="placed_rack_ids"   value="{{ all_placed_rack_ids|join:',' }}">
<input type="hidden" id="placed_device_ids" value="{{ all_placed_device_ids|join:',' }}">
<!-- Server-rendered sidebar data (avoids client-side REST API calls) -->
{{ racks_data|json_script:"racks-data" }}
{{ devices_data|json_script:"devices-data" }}

<div class="tab-content">
    <div class="tab-pane show active" id="edit-pane" role="tabpanel">
        <div class="row">
            <!-- Sidebar Controls -->
            <div class="col-md-3">
                <div class="card mb-3">
                    <h5 class="card-header">Controls</h5>
                    <div class="card-body">
                        {% include 'netbox_dwg/inc/pro_tips.html' %}

                        <!-- Dimensions -->
                        <div class="mb-3">
                            <label class="form-label fw-bold">Canvas Dimensions</label>
                            <button type="button" class="btn btn-sm btn-outline-info w-100" data-bs-toggle="modal"
                                data-bs-target="#dimensions_modal">
                                Set Dimensions
                            </button>
                        </div>

                        <!-- Background -->
                        <div class="mb-3">
                            <label class="form-label fw-bold">Background Image</label>
                            <button type="button" class="btn btn-sm btn-outline-info w-100" data-bs-toggle="modal"
                                data-bs-target="#background_modal">
                                Set Background
                            </button>
                        </div>

                        <hr>

                        <!-- Drawing Tools -->
                        <div class="mb-3">
                            <label class="form-label fw-bold">Drawing Tools</label>
                            <div class="d-grid gap-1">
                                <button class="btn btn-sm btn-outline-success" onclick="add_location_zone()">
                                    <i class="mdi mdi-vector-rectangle"></i> Add Location Zone
                                </button>

                                <!-- Zone draw: start button -->
                                <button class="btn btn-sm btn-outline-primary" id="zone_draw_start_btn" onclick="start_zone_draw()">
                                    <i class="mdi mdi-vector-polygon"></i> Draw Zone
                                </button>
                                <!-- Zone draw: in-progress controls (hidden by default) -->
                                <div id="zone_draw_panel" style="display:none;" class="border rounded p-2 bg-light">
                                    <small class="text-muted d-block mb-1">Click on canvas to place points. Double-click or press Finish to complete.</small>
                                    <div class="row g-1 mb-2">
                                        <div class="col-6">
                                            <label class="form-label small mb-0">Fill</label>
                                            <input type="color" id="zone_draw_color" value="#ffc107"
                                                class="form-control form-control-sm form-control-color w-100">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small mb-0">Stroke</label>
                                            <input type="color" id="zone_draw_stroke" value="#ff9800"
                                                class="form-control form-control-sm form-control-color w-100">
                                        </div>
                                    </div>
                                    <div class="d-grid gap-1">
                                        <button class="btn btn-sm btn-primary" onclick="finish_zone_draw()">
                                            <i class="mdi mdi-check"></i> Finish Zone
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary" onclick="undo_zone_point()">
                                            <i class="mdi mdi-undo"></i> Undo Last Point
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" onclick="cancel_zone_draw()">
                                            <i class="mdi mdi-close"></i> Cancel
                                        </button>
                                    </div>
                                </div>

                                <button class="btn btn-sm btn-outline-secondary" onclick="add_label()">
                                    <i class="mdi mdi-format-text"></i> Add Label
                                </button>
                                <button class="btn btn-sm btn-outline-warning" onclick="add_line()">
                                    <i class="mdi mdi-vector-line"></i> Add Line / Pointer
                                </button>
                                <button class="btn btn-sm btn-outline-info" onclick="add_circle()">
                                    <i class="mdi mdi-circle-outline"></i> Add Circle
                                </button>

                                <!-- Cable draw: start button -->
                                <button class="btn btn-sm btn-outline-danger" id="cable_draw_start_btn" onclick="start_cable_draw()">
                                    <i class="mdi mdi-cable-data"></i> Draw Cable
                                </button>
                                <!-- Cable draw: in-progress controls (hidden by default) -->
                                <div id="cable_draw_panel" style="display:none;" class="border rounded p-2 bg-light">
                                    <small class="text-muted d-block mb-1">Click on canvas to place cable points. Double-click or press Finish to complete.</small>
                                    <div class="row g-1 mb-2">
                                        <div class="col-6">
                                            <label class="form-label small mb-0">Color</label>
                                            <input type="color" id="cable_draw_stroke" value="#e91e63"
                                                class="form-control form-control-sm form-control-color w-100">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small mb-0">Width</label>
                                            <input type="number" id="cable_draw_width" value="3" min="1" max="20"
                                                class="form-control form-control-sm">
                                        </div>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="cable_draw_dotted">
                                        <label class="form-check-label small" for="cable_draw_dotted">Dotted / Dashed</label>
                                    </div>
                                    <div class="d-grid gap-1">
                                        <button class="btn btn-sm btn-primary" onclick="finish_cable_draw()">
                                            <i class="mdi mdi-check"></i> Finish Cable
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary" onclick="undo_cable_point()">
                                            <i class="mdi mdi-undo"></i> Undo Last Point
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" onclick="cancel_cable_draw()">
                                            <i class="mdi mdi-close"></i> Cancel
                                        </button>
                                    </div>
                                </div>

                                <!-- Cable edit: controls shown when editing an existing cable's points -->
                                <div id="cable_edit_panel" style="display:none;" class="border rounded p-2 bg-light">
                                    <small class="text-muted d-block mb-1">Drag blue points to move vertices. Click green midpoints to add new vertices.</small>
                                    <div class="d-grid gap-1">
                                        <button class="btn btn-sm btn-primary" onclick="finish_cable_edit()">
                                            <i class="mdi mdi-check"></i> Apply Changes
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary" onclick="undo_cable_edit_point()">
                                            <i class="mdi mdi-undo"></i> Remove Last Point
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" onclick="cancel_cable_edit()">
                                            <i class="mdi mdi-close"></i> Cancel Edit
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <!-- Object Actions -->
                        <div class="mb-3">
                            <label class="form-label fw-bold">Selected Object</label>
                            <div class="d-grid gap-1">
                                <div class="row g-1">
                                    <div class="col-6">
                                        <button class="btn btn-sm btn-outline-secondary w-100" onclick="copy_selected()" title="Copy (Ctrl+C)">
                                            <i class="mdi mdi-content-copy"></i> Copy
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button class="btn btn-sm btn-outline-secondary w-100" onclick="paste_clipboard()" title="Paste (Ctrl+V)">
                                            <i class="mdi mdi-content-paste"></i> Paste
                                        </button>
                                    </div>
                                </div>
                                <button class="btn btn-sm btn-outline-danger" onclick="delete_selected()">
                                    <i class="mdi mdi-trash-can-outline"></i> Delete Selected
                                </button>
                                <button class="btn btn-sm btn-outline-info" onclick="move_to_layer()">
                                    <i class="mdi mdi-layers-outline"></i> Move to Layer
                                </button>
                                <button class="btn btn-sm btn-outline-warning w-100" id="lock_btn" onclick="toggle_lock()">
                                    <i class="mdi mdi-lock-open-outline"></i> Lock Position
                                </button>
                                <div class="row g-1">
                                    <div class="col-6">
                                        <label class="form-label small">Fill Color</label>
                                        <input type="color" id="fill_color" value="#6ea8fe"
                                            class="form-control form-control-sm form-control-color w-100"
                                            onchange="update_fill_color(this.value)">
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label small">Stroke Color</label>
                                        <input type="color" id="stroke_color" value="#000000"
                                            class="form-control form-control-sm form-control-color w-100"
                                            onchange="update_stroke_color(this.value)">
                                    </div>
                                </div>
                                <div>
                                    <label class="form-label small">Opacity</label>
                                    <input type="range" id="opacity_slider" min="0" max="100" value="100"
                                        class="form-range" oninput="update_opacity(this.value)">
                                </div>
                            </div>
                        </div>

                        <hr>

                        <!-- Layer Order -->
                        <div class="mb-3">
                            <label class="form-label fw-bold">Layer Order</label>
                            <div class="row g-1">
                                <div class="col-6">
                                    <button class="btn btn-sm btn-outline-secondary w-100" onclick="bring_to_front()" title="Bring to Front">
                                        <i class="mdi mdi-arrange-bring-to-front"></i> To Front
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button class="btn btn-sm btn-outline-secondary w-100" onclick="send_to_back()" title="Send to Back">
                                        <i class="mdi mdi-arrange-send-to-back"></i> To Back
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button class="btn btn-sm btn-outline-secondary w-100" onclick="bring_forward()" title="Bring Forward">
                                        <i class="mdi mdi-arrange-bring-forward"></i> Forward
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button class="btn btn-sm btn-outline-secondary w-100" onclick="send_backward()" title="Send Backward">
                                        <i class="mdi mdi-arrange-send-backward"></i> Backward
                                    </button>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <!-- Layers -->
                        <div class="mb-3">
                            <label class="form-label fw-bold">Layers</label>
                            <div class="d-grid gap-1 mb-2">
                                <button class="btn btn-sm btn-outline-primary" onclick="add_layer()">
                                    <i class="mdi mdi-layers-plus"></i> Add Layer
                                </button>
                            </div>
                            <div id="layers-panel">
                                <!-- Populated by JS -->
                            </div>
                            <div class="mt-2">
                                <small class="text-muted">Drag layers to reorder. Click eye to toggle visibility.</small>
                            </div>
                        </div>

                        <hr>

                        <!-- Zoom / Save -->
                        <div class="mb-3">
                            <div class="d-grid gap-1">
                                <button class="btn btn-sm btn-outline-secondary" onclick="resetZoom()">
                                    <i class="mdi mdi-magnify-close"></i> Reset Zoom
                                </button>
                                <button class="btn btn-sm btn-primary" onclick="save_floor()">
                                    <i class="mdi mdi-content-save"></i> Save
                                </button>
                                <button class="btn btn-sm btn-success" onclick="save_and_redirect()">
                                    <i class="mdi mdi-content-save-check"></i> Save &amp; Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Rack sidebar (HTMX) -->
                <div class="card mb-3" id="rack-card">
                    <h5 class="card-header">Available Racks</h5>
                    <div class="card-body">
                        <p class="text-muted small">Loading racks…</p>
                    </div>
                </div>

                <!-- Device sidebar (HTMX) -->
                <div class="card" id="device-card">
                    <h5 class="card-header">Available Devices</h5>
                    <div class="card-body">
                        <p class="text-muted small">Loading devices…</p>
                    </div>
                </div>
            </div>

            <!-- Canvas -->
            <div class="col-md-9">
                <div class="card">
                    <div class="card-body p-0">
                        <div id="canvas-wrapper" style="overflow: hidden; position: relative;">
                            <canvas id="canvas" style="border:1px solid #dee2e6;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Dimensions Modal -->
<div class="modal fade" id="dimensions_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Set Canvas Dimensions</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">Width</label>
                    <input type="number" class="form-control" id="width_value"
                        value="{{ obj.width|default_if_none:'30' }}" step="0.1">
                </div>
                <div class="mb-3">
                    <label class="form-label">Height</label>
                    <input type="number" class="form-control" id="height_value"
                        value="{{ obj.height|default_if_none:'20' }}" step="0.1">
                </div>
                <div class="mb-3">
                    <label class="form-label">Unit</label>
                    <select class="form-select" id="measurement_unit">
                        <option value="m" {% if obj.measurement_unit == 'm' %}selected{% endif %}>Meters</option>
                        <option value="ft" {% if obj.measurement_unit == 'ft' %}selected{% endif %}>Feet</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="update_dimensions()">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Background Image Modal -->
<div class="modal fade" id="background_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Set Background Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {% render_field form2.assigned_image %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="update_background()">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Zone Text Edit Modal (double-click a location zone) -->
<div class="modal fade" id="zone_text_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Zone Label</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">Label Text</label>
                    <input type="text" class="form-control" id="zone_text_input" value="">
                </div>
                <div class="mb-3">
                    <label class="form-label">Font Size</label>
                    <input type="number" class="form-control" id="zone_font_size" value="16" min="8" max="72">
                </div>
                <div class="mb-3">
                    <label class="form-label">Text Rotation (degrees)</label>
                    <input type="number" class="form-control" id="zone_text_rotation" value="0" min="-360" max="360" step="15">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="apply_zone_text()">Apply</button>
            </div>
        </div>
    </div>
</div>

<!-- Rack / Device Properties Modal (double-click a rack or device) -->
<div class="modal fade" id="rack_props_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Rack / Device Properties</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">Label</label>
                    <input type="text" class="form-control" id="rack_label_input" value="">
                </div>
                <div class="mb-3">
                    <label class="form-label">Color</label>
                    <input type="color" class="form-control form-control-color w-100" id="rack_color_input" value="#333333">
                </div>
                <div class="mb-3">
                    <label class="form-label">Opacity: <span id="rack_opacity_display">70</span>%</label>
                    <input type="range" class="form-range" id="rack_opacity_input" min="5" max="100" value="70"
                        oninput="document.getElementById('rack_opacity_display').textContent = this.value">
                </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" onclick="apply_rack_props()">Apply</button>
            </div>
        </div>
    </div>
</div>

<!-- Cable Properties Modal (double-click a cable) -->
<div class="modal fade" id="cable_props_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Cable Properties</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">Color</label>
                    <input type="color" class="form-control form-control-color w-100" id="cable_color_input" value="#e91e63">
                </div>
                <div class="mb-3">
                    <label class="form-label">Width</label>
                    <input type="number" class="form-control" id="cable_width_input" value="3" min="1" max="20">
                </div>
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" id="cable_dotted_input">
                    <label class="form-check-label" for="cable_dotted_input">Dotted / Dashed</label>
                </div>
                <div class="mb-3">
                    <label class="form-label">Opacity: <span id="cable_opacity_display">100</span>%</label>
                    <input type="range" class="form-range" id="cable_opacity_input" min="5" max="100" value="100"
                        oninput="document.getElementById('cable_opacity_display').textContent = this.value">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-info" onclick="edit_cable_points()">
                    <i class="mdi mdi-vector-polyline-edit"></i> Edit Points
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="apply_cable_props()">Apply</button>
            </div>
        </div>
    </div>
</div>

<!-- Rename Layer Modal -->
<div class="modal fade" id="rename_layer_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Rename Layer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="rename_layer_id">
                <div class="mb-3">
                    <label class="form-label">Layer Name</label>
                    <input type="text" class="form-control" id="rename_layer_input" maxlength="64">
                </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" onclick="apply_rename_layer()">Rename</button>
            </div>
        </div>
    </div>
</div>

<!-- Move to Layer Modal -->
<div class="modal fade" id="move_layer_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Move to Layer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <select class="form-select" id="move_layer_select"></select>
            </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" onclick="apply_move_to_layer()">Move</button>
            </div>
        </div>
    </div>
</div>

<style>
/* --- Layer panel (Photoshop-style) --- */
#layers-panel .layer-group {
    margin-bottom: 3px;
}
#layers-panel .layer-item {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
    user-select: none;
    font-size: 0.85rem;
}
#layers-panel .layer-item .layer-grip {
    cursor: grab;
    margin-right: 2px;
}
#layers-panel .layer-item .layer-grip:active {
    cursor: grabbing;
}
#layers-panel .layer-item.drag-over {
    border-color: #0d6efd;
    background: #e7f1ff;
}
#layers-panel .layer-item.drag-over-obj {
    border-color: #198754;
    background: #d1e7dd;
}
#layers-panel .layer-item .layer-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 4px;
}
#layers-panel .layer-item .layer-btn {
    border: none;
    background: none;
    padding: 0 3px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.6;
}
#layers-panel .layer-item .layer-btn:hover {
    opacity: 1;
}
#layers-panel .layer-item .layer-chevron {
    font-size: 0.9rem;
    padding: 0 1px;
}
#layers-panel .layer-item.layer-hidden {
    opacity: 0.5;
}
#layers-panel .layer-item.layer-active {
    border-color: #0d6efd;
    background: #f0f7ff;
}

/* --- Object list inside expanded layer --- */
#layers-panel .layer-objects {
    border-left: 2px solid #dee2e6;
    margin-left: 12px;
    padding-left: 0;
}
#layers-panel .layer-obj-row {
    display: flex;
    align-items: center;
    padding: 2px 6px 2px 4px;
    font-size: 0.78rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    user-select: none;
}
#layers-panel .layer-obj-row:last-child {
    border-bottom: none;
}
#layers-panel .layer-obj-row:hover {
    background: #f8f9fa;
}
#layers-panel .layer-obj-row.layer-obj-selected {
    background: #cfe2ff;
    font-weight: 600;
}
#layers-panel .layer-obj-grip {
    cursor: grab;
    opacity: 0.4;
    margin-right: 3px;
    font-size: 0.85rem;
}
#layers-panel .layer-obj-grip:active {
    cursor: grabbing;
}
#layers-panel .layer-obj-icon {
    margin-right: 4px;
    opacity: 0.7;
    font-size: 0.9rem;
}
#layers-panel .layer-obj-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

<script src="{% static 'netbox_dwg/js/utils.js' %}" defer></script>
<script src="{% static 'netbox_dwg/js/edit.js' %}" defer></script>
{% endblock content %}