class TourGuide extends HTMLElement {
  constructor() {
    super();
    this.steps = [
      {
        target: '.step-1',
        content: 'This is the main dashboard.',
      },
      {
        target: '.step-2',
        content: 'Here you can see your recent activity.',
      },
      {
        target: '.step-3',
        content: 'Click here to create a new item.',
      }
    ];
    this.currentStep = 0;
    this.isRunning = false;
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();
  }

  render() {
    this.innerHTML = `
      <style>
        .tour-button {
          background: #3b82f6;
          color: white;
          font-weight: 600;
          padding: 0.5rem 1rem;
          border-radius: 0.375rem;
          cursor: pointer;
          transition: background 0.2s;
          border: none;
        }
        .tour-button:hover {
          background: #2563eb;
        }
        .tour-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0,0,0,0.5);
          z-index: 9998;
        }
        .tour-tooltip {
          position: absolute;
          background: white;
          border-radius: 0.5rem;
          padding: 1rem;
          max-width: 300px;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          z-index: 9999;
        }
        .tour-footer {
          display: flex;
          justify-content: space-between;
          margin-top: 1rem;
        }
        .tour-button-small {
          padding: 0.25rem 0.5rem;
          font-size: 0.875rem;
        }
        .tour-progress {
          font-size: 0.875rem;
          color: #6b7280;
        }
      </style>
      <button class="tour-button">Start Tour</button>
    `;
  }

  setupEventListeners() {
    this.querySelector('.tour-button').addEventListener('click', () => this.startTour());
  }

  startTour() {
    this.isRunning = true;
    this.currentStep = 0;
    this.showStep();
  }

  showStep() {
    // Remove any existing tooltips
    this.removeTooltips();

    const step = this.steps[this.currentStep];
    const targetElement = document.querySelector(step.target);

    if (!targetElement) {
      console.warn(`Target element not found: ${step.target}`);
      this.nextStep();
      return;
    }

    // Create overlay
    const overlay = document.createElement('div');
    overlay.className = 'tour-overlay';
    document.body.appendChild(overlay);

    // Position tooltip
    const rect = targetElement.getBoundingClientRect();
    const tooltip = document.createElement('div');
    tooltip.className = 'tour-tooltip';
    tooltip.style.top = `${rect.bottom + window.scrollY + 10}px`;
    tooltip.style.left = `${rect.left + window.scrollX}px`;

    tooltip.innerHTML = `
      <div>${step.content}</div>
      <div class="tour-footer">
        <span class="tour-progress">${this.currentStep + 1}/${this.steps.length}</span>
        <div>
          <button class="tour-button-small skip-button">Skip</button>
          <button class="tour-button-small next-button">${this.currentStep === this.steps.length - 1 ? 'Finish' : 'Next'}</button>
        </div>
      </div>
    `;

    document.body.appendChild(tooltip);

    // Highlight target
    targetElement.style.boxShadow = '0 0 0 3px rgba(59, 130, 246, 0.5)';
    targetElement.style.position = 'relative';
    targetElement.style.zIndex = '10000';

    // Add event listeners
    tooltip.querySelector('.next-button').addEventListener('click', () => this.nextStep());
    tooltip.querySelector('.skip-button').addEventListener('click', () => this.endTour());
  }

  nextStep() {
    this.currentStep++;
    if (this.currentStep < this.steps.length) {
      this.showStep();
    } else {
      this.endTour();
    }
  }

  endTour() {
    this.isRunning = false;
    this.removeTooltips();
    // Remove highlights
    this.steps.forEach(step => {
      const element = document.querySelector(step.target);
      if (element) {
        element.style.boxShadow = '';
        element.style.zIndex = '';
      }
    });
  }

  removeTooltips() {
    const tooltips = document.querySelectorAll('.tour-tooltip, .tour-overlay');
    tooltips.forEach(tooltip => tooltip.remove());
  }
}

customElements.define('tour-guide', TourGuide);