<?php

use Livewire\Volt\Component;

new class extends Component
{
    //
}; ?>

<div class="flex flex-col gap-8">
    <section class="rounded-3xl border border-slate-200/70 bg-white/95 p-8 shadow-sm backdrop-blur dark:border-slate-700/70 dark:bg-slate-900/90">
        <div class="max-w-2xl space-y-2">
            <flux:heading size="xl">{{ __('Upload neuer Transaktionen als CSV Datei') }}</flux:heading>
            <flux:text>
                {{ __('Hochladen der Datei zur Verarbeitung durch die Trusted AI Plattform') }}
            </flux:text>
        </div>
    </section>

    <section class="rounded-3xl border border-zinc-200/70 bg-white/95 p-8 shadow-sm backdrop-blur dark:border-zinc-700/70 dark:bg-zinc-900/90">
        <div class="max-w-2xl mx-auto">

            <div x-data="{
                file: null,
                fileName: '',
                fileSize: 0,
                uploading: false,
                uploadStatus: null,
                uploadMessage: '',

                selectFile(event) {
                    this.file = event.target.files[0];
                    if (this.file) {
                        this.fileName = this.file.name;
                        this.fileSize = (this.file.size / 1024).toFixed(2);
                    }
                },

                async upload() {
                    if (!this.file) return;

                    this.uploading = true;
                    this.uploadStatus = null;
                    this.uploadMessage = '';

                    const formData = new FormData();
                    formData.append('file', this.file);

                    try {
                        const response = await fetch('https://upload.trai.mcs.local/api/upload', {
                            method: 'POST',
                            body: formData
                        });

                        if (response.ok) {
                            this.uploadStatus = 'success';
                            this.uploadMessage = '{{ __('File uploaded successfully!') }}';
                            this.file = null;
                            this.fileName = '';
                            this.fileSize = 0;
                            this.$refs.fileInput.value = '';
                        } else {
                            const errorText = await response.text();
                            this.uploadStatus = 'error';
                            this.uploadMessage = `{{ __('Upload failed') }}: ${errorText}`;
                        }
                    } catch (error) {
                        this.uploadStatus = 'error';
                        this.uploadMessage = `{{ __('Upload error') }}: ${error.message}`;
                    } finally {
                        this.uploading = false;
                    }
                },

                clearFile() {
                    this.file = null;
                    this.fileName = '';
                    this.fileSize = 0;
                    this.$refs.fileInput.value = '';
                }
            }">
                <form @submit.prevent="upload" class="space-y-6">
                    <div>
                        <label for="file-upload" class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">
                            {{ __('Select File') }}
                        </label>
                        <input
                            x-ref="fileInput"
                            id="file-upload"
                            type="file"
                            @change="selectFile"
                            required
                            class="block w-full text-sm text-zinc-900 dark:text-white border border-zinc-300 dark:border-zinc-600 rounded-lg cursor-pointer bg-zinc-50 dark:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 dark:file:bg-blue-900 dark:file:text-blue-300 dark:hover:file:bg-blue-800"
                        />

                        <p x-show="fileName" x-text="`{{ __('Selected file') }}: ${fileName} (${fileSize} KB)`" class="mt-2 text-sm text-zinc-600 dark:text-zinc-400"></p>
                    </div>

                    <div x-show="uploadStatus">
                        <flux:callout x-bind:variant="uploadStatus === 'success' ? 'success' : 'danger'">
                            <span x-text="uploadMessage"></span>
                        </flux:callout>
                    </div>

                    <div class="flex items-center gap-4">
                        <flux:button
                            variant="primary"
                            type="submit"
                            x-bind:disabled="uploading || !file"
                        >
                            <span x-show="!uploading">{{ __('Upload File') }}</span>
                            <span x-show="uploading">{{ __('Uploading...') }}</span>
                        </flux:button>

                        <flux:button
                            x-show="file"
                            variant="ghost"
                            type="button"
                            @click="clearFile"
                            x-bind:disabled="uploading"
                        >
                            {{ __('Clear') }}
                        </flux:button>
                    </div>

                    <div x-show="uploading" class="mt-4">
                        <div class="w-full bg-gray-200 dark:bg-zinc-700 rounded-full h-2.5">
                            <div class="bg-blue-600 h-2.5 rounded-full animate-pulse" style="width: 100%"></div>
                        </div>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
                            {{ __('Please wait while your file is being uploaded...') }}
                        </p>
                    </div>
                </form>
            </div>

            <flux:separator class="my-8" />

            <div class="text-sm text-gray-600 dark:text-gray-400 space-y-2">
                <p class="font-semibold">{{ __('Information:') }}</p>
                <ul class="list-disc list-inside space-y-1">
                    <li>{{ __('Maximum file size: 50 MB') }}</li>
                    <li>{{ __('Upload endpoint: https://upload.trai.mcs.local/api/upload') }}</li>
                </ul>
            </div>
        </div>
    </section>
</div>
