<script setup lang="ts">
import { computed } from 'vue';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyTitle,
} from '@/components/ui/empty';
import { Trash2 } from '@lucide/vue';
import { Button } from '@/components/ui/button';
import { formatRupiah } from '@/lib/rupiah';
import type { RestockCartItem } from '@/types/restock';

const props = defineProps<{
    cart: RestockCartItem[];
    lineSubtotal: (item: RestockCartItem) => number;
    total: number;
}>();

const emit = defineEmits<{
    remove: [index: number];
    'adjust-quantity': [index: number, delta: number];
    'set-quantity': [index: number, value: string];
}>();

const open = defineModel<boolean>('open', { required: true });

function onQtyInput(index: number, event: Event) {
    emit('set-quantity', index, (event.target as HTMLInputElement).value);
}

const hasItems = computed(() => props.cart.length > 0);
</script>

<template>
    <Dialog v-model:open="open">
        <DialogContent class="sm:max-w-lg min-w-0 max-h-[90dvh] flex flex-col overflow-y-auto">
            <DialogHeader>
                <DialogTitle>Detail Keranjang</DialogTitle>
            </DialogHeader>

            <div v-if="!hasItems" class="rounded-lg border border-dashed text-center text-sm text-muted-foreground">
                <Empty>
                    <EmptyHeader>
                        <EmptyTitle>Keranjang masih kosong</EmptyTitle>
                        <EmptyDescription>
                            Pilih produk untuk menambahkan ke keranjang.
                        </EmptyDescription>
                    </EmptyHeader>
                </Empty>
            </div>

            <div v-else class="scrollbar-thin max-h-96 space-y-3 overflow-y-auto overscroll-y-contain">
                <div
                    v-for="(item, index) in cart"
                    :key="`detail-${item.product_variant_id}`"
                    class="rounded-lg border p-3"
                >
                    <div class="flex items-start justify-between gap-2">
                        <div class="min-w-0">
                            <p class="truncate text-sm font-medium">{{ item.product_name }}</p>
                            <p class="truncate text-xs text-muted-foreground">{{ item.variant_name }}</p>
                        </div>
                        <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            class="text-destructive hover:text-destructive size-7 shrink-0"
                            @click="emit('remove', index)"
                        >
                            <Trash2 class="size-3.5" />
                        </Button>
                    </div>

                    <label class="mt-2 block text-xs text-muted-foreground">
                        Jumlah (pcs)
                    </label>
                    <div class="mt-1 flex items-center gap-1">
                        <button
                            type="button"
                            class="flex size-8 shrink-0 items-center justify-center rounded border text-sm transition-colors hover:bg-muted"
                            @click="emit('adjust-quantity', index, -1)"
                        >
                            &minus;
                        </button>
                        <input
                            type="text"
                            inputmode="decimal"
                            :value="item.quantity"
                            class="h-8 w-full rounded border bg-transparent px-2 text-center text-sm focus:outline-none focus:ring-1 focus:ring-ring"
                            @change="onQtyInput(index, $event)"
                        />
                        <button
                            type="button"
                            class="flex size-8 shrink-0 items-center justify-center rounded border text-sm transition-colors hover:bg-muted"
                            @click="emit('adjust-quantity', index, 1)"
                        >
                            +
                        </button>
                    </div>

                    <div class="mt-1.5 flex items-center justify-between gap-2 text-xs text-muted-foreground">
                        <span>@ Rp {{ formatRupiah(item.unit_price) }}</span>
                        <span class="font-medium text-foreground">Rp {{ formatRupiah(lineSubtotal(item)) }}</span>
                    </div>
                </div>
            </div>

            <div v-if="hasItems" class="border-t pt-3">
                <div class="flex items-center justify-between text-sm font-semibold">
                    <span>Total</span>
                    <span class="text-primary">Rp {{ formatRupiah(total) }}</span>
                </div>
            </div>
        </DialogContent>
    </Dialog>
</template>
