<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 { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { OrderStatus } from '@/constants/order-status';
import { PaperSize } from '@/constants/paper-size';
import { formErrors } from '@/lib/form';
import type { FormWithErrors } from '@/lib/form';
import { formatRupiah } from '@/lib/rupiah';
import type { MediaUploadState } from '@/types/media';

defineProps<{
    form: FormWithErrors & {
        discount: string;
        nego_price: string;
        notes: string;
        status: string;
        processing?: boolean;
    };
    subtotal: number;
    totalAmount: number;
    showPhotoInput: boolean;
    isCreateMode: boolean;
    canComplete: boolean;
    canCreate: boolean;
    cartEmpty: boolean;
    submitLabel: string;
}>();

const printAfterSave = defineModel<boolean>('printAfterSave', { required: true });
const selectedPaperSize = defineModel<'58mm' | '80mm'>('selectedPaperSize', { required: true });
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="nego_price">Harga Nego</FieldLabel>
            <RupiahInput id="nego_price" v-model="form.nego_price" placeholder="Kosongkan jika tidak ada nego" />
            <p class="text-xs text-muted-foreground">Jika diisi, harga nego menjadi total akhir.</p>
            <FieldError :errors="formErrors(form, 'nego_price')" />
        </Field>
        <div class="flex justify-between text-base font-semibold">
            <span>Total</span>
            <span class="text-primary">Rp {{ formatRupiah(totalAmount) }}</span>
        </div>
    </div>

    <Field v-if="canComplete">
        <div class="flex items-center gap-3">
            <Switch
                id="status-completed"
                :model-value="form.status === OrderStatus.COMPLETED"
                @update:model-value="form.status = $event ? OrderStatus.COMPLETED : OrderStatus.PENDING"
            />
            <Label for="status-completed" class="cursor-pointer text-sm">
                Pesanan selesai
            </Label>
        </div>
        <p class="text-xs text-muted-foreground">
            Aktifkan jika pesanan sudah selesai diproses.
        </p>
        <FieldError :errors="formErrors(form, 'status')" />
    </Field>

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

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

    <Field v-if="isCreateMode && canCreate">
        <div class="flex items-center gap-3">
            <Switch id="print-after-save" v-model="printAfterSave" />
            <Label for="print-after-save" class="cursor-pointer text-sm">
                Cetak struk setelah simpan
            </Label>
        </div>
        <div v-if="printAfterSave" class="mt-2 flex items-center gap-2 pl-1">
            <span class="text-xs text-muted-foreground">Ukuran kertas:</span>
            <div class="flex gap-1.5">
                <button
                    v-for="size in ([PaperSize.MM_58, PaperSize.MM_80] as const)"
                    :key="size"
                    type="button"
                    class="inline-flex h-7 cursor-pointer items-center rounded-md border px-2.5 text-xs font-medium transition-colors"
                    :class="selectedPaperSize === size
                        ? 'border-primary bg-primary/5 text-primary'
                        : 'border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground'"
                    @click="selectedPaperSize = size"
                >
                    {{ size }}
                </button>
            </div>
        </div>
    </Field>

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