// 1. Initialize Supabase (Replace with your actual keys from the Supabase dashboard)
const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY';
const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);

// UI Elements
const connectBtn = document.getElementById('connect-btn');
const statusText = document.getElementById('connection-status');
const lobbyScreen = document.getElementById('lobby-screen');
const tableContainer = document.getElementById('poker-table-container');
const actionLog = document.getElementById('multiplayer-log');

// Game Action Buttons
const foldBtn = document.getElementById('fold-button');
const callBtn = document.getElementById('call-button');
const raiseBtn = document.getElementById('raise-button');

let gameChannel;
let playerId;

// 2. Handle Anonymous Login
connectBtn.addEventListener('click', async () => {
    statusText.textContent = "Connecting...";
    connectBtn.disabled = true;

    const { data, error } = await supabaseClient.auth.signInAnonymously();
    
    if (error) {
        statusText.textContent = "Connection failed: " + error.message;
        connectBtn.disabled = false;
        return;
    }

    playerId = data.user.id.substring(0, 6); // Use the first 6 characters as a quick ID
    setupMultiplayer();
});

// 3. Setup Realtime Channel
function setupMultiplayer() {
    // Hide lobby, show table
    lobbyScreen.style.display = 'none';
    tableContainer.style.display = 'block';

    // Create a shared channel for the poker table
    gameChannel = supabaseClient.channel('poker_table_1');

    // Listen for actions from other players
    gameChannel.on('broadcast', { event: 'player_action' }, (payload) => {
        logAction(payload.payload.player, payload.payload.action);
    });

    // Subscribe to the channel
    gameChannel.subscribe((status) => {
        if (status === 'SUBSCRIBED') {
            logAction('System', `You joined as Player_${playerId}`);
        }
    });
}

// 4. Send Game Actions
function broadcastAction(actionType) {
    if (!gameChannel) return;

    // Send the action to everyone else
    gameChannel.send({
        type: 'broadcast',
        event: 'player_action',
        payload: {
            player: `Player_${playerId}`,
            action: actionType
        }
    });

    // Show it on our own screen immediately
    logAction('You', actionType);
}

// 5. Utility to update the text log
function logAction(player, action) {
    const time = new Date().toLocaleTimeString();
    const message = `<div>[${time}] <strong>${player}</strong>: ${action}</div>`;
    actionLog.innerHTML += message;
    actionLog.scrollTop = actionLog.scrollHeight; // Auto-scroll to bottom
}

// 6. Wire up the buttons
foldBtn.addEventListener('click', () => broadcastAction('Folded'));
callBtn.addEventListener('click', () => broadcastAction('Called'));
raiseBtn.addEventListener('click', () => broadcastAction('Raised'));