renderer.js

// renderer.js - UI logic for the Electron app and web app

let selectedGuildId = null;
let selectedChannelId = null;
let currentBotId = null;

// Check if running in Electron or web
const isElectron = typeof window.electronAPI !== 'undefined';

// API wrapper for Electron and web
const api = {
  async getGuilds() {
    if (isElectron) {
      return window.electronAPI.getGuilds();
    } else {
      const response = await fetch('/api/guilds');
      return response.json();
    }
  },

  async getChannels(guildId) {
    if (isElectron) {
      return window.electronAPI.getChannels(guildId);
    } else {
      const response = await fetch(`/api/channels/${guildId}`);
      return response.json();
    }
  },

  async sendMessage(channelId, message) {
    if (isElectron) {
      return window.electronAPI.sendMessage(channelId, message);
    } else {
      const response = await fetch('/api/send-message', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ channelId, message })
      });
      const result = await response.json();
      return result.success;
    }
  },

  async getLogs() {
    if (isElectron) {
      return window.electronAPI.getLogs();
    } else {
      const response = await fetch('/api/logs');
      return response.json();
    }
  },

  async getBots() {
    if (isElectron) {
      return window.electronAPI.getBots();
    } else {
      const response = await fetch('/api/bots');
      return response.json();
    }
  },

  async switchBot(botId) {
    if (isElectron) {
      return window.electronAPI.switchBot(botId);
    } else {
      const response = await fetch('/api/switch-bot', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ botId })
      });
      return response.json();
    }
  },

  async reconnectBot() {
    if (isElectron) {
      return window.electronAPI.reconnectBot();
    } else {
      const response = await fetch('/api/reconnect', { method: 'POST' });
      return response.json();
    }
  },

  async saveBotConfig(token, name) {
    if (isElectron) {
      return window.electronAPI.saveBotConfig(token, name);
    } else {
      const response = await fetch('/api/save-bot-config', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token, name })
      });
      return response.json();
    }
  },

  async getStoredTokens() {
    if (isElectron) {
      return window.electronAPI.getStoredTokens();
    } else {
      const response = await fetch('/api/stored-tokens');
      return response.json();
    }
  },

  async clearAllData() {
    if (isElectron) {
      return window.electronAPI.clearAllData();
    } else {
      const response = await fetch('/api/clear-data', { method: 'POST' });
      return response.json();
    }
  },

  async startDiscordOAuth() {
    if (isElectron) {
      return window.electronAPI.startDiscordOAuth();
    } else {
      const response = await fetch('/api/oauth/start');
      const data = await response.json();
      // Open OAuth URL in popup or new window
      window.open(data.url, 'discord-oauth', 'width=500,height=700');
    }
  },

  async getOAuthStatus() {
    if (isElectron) {
      // For Electron, we'll implement this later
      return { authenticated: false, user: null };
    } else {
      const response = await fetch('/api/oauth/status');
      return response.json();
    }
  },

  async logoutOAuth() {
    if (isElectron) {
      // For Electron, we'll implement this later
      return true;
    } else {
      const response = await fetch('/api/oauth/logout', { method: 'POST' });
      return response.json();
    }
  }
};

// DOM elements
const botSelect = document.getElementById('bot-select');
const reconnectBtn = document.getElementById('reconnect-btn');
const guildsContainer = document.getElementById('guilds');
const channelsContainer = document.getElementById('channels');
const messageInput = document.getElementById('message-input');
const sendBtn = document.getElementById('send-btn');
const chatMessages = document.getElementById('chat-messages');
const logsContainer = document.getElementById('logs');

// Settings modal elements
const settingsBtn = document.getElementById('settings-btn');
const settingsModal = document.getElementById('settings-modal');
const closeSettings = document.getElementById('close-settings');
const botTokenInput = document.getElementById('bot-token');
const botNameInput = document.getElementById('bot-name');
const saveBotConfigBtn = document.getElementById('save-bot-config');
const discordOauthBtn = document.getElementById('discord-oauth-btn');
const oauthStatus = document.getElementById('oauth-status');
const oauthText = document.getElementById('oauth-text');
const clearDataBtn = document.getElementById('clear-data-btn');

// Initialize the app
async function init() {
    await loadBots();
    await loadGuilds();
    startLogUpdates();
}

// Load available bots
async function loadBots() {
    try {
        const bots = await api.getBots();
        botSelect.innerHTML = '<option value="">Select Bot</option>';
        bots.forEach(bot => {
            const option = document.createElement('option');
            option.value = bot.id;
            option.textContent = bot.name;
            botSelect.appendChild(option);
        });
    } catch (error) {
        console.error('Error loading bots:', error);
    }
}

// Load guilds (servers)
async function loadGuilds() {
    try {
        const guilds = await api.getGuilds();
        guildsContainer.innerHTML = '';
        guilds.forEach(guild => {
            const guildElement = document.createElement('div');
            guildElement.className = 'guild-item';
            guildElement.textContent = guild.name;
            guildElement.dataset.guildId = guild.id;
            guildElement.addEventListener('click', () => selectGuild(guild.id));
            guildsContainer.appendChild(guildElement);
        });
    } catch (error) {
        console.error('Error loading guilds:', error);
    }
}

// Select a guild and load its channels
async function selectGuild(guildId) {
    selectedGuildId = guildId;
    selectedChannelId = null;

    // Update UI
    document.querySelectorAll('.guild-item').forEach(item => {
        item.classList.remove('selected');
    });
    document.querySelector(`[data-guild-id="${guildId}"]`).classList.add('selected');

    // Load channels
    try {
        const channels = await api.getChannels(guildId);
        channelsContainer.innerHTML = '';
        channels.forEach(channel => {
            const channelElement = document.createElement('div');
            channelElement.className = 'channel-item';
            channelElement.textContent = `#${channel.name}`;
            channelElement.dataset.channelId = channel.id;
            channelElement.addEventListener('click', () => selectChannel(channel.id));
            channelsContainer.appendChild(channelElement);
        });
    } catch (error) {
        console.error('Error loading channels:', error);
    }
}

// Select a channel
function selectChannel(channelId) {
    selectedChannelId = channelId;

    // Update UI
    document.querySelectorAll('.channel-item').forEach(item => {
        item.classList.remove('selected');
    });
    document.querySelector(`[data-channel-id="${channelId}"]`).classList.add('selected');

    // Clear chat messages and show channel selected
    chatMessages.innerHTML = `
        <div class="welcome-message">
            <p>Channel selected! You can now send messages.</p>
        </div>
    `;
}

// Send a message
async function sendMessage() {
    const message = messageInput.value.trim();
    if (!message || !selectedChannelId) return;

    try {
        const success = await api.sendMessage(selectedChannelId, message);
        if (success) {
            messageInput.value = '';
            // Add message to chat (optional, since bot events will be logged)
            addChatMessage('You', message);
        }
    } catch (error) {
        console.error('Error sending message:', error);
    }
}

// Add a message to the chat display
function addChatMessage(author, content) {
    const messageElement = document.createElement('div');
    messageElement.className = 'chat-message';
    messageElement.innerHTML = `
        <strong>${author}:</strong> ${content}
    `;
    chatMessages.appendChild(messageElement);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

// Update logs display
async function updateLogs() {
    try {
        const logs = await api.getLogs();
        logsContainer.innerHTML = '';
        logs.forEach(log => {
            const logElement = document.createElement('div');
            logElement.className = 'log-entry';
            if (log.includes('error') || log.includes('Error')) {
                logElement.classList.add('error');
            } else if (log.includes('ready') || log.includes('sent')) {
                logElement.classList.add('success');
            }
            logElement.textContent = log;
            logsContainer.appendChild(logElement);
        });
        logsContainer.scrollTop = logsContainer.scrollHeight;
    } catch (error) {
        console.error('Error updating logs:', error);
    }
}

// Start periodic log updates
function startLogUpdates() {
    updateLogs();
    setInterval(updateLogs, 1000); // Update every second
}

// Event listeners
botSelect.addEventListener('change', async (e) => {
    const botId = e.target.value;
    if (botId) {
        currentBotId = botId;
        await api.switchBot(botId);
        await loadGuilds();
    }
});

reconnectBtn.addEventListener('click', async () => {
    await api.reconnectBot();
});

sendBtn.addEventListener('click', sendMessage);

messageInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

// Register service worker for PWA
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('public/sw.js')
            .then(registration => {
                console.log('ServiceWorker registered');
            })
            .catch(error => {
                console.log('ServiceWorker registration failed');
            });
    });
}

// Settings modal functions
function openSettingsModal() {
    settingsModal.classList.add('show');
    loadStoredTokens();
    checkOAuthStatus();
}

function closeSettingsModal() {
    settingsModal.classList.remove('show');
}

async function loadStoredTokens() {
    try {
        const tokens = await api.getStoredTokens();
        // Populate the form with stored data (but don't show the token)
        if (tokens.length > 0) {
            const latestToken = tokens[tokens.length - 1];
            botNameInput.value = latestToken.name || '';
            // Don't populate token input for security
        }
    } catch (error) {
        console.error('Error loading stored tokens:', error);
    }
}

async function saveBotConfig() {
    const token = botTokenInput.value.trim();
    const name = botNameInput.value.trim() || 'My Bot';

    if (!token) {
        alert('Please enter a bot token');
        return;
    }

    try {
        const success = await api.saveBotConfig(token, name);
        if (success) {
            alert('Bot configuration saved successfully!');
            botTokenInput.value = '';
            botNameInput.value = '';
            closeSettingsModal();
            await loadBots(); // Refresh bot list
        } else {
            alert('Failed to save bot configuration');
        }
    } catch (error) {
        console.error('Error saving bot config:', error);
        alert('Error saving bot configuration');
    }
}

async function startDiscordOAuth() {
    try {
        await api.startDiscordOAuth();
        // For web version, this will redirect
    } catch (error) {
        console.error('Error starting OAuth:', error);
    }
}

async function checkOAuthStatus() {
    try {
        const status = await api.getOAuthStatus();
        const oauthUserInfo = document.getElementById('oauth-user-info');
        const userName = document.getElementById('user-name');
        const logoutBtn = document.getElementById('logout-oauth-btn');

        if (status.authenticated && status.user) {
            oauthStatus.classList.add('connected');
            oauthText.textContent = 'Connected to Discord';
            userName.textContent = `${status.user.username}#${status.user.discriminator}`;
            oauthUserInfo.style.display = 'block';
            logoutBtn.style.display = 'inline-block';
        } else {
            oauthStatus.classList.remove('connected');
            oauthText.textContent = 'Not connected';
            oauthUserInfo.style.display = 'none';
            logoutBtn.style.display = 'none';
        }
    } catch (error) {
        console.error('Error checking OAuth status:', error);
        oauthStatus.classList.remove('connected');
        oauthText.textContent = 'Not connected';
        document.getElementById('oauth-user-info').style.display = 'none';
    }
}

async function logoutOAuth() {
    try {
        await api.logoutOAuth();
        await checkOAuthStatus();
    } catch (error) {
        console.error('Error logging out:', error);
    }
}

// Settings modal event listeners
settingsBtn.addEventListener('click', openSettingsModal);
closeSettings.addEventListener('click', closeSettingsModal);
settingsModal.addEventListener('click', (e) => {
    if (e.target === settingsModal) {
        closeSettingsModal();
    }
});

saveBotConfigBtn.addEventListener('click', saveBotConfig);
discordOauthBtn.addEventListener('click', startDiscordOAuth);
clearDataBtn.addEventListener('click', clearAllData);

// OAuth logout button
const logoutOauthBtn = document.getElementById('logout-oauth-btn');
if (logoutOauthBtn) {
    logoutOauthBtn.addEventListener('click', logoutOAuth);
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', init);