<script setup lang="ts">
import { NumberInput } from '@/components/form/number-input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { groupedTableRowNumber } from '@/lib/grouped-table';
import {
    stokOpnameDifference,
    stokOpnameDifferenceClass,
    stokOpnameDifferenceText,
} from '@/lib/stok-opname-display';
import type { StokOpnameProductGroup } from '@/types/stok-opname';

defineProps<{
    groupedProducts: StokOpnameProductGroup[];
    isEmpty: boolean;
}>();

const emit = defineEmits<{
    'row-change': [];
}>();
</script>

<template>
    <Card>
        <CardHeader>
            <CardTitle>Daftar Produk</CardTitle>
        </CardHeader>
        <CardContent>
            <div v-if="isEmpty" class="text-muted-foreground py-8 text-center">
                Tidak ada produk aktif.
            </div>

            <div v-else class="space-y-2">
                <div
                    v-for="group in groupedProducts"
                    :key="group.product_name"
                    class="overflow-hidden rounded-md border"
                >
                    <div class="bg-muted/60 border-b px-4 py-2.5">
                        <span class="text-sm font-semibold">{{ group.product_name }}</span>
                    </div>
                    <table class="w-full text-sm border-collapse">
                        <thead>
                            <tr class="border-b bg-muted/20">
                                <th class="text-muted-foreground h-9 w-12 px-4 text-center text-xs font-medium border-r">No.</th>
                                <th class="text-muted-foreground h-9 px-4 text-left text-xs font-medium border-r">Varian</th>
                                <th class="text-muted-foreground h-9 px-4 text-left text-xs font-medium border-r w-28">Kualitas</th>
                                <th class="text-muted-foreground h-9 px-4 text-right text-xs font-medium border-r w-28">Stok Sistem</th>
                                <th class="text-muted-foreground h-9 px-4 text-right text-xs font-medium border-r w-32">Stok Fisik</th>
                                <th class="text-muted-foreground h-9 px-4 text-right text-xs font-medium border-r w-28">Selisih</th>
                                <th class="text-muted-foreground h-9 px-4 text-left text-xs font-medium">Catatan</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-for="(vGroup, vIdx) in group.variants" :key="vGroup.variant_id">
                                <tr
                                    v-for="(qRow, qIdx) in vGroup.qualities"
                                    :key="`${vGroup.variant_id}_${qRow.quality_key}`"
                                    class="border-b hover:bg-muted/10"
                                >
                                    <td
                                        v-if="qIdx === 0"
                                        rowspan="3"
                                        class="text-muted-foreground p-3 text-center border-r border-b align-middle font-medium"
                                    >
                                        {{ groupedTableRowNumber(group.startIndex + 1, vIdx) }}
                                    </td>
                                    <td
                                        v-if="qIdx === 0"
                                        rowspan="3"
                                        class="p-3 border-r border-b align-middle font-semibold bg-muted/5"
                                    >
                                        {{ vGroup.variant_name }}
                                    </td>
                                    <td class="p-3 border-r border-b text-left font-medium">
                                        <Badge :variant="qRow.quality_key === 'good' ? 'outline' : (qRow.quality_key === 'retail' ? 'secondary' : 'destructive')" class="text-xs font-normal">
                                            {{ qRow.quality_label }}
                                        </Badge>
                                    </td>
                                    <td class="p-3 border-r border-b text-right tabular-nums">
                                        {{ qRow.system_stock_formatted ?? qRow.system_stock }}
                                    </td>
                                    <td class="p-3 border-r border-b text-right">
                                        <NumberInput
                                            :model-value="qRow.row_ref.physical_stock"
                                            class="ml-auto w-24 text-right tabular-nums h-8 text-xs"
                                            @update:model-value="val => {
                                                qRow.row_ref.physical_stock = val === '' ? 0 : Number(val);
                                                emit('row-change');
                                            }"
                                        />
                                    </td>
                                    <td class="p-3 border-r border-b text-right tabular-nums font-semibold">
                                        <span
                                            :class="stokOpnameDifferenceClass(stokOpnameDifference(qRow.row_ref.physical_stock, qRow.system_stock))"
                                        >
                                            {{ stokOpnameDifferenceText(stokOpnameDifference(qRow.row_ref.physical_stock, qRow.system_stock)) }}
                                        </span>
                                    </td>
                                    <td class="p-3 border-b">
                                        <Input
                                            v-model="qRow.row_ref.notes"
                                            placeholder="Catatan..."
                                            class="w-full h-8 text-xs"
                                            @input="emit('row-change')"
                                        />
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
        </CardContent>
    </Card>
</template>
