<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { usePage } from '@inertiajs/vue3';
import { FileUp } from 'lucide-vue-next';
import { ref, computed } from 'vue';
import AppLogoIcon from '@/components/AppLogoIcon.vue';
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';

type Declaration = {
    id: number;
    title: string;
    client_name: string;
};

type Document = {
    id: number;
    name: string;
    file_name: string;
    size: string;
    created_at: string;
};

type Props = {
    declaration: Declaration;
    token: string;
    documents: Document[];
    uploadUrl: string;
    csrfToken: string;
};

defineProps<Props>();

const page = usePage<{ flash?: { type?: string; message?: string } }>();
const flash = computed(() => page.props.flash);

const fileInput = ref<HTMLInputElement | null>(null);
const isDragging = ref(false);
const isSubmitting = ref(false);

function triggerFileSelect() {
    fileInput.value?.click();
}

function onDragOver(e: DragEvent) {
    e.preventDefault();
    isDragging.value = true;
}

function onDragLeave() {
    isDragging.value = false;
}

function onDrop(e: DragEvent) {
    e.preventDefault();
    isDragging.value = false;
    const files = e.dataTransfer?.files;
    if (files?.length && fileInput.value) {
        const dt = new DataTransfer();
        Array.from(files).forEach((f) => dt.items.add(f));
        fileInput.value.files = dt.files;
    }
}

function submit() {
    if (!fileInput.value?.files?.length) return;
    isSubmitting.value = true;
    const form = document.getElementById('upload-form') as HTMLFormElement;
    form.submit();
}
</script>

<template>
    <div class="flex min-h-svh flex-col bg-background">
        <Head :title="`Dépôt - ${declaration.title}`" />

        <header class="border-b border-sidebar-border/70 px-4 py-4">
            <div class="mx-auto flex max-w-2xl items-center justify-between">
                <div class="flex items-center gap-3">
                    <AppLogoIcon class="size-8 fill-current text-foreground" />
                    <div>
                        <h1 class="font-medium">{{ declaration.title }}</h1>
                        <p class="text-sm text-muted-foreground">
                            {{ declaration.client_name }}
                        </p>
                    </div>
                </div>
            </div>
        </header>

        <main class="mx-auto w-full max-w-2xl flex-1 p-4">
            <div
                v-if="flash?.message"
                class="mb-4 rounded-lg bg-green-100 p-3 text-sm text-green-800 dark:bg-green-900/30 dark:text-green-300"
            >
                {{ flash.message }}
            </div>
            <div class="space-y-6">
                <div>
                    <h2 class="text-lg font-medium">Déposer vos documents</h2>
                    <p class="mt-1 text-sm text-muted-foreground">
                        Glissez-déposez vos fichiers ou cliquez pour
                        sélectionner.
                    </p>
                </div>

                <form
                    id="upload-form"
                    :action="uploadUrl"
                    method="post"
                    enctype="multipart/form-data"
                    class="space-y-4"
                    @submit.prevent="submit"
                >
                    <input type="hidden" name="_token" :value="csrfToken" />
                    <input
                        ref="fileInput"
                        type="file"
                        name="files[]"
                        multiple
                        required
                        class="hidden"
                        accept="*/*"
                    />
                    <div
                        class="rounded-xl border-2 border-dashed p-8 text-center transition-colors"
                        :class="[
                            isDragging
                                ? 'border-primary bg-primary/5'
                                : 'border-sidebar-border/70 hover:border-primary/50',
                        ]"
                        @dragover="onDragOver"
                        @dragleave="onDragLeave"
                        @drop="onDrop"
                    >
                        <FileUp class="mx-auto size-12 text-muted-foreground" />
                        <p class="mt-2 text-sm font-medium">
                            {{
                                fileInput?.files?.length
                                    ? `${fileInput.files.length} fichier(s) sélectionné(s)`
                                    : 'Aucun fichier sélectionné'
                            }}
                        </p>
                        <Button
                            type="button"
                            variant="outline"
                            class="mt-2"
                            @click="triggerFileSelect"
                        >
                            Choisir des fichiers
                        </Button>
                    </div>

                    <Button
                        type="submit"
                        :disabled="!fileInput?.files?.length || isSubmitting"
                    >
                        <Spinner v-if="isSubmitting" class="mr-2 size-4" />
                        Envoyer
                    </Button>
                </form>

                <div
                    v-if="documents.length"
                    class="rounded-xl border border-sidebar-border/70 p-4"
                >
                    <h3 class="font-medium">Documents déjà déposés</h3>
                    <ul class="mt-2 space-y-1 text-sm text-muted-foreground">
                        <li
                            v-for="doc in documents"
                            :key="doc.id"
                            class="flex justify-between"
                        >
                            <span>{{ doc.file_name }}</span>
                            <span>{{ doc.size }} — {{ doc.created_at }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </main>
    </div>
</template>
