<script lang="ts">
    import { api } from '$lib/api';
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();
    let { timetableEntryId = null, onUploadSuccess } = $props();

    let dragging = $state(false);
    let uploading = $state(false);
    let error = $state<string | null>(null);

    function handleDragEnter(e: DragEvent) {
        e.preventDefault();
        e.stopPropagation();
        dragging = true;
    }

    function handleDragLeave(e: DragEvent) {
        e.preventDefault();
        e.stopPropagation();
        dragging = false;
    }

    function handleDragOver(e: DragEvent) {
        e.preventDefault();
        e.stopPropagation();
        dragging = true;
    }

    async function handleDrop(e: DragEvent) {
        e.preventDefault();
        e.stopPropagation();
        dragging = false;
        
        if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
            await uploadFiles(e.dataTransfer.files);
        }
    }

    async function handleFileSelect(e: Event) {
        const target = e.target as HTMLInputElement;
        if (target.files && target.files.length > 0) {
            await uploadFiles(target.files);
        }
    }

    async function uploadFiles(files: FileList) {
        uploading = true;
        error = null;
        
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const res = await api.uploadFile(file, timetableEntryId);
            if (res.error) {
                error = res.error;
            }
        }
        
        uploading = false;
        if (!error) {
            dispatch('success');
             if(onUploadSuccess) onUploadSuccess();
        }
    }
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div 
    class="border-2 border-dashed rounded-lg py-16 text-center transition-colors cursor-pointer flex flex-col justify-center items-center mb-2"
    style="background-color: {dragging ? 'var(--primary-100)' : 'var(--primary-50)'}; border-color: {dragging ? 'var(--primary-500)' : 'var(--primary-200)'};"
    ondragenter={handleDragEnter}
    ondragleave={handleDragLeave}
    ondragover={handleDragOver}
    ondrop={handleDrop}
    onclick={() => document.getElementById('fileInput')?.click()}
    role="button"
    tabindex="0"
    onkeydown={(e) => e.key === 'Enter' && document.getElementById('fileInput')?.click()}
>
    <input 
        type="file" 
        id="fileInput" 
        class="hidden" 
        onchange={handleFileSelect} 
        multiple
    />
    
    {#if uploading}
        <div class="text-primary">Uploading...</div>
    {:else}
        <div class="flex flex-col items-center" style="padding: 32px 0px;">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 mb-2" style="color: var(--primary-400);height:32px;width:32px;">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
            </svg>
            <p class="font-medium text-sm" style="color: var(--primary-800);">Dateien hierher ziehen oder klicken</p>
            <p class="text-xs mt-1" style="color: var(--primary-500);">Alle Dateitypen erlaubt</p>
        </div>
    {/if}
    
    {#if error}
        <div class="mt-2 text-red-500 text-sm">{error}</div>
    {/if}
</div>
