<script setup lang="ts">
import { computed } from 'vue';
import { DataTableEmpty } from '@/components/data-table';
import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
import GroupedTableFooter from '@/components/data-table/GroupedTableFooter.vue';
import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
import { Badge } from '@/components/ui/badge';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { usePaginationSummary } from '@/composables/usePaginationSummary';
import { cuttingStatusBadgeVariant } from '@/constants/cutting-status';
import { groupedTableRowNumber } from '@/lib/grouped-table';
import type { CuttingListItem } from '@/types/cutting';
import type {
    DataTablePagination,
    DataTablePaginationLink,
} from '@/types/data-table';
import DataTableActions from './data-table-actions.vue';

const props = defineProps<{
    cuttings: CuttingListItem[];
    firstItem?: number;
    pagination?: DataTablePagination;
    paginationLinks?: DataTablePaginationLink[];
}>();

const search = defineModel<string>('search', { default: '' });

const emit = defineEmits<{
    'filters-reset': [];
}>();

const showingCount = computed(() => props.cuttings.length);
const paginationSummary = usePaginationSummary(
    () => props.pagination,
    showingCount,
    'cutting',
);

function rowNumber(index: number): number {
    return groupedTableRowNumber(props.firstItem, index);
}

interface GroupedCuttingMaterials {
    rawMaterialId: number;
    rawMaterialName: string;
    unitLabel?: string;
    items: any[];
    isCombination?: boolean;
}

function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
    // First, group by combination_id
    const combinationGroups: Record<number, any[]> = {};
    const nonCombinationItems: any[] = [];

    materials.forEach((item) => {
        if (item.combination_id) {
            if (!combinationGroups[item.combination_id]) {
                combinationGroups[item.combination_id] = [];
            }

            combinationGroups[item.combination_id].push(item);
        } else {
            nonCombinationItems.push(item);
        }
    });

    const result: GroupedCuttingMaterials[] = [];

    // Add combination groups
    Object.entries(combinationGroups).forEach(([combinationId, items]) => {
        const firstItem = items[0];
        const rawMaterialName = firstItem.raw_material_name || 'Bahan Baku Tidak Diketahui';
        const unitLabel = firstItem.raw_material_unit_label;

        result.push({
            rawMaterialId: Number(combinationId) * -1, // Negative ID to avoid collision
            rawMaterialName: `Kombinasi`,
            unitLabel,
            items,
            isCombination: true,
        });
    });

    // Group non-combination items by raw material
    const groups: Record<number, GroupedCuttingMaterials> = {};

    nonCombinationItems.forEach((item) => {
        const rawMaterialId = item.raw_material_id ?? 0;
        const rawMaterialName =
            item.raw_material_name || 'Bahan Baku Tidak Diketahui';
        const unitLabel = item.raw_material_unit_label;

        if (!groups[rawMaterialId]) {
            groups[rawMaterialId] = {
                rawMaterialId,
                rawMaterialName,
                unitLabel,
                items: [],
            };
        }

        groups[rawMaterialId].items.push(item);
    });

    result.push(...Object.values(groups));

    return result;
}
</script>

<template>
    <div class="space-y-4">
        <DataTableToolbar v-model:search="search" @filters-reset="emit('filters-reset')" />

        <div v-if="cuttings.length" class="space-y-4">
            <div v-for="(cutting, index) in cuttings" :key="cutting.id" class="overflow-hidden rounded-md border">
                <div
                    class="flex flex-col gap-3 border-b bg-muted/30 px-4 py-3 sm:flex-row sm:items-start sm:justify-between">
                    <div class="flex min-w-0 items-start gap-3">
                        <span class="w-8 shrink-0 pt-0.5 text-center text-sm text-muted-foreground tabular-nums">
                            {{ rowNumber(index) }}
                        </span>
                        <div class="min-w-0 space-y-2">
                            <div class="flex flex-wrap items-center gap-2">
                                <h3 class="leading-tight font-medium">
                                    Cutting #{{ cutting.id }}
                                </h3>
                                <Badge :variant="cuttingStatusBadgeVariant(
                                    cutting.status,
                                )
                                    ">
                                    {{ cutting.status_label }}
                                </Badge>
                            </div>
                            <div class="space-y-1 text-sm text-muted-foreground">
                                <p>{{ cutting.created_at_formatted }}</p>
                                <p>
                                    Oleh
                                    {{
                                        cutting.created_by?.profile
                                            ?.full_name ??
                                        cutting.created_by?.username
                                    }}
                                </p>
                            </div>
                            <p v-if="cutting.description" class="text-sm text-muted-foreground">
                                {{ cutting.description }}
                            </p>

                            <MediaThumbnailCell v-if="cutting.images?.length" :items="cutting.images" :max-visible="5" />

                            <div class="flex flex-wrap gap-x-4 gap-y-1 text-sm">
                                <span>Total Hasil Cutting
                                    <strong class="text-primary">{{
                                        cutting.total_result_pieces ?? 0
                                    }}
                                        pcs</strong></span>
                                <span v-if="
                                    cutting.total_material_usage_summary_formatted
                                ">Total Pemakaian Bahan
                                    <strong class="text-primary">{{
                                        cutting.total_material_usage_summary_formatted
                                        }}</strong></span>
                                <span>Biaya Bahan
                                    <strong class="text-primary">{{
                                        cutting.total_material_cost_formatted ??
                                        'Rp 0'
                                        }}</strong></span>
                                <span>Biaya per Produk
                                    <strong class="text-primary">{{
                                        cutting.material_cost_per_product_formatted ??
                                        'Rp 0'
                                        }}</strong></span>
                            </div>
                        </div>
                    </div>

                    <div class="flex shrink-0 items-center justify-end gap-2 sm:pt-0.5">
                        <DataTableActions :cutting="cutting" />
                    </div>
                </div>

                <div class="space-y-6 p-4">
                    <div class="space-y-2">
                        <h4 class="text-sm font-semibold tracking-tight text-foreground">
                            Bahan Baku
                        </h4>
                        <div class="rounded-md border">
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Varian</TableHead>
                                        <TableHead>Foto</TableHead>
                                        <TableHead>Pemakaian</TableHead>
                                        <TableHead>Hasil</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    <TableRow v-if="!cutting.materials.length" :key="`${cutting.id}-material-empty`">
                                        <TableCell colspan="4" class="text-muted-foreground">
                                            Belum ada bahan baku
                                        </TableCell>
                                    </TableRow>
                                    <template v-else v-for="(group, groupIndex) in getGroupedMaterials(
                                        cutting.materials,
                                    )" :key="group.rawMaterialId">
                                        <TableRow class="bg-muted/20 hover:bg-muted/20">
                                            <TableCell colspan="4" class="font-semibold text-foreground">
                                                <template v-if="group.isCombination">
                                                    <span class="text-primary">{{ groupIndex + 1 }}. {{ group.rawMaterialName }}</span>
                                                    <Badge variant="default" class="ml-2 font-normal">
                                                        {{ group.items.length }} bahan
                                                    </Badge>
                                                    <Badge
                                                        v-if="group.items[0]?.combination_material_result !== null && group.items[0]?.combination_material_result !== undefined"
                                                        variant="secondary" class="ml-2 font-normal">
                                                        Hasil: {{ group.items[0].combination_material_result }} pcs
                                                    </Badge>
                                                </template>
                                                <template v-else>
                                                    {{ groupIndex + 1 }}. {{ group.rawMaterialName }}
                                                    <Badge v-if="group.unitLabel" variant="secondary"
                                                        class="ml-2 font-normal">
                                                        {{ group.unitLabel }}
                                                    </Badge>
                                                </template>
                                            </TableCell>
                                        </TableRow>
                                        <TableRow v-for="material in group.items" :key="material.id">
                                            <TableCell class="pl-6 font-medium">
                                                {{ material.variant }}
                                            </TableCell>
                                            <TableCell>
                                                <MediaThumbnailCell :items="material.images ?? []" :max-visible="1" :title="`${group.rawMaterialName} - ${material.variant}`" :all-stocks="(material.images ?? []).map(() => `Pemakaian: ${material.material_usage_formatted}`)" />
                                            </TableCell>
                                            <TableCell class="tabular-nums">
                                                {{
                                                    material.material_usage_formatted
                                                }}
                                            </TableCell>
                                            <TableCell class="tabular-nums">
                                                <template
                                                    v-if="!group.isCombination && material.material_result !== null && material.material_result !== undefined">
                                                    {{ material.material_result }} pcs
                                                </template>
                                                <template v-else>
                                                    -
                                                </template>
                                            </TableCell>
                                        </TableRow>
                                    </template>
                                </TableBody>
                            </Table>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <h4 class="text-sm font-semibold tracking-tight text-foreground">
                            Hasil Produk
                        </h4>
                        <div class="rounded-md border">
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Produk</TableHead>
                                        <TableHead class="text-right">Hasil</TableHead>
                                        <TableHead class="text-right">Sample</TableHead>
                                        <TableHead class="text-right">Diluar Sample</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    <TableRow v-if="!cutting.results.length" :key="`${cutting.id}-result-empty`">
                                        <TableCell colspan="4" class="text-muted-foreground">
                                            Belum ada hasil produk
                                        </TableCell>
                                    </TableRow>
                                    <TableRow v-for="result in cutting.results" :key="result.id">
                                        <TableCell>
                                            {{ result.product_name ?? 'Produk Tidak Diketahui' }}
                                        </TableCell>
                                        <TableCell class="text-right tabular-nums">
                                            {{ result.cutting_result }} pcs
                                        </TableCell>
                                        <TableCell class="text-right tabular-nums">
                                            {{ result.sample }} pcs
                                        </TableCell>
                                        <TableCell class="text-right tabular-nums">
                                            {{ result.original_outside_sample }} pcs
                                        </TableCell>
                                    </TableRow>
                                </TableBody>
                            </Table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <DataTableEmpty v-else description="Silakan lakukan pencarian untuk menemukan data yang Anda cari." />

        <GroupedTableFooter :summary="paginationSummary" :pagination="pagination" :pagination-links="paginationLinks" />
    </div>
</template>
