class MapEditor {
  constructor(containerId, svgId, imageId) {
    this.container = document.getElementById(containerId);
    this.svg = document.getElementById(svgId);
    this.image = document.getElementById(imageId);
    
    this.rooms = [];
    this.isDrawing = false;
    this.points = []; // Pontos do polígono atual em coordenadas normalizadas (0 a 1)
    this.activeRoomId = null;
    
    this.onSelectRoomCallback = null;
    this.onUpdateRoomsCallback = null;

    this.initEvents();
  }

  setRooms(rooms) {
    this.rooms = rooms;
    this.renderHotspots();
  }

  setActiveRoom(roomId) {
    this.activeRoomId = roomId;
    this.renderHotspots();
  }

  // Inicializar escutas de eventos de mouse
  initEvents() {
    this.svg.addEventListener('click', (e) => {
      if (!this.isDrawing) {
        // Se clicar em um polígono existente, a lógica é tratada pelo próprio elemento,
        // mas se clicar fora de qualquer polígono, não fazemos nada.
        return;
      }
      
      // Impedir cliques em nós ou linhas de criarem novos pontos
      if (e.target !== this.svg) {
        return;
      }

      this.addPoint(e);
    });

    this.svg.addEventListener('mousemove', (e) => {
      if (!this.isDrawing || this.points.length === 0) return;
      this.updateTempLine(e);
    });

    // Tratar tecla Escape para cancelar desenho
    window.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && this.isDrawing) {
        this.cancelDrawing();
      }
    });
  }

  // Iniciar modo de desenho de uma sala
  startDrawing(roomId) {
    if (!roomId) {
      alert("Por favor, selecione uma sala na lista antes de desenhar!");
      return;
    }
    this.isDrawing = true;
    this.activeRoomId = roomId;
    this.points = [];
    this.clearDrawingElements();
    this.svg.style.cursor = 'crosshair';
    document.getElementById('drawing-tip').style.display = 'flex';
  }

  // Cancelar desenho atual
  cancelDrawing() {
    this.isDrawing = false;
    this.points = [];
    this.clearDrawingElements();
    this.svg.style.cursor = 'default';
    document.getElementById('drawing-tip').style.display = 'none';
    this.renderHotspots();
  }

  // Adicionar ponto ao polígono em progresso
  addPoint(e) {
    const rect = this.image.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width;
    const y = (e.clientY - rect.top) / rect.height;

    // Se clicar próximo ao primeiro ponto e tiver pelo menos 3 pontos, fecha o polígono
    if (this.points.length >= 3) {
      const firstPoint = this.points[0];
      const dist = Math.hypot(x - firstPoint.x, y - firstPoint.y);
      if (dist < 0.02) { // 2% de tolerância para fechar
        this.finishDrawing();
        return;
      }
    }

    this.points.push({ x, y });
    this.renderDrawingState();
  }

  // Atualizar a linha temporária que segue o cursor do mouse
  updateTempLine(e) {
    const rect = this.image.getBoundingClientRect();
    const w = this.image.clientWidth;
    const h = this.image.clientHeight;
    
    // Obter posição do mouse normalizada e converter para coordenadas locais do SVG
    const mouseX = ((e.clientX - rect.left) / rect.width) * w;
    const mouseY = ((e.clientY - rect.top) / rect.height) * h;

    const lastPoint = this.points[this.points.length - 1];
    const lastX = lastPoint.x * w;
    const lastY = lastPoint.y * h;

    let tempLine = document.getElementById('temp-line');
    if (!tempLine) {
      tempLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      tempLine.setAttribute('id', 'temp-line');
      tempLine.setAttribute('class', 'draw-line');
      this.svg.appendChild(tempLine);
    }

    tempLine.setAttribute('x1', lastX);
    tempLine.setAttribute('y1', lastY);
    tempLine.setAttribute('x2', mouseX);
    tempLine.setAttribute('y2', mouseY);
  }

  // Finalizar desenho e salvar polígono no banco de dados local
  finishDrawing() {
    if (this.points.length < 3) {
      alert("Um polígono precisa ter pelo menos 3 pontos!");
      return;
    }

    // Salvar no array de salas
    const room = this.rooms.find(r => r.id === this.activeRoomId);
    if (room) {
      room.polygon = this.points;
      
      if (this.onUpdateRoomsCallback) {
        this.onUpdateRoomsCallback(room);
      }
    }

    this.isDrawing = false;
    this.points = [];
    this.clearDrawingElements();
    this.svg.style.cursor = 'default';
    document.getElementById('drawing-tip').style.display = 'none';
    this.renderHotspots();
  }

  // Limpar elementos visuais de desenho temporários
  clearDrawingElements() {
    const tempLine = document.getElementById('temp-line');
    if (tempLine) tempLine.remove();

    const drawNodes = this.svg.querySelectorAll('.draw-node, .draw-line-fixed');
    drawNodes.forEach(node => node.remove());
  }

  // Renderizar o estado atual do polígono sendo desenhado
  renderDrawingState() {
    this.clearDrawingElements();
    
    const w = this.image.clientWidth;
    const h = this.image.clientHeight;
    if (w === 0 || h === 0) return;

    // Renderizar linhas fixas entre os nós existentes
    for (let i = 0; i < this.points.length - 1; i++) {
      const p1 = this.points[i];
      const p2 = this.points[i + 1];

      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('class', 'draw-line-fixed');
      line.setAttribute('style', 'stroke: var(--accent-color); stroke-width: 2px;');
      line.setAttribute('x1', p1.x * w);
      line.setAttribute('y1', p1.y * h);
      line.setAttribute('x2', p2.x * w);
      line.setAttribute('y2', p2.y * h);
      this.svg.appendChild(line);
    }

    // Renderizar os nós como círculos
    this.points.forEach((p, index) => {
      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      circle.setAttribute('class', 'draw-node');
      circle.setAttribute('cx', p.x * w);
      circle.setAttribute('cy', p.y * h);
      circle.setAttribute('r', index === 0 ? '6' : '4'); // Destacar o ponto inicial para fechamento
      
      // Permitir fechar ao clicar no primeiro ponto
      if (index === 0) {
        circle.addEventListener('click', (e) => {
          e.stopPropagation();
          if (this.points.length >= 3) {
            this.finishDrawing();
          }
        });
      }

      this.svg.appendChild(circle);
    });
  }

  // Renderizar todos os polígonos (hotspots) salvos
  renderHotspots() {
    // Limpar polígonos existentes
    const oldHotspots = this.svg.querySelectorAll('polygon.hotspot');
    oldHotspots.forEach(h => h.remove());

    const w = this.image.clientWidth;
    const h = this.image.clientHeight;
    if (w === 0 || h === 0) {
      // Tentar novamente após o carregamento da imagem se as dimensões forem zero
      return;
    }

    this.rooms.forEach(room => {
      if (!room.polygon || room.polygon.length === 0) return;

      const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
      polygon.setAttribute('class', 'hotspot');
      
      // Destacar se for a sala ativa
      if (room.id === this.activeRoomId) {
        polygon.classList.add('active');
      }

      // Converter pontos normalizados para pixels reais baseados nas dimensões locais
      const pointsString = room.polygon
        .map(p => `${p.x * w},${p.y * h}`)
        .join(' ');
      
      polygon.setAttribute('points', pointsString);

      // Evento de clique para abrir os detalhes da sala
      polygon.addEventListener('click', (e) => {
        e.stopPropagation();
        if (this.isDrawing) return; // Não interromper desenho em progresso
        
        if (this.onSelectRoomCallback) {
          this.onSelectRoomCallback(room.id);
        }
      });

      // Adicionar tooltip/título sutil para hover do navegador
      const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
      title.textContent = `${room.name} (${room.status})`;
      polygon.appendChild(title);

      this.svg.appendChild(polygon);
    });
  }

  // Recalcular posições dos hotspots no redimensionamento da janela
  handleResize() {
    if (this.isDrawing) {
      this.renderDrawingState();
    }
    this.renderHotspots();
  }

  // Remover os polígonos de uma sala
  clearRoomPolygon(roomId) {
    const room = this.rooms.find(r => r.id === roomId);
    if (room) {
      room.polygon = null;
      if (this.onUpdateRoomsCallback) {
        this.onUpdateRoomsCallback(room);
      }
      this.renderHotspots();
    }
  }
}
