fin_buddy_fe/src/Pages/Expenses/Import.vue

<script setup>
import { ref, reactive } from "vue";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import api from "@/axios"; 

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

const flashMessage = ref("");
const errorMessage = ref("");
const processing = ref(false);

const submit = async () => {
    if (!form.file) return;

    processing.value = true;
    flashMessage.value = "";
    errorMessage.value = "";

    // 💡 因為有二進位檔案，必須使用標準 FormData 封裝
    const formData = new FormData();
    formData.append('file', form.file);

    try {
        const response = await api.post("/v1/expenses/import", formData, {
            headers: {
                "Content-Type": "multipart/form-data",
            },
        });
        
        console.log("上傳成功", response.data);
        flashMessage.value = "🎉 財政部發票資料同步成功！已排重並寫入帳本。";
        form.file = null; // 清空選取
    } catch (error) {
        console.error("上傳失敗", error.response?.data);
        errorMessage.value = error.response?.data?.message || "匯入失敗，請確認 CSV 格式是否正確。";
    } finally {
        processing.value = false;
    }
};
</script>

<template>
    <AuthenticatedLayout>
        <template #header>
            <h2 class="text-xl font-semibold text-gray-800">匯入發票</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="flashMessage" class="mb-4 p-4 bg-green-50 text-green-700 rounded border border-green-200 text-sm">
                    {{ flashMessage }}
                </div>
                <div v-if="errorMessage" class="mb-4 p-4 bg-red-50 text-red-700 rounded border border-red-200 text-sm">
                    {{ errorMessage }}
                </div>

                <h3 class="text-lg font-medium text-gray-700 mb-2">📥 上傳財政部發票明細 CSV</h3>
                <p class="text-sm text-gray-500 mb-6 leading-relaxed">
                    請上傳從「財政部電子發票整合服務平台」載具下載的消費明細 CSV 檔案。
                    系統會自動比對發票號碼，**重複的發票會自動略過**，免擔心重複記帳。
                </p>

                <form @submit.prevent="submit" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-1">選擇 CSV 檔案</label>
                        <input
                            type="file"
                            accept=".csv"
                            @change="form.file = $event.target.files[0]"
                            class="w-full border rounded px-3 py-2 text-sm bg-gray-50 file:mr-4 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
                        />
                    </div>

                    <div class="flex gap-3 pt-2">
                        <router-link to="/expenses" class="flex-1 text-center py-2 border rounded-md text-sm text-gray-600 hover:bg-gray-50">
                            返回帳本
                        </router-link>
                        <button
                            type="submit"
                            :disabled="!form.file || processing"
                            class="flex-[2] bg-indigo-600 text-white py-2 rounded-md text-sm font-medium hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm transition-all"
                        >
                            {{ processing ? "⚙️ 正在解析並套用自動分類規則..." : "確認開始匯入" }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </AuthenticatedLayout>
</template>