王明 / Food-Labeling-Management-Platform

  import React, { useCallback, useEffect, useMemo, useState } from 'react';
  import { ArrowLeft, Plus, Trash2 } from 'lucide-react';
  import { toast } from 'sonner';
  import { Button } from '../ui/button';
  import { Input } from '../ui/input';
  import {

    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
  } from '../ui/select';
  import {

    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
  } from '../ui/table';
  import { SearchableSelect } from '../ui/searchable-select';
  import { ImageUrlUpload } from '../ui/image-url-upload';
  import { getLabelTemplate, updateLabelTemplate } from '../../services/labelTemplateService';
  import { getProducts } from '../../services/productService';
  import { getLabelTypes } from '../../services/labelTypeService';
  import { skipCountForPage } from '../../lib/paginationQuery';

  import type { LabelElement, LabelTemplateDto, LabelType, Unit } from '../../types/labelTemplate';

  import {
    appliedLocationToEditor,

    canonicalElementType,

    dataEntryColumnLabel,
    isDataEntryTableColumnElement,

    isDateTimeDataEntryField,

    labelElementsToApiPayload,
    sortTemplateElementsForDisplay,
  } from '../../types/labelTemplate';

  import {
    LABEL_FORM_OFFSET_UNITS,
    offsetFieldUiStateFromStored,
    serializePrintInputOffset,
    tryParsePrintInputOffsetStored,
  } from '../../lib/labelFormDatePreview';

  import {
    foldNutritionCompositeKeysIntoDefaults,
    hydrateRowFieldValuesWithNutritionColumns,
    listNutritionManualFieldSpecs,
    nutritionCompositeFieldKey,
    type NutritionManualFieldSpec,
  } from '../../lib/nutritionManualEntry';

  import type { ProductDto } from '../../types/product';
  import type { LabelTypeDto } from '../../types/labelType';

  import {
    buildTemplateBarcodeQrDefaultsFromCodeValue,
    isTemplateSectionBarcodeOrQrElement,
  } from '../../lib/productCodeValueTemplate';

  
  export type TemplateDataEntryRow = {
    id: string;
    productId: string;
    labelTypeId: string;
    /** elementId -> 管理端录入的关联/默认值（真正打印时输入仍在 App） */
    fieldValues: Record<string, string>;
  };
  
  function newRowId(): string {
    try {
      return crypto.randomUUID();
    } catch {
      return `row-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
    }
  }
  

  /** 保存前：日期类已是 JSON 则保留；纯数字等转为 JSON；其它旧文案原样保留 */
  function normalizeDateTimeFieldForSave(el: LabelElement, raw: string): string {
    if (!isDateTimeDataEntryField(el)) return raw ?? '';
    const t = String(raw ?? '').trim();
    if (!t) return '';
    if (tryParsePrintInputOffsetStored(t)) return t;
    const { unit, value } = offsetFieldUiStateFromStored(t);
    if (!String(value).trim()) return t;
    const amount = Number(String(value).trim());
    if (!Number.isFinite(amount)) return t;
    return serializePrintInputOffset(unit, String(value).trim());
  }
  

  /** 模板录入表：图片与二维码（及名称含 qrcode 的控件）用上传组件，预览区固定 100×100 */
  const DATA_ENTRY_IMAGE_BOX =
    'h-[100px] w-[100px] min-h-[100px] min-w-[100px] max-h-[100px] max-w-[100px] shrink-0 aspect-auto';
  
  function dataEntryUsesImageUpload(element: LabelElement): boolean {

    const type = canonicalElementType(element.type);
    if (type === 'IMAGE' || type === 'QRCODE') return true;

    const n = (element.elementName ?? '').trim().toLowerCase();
    return n.includes('qrcode');
  }
  

  function DataEntryOffsetCell({
    value,
    onValueChange,
  }: {
    value: string;
    onValueChange: (next: string) => void;
  }) {
    const { unit, value: num } = offsetFieldUiStateFromStored(value);
    return (
      <div className="flex flex-wrap items-center gap-2 min-w-0 max-w-[220px]">
        <Select
          value={unit}
          onValueChange={(u) => onValueChange(serializePrintInputOffset(u, num))}
        >
          <SelectTrigger className="h-10 min-w-0 flex-1 bg-white text-sm border-gray-300">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {LABEL_FORM_OFFSET_UNITS.map((u) => (
              <SelectItem key={u} value={u} className="text-xs">
                {u}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Input
          type="number"
          className="h-10 w-20 shrink-0 border-gray-300 bg-white"
          value={num}
          onChange={(e) => onValueChange(serializePrintInputOffset(unit, e.target.value))}
          placeholder="Val"
        />
      </div>
    );
  }
  

  function DataEntryValueCell({

    element,

    value,
    onValueChange,

    readOnly,

  }: {

    element: LabelElement;

    value: string;
    onValueChange: (next: string) => void;

    readOnly?: boolean;

  }) {

    if (readOnly || isTemplateSectionBarcodeOrQrElement(element)) {
      return (
        <Input
          value={value}
          readOnly
          disabled
          className="h-10 border-gray-300 max-w-[220px] bg-gray-50"
          placeholder="From product Code Value"
        />
      );
    }

    if (dataEntryUsesImageUpload(element)) {

      return (
        <ImageUrlUpload
          value={value}
          onChange={onValueChange}
          uploadSubDir="label-template-data"
          oneImageOnly

          boxClassName={DATA_ENTRY_IMAGE_BOX}

          hint="Upload stores full URL/path for save."
        />
      );
    }

    if (isDateTimeDataEntryField(element)) {
      return <DataEntryOffsetCell value={value} onValueChange={onValueChange} />;
    }

    return (
      <Input
        value={value}
        onChange={(e) => onValueChange(e.target.value)}
        placeholder="—"

        className="h-10 border-gray-300 max-w-[220px]"

      />
    );
  }
  
  export function LabelTemplateDataEntryView({
    templateCode,
    onBack,

    contextHint,

  }: {
    templateCode: string;
    onBack: () => void;

    /** 从 Labels 进入时展示：当前编辑的是哪条标签绑定的模板 */
    contextHint?: string;

  }) {
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [templateTitle, setTemplateTitle] = useState('');
    /** 详情接口完整模板，保存时随 templateProductDefaults 一并 PUT（接口 4.4） */
    const [templateDto, setTemplateDto] = useState<LabelTemplateDto | null>(null);

    const [products, setProducts] = useState<ProductDto[]>([]);
    const [types, setTypes] = useState<LabelTypeDto[]>([]);
    const [rows, setRows] = useState<TemplateDataEntryRow[]>([]);
  

    const sortedTemplateElements = useMemo(
      () => sortTemplateElementsForDisplay((templateDto?.elements ?? []) as LabelElement[]),
      [templateDto],
    );
  
    const dataColumns = useMemo(() => {
      const cols: Array<
        | { kind: "element"; el: LabelElement }
        | { kind: "nutrition"; parent: LabelElement; spec: NutritionManualFieldSpec }
      > = [];
      for (const el of sortedTemplateElements) {
        if (isDataEntryTableColumnElement(el)) cols.push({ kind: "element", el });
        if (canonicalElementType(el.type) === "NUTRITION") {
          for (const spec of listNutritionManualFieldSpecs(el)) {
            cols.push({ kind: "nutrition", parent: el, spec });
          }
        }
      }
      return cols;
    }, [sortedTemplateElements]);
  

    const productOptions = useMemo(
      () =>
        products.map((p) => {
          const label =
            (p.productName ?? p.productCode ?? '').trim() || p.id;
          return { value: p.id, label };
        }),
      [products],
    );
  
    const labelTypeOptions = useMemo(
      () =>
        types.map((t) => {
          const label =
            (t.typeName ?? t.typeCode ?? '').trim() || t.id;
          return { value: t.id, label };
        }),
      [types],
    );
  
    useEffect(() => {
      let cancelled = false;
      (async () => {
        setLoading(true);
        try {
          const [tpl, prodRes, typeRes] = await Promise.all([
            getLabelTemplate(templateCode),
            getProducts({ skipCount: skipCountForPage(1), maxResultCount: 500 }),
            getLabelTypes({ skipCount: skipCountForPage(1), maxResultCount: 500 }),
          ]);
          if (cancelled) return;
          const title =
            (tpl.templateName ?? tpl.name ?? '').trim() ||
            (tpl.templateCode ?? tpl.id ?? '').trim() ||
            templateCode;
          setTemplateTitle(title);

          setProducts(prodRes.items ?? []);
          setTypes(typeRes.items ?? []);
          setTemplateDto(tpl);
  
          const defaults = tpl.templateProductDefaults ?? [];
          const fromApi =
            defaults.length > 0
              ? [...defaults].sort((a, b) => (a.orderNum ?? 0) - (b.orderNum ?? 0))
              : [];
  
          if (fromApi.length > 0) {
            setRows(
              fromApi.map((d) => ({
                id: newRowId(),
                productId: d.productId,
                labelTypeId: d.labelTypeId,

                fieldValues: hydrateRowFieldValuesWithNutritionColumns(
                  { ...d.defaultValues },
                  (tpl.elements ?? []) as LabelElement[],
                ),

              })),
            );
          } else {
            setRows([
              {
                id: newRowId(),
                productId: '',
                labelTypeId: '',
                fieldValues: {},
              },
            ]);
          }
        } catch (e: unknown) {
          if (!cancelled) {
            toast.error('Failed to load template or options.', {
              description: e instanceof Error ? e.message : 'Please try again.',
            });
            setTemplateTitle(templateCode);

            setRows([]);
            setTemplateDto(null);
          }
        } finally {
          if (!cancelled) setLoading(false);
        }
      })();
      return () => {
        cancelled = true;
      };
    }, [templateCode]);
  
    const addRow = useCallback(() => {
      setRows((prev) => [
        ...prev,
        { id: newRowId(), productId: '', labelTypeId: '', fieldValues: {} },
      ]);
    }, []);
  
    const removeRow = useCallback((id: string) => {
      setRows((prev) => (prev.length <= 1 ? prev : prev.filter((r) => r.id !== id)));
    }, []);
  
    const updateRow = useCallback((id: string, patch: Partial<TemplateDataEntryRow>) => {
      setRows((prev) =>
        prev.map((r) => (r.id === id ? { ...r, ...patch } : r)),
      );
    }, []);
  

    const applyProductCodeValueToRow = useCallback(
      (rowId: string, productId: string) => {
        const pid = productId.trim();
        const product = products.find((p) => p.id === pid);
        const cv = (product?.codeValue ?? '').trim();
        const scanDefaults = buildTemplateBarcodeQrDefaultsFromCodeValue(
          (templateDto?.elements ?? []) as LabelElement[],
          cv,
        );
        setRows((prev) =>
          prev.map((r) => {
            if (r.id !== rowId) return r;
            return {
              ...r,
              productId: pid,
              fieldValues: { ...r.fieldValues, ...scanDefaults },
            };
          }),
        );
      },
      [products, templateDto],
    );
  

    const setFieldValue = useCallback(
      (rowId: string, elementId: string, value: string) => {
        setRows((prev) =>
          prev.map((r) => {
            if (r.id !== rowId) return r;
            return {
              ...r,
              fieldValues: { ...r.fieldValues, [elementId]: value },
            };
          }),
        );
      },
      [],
    );
  
    const handleSave = useCallback(async () => {
      if (!templateDto) {
        toast.error('Template not loaded', { description: 'Please reload the page and try again.' });
        return;
      }
      const touched = rows.filter((r) => r.productId.trim() || r.labelTypeId.trim());
      const incomplete = touched.some(
        (r) => !r.productId.trim() || !r.labelTypeId.trim(),
      );
      if (incomplete) {
        toast.error('Product and label type required', {
          description:
            'Each row that you started must have both Product and Label type selected.',
        });
        return;
      }
  
      const validRows = rows.filter((r) => r.productId.trim() && r.labelTypeId.trim());

      const fullElements = sortTemplateElementsForDisplay(
        (templateDto.elements ?? []) as LabelElement[],
      );

      const templateProductDefaults = validRows.map((r, i) => {

        const folded = foldNutritionCompositeKeysIntoDefaults(r.fieldValues, fullElements);

        const defaultValues: Record<string, string> = {};

        for (const col of dataColumns) {
          if (col.kind === "element") {
            defaultValues[col.el.id] = normalizeDateTimeFieldForSave(col.el, folded[col.el.id] ?? "");
          }
        }
        for (const el of fullElements) {
          if (canonicalElementType(el.type) === "NUTRITION") {
            const j = folded[el.id];
            if (j) defaultValues[el.id] = j;
          }

        }

        const product = products.find((p) => p.id === r.productId.trim());
        Object.assign(
          defaultValues,
          buildTemplateBarcodeQrDefaultsFromCodeValue(fullElements, product?.codeValue),
        );

        return {
          productId: r.productId.trim(),
          labelTypeId: r.labelTypeId.trim(),
          defaultValues,
          orderNum: i + 1,
        };
      });
  

      if (fullElements.length === 0) {
        toast.error('Template has no elements', { description: 'Cannot save this template.' });
        return;
      }
  
      const loc = appliedLocationToEditor(templateDto);
      setSaving(true);
      try {
        const updated = await updateLabelTemplate(templateCode, {
          id: templateDto.id,
          name: (templateDto.name ?? templateDto.templateName ?? '').trim() || templateCode,
          labelType: (templateDto.labelType ?? 'PRICE') as LabelType,
          unit: (templateDto.unit ?? 'inch') as Unit,
          width: Number(templateDto.width ?? 2),
          height: Number(templateDto.height ?? 2),
          appliedLocation: loc,
          showRuler: templateDto.showRuler ?? true,
          showGrid: templateDto.showGrid ?? true,
          state: templateDto.state ?? true,
          elements: labelElementsToApiPayload(fullElements),
          appliedLocationIds: loc === 'ALL' ? [] : (templateDto.appliedLocationIds ?? []),
          templateProductDefaults,
        });
        setTemplateDto(updated);
        toast.success('Saved', {
          description: 'Template product defaults were updated on the server.',
        });
      } catch (e: unknown) {
        toast.error('Save failed', {
          description: e instanceof Error ? e.message : 'Please try again.',
        });
      } finally {
        setSaving(false);
      }

    }, [templateCode, templateDto, rows, dataColumns, products]);

  
    return (
      <div className="h-full flex flex-col min-h-0">
        <div className="flex flex-wrap items-center gap-3 pb-4 border-b border-gray-200 shrink-0">
          <Button
            type="button"
            variant="outline"
            className="h-10 gap-2"
            onClick={onBack}
          >
            <ArrowLeft className="h-4 w-4" />
            Back
          </Button>
          <div className="flex-1 min-w-[200px]">
            <div className="text-xs font-medium text-gray-500 uppercase tracking-wide">
              Label template
            </div>
            <h2 className="text-lg font-semibold text-gray-900 truncate" title={templateTitle}>
              {templateTitle}
            </h2>

            {contextHint ? (
              <p className="text-sm text-gray-600 truncate mt-0.5" title={contextHint}>
                {contextHint}
              </p>
            ) : null}

          </div>
          <div className="flex items-center gap-2">
            <Button type="button" variant="outline" className="h-10 gap-1" onClick={addRow}>
              <Plus className="h-4 w-4" />
              Add row
            </Button>
            <Button
              type="button"
              className="h-10 bg-blue-600 hover:bg-blue-700"
              onClick={() => void handleSave()}
              disabled={saving || loading || !templateDto}
            >
              {saving ? 'Saving…' : 'Save'}
            </Button>
          </div>
        </div>
  
        <p className="text-sm text-gray-600 py-3 shrink-0">
          Bind product and label type per row. Values are saved with the template (edit API) as{' '}

          <span className="font-medium">templateProductDefaults</span> (interface doc section 4.4). Columns cover{' '}
          <span className="font-medium">Label</span> group defaults, <span className="font-medium">PRINT_INPUT</span> /
          Duration fields, and (when present) <span className="font-medium">Nutrition Facts</span> manual cells.{' '}
          <span className="font-medium">Template</span> panel elements are edited only in the label template editor
          (not here). Date / time / duration columns use <span className="font-medium">unit + value</span>; stored as
          JSON with <span className="font-medium">unit</span> and <span className="font-medium">value</span> keys.
          Nutrition values are stored as JSON under the nutrition element id for App print preview.

        </p>
  
        <div className="flex-1 min-h-0 overflow-auto rounded-md border bg-white shadow-sm">
          {loading ? (
            <div className="p-10 text-center text-sm text-gray-500">Loading…</div>

          ) : dataColumns.length === 0 ? (

            <div className="p-10 text-center text-sm text-gray-600">

              No manual input or nutrition columns in this template.

            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow className="bg-gray-50 hover:bg-gray-50">
                  <TableHead className="font-bold text-gray-900 w-[200px] min-w-[160px]">
                    Product
                  </TableHead>
                  <TableHead className="font-bold text-gray-900 w-[180px] min-w-[140px]">
                    Label type
                  </TableHead>

                  {dataColumns.map((col) => (

                    <TableHead

                      key={
                        col.kind === 'element'
                          ? col.el.id
                          : nutritionCompositeFieldKey(col.parent.id, col.spec.subKey)
                      }

                      className="font-bold text-gray-900 min-w-[120px] whitespace-nowrap"

                      title={col.kind === 'element' ? col.el.id : `${col.parent.id} · ${col.spec.subKey}`}

                    >

                      {col.kind === 'element' ? dataEntryColumnLabel(col.el) : col.spec.columnLabel}

                    </TableHead>
                  ))}
                  <TableHead className="w-[72px] text-center font-bold text-gray-900"> </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {rows.map((row) => (
                  <TableRow key={row.id} className="hover:bg-gray-50">
                    <TableCell className="align-top py-2">
                      <SearchableSelect
                        value={row.productId}

                        onValueChange={(v) => applyProductCodeValueToRow(row.id, v)}

                        options={productOptions}
                        placeholder="Select product"
                        searchPlaceholder="Search product…"
                      />
                    </TableCell>
                    <TableCell className="align-top py-2">
                      <SearchableSelect
                        value={row.labelTypeId}
                        onValueChange={(v) => updateRow(row.id, { labelTypeId: v })}
                        options={labelTypeOptions}
                        placeholder="Select label type"
                        searchPlaceholder="Search type…"
                      />
                    </TableCell>

                    {dataColumns.map((col) => (
                      <TableCell
                        key={
                          col.kind === 'element'
                            ? col.el.id
                            : nutritionCompositeFieldKey(col.parent.id, col.spec.subKey)
                        }
                        className="align-top py-2"
                      >
                        {col.kind === 'element' ? (
                          <DataEntryValueCell
                            element={col.el}
                            value={row.fieldValues[col.el.id] ?? ''}
                            onValueChange={(v) => setFieldValue(row.id, col.el.id, v)}
                          />
                        ) : (
                          <Input
                            value={
                              row.fieldValues[
                                nutritionCompositeFieldKey(col.parent.id, col.spec.subKey)
                              ] ?? ''
                            }
                            onChange={(e) =>
                              setFieldValue(
                                row.id,
                                nutritionCompositeFieldKey(col.parent.id, col.spec.subKey),
                                e.target.value,
                              )
                            }
                            placeholder="—"
                            className="h-10 border-gray-300 max-w-[220px]"
                          />
                        )}

                      </TableCell>
                    ))}
                    <TableCell className="text-center align-top py-2">
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        className="h-9 w-9 text-red-600 hover:text-red-700 hover:bg-red-50"
                        aria-label="Remove row"
                        onClick={() => removeRow(row.id)}
                        disabled={rows.length <= 1}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </div>
      </div>
    );
  }