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

{% block content %}
<link rel="stylesheet" href="{% static 'netbox_virtual_tour/vendor/psv-bundle.css' %}">
<style>
  #viewer {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    z-index: 1040;
  }
  .viewer-toolbar {
    position: fixed;
    top: 14px; right: 14px;
    z-index: 1050;
    display: flex;
    gap: 8px;
  }
</style>

<div id="viewer"></div>
<div class="viewer-toolbar">
  {% if can_edit %}
    <a class="btn btn-light btn-sm" href="{{ url_edit }}">Edit</a>
  {% endif %}
  <a class="btn btn-light btn-sm" href="{{ url_back }}">Close</a>
</div>

<script src="{% static 'netbox_virtual_tour/vendor/psv-bundle.js' %}"></script>
<script>
const { Viewer, MarkersPlugin, VirtualTourPlugin, MapPlugin } = PhotoSphereViewer;
const DATA_URL = '{{ data_url }}';

async function init() {
  const resp = await fetch(DATA_URL);
  if (!resp.ok) {
    document.getElementById('viewer').innerHTML =
      '<div style="color:#fff;padding:2rem;">Tour not available.</div>';
    return;
  }
  const data = await resp.json();
  if (!data.scenes || data.scenes.length === 0) {
    document.getElementById('viewer').innerHTML =
      '<div style="color:#fff;padding:2rem;">This tour has no scenes yet.</div>';
    return;
  }

  const sceneById = {};
  data.scenes.forEach(s => { sceneById[String(s.id)] = s; });

  const nodes = data.scenes.map(scene => ({
    id: String(scene.id),
    panorama: scene.photo_url,
    name: scene.name,
    links: scene.links.map(l => ({
      nodeId: String(l.to_scene_id),
      position: { yaw: l.yaw, pitch: l.pitch },
      name: l.label || undefined,
    })),
  }));

  const firstScene = data.scenes[0];
  const hasFloorplan = !!data.floorplan_url;

  function rotationRad(scene) {
    return -((scene.floorplan_rotation || 0) * Math.PI / 180);
  }

  const plugins = [
    MarkersPlugin,
    [VirtualTourPlugin, {
      renderMode: 'markers',
      nodes,
      startNodeId: String(firstScene.id),
      transitionOptions: { showLoader: true, fadeIn: false, rotation: false },
    }],
  ];

  if (hasFloorplan) {
    plugins.push([MapPlugin, {
      imageUrl: data.floorplan_url,
      center: {
        x: firstScene.floorplan_x * data.floorplan_width,
        y: firstScene.floorplan_y * data.floorplan_height,
      },
      rotation: rotationRad(firstScene),
      defaultZoom: 50,
      size: '220px',
      position: 'bottom left',
      coneColor: 'rgba(0, 120, 255, 0.35)',
      coneSize: 40,
      spotStyle: { size: 18, color: 'rgba(0,90,255,0.9)', hoverColor: 'rgba(0,90,255,1)' },
    }]);
  }

  const viewer = new Viewer({
    container: 'viewer',
    defaultYaw: firstScene.default_yaw,
    defaultPitch: firstScene.default_pitch,
    navbar: ['zoom', 'move', 'caption', 'fullscreen'],
    plugins,
  });

  const tourPlugin = viewer.getPlugin(VirtualTourPlugin);
  const map = hasFloorplan ? viewer.getPlugin(MapPlugin) : null;

  tourPlugin.addEventListener('node-changed', ({ node }) => {
    const scene = sceneById[node.id];
    if (!scene) return;
    viewer.animate({ yaw: scene.default_yaw, pitch: scene.default_pitch, speed: '8rpm' });
    if (map) {
      map.setImage(data.floorplan_url,
        { x: scene.floorplan_x * data.floorplan_width, y: scene.floorplan_y * data.floorplan_height },
        rotationRad(scene));
    }
  });

  if (map) {
    map.setHotspots(data.scenes.map(scene => ({
      id: 'scene_' + scene.id,
      x: scene.floorplan_x * data.floorplan_width,
      y: scene.floorplan_y * data.floorplan_height,
      tooltip: scene.name,
    })));
    map.addEventListener('select-hotspot', ({ hotspotId }) => {
      tourPlugin.setCurrentNode(hotspotId.replace('scene_', ''));
    });
  }
}

init().catch(err => {
  console.error(err);
  document.getElementById('viewer').innerHTML =
    '<div style="color:#fff;padding:2rem;">Error: ' + err.message + '</div>';
});
</script>
{% endblock content %}