<script lang="ts">
    import { createEventDispatcher } from 'svelte';
    import { v4 as uuidv4 } from 'uuid';
    import { convertImageToUint8Array } from "$lib/services/taImages.js";
    
    const dispatch = createEventDispatcher();
    
    // Map pool data
    let mapPoolName: string = "";
    let mapPoolImageBuffer: Uint8Array | null = null;
    let mapPoolImagePreview: string | null = null;
    
    // File upload
    let fileInput: HTMLInputElement;
    
    function closeModal() {
        dispatch('close');
    }
    
    function handleImageUpload() {
        fileInput.click();
    }
    
    function onFileSelected(event: Event) {
        const target = event.target as HTMLInputElement;
        const files = target.files;
        
        if (files && files.length > 0) {
            const file = files[0];
            const reader = new FileReader();
            
            reader.onload = (e) => {
                const result = e.target?.result;
                if (result instanceof ArrayBuffer) {
                    mapPoolImageBuffer = new Uint8Array(result);
                    // Create preview URL
                    const blob = new Blob([mapPoolImageBuffer], { type: file.type });
                    mapPoolImagePreview = URL.createObjectURL(blob);
                }
            };
            
            reader.readAsArrayBuffer(file);
        }
    }
    
    async function createMapPool() {
        // Create a default image buffer if none provided
        let imageBuffer = mapPoolImageBuffer;
        if (!imageBuffer) {
            imageBuffer = new Uint8Array(1);
        }
        
        // Create the map pool object
        const newMapPool = {
            guid: uuidv4(),
            name: mapPoolName,
            image: imageBuffer,
            maps: []
        };
        
        // Dispatch event with map pool data
        dispatch('mapPoolCreated', newMapPool);
        
        // Close the modal
        closeModal();
    }
</script>

<div class="modal-overlay">
    <div class="modal-container">
        <div class="modal-header">
            <h3>Create New Map Pool</h3>
            <button class="close-button" on:click={closeModal}>
                <span class="material-icons">close</span>
            </button>
        </div>
        
        <div class="modal-content">
            <div class="form-group">
                <label for="mappool-name">Map Pool Name</label>
                <input 
                    type="text" 
                    id="mappool-name" 
                    class="form-input" 
                    bind:value={mapPoolName} 
                    placeholder="Enter map pool name"
                    required
                />
            </div>
            
            <div class="form-group">
                <!-- svelte-ignore a11y-label-has-associated-control -->
                <label>Map Pool Logo (Optional)</label>
                <div class="image-upload-container">
                    <div class="image-preview">
                        {#if mapPoolImagePreview}
                            <img src={mapPoolImagePreview} alt="Map pool logo preview" />
                        {:else}
                            <!-- svelte-ignore a11y-click-events-have-key-events -->
                            <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                            <img on:click={handleImageUpload} src="/talogo.png" alt="Default logo" />
                            <!-- svelte-ignore a11y-click-events-have-key-events -->
                            <!-- svelte-ignore a11y-no-static-element-interactions -->
                            <div on:click={handleImageUpload} class="upload-overlay">
                                <span class="material-icons">add_photo_alternate</span>
                            </div>
                        {/if}
                    </div>
                    <button class="action-button upload" on:click={handleImageUpload}>
                        <span class="material-icons">upload</span>
                        {mapPoolImagePreview ? 'Change Logo' : 'Upload Logo'}
                    </button>
                    <input 
                        type="file" 
                        accept="image/*" 
                        style="display: none" 
                        bind:this={fileInput} 
                        on:change={onFileSelected}
                    />
                    <p class="helper-text">If no image is provided, the default logo will be used.</p>
                </div>
            </div>
            
            <div class="modal-actions">
                <button class="action-button cancel" on:click={closeModal}>Cancel</button>
                <button 
                    class="action-button create" 
                    on:click={createMapPool}
                    disabled={!mapPoolName}
                >
                    Create Map Pool
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    
    .modal-container {
        background-color: var(--bg-primary);
        border-radius: 0.75rem;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        animation: modal-appear 0.3s ease-out;
    }
    
    @keyframes modal-appear {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--bg-secondary);
    }
    
    .modal-header h3 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }
    
    .close-button {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        width: 2rem;
        height: 2rem;
        border-radius: 0.25rem;
        transition: all 0.2s;
    }
    
    .close-button:hover {
        background-color: var(--bg-secondary);
        color: var(--text-primary);
    }
    
    .modal-content {
        padding: 1.5rem;
    }
    
    .form-group {
        margin-bottom: 1.25rem;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        font-size: 0.9375rem;
    }
    
    .form-input {
        width: 100%;
        padding: 0.625rem 0.75rem;
        background-color: var(--bg-tertiary);
        border: none;
        border-radius: 0.375rem;
        color: var(--text-primary);
        font-size: 0.9375rem;
        font-family: inherit;
        transition: outline 0.2s;
    }
    
    .form-input:focus {
        outline: 2px solid var(--accent-color);
    }
    
    /* Image upload in modal */
    .image-upload-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .image-preview {
        width: 6rem;
        height: 6rem;
        border-radius: 0.375rem;
        overflow: hidden;
        background-color: var(--bg-tertiary);
        position: relative;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .image-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .upload-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .upload-overlay:hover {
        opacity: 0.9;
    }

    .upload-overlay .material-icons {
        color: #fff;
        font-size: 1.5rem;
    }

    .helper-text {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin: 0.25rem 0 0 0;
    }

    .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .action-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 0.375rem;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
    }

    .action-button.upload {
        background-color: var(--bg-secondary);
        color: var(--text-primary);
    }

    .action-button.upload:hover {
        background-color: var(--bg-tertiary);
    }

    .action-button.cancel {
        background-color: var(--bg-secondary);
        color: var(--text-primary);
    }

    .action-button.cancel:hover {
        background-color: var(--bg-tertiary);
    }

    .action-button.create {
        background-color: var(--accent-color);
        color: white;
    }

    .action-button.create:hover {
        opacity: 0.9;
    }

    .action-button.create:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .action-button .material-icons {
        font-size: 1.25rem;
    }
</style>