// 1. 安装
// npm install @photo-sphere-viewer/markers-plugin

// 2. 导入 JS
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';

// 3. 导入 CSS（确保 tooltip、侧面板等 UI 正常渲染）
import '@photo-sphere-viewer/markers-plugin/index.css';

// 4. 注册插件并添加初始标记
const viewer = new Viewer({
  container: document.getElementById('viewer'),
  panorama: 'pano.jpg',
  plugins: [
    [MarkersPlugin, {
      markers: [
        {
          id: 'marker-1',
          position: { yaw: '45deg', pitch: '0deg' },
          image: 'pin-red.png',
          size: { width: 32, height: 32 },
          tooltip: '第一个标记',
        },
      ],
    }],
  ],
});

// 5. 获取插件实例（后续所有 API 操作均通过此实例）
const markersPlugin = viewer.getPlugin(MarkersPlugin);

{
  id: 'marker-image',
  position: { yaw: 0, pitch: 0 },
  image: 'pin-red.png',          // 图片路径
  size: { width: 32, height: 32 }, // 必填！图片标记必须指定尺寸
  tooltip: '图片标记示例',
}

// 方式一：直接写 HTML 字符串
{
  id: 'marker-html',
  position: { yaw: '30deg', pitch: '10deg' },
  html: '<div style="background:#ff6600;color:#fff;padding:4px 8px;border-radius:4px;">热门景点</div>',
  size: { width: 100, height: 30 },
}

// 方式二：使用已有的 DOM 元素
{
  id: 'marker-element',
  position: { yaw: '-45deg', pitch: '5deg' },
  element: document.querySelector('#my-custom-marker'),
}

// 正方形
{
  id: 'marker-square',
  position: { yaw: '60deg', pitch: '0deg' },
  square: 20,  // 边长
  svgStyle: { fill: 'rgba(255,0,0,0.5)', stroke: '#ff0000', strokeWidth: '2px' },
}

// 矩形（数组形式或对象形式均可）
{
  id: 'marker-rect',
  position: { yaw: '-20deg', pitch: '15deg' },
  rect: [40, 20],  // 或 { width: 40, height: 20 }
  svgStyle: { fill: 'rgba(0,128,255,0.4)', stroke: '#0080ff', strokeWidth: '2px' },
}

// 圆形
{
  id: 'marker-circle',
  position: { yaw: '90deg', pitch: '5deg' },
  circle: 15,  // 半径
  svgStyle: { fill: 'rgba(0,255,0,0.5)', stroke: '#00ff00', strokeWidth: '2px' },
}

// 椭圆（数组或对象形式均可）
{
  id: 'marker-ellipse',
  position: { yaw: '120deg', pitch: '0deg' },
  ellipse: [30, 15],  // 或 { rx: 30, ry: 15 }
  svgStyle: { fill: 'rgba(255,255,0,0.4)' },
}

// 自定义 SVG 路径（(0,0) 即为标记的 position 锚点）
{
  id: 'marker-path',
  position: { yaw: '-90deg', pitch: '0deg' },
  path: 'M0,0 L60,60 L60,0 L0,60 L0,0',  // SVG path d 属性
  svgStyle: { fill: 'rgba(255,0,255,0.4)', stroke: '#ff00ff', strokeWidth: '2px' },
}

// 球面坐标多边形 [yaw, pitch]（弧度）
{
  id: 'marker-polygon',
  polygon: [
    [0.2, 0.4],
    [0.9, 1.1],
    [1.5, 0.7],
  ],
  svgStyle: { fill: 'rgba(255,0,0,0.3)', stroke: '#ff0000', strokeWidth: '2px' },
}

// 带洞的多边形（洞的顶点顺序需与外壳相反，类似 GeoJSON 规范）
{
  id: 'marker-polygon-hole',
  polygon: [
    [[0.2, 0.4], [0.9, 1.1], [1.5, 0.7]],  // 外环
    [[0.3, 0.5], [1.4, 0.8], [0.8, 1.0]],  // 内环（洞）
  ],
  svgStyle: { fill: 'rgba(0,128,255,0.3)', stroke: '#0080ff' },
}

// 像素坐标多边形（与全景图纹理坐标对应）
{
  id: 'marker-polygon-pixels',
  polygonPixels: [
    [100, 200],
    [150, 300],
    [300, 200],
  ],
  svgStyle: { fill: 'rgba(255,255,0,0.3)' },
}

// 球面坐标折线
{
  id: 'marker-polyline',
  polyline: [
    [0.2, 0.4],
    [0.9, 1.1],
    [1.5, 0.7],
  ],
  svgStyle: { stroke: '#ff0000', strokeWidth: '3px' },
}

// 像素坐标折线
{
  id: 'marker-polyline-pixels',
  polylinePixels: [
    [100, 200],
    [150, 300],
    [300, 200],
  ],
  svgStyle: { stroke: '#00ff00', strokeWidth: '3px', strokeDasharray: '5,5' },
}

// 方式一：position + size（最简单）
{
  id: 'layer-image-1',
  imageLayer: 'info-panel.png',
  position: { yaw: 0, pitch: 0 },
  size: { width: 400, height: 300 },
}

// 方式二：四个角点精确定位（从左上角顺时针）
{
  id: 'layer-image-2',
  imageLayer: 'billboard.png',
  position: [
    { yaw: -0.2, pitch: 0.2 },   // 左上
    { yaw: 0.2, pitch: 0.2 },    // 右上
    { yaw: 0.2, pitch: -0.2 },   // 右下
    { yaw: -0.2, pitch: -0.2 },  // 左下
  ],
}

{
  id: 'layer-video',
  videoLayer: 'intro.mp4',
  position: { yaw: 0, pitch: 0 },
  size: { width: 640, height: 360 },
  autoplay: true,  // 是否自动播放，默认 true
}

{
  id: 'layer-youtube',
  elementLayer: getYouTubeIframe('dQw4w9WgXcQ'),  // 返回 iframe DOM 元素
  position: { yaw: 0, pitch: 0 },
  rotation: { yaw: '10deg' },
}

// 随缩放级别变化：zoom 3 时缩放 1.0，zoom 50 时缩放 0.2（越放大标记越小）
scale: { zoom: [1, 0.2] }

// 随偏航角变化：正对时缩放 1.0，偏到 90° 时缩放 0.5
scale: { yaw: [1, 0.5] }

// 使用默认设置（2x 缩放，100ms 线性过渡）
hoverScale: true

// 自定义悬停效果
hoverScale: { amount: 1.5, duration: 200, easing: 'ease-out' }

// 对此标记禁用悬停缩放
hoverScale: false

// 弧度（数字）
position: { yaw: 0.785, pitch: 0.3 }

// 度数（字符串）
position: { yaw: '45deg', pitch: '17deg' }

// 混合使用也可以
position: { yaw: Math.PI / 4, pitch: '0deg' }

position: { textureX: 1500, textureY: 800 }

position: { textureFace: 'front', textureX: 100, textureY: 200 }

position: [
  { yaw: -0.2, pitch: 0.2 },   // 左上
  { yaw: 0.2, pitch: 0.2 },    // 右上
  { yaw: 0.2, pitch: -0.2 },   // 右下
  { yaw: -0.2, pitch: -0.2 },  // 左下
]

// 最简单：直接传字符串
tooltip: '这是一条提示'

// 自定义位置
tooltip: { content: '卫生间', position: 'bottom left' }

// 点击触发（而非默认的 hover）
tooltip: { content: '点击查看详情', trigger: 'click', position: 'top center' }

// 自定义样式类
tooltip: { content: 'VIP 区域', className: 'vip-tooltip' }

// 始终显示某个标记的 tooltip
markersPlugin.showMarkerTooltip('marker-1');

// 隐藏
markersPlugin.hideMarkerTooltip('marker-1');

// 批量操作
markersPlugin.showAllTooltips();
markersPlugin.hideAllTooltips();
markersPlugin.toggleAllTooltips();

tooltip: {
  content: '<strong>故宫太和殿</strong><br/><small>建于明永乐十八年</small>',
  className: 'custom-tooltip',
  position: 'top center',
}

{
  id: 'marker-with-content',
  position: { yaw: '30deg', pitch: '5deg' },
  image: 'pin-blue.png',
  size: { width: 32, height: 32 },
  tooltip: '点击查看详情',
  content: `
    <div style="padding: 16px;">
      <h3>景点：天坛祈年殿</h3>
      <p>祈年殿建于明永乐十八年（1420年），是北京天坛的主体建筑。</p>
      <ul>
        <li>建筑高度：38 米</li>
        <li>直径：32.7 米</li>
        <li>地位：世界文化遗产</li>
      </ul>
    </div>
  `,
}

// 编程方式打开侧面板
markersPlugin.showMarkerPanel('marker-with-content');

// 编程方式关闭
markersPlugin.hideMarkerPanel();

// ImageLayer 带色度键抠图的示例（绿幕视频变透明）
{
  id: 'spokesperson',
  videoLayer: 'spokesperson-green.mp4',
  position: { yaw: 0, pitch: 0 },
  size: { width: 640, height: 480 },
  chromaKey: {
    enabled: true,
    color: { r: 0, g: 255, b: 0 },
    similarity: 0.4,
    smoothness: 0.1,
  },
}

markersPlugin.addMarker({
  id: 'new-marker',
  position: { yaw: '45deg', pitch: '0deg' },
  circle: 15,
  svgStyle: { fill: 'rgba(255,100,0,0.6)' },
  tooltip: '动态添加的标记',
});

// 删除单个
markersPlugin.removeMarker('new-marker');

// 批量删除
markersPlugin.removeMarkers(['marker-1', 'marker-2', 'marker-3']);

// 注意：不能改变标记类型（如从 image 变成 circle）
markersPlugin.updateMarker({
  id: 'new-marker',
  tooltip: '已更新的提示文本',
  opacity: 0.5,
});

// 一次性替换所有标记
markersPlugin.setMarkers([
  { id: 'a', position: { yaw: 0, pitch: 0 }, image: 'a.png', size: { width: 32, height: 32 } },
  { id: 'b', position: { yaw: '90deg', pitch: 0 }, image: 'b.png', size: { width: 32, height: 32 } },
]);

markersPlugin.clearMarkers();

// 移动到标记位置，默认速度 8rpm
markersPlugin.gotoMarker('marker-1');

// 自定义速度
markersPlugin.gotoMarker('marker-1', '4rpm')
  .then(() => {
    console.log('视角已到达标记位置');
  });

// 立即跳转（无动画）
markersPlugin.gotoMarker('marker-1', 0);

markersPlugin.hideMarker('marker-1');
markersPlugin.showMarker('marker-1');
markersPlugin.toggleMarker('marker-1');
// toggleMarker 也可显式传入目标状态
markersPlugin.toggleMarker('marker-1', true); // 强制显示

// 批量
markersPlugin.hideAllMarkers();
markersPlugin.showAllMarkers();
markersPlugin.toggleAllMarkers();

markersPlugin.showMarkerTooltip('marker-1');
markersPlugin.hideMarkerTooltip('marker-1');

markersPlugin.showAllTooltips();
markersPlugin.hideAllTooltips();
markersPlugin.toggleAllTooltips();

// 获取标记内部对象（只读）
const marker = markersPlugin.getMarker('marker-1');
console.log(marker.id, marker.position, marker.data);

// 获取所有标记
const allMarkers = markersPlugin.getMarkers();

// 获取标记数量
const count = markersPlugin.getNbMarkers();

// 获取当前（最后被点击的）标记
const current = markersPlugin.getCurrentMarker();

markersPlugin.showMarkerPanel('marker-1');
markersPlugin.hideMarkerPanel();

markersPlugin.showMarkersList();
markersPlugin.hideMarkersList();
markersPlugin.toggleMarkersList();

markersPlugin.addEventListener('select-marker', ({ marker, doubleClick, rightClick }) => {
  console.log(`选中了标记：${marker.id}`);
  if (rightClick) {
    console.log('右键点击');
  }
  if (doubleClick) {
    console.log('双击');
    markersPlugin.removeMarker(marker.id);
  }
  // 访问自定义数据
  console.log('自定义数据：', marker.data);
});

markersPlugin.addEventListener('unselect-marker', ({ marker }) => {
  console.log(`取消选中：${marker.id}`);
});

markersPlugin.addEventListener('enter-marker', ({ marker }) => {
  // 自定义悬停高亮逻辑
  markersPlugin.updateMarker({
    id: marker.id,
    svgStyle: { ...marker.state.svgStyle, fill: 'rgba(255,255,0,0.8)' },
  });
});

markersPlugin.addEventListener('leave-marker', ({ marker }) => {
  markersPlugin.updateMarker({
    id: marker.id,
    svgStyle: { ...marker.state.svgStyle, fill: 'rgba(255,0,0,0.5)' },
  });
});

markersPlugin.addEventListener('marker-visibility', ({ marker, visible }) => {
  console.log(`标记 ${marker.id} 现在${visible ? '可见' : '隐藏'}`);
});

viewer.addEventListener('zoom-updated', (e) => {
  if (e.zoomLevel > 30) {
    // 高缩放级别：显示细节标记
    if (!markersPlugin.getMarker('detail-1')) {
      markersPlugin.addMarker({
        id: 'detail-1',
        position: { yaw: '10deg', pitch: '5deg' },
        circle: 8,
        svgStyle: { fill: 'rgba(0,255,0,0.8)' },
        tooltip: '细节标记（仅放大后可见）',
      });
    }
  } else {
    try { markersPlugin.removeMarker('detail-1'); } catch (e) { /* 忽略已删除 */ }
  }
});

async function loadMarkersFromAPI() {
  const response = await fetch('/api/poi');
  const pois = await response.json();

  const markers = pois.map((poi, index) => ({
    id: `poi-${index}`,
    position: { yaw: poi.yaw, pitch: poi.pitch },
    image: poi.icon || 'default-pin.png',
    size: { width: 32, height: 32 },
    tooltip: { content: poi.name, position: 'top center' },
    content: `<h3>${poi.name}</h3><p>${poi.description}</p>`,
    data: poi,  // 保留原始数据，回调中可通过 marker.data 访问
  }));

  markersPlugin.setMarkers(markers);

  // 统一的点击事件处理
  markersPlugin.addEventListener('select-marker', ({ marker }) => {
    if (marker.data?.url) {
      window.open(marker.data.url, '_blank');
    }
  });
}

function filterByCategory(category) {
  const all = markersPlugin.getMarkers();
  all.forEach(m => {
    if (m.data?.category === category || category === 'all') {
      markersPlugin.showMarker(m.id);
    } else {
      markersPlugin.hideMarker(m.id);
    }
  });
}

// 示例：只显示"餐饮"类标记
filterByCategory('restaurant');

let angle = 0;
const movingMarkerId = 'moving-target';

markersPlugin.addMarker({
  id: movingMarkerId,
  position: { yaw: 0, pitch: 0 },
  circle: 10,
  svgStyle: { fill: 'rgba(255,0,0,0.8)' },
});

setInterval(() => {
  angle += 0.01;
  markersPlugin.updateMarker({
    id: movingMarkerId,
    position: {
      yaw: Math.sin(angle) * 0.8,
      pitch: Math.cos(angle) * 0.3,
    },
  });
}, 50); // 20 FPS