<script setup lang="ts">
import { Save } from '@lucide/vue';
import { RupiahInput } from '@/components/form/rupiah-input';
import MediaDropzone from '@/components/media/MediaDropzone.vue';
import { Button } from '@/components/ui/button';
import {
    Field,
    FieldError,
    FieldLabel,
} from '@/components/ui/field';
import { Separator } from '@/components/ui/separator';
import { Textarea } from '@/components/ui/textarea';
import { FIELD_LIMITS } from '@/lib/field-limits';
import { formErrors, type FormWithErrors } from '@/lib/form';
import { formatRupiah } from '@/lib/rupiah';
import type { MediaUploadState } from '@/types/media';

defineProps<{
    form: FormWithErrors & {
        discount: string;
        shipping_cost: string;
        notes: string;
        processing?: boolean;
    };
    subtotal: number;
    total: number;
    cartEmpty: boolean;
    submitLabel: string;
}>();

const photoState = defineModel<MediaUploadState>('photoState', { required: true });
</script>

<template>
    <Separator />

    <div class="space-y-2 text-sm">
        <div class="flex justify-between">
            <span class="text-muted-foreground">Subtotal</span>
            <span class="font-medium">Rp {{ formatRupiah(subtotal) }}</span>
        </div>
        <Field>
            <FieldLabel for="discount">Diskon</FieldLabel>
            <RupiahInput id="discount" v-model="form.discount" placeholder="0" />
            <FieldError :errors="formErrors(form, 'discount')" />
        </Field>
        <Field>
            <FieldLabel for="shipping_cost">Ongkir</FieldLabel>
            <RupiahInput id="shipping_cost" v-model="form.shipping_cost" placeholder="0" />
            <FieldError :errors="formErrors(form, 'shipping_cost')" />
        </Field>
        <div class="flex justify-between text-base font-semibold">
            <span>Total</span>
            <span class="text-primary">Rp {{ formatRupiah(total) }}</span>
        </div>
    </div>

    <Field>
        <FieldLabel for="notes">Keterangan</FieldLabel>
        <Textarea
            id="notes"
            v-model="form.notes"
            placeholder="Contoh: Belanja batch 2"
            rows="2"
            :maxlength="FIELD_LIMITS.notes"
        />
        <FieldError :errors="formErrors(form, 'notes')" />
    </Field>

    <MediaDropzone
        id="purchase-photos"
        v-model="photoState"
        label="Bukti Transaksi"
        :max-files="1"
        :errors="formErrors(form, 'photos')"
    />

    <Button type="submit" class="w-full" :disabled="form.processing || cartEmpty">
        <Save class="size-4" />
        {{ form.processing ? 'Menyimpan...' : submitLabel }}
    </Button>
</template>
