import { Label } from '@/components/ui/label';
import { formatQuantityOrDash } from '@/lib/dates';
import {
    checkProductionMaterialStock,
    rawProductForMaterialLine,
    stockDisplayForMaterialLine,
} from '@/lib/production-material-stock';
import { cn } from '@/lib/utils';

/**
 * @param {object} props
 * @param {Array<{ purchase_product_id: number, product_name?: string, quantity: string, quantity_unit?: string, unit_label?: string|null }>} props.materials
 * @param {number|null} props.doughUsed
 * @param {Array<{ id: number, name?: string, unit_name?: string|null, base_unit_name?: string|null, stock_on_hand?: string, stock_in_base?: string, factor_to_base?: string|number, uses_base_unit?: boolean }>} [props.rawProducts]
 * @param {Record<string, string>} [props.stockLabels]
 * @param {string} props.doughQuantityLabel
 * @param {string} props.materialsSectionLabel
 * @param {string} props.noFormulaMessage
 * @param {string} props.locale
 */
export function ProductionFormulaMaterialsPreview({
    materials,
    doughUsed,
    rawProducts = [],
    stockLabels = {},
    doughQuantityLabel,
    materialsSectionLabel,
    noFormulaMessage,
    locale,
}) {
    const stockCheck = checkProductionMaterialStock(materials, rawProducts);
    const shortageIds = new Set(stockCheck.shortages.map((row) => row.purchase_product_id));
    if (!materials?.length) {
        return (
            <p className="text-muted-foreground text-sm">{noFormulaMessage}</p>
        );
    }

    return (
        <div className="space-y-2">
            <Label>{materialsSectionLabel}</Label>
            {!stockCheck.sufficient && rawProducts.length > 0 ? (
                <p className="text-destructive text-sm font-medium">
                    {stockLabels.insufficientStockBanner}
                </p>
            ) : null}
            {doughUsed !== null ? (
                <p className="text-muted-foreground text-sm tabular-nums">
                    {doughQuantityLabel.replace('{qty}', formatQuantityOrDash(String(doughUsed), locale))}
                </p>
            ) : null}
            <ul className="divide-y rounded-lg border border-border text-sm">
                {materials.map((line) => {
                    const rawProduct = rawProductForMaterialLine(line, rawProducts);
                    const isShort = shortageIds.has(line.purchase_product_id);
                    const stock = rawProduct
                        ? stockDisplayForMaterialLine(line, rawProduct)
                        : null;

                    return (
                        <li
                            key={line.purchase_product_id}
                            className={cn(
                                'flex flex-col gap-1 px-3 py-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4',
                                isShort && 'bg-destructive/5',
                            )}
                        >
                            <span className={cn(isShort && 'text-destructive')}>
                                {line.product_name}
                            </span>
                            <div className="flex flex-col items-start gap-0.5 sm:items-end">
                                <span className="shrink-0 tabular-nums font-medium">
                                    {formatQuantityOrDash(line.quantity, locale)}
                                    {line.unit_label ? ` ${line.unit_label}` : ''}
                                </span>
                                {stock ? (
                                    <span
                                        className={cn(
                                            'text-xs tabular-nums',
                                            isShort
                                                ? 'text-destructive font-medium'
                                                : 'text-muted-foreground',
                                        )}
                                    >
                                        {(isShort
                                            ? stockLabels.materialStockShort
                                            : stockLabels.materialInStock
                                        )
                                            ?.replace('{qty}', formatQuantityOrDash(String(stock.qty), locale))
                                            ?.replace('{unit}', stock.unit ?? '')}
                                    </span>
                                ) : null}
                            </div>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
}