{% extends 'generic/object.html' %}
{% load static %}
{% load helpers %}
{% load i18n %}

{% block title %}{% trans "Floor Plan" %}: {{ object }}{% endblock %}

{% block extra_controls %}
  {% if not edit_mode %}
  <a href="{% url 'plugins:netbox_map:floorplan_visualization' pk=object.pk %}?edit=true"
     class="btn btn-sm btn-warning">
    <i class="mdi mdi-pencil"></i> {% trans "Edit Mode" %}
  </a>
  {% else %}
  <a href="{% url 'plugins:netbox_map:floorplan_visualization' pk=object.pk %}"
     class="btn btn-sm btn-secondary">
    <i class="mdi mdi-eye"></i> {% trans "View Mode" %}
  </a>
  {% endif %}
{% endblock %}

{% block content %}
  <link rel="stylesheet" href="{% static 'netbox_map/css/floorplan.css' %}">

  {# Combined header bar: floor plan selector + edit controls #}
  <div class="floorplan-header mb-3">
    <label for="floorplan-selector">{% trans "Floor map" %}</label>
    <select id="floorplan-selector" class="no-ts">
      {% for fp in site_floorplans %}
        <option value="{{ fp.id }}"
          {% if fp.id == object.pk %}selected{% endif %}>
          {{ fp.name }}{% if fp.location__name %} ({{ fp.location__name }}){% endif %}
        </option>
      {% endfor %}
    </select>

    {% if edit_mode %}
    <div class="toolbar-divider"></div>
    <div class="toolbar-group">
      <select id="tile-type-select" class="form-select form-select-sm no-ts" style="width: auto;">
        {% for tc in type_configs %}
        <option value="{{ tc.slug }}">{{ tc.name }}</option>
        {% endfor %}
      </select>
      <input type="text" id="tile-label-input" class="form-control form-control-sm toolbar-input-label"
             placeholder="{% trans 'Label' %}">
    </div>
    <div class="toolbar-divider"></div>
    <div class="toolbar-group">
      <input type="number" id="tile-width-input" class="form-control form-control-sm toolbar-input-dim"
             value="1" min="1" max="10" title="{% trans 'Width' %}">
      <span class="text-muted">&times;</span>
      <input type="number" id="tile-height-input" class="form-control form-control-sm toolbar-input-dim"
             value="1" min="1" max="10" title="{% trans 'Height' %}">
      <select id="tile-orientation-select" class="form-select form-select-sm no-ts" style="width: auto;" title="{% trans 'Text Orientation' %}">
        <option value="0">0&deg;</option>
        <option value="90">90&deg;</option>
        <option value="180">180&deg;</option>
        <option value="270">270&deg;</option>
      </select>
    </div>
    <span id="camera-fov-controls" class="d-none align-items-center gap-1">
      <div class="toolbar-divider"></div>
      <div class="toolbar-fov-group">
        <label>{% trans "Dir" %}</label>
        <input type="range" id="tile-fov-direction-slider" min="0" max="360" step="5" value="0">
        <input type="number" id="tile-fov-direction-input" class="form-control form-control-sm toolbar-input-fov"
               value="0" min="0" max="360" step="15" title="{% trans 'FOV Direction (degrees)' %}">
      </div>
      <div class="toolbar-fov-group">
        <label>{% trans "Angle" %}</label>
        <input type="range" id="tile-fov-angle-slider" min="10" max="360" step="5" value="90">
        <input type="number" id="tile-fov-angle-input" class="form-control form-control-sm toolbar-input-fov"
               value="90" min="10" max="360" step="5" title="{% trans 'FOV Angle Width' %}">
      </div>
      <div class="toolbar-fov-group">
        <label>{% trans "Range" %}</label>
        <input type="range" id="tile-fov-distance-slider" min="1" max="50" step="1" value="5">
        <input type="number" id="tile-fov-distance-input" class="form-control form-control-sm toolbar-input-fov"
               value="5" min="1" max="50" title="{% trans 'FOV Distance (cells)' %}">
      </div>
    </span>
    <div class="toolbar-divider"></div>
    <button id="delete-tile-btn" class="btn btn-sm btn-danger" disabled>
      <i class="mdi mdi-delete"></i> {% trans "Delete" %}
    </button>
    <span class="text-muted small ms-auto">{% trans "Dbl-click: place | Click: select | Drag tile: move" %}</span>
    {% endif %}
  </div>

  {# Main layout: canvas + sidebar #}
  <div class="floorplan-layout">
    {# Left: Canvas area #}
    <div class="floorplan-canvas-card floorplan-canvas-area">
      <div class="card-body p-2">
        <div id="floorplan-container"
             data-grid-width="{{ grid_width }}"
             data-grid-height="{{ grid_height }}"
             data-tile-size="{{ tile_size }}"
             data-tiles='{{ tile_data_json }}'
             data-edit-mode="{% if edit_mode %}true{% else %}false{% endif %}"
             data-api-url="{% url 'plugins-api:netbox_map-api:floorplantile-list' %}"
             data-floorplan-id="{{ object.pk }}"
             data-site-id="{{ site_id }}"
             data-popover-fields='{{ popover_fields_json }}'
             data-type-configs='{{ type_configs_json }}'
             data-detail-base-url="/plugins/map/marker-detail/"
             data-csrf-token="{{ csrf_token }}"
             {% if object.background_image %}
             data-background-image="{{ object.background_image.url }}"
             {% endif %}>
          <canvas id="floorplan-canvas"></canvas>
          <div id="tile-popover" class="tile-popover"></div>
          <div class="zoom-controls">
            <button id="zoom-in-btn" class="btn btn-sm btn-dark" title="{% trans 'Zoom In' %}">
              <i class="mdi mdi-plus"></i>
            </button>
            <button id="zoom-out-btn" class="btn btn-sm btn-dark" title="{% trans 'Zoom Out' %}">
              <i class="mdi mdi-minus"></i>
            </button>
            <button id="zoom-reset-btn" class="btn btn-sm btn-dark" title="{% trans 'Fit to View' %}">
              <i class="mdi mdi-fit-to-screen-outline"></i>
            </button>
            <button id="export-pdf-btn" class="btn btn-sm btn-dark" title="{% trans 'Export PDF' %}">
              <i class="mdi mdi-file-pdf-box"></i>
            </button>
          </div>
        </div>
      </div>
      {# Selection status bar at bottom of canvas #}
      <div class="selection-status-bar" id="selection-status">
        <span class="text-muted">{% trans "Click a tile to select" %}</span>
      </div>
    </div>

    {# Right: Sidebar with tile list + detail panels #}
    <div class="floorplan-sidebar">
      {# Top section: tile list #}
      <div class="sidebar-tiles-section">
        <div class="sidebar-header">
          <div class="sidebar-search-wrap">
            <i class="mdi mdi-magnify"></i>
            <input type="text" id="tile-search-input" class="form-control form-control-sm"
                   placeholder="{% trans 'Search tiles...' %}">
          </div>
        </div>
        <div class="sidebar-toggles" id="type-toggles">
          {% for tc in type_configs %}
          <button class="type-toggle active" data-type="{{ tc.slug }}"><span class="toggle-dot" style="background:{{ tc.color }}"></span>{{ tc.name }}</button>
          {% endfor %}
          <button class="type-toggle active" id="fov-toggle"><span class="toggle-dot" style="background:#ff4444; opacity:0.5"></span>{% trans "FOV" %}</button>
        </div>
        <div class="sidebar-filter-row">
          <span id="tile-count" class="small text-muted"></span>
        </div>
        <div id="tile-list" class="sidebar-tile-list"></div>
      </div>

      {# Draggable divider between tile list and context section #}
      <div class="sidebar-divider" id="sidebar-divider"></div>

      {# Bottom section: context panels (details, rack elevation, link) #}
      <div class="sidebar-context-section" id="sidebar-context">
        {# Placeholder shown when nothing selected #}
        <div id="sidebar-no-selection" class="sidebar-empty-state sidebar-empty-state-compact">
          <i class="mdi mdi-cursor-default-click-outline"></i>
          <span>{% trans "Select a tile to view details" %}</span>
        </div>

        {# Tile Details #}
        <div id="tile-detail-panel" class="d-none">
          <div class="sidebar-section-title">
            <i class="mdi mdi-information-outline"></i> {% trans "Tile Details" %}
          </div>
          <div class="sidebar-detail-list">
            <div class="detail-row">
              <span class="detail-label">{% trans "Label" %}</span>
              <span class="detail-value">
                <span id="tile-detail-name">-</span>
                <button id="edit-label-btn" class="btn btn-sm btn-link p-0 ms-1" title="{% trans 'Edit label' %}">
                  <i class="mdi mdi-pencil"></i>
                </button>
                <div id="edit-label-form" class="d-none mt-1">
                  <div class="d-flex gap-1 align-items-center">
                    <input type="text" id="edit-label-input" class="form-control form-control-sm sidebar-input" style="flex:1;">
                    <button id="save-label-btn" class="btn btn-sm btn-primary px-1">
                      <i class="mdi mdi-check"></i>
                    </button>
                    <button id="cancel-label-btn" class="btn btn-sm btn-outline-secondary px-1">
                      <i class="mdi mdi-close"></i>
                    </button>
                  </div>
                </div>
              </span>
            </div>
            <div class="detail-row">
              <span class="detail-label">{% trans "Position" %}</span>
              <span class="detail-value" id="tile-detail-position">-</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">{% trans "Size" %}</span>
              <span class="detail-value" id="tile-detail-size">-</span>
            </div>
            {% if edit_mode %}
            <div id="resize-tile-panel" class="d-none">
              <div class="detail-row resize-controls">
                <span class="detail-label">{% trans "Resize" %}</span>
                <span class="detail-value">
                  <div class="d-flex gap-1 align-items-center">
                    <input type="number" id="resize-width-input" class="form-control form-control-sm sidebar-input" style="width:50px;" min="1" max="10" title="{% trans 'Width' %}">
                    <span class="text-muted">&times;</span>
                    <input type="number" id="resize-height-input" class="form-control form-control-sm sidebar-input" style="width:50px;" min="1" max="10" title="{% trans 'Height' %}">
                    <button id="resize-tile-btn" class="btn btn-sm btn-primary px-2">
                      <i class="mdi mdi-resize"></i> {% trans "Resize" %}
                    </button>
                  </div>
                </span>
              </div>
            </div>
            <div id="orientation-tile-panel" class="d-none">
              <div class="detail-row">
                <span class="detail-label">{% trans "Orientation" %}</span>
                <span class="detail-value">
                  <div class="d-flex gap-1 align-items-center">
                    <select id="orientation-select" class="form-select form-select-sm sidebar-input" style="width:70px;">
                      <option value="0">0&deg;</option>
                      <option value="90">90&deg;</option>
                      <option value="180">180&deg;</option>
                      <option value="270">270&deg;</option>
                    </select>
                    <button id="orientation-tile-btn" class="btn btn-sm btn-primary px-2">
                      <i class="mdi mdi-rotate-right"></i> {% trans "Set" %}
                    </button>
                  </div>
                </span>
              </div>
            </div>
            {% endif %}
            <div class="detail-row">
              <span class="detail-label">{% trans "Type" %}</span>
              <span class="detail-value" id="tile-detail-type">-</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">{% trans "Object Type" %}</span>
              <span class="detail-value" id="tile-detail-object-type">-</span>
            </div>
            <div class="detail-row" id="tile-detail-ip-row">
              <span class="detail-label">{% trans "IP Address" %}</span>
              <span class="detail-value" id="tile-detail-ip">-</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">{% trans "Utilization" %}</span>
              <span class="detail-value" id="tile-detail-utilization">-</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">{% trans "Linked Object" %}</span>
              <span class="detail-value" id="tile-detail-object-link">-</span>
            </div>
            <div class="detail-row" id="tile-detail-fplink-row" style="display:none">
              <span class="detail-label">{% trans "Linked Floor Plan" %}</span>
              <span class="detail-value" id="tile-detail-fplink">-</span>
            </div>
          </div>

          {# Enriched detail loaded via AJAX #}
          <div id="fp-enriched-detail"></div>

          {# Camera FOV edit (inline, for camera tiles only) #}
          <div id="camera-fov-edit-panel" class="d-none sidebar-fov-panel">
            <div class="sidebar-section-title"><i class="mdi mdi-cctv"></i> {% trans "Camera FOV" %}</div>
            <div class="sidebar-fov-controls">
              <div class="fov-slider-group">
                <label>{% trans "Direction" %}</label>
                <input type="range" id="edit-fov-direction-slider" min="0" max="360" step="5">
                <input type="number" id="edit-fov-direction" class="form-control form-control-sm fov-number" min="0" max="360" step="5">
                <span class="fov-unit">&deg;</span>
              </div>
              <div class="fov-slider-group">
                <label>{% trans "Angle" %}</label>
                <input type="range" id="edit-fov-angle-slider" min="10" max="360" step="5">
                <input type="number" id="edit-fov-angle" class="form-control form-control-sm fov-number" min="10" max="360" step="5">
                <span class="fov-unit">&deg;</span>
              </div>
              <div class="fov-slider-group">
                <label>{% trans "Range" %}</label>
                <input type="range" id="edit-fov-distance-slider" min="1" max="50" step="1">
                <input type="number" id="edit-fov-distance" class="form-control form-control-sm fov-number" min="1" max="50" step="1">
                <span class="fov-unit">{% trans "cells" %}</span>
              </div>
              <button id="save-fov-btn" class="btn btn-sm btn-primary">
                <i class="mdi mdi-check"></i> {% trans "Save" %}
              </button>
            </div>
          </div>
        </div>

        {# Rack Elevation (shown for rack tiles with linked rack) #}
        <div id="rack-elevation-panel" class="d-none">
          <div class="sidebar-section-title d-flex align-items-center justify-content-between">
            <span id="rack-elevation-title">{% trans "Rack Elevation" %}</span>
            <div class="btn-group btn-group-sm" role="group">
              <button type="button" class="btn btn-outline-secondary active btn-xs" id="rack-face-front" data-face="front">
                {% trans "Front" %}
              </button>
              <button type="button" class="btn btn-outline-secondary btn-xs" id="rack-face-rear" data-face="rear">
                {% trans "Rear" %}
              </button>
            </div>
          </div>
          <div class="rack-elevation-body">
            <div id="rack-elevation-loading" class="text-center py-3 d-none">
              <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
              <span class="ms-2 text-muted small">{% trans "Loading..." %}</span>
            </div>
            <div id="rack-elevation-svg" class="rack-elevation-svg-container"></div>
          </div>
        </div>

        {# Cable Trace (shown for devices, rear ports, front ports) #}
        <div id="cable-trace-panel" class="d-none">
          <div class="sidebar-section-title"><span id="cable-trace-title">{% trans "Ports" %}</span></div>
          <div id="cable-trace-content"></div>
        </div>

        {% if edit_mode %}
        {# Link Floor Plan panel (edit mode, for floorplan_link tiles) #}
        <div id="link-floorplan-panel" class="d-none">
          <div class="sidebar-section-title"><i class="mdi mdi-floor-plan"></i> {% trans "Link Floor Plan" %}</div>
          <div class="sidebar-link-controls">
            <select id="link-floorplan-select" class="form-select form-select-sm sidebar-input no-ts">
              <option value="">-- {% trans "Select Floor Plan" %} --</option>
              {% for fp in site_floorplans %}
                {% if fp.id != object.pk %}
                <option value="{{ fp.id }}">{{ fp.name }}{% if fp.location__name %} ({{ fp.location__name }}){% endif %}</option>
                {% endif %}
              {% endfor %}
            </select>
            <div class="d-flex gap-1 align-items-center">
              <button id="link-floorplan-btn" class="btn btn-sm btn-primary" disabled>
                <i class="mdi mdi-link"></i> {% trans "Link" %}
              </button>
              <button id="unlink-floorplan-btn" class="btn btn-sm btn-outline-danger" disabled>
                <i class="mdi mdi-link-off"></i> {% trans "Unlink" %}
              </button>
              <span id="link-floorplan-status" class="small text-muted ms-1"></span>
            </div>
            <div id="link-floorplan-current" class="small text-muted"></div>
          </div>
        </div>

        {# Link Object panel (edit mode only) #}
        <div id="link-object-panel" class="d-none">
          <div class="sidebar-section-title"><i class="mdi mdi-link"></i> {% trans "Link Object" %}</div>
          <div class="sidebar-link-controls">
            <select id="link-object-type" class="form-select form-select-sm sidebar-input no-ts">
              <option value="">-- {% trans "Select Type" %} --</option>
              <option value="dcim.rack">{% trans "Rack" %}</option>
              <option value="dcim.device">{% trans "Device" %}</option>
              <option value="dcim.powerpanel">{% trans "Power Panel" %}</option>
              <option value="dcim.powerfeed">{% trans "Power Feed" %}</option>
              <option value="dcim.rearport">{% trans "Rear Port" %}</option>
              <option value="dcim.frontport">{% trans "Front Port" %}</option>
            </select>
            <select id="link-object-select" class="form-select form-select-sm sidebar-input no-ts" disabled>
              <option value="">-- {% trans "Select object type first" %} --</option>
            </select>
            <div class="d-flex gap-1 align-items-center">
              <button id="link-object-btn" class="btn btn-sm btn-primary" disabled>
                <i class="mdi mdi-link"></i> {% trans "Link" %}
              </button>
              <button id="unlink-object-btn" class="btn btn-sm btn-outline-danger" disabled>
                <i class="mdi mdi-link-off"></i> {% trans "Unlink" %}
              </button>
              <span id="link-status" class="small text-muted ms-1"></span>
            </div>
            <div id="link-current" class="small text-muted"></div>
          </div>
        </div>

        {# Drop Ports panel (edit mode, for drop tiles) #}
        <div id="drop-ports-panel" class="d-none">
          <div class="sidebar-section-title"><i class="mdi mdi-ethernet"></i> {% trans "Drop Ports" %}</div>
          <div class="sidebar-link-controls">
            <select id="drop-port-type" class="form-select form-select-sm sidebar-input no-ts">
              <option value="">-- {% trans "Select Port Type" %} --</option>
              <option value="dcim.frontport">{% trans "Front Port" %}</option>
              <option value="dcim.rearport">{% trans "Rear Port" %}</option>
            </select>
            <select id="drop-port-select" class="form-select form-select-sm sidebar-input no-ts" disabled>
              <option value="">-- {% trans "Select port type first" %} --</option>
            </select>
            <div class="d-flex gap-1 align-items-center">
              <button id="add-drop-port-btn" class="btn btn-sm btn-primary" disabled>
                <i class="mdi mdi-plus"></i> {% trans "Add Port" %}
              </button>
              <span id="drop-port-status" class="small text-muted ms-1"></span>
            </div>
            <div id="drop-port-list" class="mt-2"></div>
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <script src="{% static 'netbox_map/js/jspdf.umd.min.js' %}"></script>
  <script src="{% static 'netbox_map/js/floorplan_core.js' %}"></script>
  <script src="{% static 'netbox_map/js/floorplan_renderer.js' %}"></script>
  <script src="{% static 'netbox_map/js/floorplan_interaction.js' %}"></script>
  <script src="{% static 'netbox_map/js/floorplan_sidebar.js' %}"></script>
  <script src="{% static 'netbox_map/js/floorplan_detail.js' %}"></script>
  <script src="{% static 'netbox_map/js/floorplan_popover.js' %}"></script>
  <script src="{% static 'netbox_map/js/floorplan_panels.js' %}"></script>
  <script src="{% static 'netbox_map/js/floorplan_pdf.js' %}"></script>
  <script src="{% static 'netbox_map/js/floorplan_main.js' %}"></script>
  {% if edit_mode %}
  <script src="{% static 'netbox_map/js/floorplan_editor.js' %}"></script>
  {% endif %}
{% endblock %}