<script setup lang="ts">
import BackButton from '@/components/button/BackButton.vue';
import { Head, router } from '@inertiajs/vue3';
import { Loader2, Send } from '@lucide/vue';
import { ref } from 'vue';
import { Button } from '@/components/ui/button';
import AdminLayout from '@/layouts/AdminLayout.vue';
import type { CatalogProduct } from '@/types/stok-opname';
import { index, submit } from '@/routes/admin/manage/stok-opnames';
import StokOpnameAutoSaveStatus from './form/StokOpnameAutoSaveStatus.vue';
import StokOpnameInfoSection from './form/StokOpnameInfoSection.vue';
import StokOpnameProductTable from './form/StokOpnameProductTable.vue';
import { useStokOpnameForm } from './form/useStokOpnameForm';

const props = defineProps<{
    catalog: CatalogProduct[];
}>();

const submitting = ref(false);

const {
    opnameDate,
    notes,
    stokOpnameId,
    saving,
    lastSaved,
    variantRows,
    itemsPayload,
    groupedProducts,
    onRowChange,
} = useStokOpnameForm({
    catalog: () => props.catalog,
    initialOpnameDate: new Date().toISOString().split('T')[0],
    initialNotes: '',
    initialStokOpnameId: null,
});

function submitForVerification() {
    if (!stokOpnameId.value) {
        return;
    }

    submitting.value = true;
    router.post(submit.url(stokOpnameId.value), {}, {
        onFinish: () => {
            submitting.value = false;
        },
    });
}
</script>

<template>
    <Head title="Tambah Stok Opname" />

    <AdminLayout>
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div class="space-y-1">
                <h2 class="text-2xl font-bold tracking-tight">Stok Opname</h2>
                <p class="text-muted-foreground text-sm">
                    Hitung stok fisik gudang dan bandingkan dengan stok sistem
                </p>
            </div>

            <div class="flex items-center gap-3">
                <StokOpnameAutoSaveStatus :saving="saving" :last-saved="lastSaved" />
                <BackButton :href="index.url()" />
            </div>
        </div>

        <div class="space-y-6">
            <StokOpnameInfoSection v-model:opname-date="opnameDate" v-model:notes="notes" />

            <StokOpnameProductTable
                :grouped-products="groupedProducts"
                :is-empty="variantRows.length === 0"
                @row-change="onRowChange"
            />

            <div class="flex justify-end gap-3">
                <BackButton :href="index.url()" label="Kembali" />
                <Button
                    :disabled="!stokOpnameId || itemsPayload.length === 0 || submitting"
                    @click="submitForVerification"
                >
                    <Send v-if="!submitting" class="mr-1.5 size-4" />
                    <Loader2 v-else class="mr-1.5 size-4 animate-spin" />
                    {{ submitting ? 'Mengajukan...' : 'Ajukan Verifikasi' }}
                </Button>
            </div>
        </div>
    </AdminLayout>
</template>
