<script setup>
import { useForm, usePage } from "@inertiajs/vue3";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { computed } from "vue";

const form = useForm({
    file: null,
});

const flash = computed(() => usePage().props.flash);

const submit = () => {
    form.post(route("expenses.import.store"), {
        forceFormData: true,
    });
};
</script>

<template>
    <AuthenticatedLayout>
        <template #header>
            <h2 class="text-xl font-semibold">匯入發票</h2>
        </template>

        <div class="py-8 max-w-xl mx-auto px-4">
            <div class="bg-white rounded-lg shadow p-6">
                <!-- 成功訊息 -->
                <div
                    v-if="flash?.message"
                    class="mb-4 p-4 bg-green-50 text-green-700 rounded"
                >
                    {{ flash.message }}
                </div>

                <h3 class="text-lg font-medium mb-2">上傳財政部發票 CSV</h3>
                <p class="text-sm text-gray-500 mb-6">
                    請上傳從財政部電子發票平台下載的 CSV
                    檔案，重複的發票號碼會自動略過。
                </p>

                <form @submit.prevent="submit" class="space-y-4">
                    <div>
                        <label class="block text-sm text-gray-600 mb-1"
                            >選擇檔案</label
                        >
                        <input
                            type="file"
                            accept=".csv"
                            @change="form.file = $event.target.files[0]"
                            class="w-full border rounded px-3 py-2 text-sm"
                        />
                        <p
                            v-if="form.errors.file"
                            class="text-red-500 text-sm mt-1"
                        >
                            {{ form.errors.file }}
                        </p>
                    </div>

                    <button
                        type="submit"
                        :disabled="!form.file || form.processing"
                        class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        {{ form.processing ? "匯入中..." : "匯入" }}
                    </button>
                </form>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
