import { Fragment } from 'react';
import { ImagePreviewButton } from '@/components/dialogs';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { formatNumber } from '@/lib/format';
import type { Cutting } from './columns';

export function CuttingItemSubRow({ cutting }: { cutting: Cutting }) {
    const items = cutting.cutting_materials ?? [];
    const combinations = cutting.cutting_material_combinations ?? [];

    const singles = items.filter((item) => item.combination_id === null);
    const comboItems = items.filter((item) => item.combination_id !== null);

    const comboGroups: Record<number, typeof items> = {};
    comboItems.forEach((item) => {
        const comboId = item.combination_id!;

        if (!comboGroups[comboId]) {
comboGroups[comboId] = [];
}

        comboGroups[comboId].push(item);
    });

    const singleByRawMaterial = singles.reduce(
        (acc, item) => {
            const name =
                item.raw_material_price?.raw_material?.name ?? 'BING';

            if (!acc[name]) {
acc[name] = [];
}

            acc[name].push(item);

            return acc;
        },
        {} as Record<string, typeof singles>,
    );

    const hasSingle = singles.length > 0;
    const hasCombo = comboItems.length > 0;

    let counter = 0;

    return (
        <div className="overflow-x-auto">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead className="w-[50px] text-center">
                            No
                        </TableHead>
                        <TableHead className="w-[60px]">Foto</TableHead>
                        <TableHead>Varian</TableHead>
                        <TableHead className="text-right">
                            Pemakaian
                        </TableHead>
                        <TableHead className="text-right">Hasil</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {hasSingle && (
                        <>
                            <TableRow>
                                <TableCell
                                    colSpan={5}
                                    className="text-center font-bold bg-muted/50"
                                >
                                    Single
                                </TableCell>
                            </TableRow>
                            {Object.entries(singleByRawMaterial).map(
                                ([rawMaterialName, groupItems]) => {
                                    const totalPemakaian = groupItems.reduce(
                                        (sum, item) =>
                                            sum + Number(item.material_usage),
                                        0,
                                    );
                                    const totalHasil = groupItems.reduce(
                                        (sum, item) =>
                                            sum +
                                            (item.material_result !== null
                                                ? Number(item.material_result)
                                                : 0),
                                        0,
                                    );

                                    return (
                                        <Fragment key={rawMaterialName}>
                                            <TableRow>
                                                <TableCell
                                                    colSpan={3}
                                                    className="text-center font-medium text-muted-foreground bg-muted/20"
                                                >
                                                    {rawMaterialName}
                                                </TableCell>
                                                <TableCell className="text-right font-medium text-muted-foreground bg-muted/20">
                                                    {formatNumber(
                                                        totalPemakaian,
                                                    )}
                                                </TableCell>
                                                <TableCell className="text-right font-medium text-muted-foreground bg-muted/20">
                                                    {formatNumber(
                                                        totalHasil,
                                                    )}
                                                </TableCell>
                                            </TableRow>
                                        {groupItems.map((item) => {
                                            counter++;

                                            return (
                                                <TableRow key={item.id}>
                                                    <TableCell className="text-center">
                                                        {counter}
                                                    </TableCell>
                                                    <TableCell>
                                                        {item.raw_material_price
                                                            ?.photo_url ? (
                                                            <ImagePreviewButton
                                                                srcs={[
                                                                    item
                                                                        .raw_material_price
                                                                        .photo_url,
                                                                ]}
                                                                title={
                                                                    item
                                                                        .raw_material_price
                                                                        .variant
                                                                }
                                                            />
                                                        ) : (
                                                            <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
                                                                N/A
                                                            </div>
                                                        )}
                                                    </TableCell>
                                                    <TableCell>
                                                        {item.raw_material_price
                                                            ?.variant ?? '-'}
                                                    </TableCell>
                                                    <TableCell className="text-right">
                                                        {formatNumber(
                                                            item.material_usage,
                                                        )}
                                                    </TableCell>
                                                    <TableCell className="text-right">
                                                        {item.material_result !==
                                                            null
                                                            ? formatNumber(
                                                                item.material_result,
                                                            )
                                                            : '-'}
                                                    </TableCell>
                                                </TableRow>
                                            );
                                        })}
                                    </Fragment>
                                );
                            },
                        )}
                        </>
                    )}

                    {hasCombo && (
                        <>
                            <TableRow>
                                <TableCell
                                    colSpan={5}
                                    className="text-center font-bold bg-muted/50"
                                >
                                    Kombinasi
                                </TableCell>
                            </TableRow>
                            {Object.entries(comboGroups).map(
                                ([comboId, materials]) => {
                                    counter++;
                                    const combo = combinations.find(
                                        (c) => c.id === Number(comboId),
                                    );

                                    return (
                                        <Fragment key={comboId}>
                                            <TableRow>
                                                <TableCell className="text-center font-medium">
                                                    {counter}
                                                </TableCell>
                                                <TableCell
                                                    colSpan={4}
                                                    className="font-medium text-muted-foreground bg-muted/20"
                                                >
                                                    Kombinasi{' '}
                                                    {counter}
                                                    {combo?.material_result !==
                                                        null &&
                                                        combo?.material_result !==
                                                        undefined && (
                                                            <span className="ml-2">
                                                                (Hasil:{' '}
                                                                {formatNumber(
                                                                    combo.material_result,
                                                                )}
                                                                )
                                                            </span>
                                                        )}
                                                </TableCell>
                                            </TableRow>
                                            {materials.map((item) => (
                                                <TableRow key={item.id}>
                                                    <TableCell></TableCell>
                                                    <TableCell>
                                                        {item
                                                            .raw_material_price
                                                            ?.photo_url ? (
                                                            <ImagePreviewButton
                                                                srcs={[
                                                                    item
                                                                        .raw_material_price
                                                                        .photo_url,
                                                                ]}
                                                                title={
                                                                    item
                                                                        .raw_material_price
                                                                        .variant
                                                                }
                                                            />
                                                        ) : (
                                                            <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
                                                                N/A
                                                            </div>
                                                        )}
                                                    </TableCell>
                                                    <TableCell>
                                                        {item
                                                            .raw_material_price
                                                            ?.raw_material
                                                            ?.name ?? '-'}{' '}
                                                        -{' '}
                                                        {item
                                                            .raw_material_price
                                                            ?.variant ?? '-'}
                                                    </TableCell>
                                                    <TableCell className="text-right">
                                                        {formatNumber(
                                                            item.material_usage,
                                                        )}
                                                    </TableCell>
                                                    <TableCell className="text-right">
                                                        -
                                                    </TableCell>
                                                </TableRow>
                                            ))}
                                        </Fragment>
                                    );
                                },
                            )}
                        </>
                    )}

                    {items.length === 0 && (
                        <TableRow>
                            <TableCell
                                colSpan={5}
                                className="text-center text-muted-foreground"
                            >
                                Tidak ada bahan baku.
                            </TableCell>
                        </TableRow>
                    )}
                </TableBody>
            </Table>
        </div>
    );
}