<script setup lang="ts">
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
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">
                        <thead>
                            <tr class="border-b">
                                <th class="text-muted-foreground h-9 w-12 px-4 text-center text-xs font-medium">No.</th>
                                <th class="text-muted-foreground h-9 px-4 text-left text-xs font-medium">Varian</th>
                                <th class="text-muted-foreground h-9 px-4 text-right text-xs font-medium">Stok Sistem</th>
                                <th class="text-muted-foreground h-9 px-4 text-right text-xs font-medium">Stok Fisik</th>
                                <th class="text-muted-foreground h-9 px-4 text-right text-xs font-medium">Selisih</th>
                                <th class="text-muted-foreground h-9 px-4 text-left text-xs font-medium">Catatan</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                v-for="(row, rIdx) in group.rows"
                                :key="row.variant_id"
                                class="border-b transition-colors last:border-b-0 hover:bg-muted/30"
                            >
                                <td class="text-muted-foreground p-3 text-center">
                                    {{ groupedTableRowNumber(group.startIndex, rIdx) }}
                                </td>
                                <td class="p-3">{{ row.variant_name }}</td>
                                <td class="p-3 text-right tabular-nums">
                                    {{ row.system_stock_formatted ?? row.system_stock }}
                                </td>
                                <td class="p-3 text-right">
                                    <Input
                                        v-model.number="row.physical_stock"
                                        type="number"
                                        min="0"
                                        class="ml-auto w-24 text-right tabular-nums"
                                        @input="emit('row-change')"
                                    />
                                </td>
                                <td class="p-3 text-right tabular-nums">
                                    <span
                                        :class="stokOpnameDifferenceClass(stokOpnameDifference(row.physical_stock, row.system_stock))"
                                    >
                                        {{ stokOpnameDifferenceText(stokOpnameDifference(row.physical_stock, row.system_stock)) }}
                                    </span>
                                </td>
                                <td class="p-3">
                                    <Input
                                        v-model="row.notes"
                                        placeholder="Catatan..."
                                        class="w-full min-w-[120px]"
                                        @input="emit('row-change')"
                                    />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </CardContent>
    </Card>
</template>
