class BluetoothJammer extends HTMLElement {
  constructor() {
    super();
    this.state = {
      jamming: false,
      scanning: false,
      devices: []
    };
  }

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.render();
    this.setupEventListeners();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          font-family: 'Roboto', sans-serif;
        }
        
        .jammer-container {
          background: #1f2937;
          border-radius: 12px;
          padding: 1.5rem;
          border: 2px solid #374151;
          margin: 1rem 0;
        }
        
        .header {
          text-align: center;
          margin-bottom: 1.5rem;
        }
        
        .title {
          font-size: 1.5rem;
          font-weight: bold;
          color: white;
          margin-bottom: 0.5rem;
        }
        
        .subtitle {
          color: #9ca3af;
          font-size: 1rem;
        }
        
        .control-panel {
          background: #374151;
          border-radius: 8px;
          padding: 1rem;
          margin-bottom: 1rem;
        }
        
        .status-display {
          background: #111827;
          border-radius: 8px;
          padding: 1rem;
          margin-bottom: 1rem;
        }
        
        .status-text {
          font-size: 1.125rem;
          text-align: center;
        }
        
        .device-list {
          background: #111827;
          border-radius: 8px;
          padding: 1rem;
          margin-top: 1rem;
        }
        
        .device-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.5rem;
          margin: 0.25rem 0;
          background: #1f2937;
          border-radius: 4px;
        }
        
        .button-group {
          display: flex;
          gap: 0.75rem;
          justify-content: center;
          flex-wrap: wrap;
        }
        
        .button {
          padding: 0.75rem 1.5rem;
          border: none;
          border-radius: 6px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        
        .button:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
        
        .start-btn {
          background: #dc2626;
          color: white;
        }
        
        .start-btn:hover:not(:disabled) {
          background: #b91c1c;
        }
        
        .stop-btn {
          background: #6b7280;
          color: white;
        }
        
        .stop-btn:hover:not(:disabled) {
          background: #4b5563;
        }
        
        .scan-btn {
          background: #2563eb;
          color: white;
        }
        
        .scan-btn:hover:not(:disabled) {
          background: #1d4ed8;
        }
        
        .active {
          color: #10b981;
          font-weight: bold;
        }
        
        .inactive {
          color: #ef4444;
          font-weight: bold;
        }
        
        .frequency-display {
          background: linear-gradient(45deg, #1e3a8a, #3730a3);
          border: 2px solid #4f46e5;
          border-radius: 8px;
          padding: 1rem;
          text-align: center;
          margin: 1rem 0;
        }
        
        .frequency-text {
          font-size: 1.25rem;
          font-weight: bold;
          color: white;
        }
        
        .hidden {
          display: none;
        }
        
        .signal-strength {
          color: #10b981;
          font-weight: 600;
        }
      </style>
      
      <div class="jammer-container">
        <div class="header">
          <div class="title">🚫 Bluetooth Jammer</div>
          <div class="subtitle">Flipper Zero Application</div>
        </div>
        
        <div class="frequency-display">
          <div class="frequency-text">2402 - 2480 MHz</div>
        </div>
        
        <div class="control-panel">
          <div class="button-group">
            <button class="button start-btn" id="start-jammer">
              <i data-feather="power"></i> Start Jamming
            </button>
            <button class="button stop-btn" id="stop-jammer" disabled>
              <i data-feather="square"></i> Stop Jamming
            </button>
            <button class="button scan-btn" id="scan-devices">
              <i data-feather="search"></i> Scan Devices
            </button>
          </div>
        </div>
        
        <div class="status-display">
          <div class="status-text">
            Status: <span id="jammer-status" class="inactive">INACTIVE</span>
          </div>
        </div>
        
        <div class="device-list hidden" id="device-list">
          <h3 class="text-lg font-bold mb-2">Detected Bluetooth Devices</h3>
          <div id="devices-container"></div>
        </div>
      </div>
    `;
  }

  setupEventListeners() {
    const startBtn = this.shadowRoot.getElementById('start-jammer');
    const stopBtn = this.shadowRoot.getElementById('stop-jammer');
    const scanBtn = this.shadowRoot.getElementById('scan-devices');
    const statusSpan = this.shadowRoot.getElementById('jammer-status');
    const deviceList = this.shadowRoot.getElementById('device-list');
    const devicesContainer = this.shadowRoot.getElementById('devices-container');

    startBtn.addEventListener('click', () => {
      this.startJamming();
      startBtn.disabled = true;
      stopBtn.disabled = false;
      scanBtn.disabled = true;
      statusSpan.textContent = 'ACTIVE';
      statusSpan.className = 'active';
      deviceList.classList.add('hidden');
    });

    stopBtn.addEventListener('click', () => {
      this.stopJamming();
      startBtn.disabled = false;
      stopBtn.disabled = true;
      scanBtn.disabled = false;
      statusSpan.textContent = 'INACTIVE';
      statusSpan.className = 'inactive';
    });

    scanBtn.addEventListener('click', () => {
      this.scanDevices();
      startBtn.disabled = true;
      stopBtn.disabled = true;
      scanBtn.disabled = true;
    });
  }

  startJamming() {
    this.state.jamming = true;
    this.state.scanning = false;
    console.log('Bluetooth jammer started - disrupting 2402-2480 MHz');
    
    // Simulate jamming effect
    this.simulateJamming();
  }

  stopJamming() {
    this.state.jamming = false;
    console.log('Bluetooth jammer stopped');
  }

  scanDevices() {
    this.state.scanning = true;
    console.log('Scanning for Bluetooth devices...');
    
    // Simulate device discovery
    setTimeout(() => {
      this.state.devices = [
        { name: 'iPhone 13 Pro', signal: -67, mac: 'AA:BB:CC:DD:EE:FF' },
        { name: 'Galaxy S21', signal: -72, mac: '11:22:33:44:55:66' },
        { name: 'AirPods Pro', signal: -58, mac: 'FF:EE:DD:CC:BB:AA' },
        { name: 'Smart Watch', signal: -75, mac: '12:34:56:78:90:AB' },
        { name: 'Wireless Speaker', signal: -81, mac: 'CD:EF:01:23:45:67' }
      ];
      
      this.displayDevices();
      this.state.scanning = false;
      
      // Re-enable buttons
      const startBtn = this.shadowRoot.getElementById('start-jammer');
      const stopBtn = this.shadowRoot.getElementById('stop-jammer');
      const scanBtn = this.shadowRoot.getElementById('scan-devices');
      
      startBtn.disabled = false;
      stopBtn.disabled = true;
      scanBtn.disabled = false;
    }, 3000);
  }

  simulateJamming() {
    if (this.state.jamming) {
      console.log('Jamming Bluetooth frequencies...');
      setTimeout(() => this.simulateJamming(), 1000);
    }
  }

  displayDevices() {
    const deviceList = this.shadowRoot.getElementById('device-list');
    const devicesContainer = this.shadowRoot.getElementById('devices-container');
    
    deviceList.classList.remove('hidden');
    devicesContainer.innerHTML = this.state.devices.map(device => `
      <div class="device-item">
        <div>
          <strong>${device.name}</strong>
          <div style="font-size: 0.75rem; color: #9ca3af;">${device.mac}</div>
        </div>
        <span class="signal-strength">${device.signal} dBm</span>
      </div>
    `).join('');
  }
}

customElements.define('bluetooth-jammer', BluetoothJammer);