// ui.js
import * as state from '../core/state.js';
import { GAME_STATES, CSS_CLASSES, DEFAULT_PLAYER_TIME_SECONDS } from '../config.js';
import audioManager from './audio.js';

// --- DOM Elements ---
export const elements = {
    carousel: document.getElementById('carousel'),
    gameButton: document.getElementById('gameButton'),
    setupButton: document.getElementById('setupButton'),
    addPlayerButton: document.getElementById('addPlayerButton'),
    resetButton: document.getElementById('resetButton'),
    playerModal: document.getElementById('playerModal'),
    resetModal: document.getElementById('resetModal'),
    playerForm: document.getElementById('playerForm'),
    modalTitle: document.getElementById('modalTitle'),
    playerNameInput: document.getElementById('playerName'),
    playerTimeInput: document.getElementById('playerTime'),
    playerImageInput: document.getElementById('playerImage'),
    imagePreview: document.getElementById('imagePreview'),
    playerTimeContainer: document.getElementById('playerTimeContainer'), // Parent of playerTimeInput
    remainingTimeContainer: document.getElementById('remainingTimeContainer'),
    playerRemainingTimeInput: document.getElementById('playerRemainingTime'),
    deletePlayerButton: document.getElementById('deletePlayerButton'),
    cancelButton: document.getElementById('cancelButton'), // Modal cancel
    resetCancelButton: document.getElementById('resetCancelButton'),
    resetConfirmButton: document.getElementById('resetConfirmButton'),
    cameraButton: document.getElementById('cameraButton'),
    // Camera elements needed by camera.js, but listed here for central management if desired
    cameraContainer: document.getElementById('cameraContainer'),
    cameraView: document.getElementById('cameraView'),
    cameraCanvas: document.getElementById('cameraCanvas'),
    cameraCaptureButton: document.getElementById('cameraCaptureButton'),
    cameraCancelButton: document.getElementById('cameraCancelButton'),
    // Header buttons container for sound toggle
    headerButtons: document.querySelector('.header-buttons')
};

let isDragging = false;
let startX = 0;
let currentX = 0;
let carouselSwipeHandler = null; // To store the bound function for removal

// --- Rendering Functions ---

export function renderPlayers() {
    const players = state.getPlayers();
    const currentIndex = state.getCurrentPlayerIndex();
    const currentGameState = state.getGameState();
    elements.carousel.innerHTML = '';

    if (players.length === 0) {
        // Optionally display a message if there are no players
        elements.carousel.innerHTML = '<p style="text-align: center; width: 100%;">Add players to start</p>';
        return;
    }

    players.forEach((player, index) => {
        const card = document.createElement('div');
        const isActive = index === currentIndex;
        card.className = `player-card ${isActive ? CSS_CLASSES.ACTIVE_PLAYER : CSS_CLASSES.INACTIVE_PLAYER}`;

        const minutes = Math.floor(player.remainingTime / 60);
        const seconds = player.remainingTime % 60;
        const timeString = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

        const timerClasses = [];
        if (isActive && currentGameState === GAME_STATES.RUNNING) {
            timerClasses.push(CSS_CLASSES.TIMER_ACTIVE);
        }
        if (player.remainingTime <= 0) {
            timerClasses.push(CSS_CLASSES.TIMER_FINISHED);
        }

        card.innerHTML = `
            <div class="player-image">
                ${player.image ? `<img src="${player.image}" alt="${player.name}">` : '<i class="fas fa-user"></i>'}
            </div>
            <div class="player-name">${player.name}</div>
            <div class="player-timer ${timerClasses.join(' ')}">${timeString}</div>
        `;
        elements.carousel.appendChild(card);
    });

    updateCarouselPosition();
}

export function updateCarouselPosition() {
    const currentIndex = state.getCurrentPlayerIndex();
    elements.carousel.style.transform = `translateX(${-100 * currentIndex}%)`;
}

export function updateGameButton() {
    const currentGameState = state.getGameState();
    switch (currentGameState) {
        case GAME_STATES.SETUP:
            elements.gameButton.textContent = 'Start Game';
            break;
        case GAME_STATES.RUNNING:
            elements.gameButton.textContent = 'Pause Game';
            break;
        case GAME_STATES.PAUSED:
            elements.gameButton.textContent = 'Resume Game';
            break;
        case GAME_STATES.OVER:
            elements.gameButton.textContent = 'Game Over';
            break;
    }
     // Disable button if less than 2 players in setup
    elements.gameButton.disabled = currentGameState === GAME_STATES.SETUP && state.getPlayers().length < 2;
}


// --- Modal Functions ---

export function showPlayerModal(isNewPlayer, player = null) {
    const currentGameState = state.getGameState();
    if (isNewPlayer) {
        elements.modalTitle.textContent = 'Add New Player';
        elements.playerNameInput.value = `Player ${state.getPlayers().length + 1}`;
        elements.playerTimeInput.value = DEFAULT_PLAYER_TIME_SECONDS / 60; // Use default time from config
        elements.remainingTimeContainer.style.display = 'none';
        elements.playerTimeContainer.style.display = 'block'; // Ensure Time field is visible for new players
        elements.imagePreview.innerHTML = '<i class="fas fa-user"></i>';
        elements.deletePlayerButton.style.display = 'none';
    } else if (player) {
        elements.modalTitle.textContent = 'Edit Player';
        elements.playerNameInput.value = player.name;
        elements.playerTimeInput.value = player.timeInSeconds / 60;

        if (currentGameState === GAME_STATES.PAUSED || currentGameState === GAME_STATES.OVER) {
            elements.remainingTimeContainer.style.display = 'block';
            elements.playerTimeContainer.style.display = 'none'; // Hide Time field when Remaining Time is shown
            const minutes = Math.floor(player.remainingTime / 60);
            const seconds = player.remainingTime % 60;
            elements.playerRemainingTimeInput.value = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        } else {
            elements.remainingTimeContainer.style.display = 'none';
            elements.playerTimeContainer.style.display = 'block'; // Ensure Time field is visible otherwise
        }

        elements.imagePreview.innerHTML = player.image ? `<img src="${player.image}" alt="${player.name}">` : '<i class="fas fa-user"></i>';
        elements.deletePlayerButton.style.display = 'block';
    }

    // Reset file input and captured image data
    elements.playerImageInput.value = '';
    elements.playerImageInput.dataset.capturedImage = '';

    elements.playerModal.classList.add(CSS_CLASSES.MODAL_ACTIVE);
    audioManager.play('modalOpen');
}

export function hidePlayerModal() {
    elements.playerModal.classList.remove(CSS_CLASSES.MODAL_ACTIVE);
    audioManager.play('modalClose');
    // Potentially call camera cleanup here if it wasn't done elsewhere
}

export function showResetModal() {
    elements.resetModal.classList.add(CSS_CLASSES.MODAL_ACTIVE);
    audioManager.play('modalOpen');
}

export function hideResetModal() {
    elements.resetModal.classList.remove(CSS_CLASSES.MODAL_ACTIVE);
    audioManager.play('modalClose');
}

export function updateImagePreviewFromFile(file) {
    if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
            elements.imagePreview.innerHTML = `<img src="${event.target.result}" alt="Player Preview">`;
            // Clear any previously captured image data if a file is selected
            elements.playerImageInput.dataset.capturedImage = '';
        };
        reader.readAsDataURL(file);
    }
}

export function updateImagePreviewFromDataUrl(dataUrl) {
     elements.imagePreview.innerHTML = `<img src="${dataUrl}" alt="Player Preview">`;
     // Store data URL and clear file input
     elements.playerImageInput.dataset.capturedImage = dataUrl;
     elements.playerImageInput.value = '';
}


// --- Carousel Touch Handling ---

function handleTouchStart(e) {
    startX = e.touches[0].clientX;
    currentX = startX;
    isDragging = true;
    // Optional: Add a class to the carousel for visual feedback during drag
    elements.carousel.style.transition = 'none'; // Disable transition during drag
}

function handleTouchMove(e) {
    if (!isDragging) return;

    currentX = e.touches[0].clientX;
    const diff = currentX - startX;
    const currentIndex = state.getCurrentPlayerIndex();
    const currentTranslate = -100 * currentIndex + (diff / elements.carousel.offsetWidth * 100);

    elements.carousel.style.transform = `translateX(${currentTranslate}%)`;
}

function handleTouchEnd(e) {
    if (!isDragging) return;

    isDragging = false;
    elements.carousel.style.transition = ''; // Re-enable transition

    const diff = currentX - startX;
    const threshold = elements.carousel.offsetWidth * 0.1; // 10% swipe threshold

    if (Math.abs(diff) > threshold) {
        // Call the handler passed during initialization
        if (carouselSwipeHandler) {
            carouselSwipeHandler(diff < 0 ? 1 : -1); // Pass direction: 1 for next, -1 for prev
        }
    } else {
        // Snap back if swipe wasn't enough
        updateCarouselPosition();
    }
}

// --- UI Initialization ---

// Add sound toggle button
function createSoundToggleButton() {
    const soundButton = document.createElement('button');
    soundButton.id = 'soundToggleButton';
    soundButton.className = 'header-button';
    soundButton.title = 'Toggle Sound';
    soundButton.innerHTML = audioManager.muted ? '<i class="fas fa-volume-mute"></i>' : '<i class="fas fa-volume-up"></i>';

    soundButton.addEventListener('click', () => {
        const isMuted = audioManager.toggleMute();
        soundButton.innerHTML = isMuted ? '<i class="fas fa-volume-mute"></i>' : '<i class="fas fa-volume-up"></i>';
        if (!isMuted) audioManager.play('buttonClick'); // Feedback only when unmuting
    });

    elements.headerButtons.prepend(soundButton); // Add to the beginning
}

// Parse time string (MM:SS) to seconds - Helper needed for form processing
export function parseTimeString(timeString) {
    if (!/^\d{1,2}:\d{2}$/.test(timeString)) {
        console.error('Invalid time format:', timeString);
        return null; // Indicate error
    }
    const parts = timeString.split(':');
    const minutes = parseInt(parts[0], 10);
    const seconds = parseInt(parts[1], 10);
     if (isNaN(minutes) || isNaN(seconds) || seconds > 59) {
         console.error('Invalid time value:', timeString);
         return null;
     }
    return (minutes * 60) + seconds;
}

// Sets up basic UI elements and listeners that primarily affect the UI itself
export function initUI(options) {
    // Store the swipe handler provided by app.js
    carouselSwipeHandler = options.onCarouselSwipe;

    createSoundToggleButton();

    // Carousel touch events
    elements.carousel.addEventListener('touchstart', handleTouchStart, { passive: true });
    elements.carousel.addEventListener('touchmove', handleTouchMove, { passive: true });
    elements.carousel.addEventListener('touchend', handleTouchEnd);

    // Image file input preview
    elements.playerImageInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            updateImagePreviewFromFile(file);
        }
    });

    // Initial render
    renderPlayers();
    updateGameButton();
}