{% extends 'base/layout.html' %}
{% load static %}
{% block title %}Edit Tour — {{ tour.parent }}{% endblock %}

{% block content %}
<link rel="stylesheet" href="{% static 'netbox_virtual_tour/vendor/psv-bundle.css' %}">
<link rel="stylesheet" href="{% static 'netbox_virtual_tour/css/editor.css' %}">

<div class="editor-shell">

  <header class="editor-header">
    <div class="d-flex align-items-center">
      <a href="{{ url_back }}" class="btn btn-sm btn-link">&larr; Back</a>
      <h1 class="h5 mb-0 ms-2">Edit Tour: {{ tour.parent }}</h1>
      <span id="status-pill" class="badge bg-secondary ms-2">{{ tour.get_status_display }}</span>
    </div>
    <div class="d-flex gap-2">
      <button id="btn-export" class="btn btn-outline-secondary btn-sm">Export Bundle</button>
      <label class="btn btn-outline-secondary btn-sm mb-0">
        Import Bundle
        <input type="file" id="bundle-import" accept=".zip,application/zip" hidden>
      </label>
      <button id="btn-delete" class="btn btn-outline-danger btn-sm">Delete Tour</button>
      <button id="btn-publish" class="btn btn-success btn-sm">Publish</button>
    </div>
  </header>

  <div class="editor-body">

    <aside class="editor-sidebar">
      <div class="sidebar-section">
        <h2 class="h6">Floorplan <span class="text-muted fw-normal">(optional)</span></h2>
        <div id="floorplan-status" class="text-muted small mb-2">No floorplan uploaded.</div>
        <label class="btn btn-outline-primary btn-sm w-100">
          Upload Floorplan (PNG/JPG)
          <input type="file" id="floorplan-upload" accept="image/png,image/jpeg" hidden>
        </label>
        <div class="form-text mt-1">Upload a floorplan, it should be at least 1000px in the longest direction. Optional.</div>
      </div>

      <div class="sidebar-section">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <h2 class="h6 mb-0">Scenes</h2>
          <label class="btn btn-primary btn-sm">
            + Add Scene
            <input type="file" id="scene-upload" accept="image/jpeg,image/png" hidden>
          </label>
        </div>
        <div id="upload-progress" class="d-none mb-2">
          <div class="progress" style="height:6px">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:100%"></div>
          </div>
          <div class="text-muted small mt-1" id="upload-progress-label">Uploading…</div>
        </div>
        <ol id="scene-list" class="scene-list"></ol>
        <div id="scene-list-empty" class="text-muted small">Upload a 360° photo to add your first scene.</div>
      </div>
    </aside>

    <main class="editor-main">
      <section class="editor-section" id="floorplan-section">
        <div class="section-header">
          <h2 class="h6 mb-0">Floorplan</h2>
          <div class="text-muted small">Drag markers to position each scene.</div>
        </div>
        <div id="floorplan-canvas-wrap">
          <div id="floorplan-canvas" class="floorplan-canvas">
            <div class="floorplan-empty text-muted" id="floorplan-placeholder">
              No floorplan uploaded. You can still add scenes and link them — upload a floorplan later if needed.
            </div>
          </div>
        </div>
      </section>

      <section class="editor-section" id="scene-editor-section" style="display:none">
        <div class="section-header">
          <h2 class="h6 mb-0">Scene: <span id="scene-editor-name"></span></h2>
          <div class="text-muted small">
            Pan to desired starting view → <strong>Set Default View</strong>.
            Face floorplan "up" direction → <strong>Set Compass Direction</strong>.
            Face the next photo location → <strong>Add Link Here</strong>.
          </div>
        </div>
        <div class="scene-editor-toolbar">
          <button id="btn-set-default-view" class="btn btn-primary btn-sm">Set Default View</button>
          <button id="btn-set-compass" class="btn btn-outline-primary btn-sm">Set Compass Direction</button>
          <button id="btn-add-link" class="btn btn-outline-primary btn-sm">Add Link Here</button>
          <button id="btn-rename-scene" class="btn btn-outline-secondary btn-sm">Rename</button>
          <button id="btn-delete-scene" class="btn btn-outline-danger btn-sm">Delete Scene</button>
        </div>
        <div id="psv-editor" style="position:relative;">
          <div id="compass-aim-overlay" style="
            display:none; position:absolute; inset:0; z-index:10;
            pointer-events:none; border:3px solid #fd7e14; border-radius:4px;">
            <div style="position:absolute;top:14px;left:50%;transform:translateX(-50%);
              background:rgba(253,126,20,0.92);color:#fff;font-weight:600;
              padding:8px 14px;border-radius:6px;font-size:13px;text-align:center;pointer-events:none;
              white-space:nowrap;">
              Pan to face the direction that is <strong>"up" on the floorplan</strong>, then click <strong>Confirm Direction</strong>
            </div>
          </div>
          <div id="default-view-aim-overlay">
            <div class="msg">
              Pan to the desired starting view,<br>
              then click <strong>Confirm View</strong>
            </div>
          </div>
        <div id="link-aim-overlay" style="display:none; position:absolute; inset:0; z-index:10;
             pointer-events:none; border:3px solid #20c997; border-radius:4px;">
          <div style="position:absolute; top:14px; left:50%; transform:translateX(-50%);
                      background:rgba(32,201,151,0.95); color:#fff; font-weight:600;
                      padding:8px 14px; border-radius:6px; font-size:13px; text-align:center; pointer-events:none;
                      white-space:nowrap;">
            Pan to position the link arrow, then click <strong>Confirm Link Position</strong>
          </div>
        </div>
        </div>
        <div class="link-list-wrap">
          <h3 class="h6 mb-2">Navigation Links from this scene</h3>
          <ul id="link-list" class="link-list"></ul>
        </div>
      </section>
    </main>
  </div>
</div>

<!-- Link picker overlay (no Bootstrap modal) -->
<div id="linkPickerOverlay" style="display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.5);">
  <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
              background: var(--bs-body-bg); color: var(--bs-body-color);
              border:1px solid var(--bs-border-color); border-radius:6px;
              width: 360px; max-width: 90vw; padding: 0; box-shadow: 0 6px 24px rgba(0,0,0,0.4);">
    <div style="padding: 0.5rem 0.75rem; border-bottom:1px solid var(--bs-border-color);
                display:flex; justify-content:space-between; align-items:center;">
      <strong>Add navigation link</strong>
      <button type="button" id="link-picker-close" class="btn-close" aria-label="Close"></button>
    </div>
    <div style="padding: 0.75rem;">
      <p class="text-muted small mb-2">Choose the destination. You'll then be able to position the arrow exactly where you want it.</p>
      <div id="link-picker-list" class="list-group list-group-flush mb-3"
           style="max-height: 240px; overflow-y: auto; border:1px solid var(--bs-border-color); border-radius:4px;"></div>
      <label class="form-label small mb-1">Label <span class="text-muted">(optional, shown on hover)</span></label>
      <input type="text" id="link-label-input" class="form-control form-control-sm"
             placeholder="e.g. Server Room, Exit, Kitchen…">
    </div>
  </div>
</div>

{% csrf_token %}

<script src="{% static 'netbox_virtual_tour/vendor/psv-bundle.js' %}"></script>
<script>
window.TOUR_CONFIG = {
  tourId: {{ tour.pk }},
  dataUrl: '{{ data_url }}',
  csrfToken: document.querySelector('input[name=csrfmiddlewaretoken]').value,
  urls: {
    floorplan:       '{{ url_floorplan }}',
    sceneCreate:     '{{ url_scene_create }}',
    publish:         '{{ url_publish }}',
    export:          '{{ url_export }}',
    deleteTour:      '{{ url_delete_tour }}',
    sceneDetailBase: '{{ url_scene_base }}',
    linkCreateBase:  '{{ url_link_base }}',
    linkDeleteBase:  '{{ url_link_del_base }}',
    import:          '{{ url_import }}',
  },
};
</script>
<script src="{% static 'netbox_virtual_tour/js/editor.js' %}"></script>
{% endblock content %}