class ChatDockWidget {
  constructor() {
    this.ws = null;
    this.messagesContainer = document.getElementById('chat-messages');
    this.messageInput = document.getElementById('message-input');
    this.sendButton = document.getElementById('send-button');
    this.charCount = document.getElementById('char-count');
    this.statusDot = document.querySelector('.status-dot');
    this.statusText = document.querySelector('.status-text');
    this.maxMessages = 100;
    this.autoScroll = true;
    this.reconnectAttempts = 0;
    this.maxReconnectAttempts = 10;

    // Current platform filter (all, twitch, youtube)
    this.currentFilter = 'all';
    // Platform to send messages to (twitch or youtube)
    this.sendPlatform = 'twitch';

    this.platformIcons = {
      twitch: `<svg width="20" height="20" viewBox="0 0 24 24" fill="#9146FF"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>`,
      youtube: `<svg width="20" height="20" viewBox="0 0 24 24" fill="#FF0000"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>`,
    };

    // Apply settings from URL query params
    const urlParams = new URLSearchParams(window.location.search);
    
    // Theme: dark (default), light
    const theme = urlParams.get('theme');
    if (theme === 'light') {
      document.body.classList.add('theme-light');
    } else {
      document.body.classList.add('theme-dark');
    }

    // Direction: 'down' = newest at bottom (default), 'up' = newest at top
    this.direction = urlParams.get('direction') || 'down';
    if (this.direction === 'up') {
      document.body.classList.add('direction-up');
    }

    // Font size: small, medium (default), large, xlarge
    this.fontSize = urlParams.get('fontsize') || 'medium';
    document.body.classList.add(`font-${this.fontSize}`);

    // Emote resolution based on font size
    this.emoteScale = (this.fontSize === 'medium' || this.fontSize === 'large' || this.fontSize === 'xlarge') ? 2 : 1;

    // Hide timestamp option
    const hideTime = urlParams.get('hidetime');
    if (hideTime === 'true' || hideTime === '1') {
      document.body.classList.add('hide-time');
    }

    this.init();
  }

  init() {
    this.setupEventListeners();
    this.connect();
    this.updateSendPlatformIndicator();
    this.checkAuthStatus();

    // Handle scroll to detect manual scrolling
    this.messagesContainer.addEventListener('scroll', () => {
      const container = this.messagesContainer;
      const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 50;
      this.autoScroll = isAtBottom;
    });
  }

  setupEventListeners() {
    // Tab switching
    document.querySelectorAll('.tab').forEach(tab => {
      tab.addEventListener('click', () => this.switchTab(tab.dataset.platform));
    });

    // Message input
    this.messageInput.addEventListener('input', () => {
      this.charCount.textContent = this.messageInput.value.length;
    });

    this.messageInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        this.sendMessage();
      }
    });

    // Send button
    this.sendButton.addEventListener('click', () => this.sendMessage());

    // Platform indicator click to switch send platform
    document.getElementById('send-platform-indicator').addEventListener('click', () => {
      this.toggleSendPlatform();
    });

    // Reconnect button
    document.getElementById('reconnect-btn').addEventListener('click', () => {
      this.reconnectChat();
    });
  }

  switchTab(platform) {
    this.currentFilter = platform;
    
    // Update tab UI
    document.querySelectorAll('.tab').forEach(tab => {
      tab.classList.toggle('active', tab.dataset.platform === platform);
    });

    // Filter messages
    this.filterMessages();

    // Update send target based on selected tab
    this.sendPlatform = platform; // Can be 'all', 'twitch', or 'youtube'
    this.updateSendPlatformIndicator();
  }

  filterMessages() {
    const messages = this.messagesContainer.querySelectorAll('.chat-message');
    messages.forEach(msg => {
      if (this.currentFilter === 'all') {
        msg.style.display = '';
      } else {
        const msgPlatform = msg.classList.contains('twitch') ? 'twitch' : 'youtube';
        msg.style.display = msgPlatform === this.currentFilter ? '' : 'none';
      }
    });
  }

  toggleSendPlatform() {
    // Cycle through: all -> twitch -> youtube -> all
    if (this.sendPlatform === 'all') {
      this.sendPlatform = 'twitch';
    } else if (this.sendPlatform === 'twitch') {
      this.sendPlatform = 'youtube';
    } else {
      this.sendPlatform = 'all';
    }
    this.updateSendPlatformIndicator();
  }

  updateSendPlatformIndicator() {
    const iconEl = document.getElementById('send-platform-icon');
    const nameEl = document.getElementById('send-platform-name');
    const indicator = document.getElementById('send-platform-indicator');
    
    if (this.sendPlatform === 'all') {
      // Show both icons for "all"
      iconEl.innerHTML = `
        <span class="dual-icons">
          ${this.platformIcons.twitch}
          ${this.platformIcons.youtube}
        </span>
      `;
      nameEl.textContent = 'All';
      indicator.className = 'all';
    } else {
      iconEl.innerHTML = this.platformIcons[this.sendPlatform];
      nameEl.textContent = this.sendPlatform === 'twitch' ? 'Twitch' : 'YouTube';
      indicator.className = this.sendPlatform;
    }
  }

  connect() {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsUrl = `${protocol}//${window.location.host}/ws`;

    this.ws = new WebSocket(wsUrl);

    this.ws.onopen = () => {
      console.log('Chat WebSocket connected');
      this.reconnectAttempts = 0;
      this.setStatus('connected', 'Connected');
    };

    this.ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        this.handleMessage(data);
      } catch (err) {
        console.error('Failed to parse message:', err);
      }
    };

    this.ws.onerror = (error) => {
      console.error('WebSocket error:', error);
      this.setStatus('error', 'Connection error');
    };

    this.ws.onclose = () => {
      console.log('Chat WebSocket disconnected');
      this.setStatus('disconnected', 'Disconnected');
      this.reconnect();
    };
  }

  reconnect() {
    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
      this.setStatus('error', 'Failed to connect');
      return;
    }

    this.reconnectAttempts++;
    const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
    this.setStatus('connecting', 'Reconnecting...');

    setTimeout(() => {
      console.log(`Reconnecting... (attempt ${this.reconnectAttempts})`);
      this.connect();
    }, delay);
  }

  setStatus(state, text) {
    this.statusDot.className = 'status-dot ' + state;
    this.statusText.textContent = text;
  }

  handleMessage(data) {
    switch (data.type) {
      case 'chat_message':
        this.addChatMessage(data.data);
        break;
      case 'chat_history':
        if (data.data && Array.isArray(data.data)) {
          // For both directions, add messages in order
          data.data.forEach(msg => this.addChatMessage(msg, false));
          
          if (this.direction === 'down') {
            this.scrollToBottom();
          }
        }
        break;
      case 'send_result':
        // Handle send message result
        if (data.success) {
          this.messageInput.value = '';
          this.charCount.textContent = '0';
        } else {
          this.showSendError(data.error || 'Failed to send message');
        }
        break;
      default:
        break;
    }
  }

  addChatMessage(messageData, shouldAnimate = true) {
    const msgElement = this.createMessageElement(messageData);

    if (!shouldAnimate) {
      msgElement.style.animation = 'none';
    }

    // Apply filter
    if (this.currentFilter !== 'all') {
      const msgPlatform = messageData.platform;
      if (msgPlatform !== this.currentFilter) {
        msgElement.style.display = 'none';
      }
    }

    if (this.direction === 'up') {
      // Direction UP: newest at bottom (anchored), older messages bubble upward
      this.messagesContainer.insertBefore(msgElement, this.messagesContainer.firstChild);
      
      // Limit total messages (remove oldest = last child)
      while (this.messagesContainer.children.length > this.maxMessages) {
        this.messagesContainer.removeChild(this.messagesContainer.lastChild);
      }
    } else {
      // Direction DOWN (default): newest at bottom, scroll down
      this.messagesContainer.appendChild(msgElement);

      // Limit total messages (remove oldest = first child)
      while (this.messagesContainer.children.length > this.maxMessages) {
        this.messagesContainer.removeChild(this.messagesContainer.firstChild);
      }

      if (this.autoScroll) {
        this.scrollToBottom();
      }
    }
  }

  createMessageElement(data) {
    const msg = document.createElement('div');
    msg.className = `chat-message ${data.platform}`;
    msg.dataset.messageId = data.id;

    if (data.is_action) {
      msg.classList.add('action');
    }

    // Platform icon
    if (data.platform) {
      const iconDiv = document.createElement('div');
      iconDiv.className = 'platform-icon';
      iconDiv.innerHTML = this.platformIcons[data.platform] || '';
      msg.appendChild(iconDiv);
    }

    // Message content
    const content = document.createElement('div');
    content.className = 'message-content';

    // User info line
    const userInfo = document.createElement('div');
    userInfo.className = 'user-info';

    // Badges
    if (data.user.badges && data.user.badges.length > 0) {
      const badgesContainer = document.createElement('div');
      badgesContainer.className = 'user-badges';

      data.user.badges.forEach(badge => {
        const badgeEl = document.createElement('span');
        badgeEl.className = 'badge';
        badgeEl.title = badge.name;
        if (badge.icon_url) {
          badgeEl.innerHTML = `<img src="${badge.icon_url}" alt="${badge.name}">`;
        } else {
          badgeEl.textContent = badge.name.charAt(0).toUpperCase();
        }
        badgesContainer.appendChild(badgeEl);
      });

      userInfo.appendChild(badgesContainer);
    }

    // Username
    const username = document.createElement('span');
    username.className = 'username';
    username.textContent = data.user.display_name;
    if (data.user.color) {
      username.style.color = data.user.color;
    }
    userInfo.appendChild(username);

    // Timestamp
    const timestamp = document.createElement('span');
    timestamp.className = 'timestamp';
    timestamp.textContent = this.formatTime(data.timestamp);
    userInfo.appendChild(timestamp);

    content.appendChild(userInfo);

    // Message text with emotes
    const messageText = document.createElement('div');
    messageText.className = 'message-text';
    messageText.innerHTML = this.parseMessageWithEmotes(data.message, data.emotes);
    content.appendChild(messageText);

    msg.appendChild(content);

    return msg;
  }

  getEmoteUrl(emote) {
    if (!emote.emote_id) {
      return emote.url;
    }

    const scale = this.emoteScale;
    const provider = emote.provider;

    switch (provider) {
      case 'twitch':
        return `https://static-cdn.jtvnw.net/emoticons/v2/${emote.emote_id}/default/dark/${scale}.0`;
      case 'bttv':
        return `https://cdn.betterttv.net/emote/${emote.emote_id}/${scale}x`;
      case 'ffz':
        const ffzScale = scale === 2 ? 2 : 1;
        return emote.url.replace(/\/[124]$/, `/${ffzScale}`);
      case '7tv':
        return emote.url.replace(/\/[123]x\.webp$/, `/${scale}x.webp`);
      default:
        return emote.url;
    }
  }

  parseMessageWithEmotes(message, emotes) {
    if (!emotes || emotes.length === 0) {
      return this.escapeHtml(message);
    }

    const emoteMap = {};
    emotes.forEach(emote => {
      emoteMap[emote.code] = emote;
    });

    const words = message.split(' ');
    const result = words.map(word => {
      if (emoteMap[word]) {
        const emote = emoteMap[word];
        const animatedClass = emote.is_animated ? 'animated' : '';
        const url = this.getEmoteUrl(emote);
        return `<img class="emote ${animatedClass}" src="${url}" alt="${emote.code}" title="${emote.code} (${emote.provider})">`;
      }
      return this.escapeHtml(word);
    });

    return result.join(' ');
  }

  escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  formatTime(timestamp) {
    const date = new Date(timestamp);
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
  }

  scrollToBottom() {
    this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
  }

  async sendMessage() {
    const message = this.messageInput.value.trim();
    if (!message) return;

    // Disable input while sending
    this.messageInput.disabled = true;
    this.sendButton.disabled = true;

    try {
      const response = await fetch('/api/chat/send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          platform: this.sendPlatform,
          message: message,
        }),
      });

      const result = await response.json();

      if (result.success) {
        this.messageInput.value = '';
        this.charCount.textContent = '0';
      } else {
        this.showSendError(result.error || 'Failed to send message');
      }
    } catch (error) {
      console.error('Send error:', error);
      this.showSendError('Network error');
    } finally {
      this.messageInput.disabled = false;
      this.sendButton.disabled = false;
      this.messageInput.focus();
    }
  }

  showSendError(error) {
    // Create error toast
    const toast = document.createElement('div');
    toast.className = 'error-toast';
    toast.textContent = error;
    document.body.appendChild(toast);

    // Remove after 3 seconds
    setTimeout(() => {
      toast.classList.add('fade-out');
      setTimeout(() => toast.remove(), 300);
    }, 3000);
  }

  async checkAuthStatus() {
    const statusEl = document.getElementById('auth-status-text');
    const statusContainer = document.getElementById('auth-status');
    
    try {
      const response = await fetch('/api/auth/status');
      const data = await response.json();
      
      const twitchAuth = data.twitch_authenticated;
      const youtubeAuth = data.youtube_authenticated;
      
      if (twitchAuth && youtubeAuth) {
        statusEl.textContent = 'Both authenticated';
        statusContainer.className = 'authenticated';
      } else if (twitchAuth) {
        statusEl.textContent = 'Twitch only';
        statusContainer.className = 'authenticated';
      } else if (youtubeAuth) {
        statusEl.textContent = 'YouTube only';
        statusContainer.className = 'authenticated';
      } else {
        statusEl.textContent = 'Not authenticated';
        statusContainer.className = 'not-authenticated';
      }
    } catch (error) {
      console.error('Failed to check auth status:', error);
      statusEl.textContent = 'Unknown';
      statusContainer.className = '';
    }
  }

  async reconnectChat() {
    const btn = document.getElementById('reconnect-btn');
    const statusEl = document.getElementById('auth-status-text');
    
    btn.disabled = true;
    btn.classList.add('spinning');
    statusEl.textContent = 'Reconnecting...';
    
    try {
      const response = await fetch('/api/chat/reconnect', {
        method: 'POST',
      });
      const data = await response.json();
      
      if (data.success) {
        this.showToast('Chat reconnected!', 'success');
        // Re-check auth status
        await this.checkAuthStatus();
      } else {
        this.showToast(data.error || 'Failed to reconnect', 'error');
      }
    } catch (error) {
      console.error('Reconnect error:', error);
      this.showToast('Network error', 'error');
    } finally {
      btn.disabled = false;
      btn.classList.remove('spinning');
      await this.checkAuthStatus();
    }
  }

  showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.textContent = message;
    document.body.appendChild(toast);

    setTimeout(() => {
      toast.classList.add('fade-out');
      setTimeout(() => toast.remove(), 300);
    }, 3000);
  }
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  new ChatDockWidget();
});