<script lang="ts">
    import { createEventDispatcher } from 'svelte';

    // Props
    export let playerPfp: string;
    export let playerName: string;
    export let playerPlatformId: string;
    export let isVisible: boolean = false;

    // Enum definition (matching your TypeScript enum)
    enum Command_ModifyGameplay_Modifier {
        InvertColors = 0,
        InvertHandedness = 1,
        DisableBlueNotes = 2,
        DisableRedNotes = 3
    }

    // Event dispatcher
    const dispatch = createEventDispatcher();

    // Local state for toggles (all start as false/off)
    let invertColors = false;
    let invertHandedness = false;
    let disableBlueNotes = false;
    let disableRedNotes = false;

    // Calculate bitwise modifiers
    function calculateModifiers(): number {
        let modifiers = 0;
        if (invertColors) modifiers |= (1 << Command_ModifyGameplay_Modifier.InvertColors);
        if (invertHandedness) modifiers |= (1 << Command_ModifyGameplay_Modifier.InvertHandedness);
        if (disableBlueNotes) modifiers |= (1 << Command_ModifyGameplay_Modifier.DisableBlueNotes);
        if (disableRedNotes) modifiers |= (1 << Command_ModifyGameplay_Modifier.DisableRedNotes);
        return modifiers;
    }

    // Handle apply modifiers
    function handleApply() {
        const modifiers = calculateModifiers();
        dispatch('sendModifyGameplay', {
            platformId: playerPlatformId,
            modifiers: modifiers
        });
        isVisible = false;
    }

    // Handle cancel/close
    function handleClose() {
        isVisible = false;
    }

    // Handle backdrop click
    function handleBackdropClick(event: MouseEvent) {
        if (event.target === event.currentTarget) {
            handleClose();
        }
    }

    // Handle escape key
    function handleKeydown(event: KeyboardEvent) {
        if (event.key === 'Escape') {
            handleClose();
        }
    }
</script>

<svelte:window on:keydown={handleKeydown} />

{#if isVisible}
    <!-- Backdrop -->
    <div 
        class="popup-backdrop" 
        on:click={handleBackdropClick}
        on:keydown={handleKeydown}
        role="button"
        tabindex="-1"
    >
        <!-- Popup Container -->
        <div class="popup-container">
            <!-- Header -->
            <div class="popup-header">
                <button class="close-button" on:click={handleClose} aria-label="Close">
                    <span class="material-icons">close</span>
                </button>
                <h2>Modify Gameplay</h2>
            </div>

            <!-- Player Info -->
            <div class="player-info">
                <img src={playerPfp} alt={playerName} class="player-avatar" />
                <div class="player-details">
                    <div class="player-name">{playerName}</div>
                    <div class="player-id">ID: {playerPlatformId}</div>
                </div>
            </div>

            <!-- Modifiers Section -->
            <div class="modifiers-section">
                <h3>Gameplay Modifiers</h3>
                
                <!-- Invert Colors Toggle -->
                <div class="modifier-item">
                    <div class="modifier-info">
                        <span class="material-icons modifier-icon">palette</span>
                        <div class="modifier-text">
                            <div class="modifier-title">Invert Colors</div>
                            <div class="modifier-description">Swap red and blue colors</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" bind:checked={invertColors} />
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <!-- Invert Handedness Toggle -->
                <div class="modifier-item">
                    <div class="modifier-info">
                        <span class="material-icons modifier-icon">swap_horiz</span>
                        <div class="modifier-text">
                            <div class="modifier-title">Invert Hands</div>
                            <div class="modifier-description">Swap left and right hand controls</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" bind:checked={invertHandedness} />
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <!-- Disable Blue Notes Toggle -->
                <div class="modifier-item">
                    <div class="modifier-info">
                        <span class="material-icons modifier-icon" style="color: #4285f4;">block</span>
                        <div class="modifier-text">
                            <div class="modifier-title">Disable Blue (Right) Notes</div>
                            <div class="modifier-description">Only red (left) notes will appear</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" bind:checked={disableBlueNotes} />
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <!-- Disable Red Notes Toggle -->
                <div class="modifier-item">
                    <div class="modifier-info">
                        <span class="material-icons modifier-icon" style="color: #ea4335;">block</span>
                        <div class="modifier-text">
                            <div class="modifier-title">Disable Red (Left) Notes</div>
                            <div class="modifier-description">Only blue (right) notes will appear</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" bind:checked={disableRedNotes} />
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="action-buttons">
                <button class="cancel-button" on:click={handleClose}>
                    <span class="material-icons">cancel</span>
                    Cancel
                </button>
                <button class="apply-button" on:click={handleApply}>
                    <span class="material-icons">check_circle</span>
                    Apply Modifiers
                </button>
            </div>
        </div>
    </div>
{/if}

<style>
    .popup-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        backdrop-filter: blur(4px);
    }

    .popup-container {
        background-color: #1a1a1a;
        border-radius: 16px;
        border: 1px solid #333;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        max-width: 500px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        animation: popupAppear 0.2s ease-out;
    }

    @keyframes popupAppear {
        from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
        }
        to {
        opacity: 1;
        transform: scale(1) translateY(0);
        }
    }

    .popup-header {
        display: flex;
        align-items: center;
        padding: 20px 24px 16px 24px;
        border-bottom: 1px solid #333;
        position: relative;
    }

    .close-button {
        position: absolute;
        left: 24px;
        background: none;
        border: none;
        color: #999;
        cursor: pointer;
        padding: 4px;
        border-radius: 50%;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close-button:hover {
        color: #fff;
        background-color: #333;
    }

    .popup-header h2 {
        flex: 1;
        text-align: center;
        margin: 0;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
    }

    .player-info {
        display: flex;
        align-items: center;
        padding: 20px 24px;
        gap: 16px;
        border-bottom: 1px solid #333;
    }

    .player-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 2px solid #444;
    }

    .player-details {
        flex: 1;
    }

    .player-name {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .player-id {
        color: #999;
        font-size: 12px;
    }

    .modifiers-section {
        padding: 24px;
    }

    .modifiers-section h3 {
        color: #fff;
        margin: 0 0 20px 0;
        font-size: 16px;
        font-weight: 600;
    }

    .modifier-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        border-bottom: 1px solid #2a2a2a;
    }

    .modifier-item:last-child {
        border-bottom: none;
    }

    .modifier-info {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    .modifier-icon {
        color: #999;
        font-size: 20px;
    }

    .modifier-text {
        flex: 1;
    }

    .modifier-title {
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 2px;
    }

    .modifier-description {
        color: #999;
        font-size: 12px;
        line-height: 1.3;
    }

    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        cursor: pointer;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #333;
        transition: 0.2s ease;
        border-radius: 24px;
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: #999;
        transition: 0.2s ease;
        border-radius: 50%;
    }

    input:checked + .toggle-slider {
        background-color: #4285f4;
    }

    input:checked + .toggle-slider:before {
        transform: translateX(20px);
        background-color: #fff;
    }

    .action-buttons {
        display: flex;
        gap: 12px;
        padding: 20px 24px;
        border-top: 1px solid #333;
    }

    .cancel-button,
    .apply-button {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        border-radius: 8px;
        border: none;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .cancel-button {
        background-color: #333;
        color: #ccc;
    }

    .cancel-button:hover {
        background-color: #444;
        color: #fff;
    }

    .apply-button {
        background-color: #4285f4;
        color: #fff;
    }

    .apply-button:hover {
        background-color: #3367d6;
    }

    .material-icons {
        font-size: 18px;
    }
</style>