<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import { computed } from 'vue';
import { ArrowLeft } from '@lucide/vue';
import Heading from '@/components/Heading.vue';
import InputError from '@/components/InputError.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { dashboard } from '@/routes';
import type { BreadcrumbItem } from '@/types';

interface Bank { id: number; kode: string; keterangan: string; }
interface UserRow { id: number; name: string; email: string; }
interface Billing {
    id: number;
    no_invoice: string;
    jumlah_credit: number;
    rate: number;
    bank_id: number | null;
    user_id: number;
    payment_method: string;
}

const props = defineProps<{
    billing: Billing;
    banks: Bank[];
    users: UserRow[];
}>();

defineOptions({
    layout: {
        breadcrumbs: [
            { title: 'Dashboard', href: dashboard() },
            { title: 'Billing', href: '/billings' },
            { title: 'Edit', href: '/billings' },
        ] as BreadcrumbItem[],
    },
});

const form = useForm({
    jumlah_credit: props.billing.jumlah_credit,
    rate: props.billing.rate,
    bank_id: props.billing.bank_id ?? '',
    user_id: props.billing.user_id,
    payment_method: props.billing.payment_method,
});

const total = computed(() => form.jumlah_credit * form.rate);

const submit = () => form.put(`/billings/${props.billing.id}`);
</script>

<template>
    <Head title="Edit Invoice" />

    <div class="flex flex-col space-y-6">
        <div>
            <Button as-child variant="ghost" size="sm" class="mb-2">
                <Link href="/billings"><ArrowLeft class="size-4" /> Kembali</Link>
            </Button>
            <Heading :title="`Edit Invoice ${props.billing.no_invoice}`" description="Ubah invoice (hanya saat Pending)" />
        </div>

        <form @submit.prevent="submit" class="max-w-2xl space-y-6">
            <div class="grid gap-2">
                <Label for="user_id">Pengguna <span class="text-destructive">*</span></Label>
                <select id="user_id" v-model="form.user_id" required class="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
                    <option v-for="u in props.users" :key="u.id" :value="u.id">{{ u.name }} ({{ u.email }})</option>
                </select>
                <InputError :message="form.errors.user_id" />
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="grid gap-2">
                    <Label for="jumlah_credit">Jumlah Credit <span class="text-destructive">*</span></Label>
                    <Input id="jumlah_credit" type="number" v-model="form.jumlah_credit" min="1" required />
                    <InputError :message="form.errors.jumlah_credit" />
                </div>
                <div class="grid gap-2">
                    <Label for="rate">Rate (Rp/credit) <span class="text-destructive">*</span></Label>
                    <Input id="rate" type="number" v-model="form.rate" min="1" required />
                    <InputError :message="form.errors.rate" />
                </div>
            </div>

            <div class="grid gap-2">
                <Label for="bank_id">Bank Tujuan</Label>
                <select id="bank_id" v-model="form.bank_id" class="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
                    <option value="">— Pilih Bank —</option>
                    <option v-for="b in props.banks" :key="b.id" :value="b.id">{{ b.kode }} — {{ b.keterangan }}</option>
                </select>
                <InputError :message="form.errors.bank_id" />
            </div>

            <div class="rounded-lg border bg-muted/30 p-4">
                <div class="flex items-center justify-between text-sm">
                    <span class="text-muted-foreground">Total Pembayaran</span>
                    <span class="text-lg font-bold tabular-nums">Rp {{ total.toLocaleString('id-ID') }}</span>
                </div>
            </div>

            <div class="flex justify-end gap-2">
                <Button as-child variant="outline" type="button">
                    <Link href="/billings">Batal</Link>
                </Button>
                <Button type="submit" :disabled="form.processing">Simpan</Button>
            </div>
        </form>
    </div>
</template>
