sam-react-prod/src/components/production/WorkerScreen/InspectionInputModal.tsx

'use client';

/**
 * 중간검사 입력 모달
 *
 * 공정별로 다른 검사 항목 표시:
 * - screen: 스크린 중간검사
 * - slat: 슬랫 중간검사
 * - slat_jointbar: 조인트바 중간검사
 * - bending: 절곡 중간검사
 * - bending_wip: 재고생산(재공품) 중간검사
 */

import { useState, useEffect, useMemo } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { cn } from '@/lib/utils';
import type { InspectionTemplateData, InspectionTemplateSectionItem } from './types';

// 중간검사 공정 타입
export type InspectionProcessType =
  | 'screen'
  | 'slat'
  | 'slat_jointbar'
  | 'bending'
  | 'bending_wip';

// 검사 결과 데이터 타입
export interface InspectionData {
  productName: string;
  specification: string;
  // 겉모양 상태
  bendingStatus?: 'good' | 'bad' | null;      // 절곡상태
  processingStatus?: 'good' | 'bad' | null;   // 가공상태
  sewingStatus?: 'good' | 'bad' | null;       // 재봉상태
  assemblyStatus?: 'good' | 'bad' | null;     // 조립상태
  // 치수
  length?: number | null;
  width?: number | null;
  height1?: number | null;
  height2?: number | null;
  length3?: number | null;
  gap4?: number | null;
  gapStatus?: 'ok' | 'ng' | null;
  // 간격 포인트들 (절곡용)
  gapPoints?: { left: number | null; right: number | null }[];
  // 판정
  judgment: 'pass' | 'fail' | null;
  nonConformingContent: string;
  // 동적 폼 값 (템플릿 기반 검사 시)
  templateValues?: Record<string, unknown>;
}

interface InspectionInputModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  processType: InspectionProcessType;
  productName?: string;
  specification?: string;
  initialData?: InspectionData;
  onComplete: (data: InspectionData) => void;
  /** 문서 템플릿 데이터 (있으면 동적 폼 모드) */
  templateData?: InspectionTemplateData;
  /** 작업 아이템의 실제 치수 (reference_attribute 연동용) */
  workItemDimensions?: { width?: number; height?: number };
}

const PROCESS_TITLES: Record<InspectionProcessType, string> = {
  screen: '# 스크린 중간검사',
  slat: '# 슬랫 중간검사',
  slat_jointbar: '# 조인트바 중간검사',
  bending: '# 절곡 중간검사',
  bending_wip: '# 재고생산 중간검사',
};

// 양호/불량 버튼 컴포넌트
function StatusToggle({
  value,
  onChange,
}: {
  value: 'good' | 'bad' | null;
  onChange: (v: 'good' | 'bad') => void;
}) {
  return (
    <div className="flex gap-2 flex-1">
      <button
        type="button"
        onClick={() => onChange('good')}
        className={cn(
          'flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors',
          value === 'good'
            ? 'bg-black text-white'
            : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'
        )}
      >
        양호
      </button>
      <button
        type="button"
        onClick={() => onChange('bad')}
        className={cn(
          'flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors',
          value === 'bad'
            ? 'bg-black text-white'
            : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'
        )}
      >
        불량
      </button>
    </div>
  );
}

// OK/NG 버튼 컴포넌트
function OkNgToggle({
  value,
  onChange,
}: {
  value: 'ok' | 'ng' | null;
  onChange: (v: 'ok' | 'ng') => void;
}) {
  return (
    <div className="flex gap-2 flex-1">
      <button
        type="button"
        onClick={() => onChange('ok')}
        className={cn(
          'flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors',
          value === 'ok'
            ? 'bg-black text-white'
            : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'
        )}
      >
        OK
      </button>
      <button
        type="button"
        onClick={() => onChange('ng')}
        className={cn(
          'flex-1 py-2.5 rounded-lg text-sm font-bold transition-colors',
          value === 'ng'
            ? 'bg-black text-white'
            : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'
        )}
      >
        NG
      </button>
    </div>
  );
}

// 자동 판정 표시 컴포넌트
function JudgmentDisplay({ value }: { value: 'pass' | 'fail' | null }) {
  return (
    <div className="flex gap-2 flex-1">
      <div
        className={cn(
          'flex-1 py-2.5 rounded-lg text-sm font-bold text-center transition-colors',
          value === 'pass'
            ? 'bg-orange-600 text-white'
            : 'bg-gray-100 text-gray-400 border border-gray-300'
        )}
      >
        적합
      </div>
      <div
        className={cn(
          'flex-1 py-2.5 rounded-lg text-sm font-bold text-center transition-colors',
          value === 'fail'
            ? 'bg-black text-white'
            : 'bg-gray-100 text-gray-400 border border-gray-300'
        )}
      >
        부적합
      </div>
    </div>
  );
}

// 공정별 자동 판정 계산
function hasMeasurement(v: number | null | undefined): boolean {
  return v != null;
}

function computeJudgment(processType: InspectionProcessType, data: InspectionData): 'pass' | 'fail' | null {
  switch (processType) {
    case 'screen': {
      const { processingStatus, sewingStatus, assemblyStatus, gapStatus, length, width } = data;
      // 불량이 하나라도 있으면 즉시 부적합
      if (processingStatus === 'bad' || sewingStatus === 'bad' || assemblyStatus === 'bad' || gapStatus === 'ng') return 'fail';
      // 모든 상태 양호 + 측정값 입력 완료 시 적합
      if (processingStatus === 'good' && sewingStatus === 'good' && assemblyStatus === 'good' && gapStatus === 'ok'
        && hasMeasurement(length) && hasMeasurement(width)) return 'pass';
      return null;
    }
    case 'slat': {
      const { processingStatus, assemblyStatus, height1, height2, length } = data;
      if (processingStatus === 'bad' || assemblyStatus === 'bad') return 'fail';
      if (processingStatus === 'good' && assemblyStatus === 'good'
        && hasMeasurement(height1) && hasMeasurement(height2) && hasMeasurement(length)) return 'pass';
      return null;
    }
    case 'slat_jointbar': {
      const { processingStatus, assemblyStatus, height1, height2, length3, gap4 } = data;
      if (processingStatus === 'bad' || assemblyStatus === 'bad') return 'fail';
      if (processingStatus === 'good' && assemblyStatus === 'good'
        && hasMeasurement(height1) && hasMeasurement(height2) && hasMeasurement(length3) && hasMeasurement(gap4)) return 'pass';
      return null;
    }
    case 'bending': {
      const { bendingStatus, length } = data;
      if (bendingStatus === 'bad') return 'fail';
      if (bendingStatus === 'good' && hasMeasurement(length)) return 'pass';
      return null;
    }
    case 'bending_wip': {
      const { bendingStatus, length, width } = data;
      if (bendingStatus === 'bad') return 'fail';
      if (bendingStatus === 'good' && hasMeasurement(length) && hasMeasurement(width)) return 'pass';
      return null;
    }
    default:
      return null;
  }
}

// ===== Tolerance 기반 판정 유틸 =====
type ToleranceConfig = NonNullable<NonNullable<InspectionTemplateData['template']>['sections'][number]['items'][number]['tolerance']>;

function evaluateTolerance(measured: number, design: number, tolerance: ToleranceConfig): 'pass' | 'fail' {
  switch (tolerance.type) {
    case 'symmetric':
      return Math.abs(measured - design) <= (tolerance.value ?? 0) ? 'pass' : 'fail';
    case 'asymmetric':
      return (measured >= design - (tolerance.minus ?? 0) && measured <= design + (tolerance.plus ?? 0)) ? 'pass' : 'fail';
    case 'range':
      return (measured >= (tolerance.min ?? -Infinity) && measured <= (tolerance.max ?? Infinity)) ? 'pass' : 'fail';
    default:
      return 'pass';
  }
}

function formatToleranceLabel(tolerance: ToleranceConfig): string {
  switch (tolerance.type) {
    case 'symmetric':
      return `± ${tolerance.value}`;
    case 'asymmetric':
      return `+${tolerance.plus} / -${tolerance.minus}`;
    case 'range':
      return `${tolerance.min} ~ ${tolerance.max}`;
    default:
      return '';
  }
}

/** reference_attribute에서 치수 resolve */
function resolveRefValue(
  fieldValues: Record<string, unknown> | null,
  dimensions?: { width?: number; height?: number }
): number | null {
  if (!fieldValues || !dimensions) return null;
  const refAttr = fieldValues.reference_attribute;
  if (typeof refAttr !== 'string') return null;
  const mapping: Record<string, number | undefined> = {
    width: dimensions.width,
    height: dimensions.height,
    length: dimensions.width, // 스크린 '길이' = 폭(width)
  };
  return mapping[refAttr] ?? null;
}

function formatDimension(val: number | undefined): string {
  if (val === undefined || val === null) return '-';
  return val.toLocaleString();
}

// ===== 항목별 입력 유형 판별 =====
// measurement_type이 'numeric' 또는 'measurement'이면 측정치수 입력, 나머지는 OK/NG 체크
function isNumericItem(item: InspectionTemplateSectionItem): boolean {
  const mt = item.measurement_type?.toLowerCase();
  return mt === 'numeric' || mt === 'measurement';
}

// 기준치수 resolve (standard_criteria → reference_attribute fallback)
function resolveDesignValue(
  item: InspectionTemplateSectionItem,
  workItemDimensions?: { width?: number; height?: number }
): number | undefined {
  if (item.standard_criteria) {
    const designStr = typeof item.standard_criteria === 'object'
      ? String((item.standard_criteria as Record<string, number>).nominal ?? '')
      : String(item.standard_criteria);
    const parsed = parseFloat(designStr);
    if (!isNaN(parsed)) return parsed;
  }
  const refVal = resolveRefValue(item.field_values, workItemDimensions);
  return refVal !== null ? refVal : undefined;
}

// ===== 동적 폼 (템플릿 기반) =====
function DynamicInspectionForm({
  template,
  formValues,
  onValueChange,
  workItemDimensions,
}: {
  template: NonNullable<InspectionTemplateData['template']>;
  formValues: Record<string, unknown>;
  onValueChange: (key: string, value: unknown) => void;
  workItemDimensions?: { width?: number; height?: number };
}) {
  // 모든 섹션의 아이템을 플랫하게 렌더링 (섹션 구분은 가벼운 구분선으로)
  return (
    <div className="space-y-4">
      {template.sections.map((section, sectionIdx) => (
        <div key={section.id} className="space-y-3">
          {/* 섹션 구분: 2번째 섹션부터 구분선 표시 */}
          {sectionIdx > 0 && (
            <div className="border-t border-gray-200 pt-3">
              <span className="text-xs text-gray-400 font-medium">{section.name}</span>
            </div>
          )}

          {section.items.map((item) => {
            const fieldKey = `section_${section.id}_item_${item.id}`;
            const itemLabel = item.item || item.name || '';
            const designValue = resolveDesignValue(item, workItemDimensions);

            // ── 측정치수 입력 (길이, 높이 등) ──
            if (isNumericItem(item)) {
              const numValue = formValues[fieldKey] as number | null | undefined;

              const designLabel = designValue !== undefined ? designValue.toLocaleString() : '';
              const toleranceLabel = item.tolerance
                ? ` (${designLabel ? designLabel + ' ' : ''}${formatToleranceLabel(item.tolerance)})`
                : designLabel ? ` (${designLabel})` : '';

              let itemJudgment: 'pass' | 'fail' | null = null;
              if (item.tolerance && numValue != null && designValue !== undefined) {
                itemJudgment = evaluateTolerance(numValue, designValue, item.tolerance);
              }

              return (
                <div key={item.id} className="space-y-1.5">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-bold">
                      {itemLabel}{toleranceLabel}
                    </span>
                    {itemJudgment && (
                      <span className={cn(
                        'text-xs font-bold px-2 py-0.5 rounded',
                        itemJudgment === 'pass' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
                      )}>
                        {itemJudgment === 'pass' ? '적합' : '부적합'}
                      </span>
                    )}
                  </div>
                  <Input
                    type="number"
                    placeholder={designValue !== undefined ? String(designValue) : '입력'}
                    value={numValue ?? ''}
                    onChange={(e) => {
                      const v = e.target.value === '' ? null : parseFloat(e.target.value);
                      onValueChange(fieldKey, v);
                    }}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
              );
            }

            // ── OK/NG 체크 (기준치수 표시 있으면 함께 표시) ──
            const value = formValues[fieldKey] as 'ok' | 'ng' | null | undefined;
            const hasStandard = designValue !== undefined || item.standard;
            const standardDisplay = designValue !== undefined
              ? (item.tolerance
                ? `${designValue.toLocaleString()} ${formatToleranceLabel(item.tolerance)}`
                : String(designValue.toLocaleString()))
              : item.standard;

            return (
              <div key={item.id} className="space-y-1.5">
                <div className="space-y-0.5">
                  <span className="text-sm font-bold">{itemLabel}</span>
                  {hasStandard && standardDisplay && (
                    <p className="text-xs text-gray-500">기준: {standardDisplay}</p>
                  )}
                </div>
                <OkNgToggle
                  value={value ?? null}
                  onChange={(v) => onValueChange(fieldKey, v)}
                />
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}

// 동적 폼의 자동 판정 계산
function computeDynamicJudgment(
  template: NonNullable<InspectionTemplateData['template']>,
  formValues: Record<string, unknown>,
  workItemDimensions?: { width?: number; height?: number }
): 'pass' | 'fail' | null {
  let totalItems = 0;
  let filledItems = 0;
  let hasFail = false;

  for (const section of template.sections) {
    for (const item of section.items) {
      totalItems++;
      const fieldKey = `section_${section.id}_item_${item.id}`;
      const value = formValues[fieldKey];

      if (isNumericItem(item)) {
        const numValue = value as number | null | undefined;
        if (numValue != null) {
          filledItems++;
          if (item.tolerance) {
            const design = resolveDesignValue(item, workItemDimensions);
            if (design !== undefined) {
              const result = evaluateTolerance(numValue, design, item.tolerance);
              if (result === 'fail') hasFail = true;
            }
          }
        }
      } else {
        if (value != null) {
          filledItems++;
          if (value === 'ng') hasFail = true;
        }
      }
    }
  }

  if (filledItems === 0) return null;
  if (hasFail) return 'fail';
  // 모든 항목이 입력되어야 적합 판정
  if (filledItems < totalItems) return null;
  return 'pass';
}

export function InspectionInputModal({
  open,
  onOpenChange,
  processType,
  productName = '',
  specification = '',
  initialData,
  onComplete,
  templateData,
  workItemDimensions,
}: InspectionInputModalProps) {
  // 템플릿 모드 여부
  const useTemplateMode = !!(templateData?.has_template && templateData.template);

  const [formData, setFormData] = useState<InspectionData>({
    productName,
    specification,
    judgment: null,
    nonConformingContent: '',
  });

  // 동적 폼 값 (템플릿 모드용)
  const [dynamicFormValues, setDynamicFormValues] = useState<Record<string, unknown>>({});

  // 절곡용 간격 포인트 초기화
  const [gapPoints, setGapPoints] = useState<{ left: number | null; right: number | null }[]>(
    Array(5).fill(null).map(() => ({ left: null, right: null }))
  );

  useEffect(() => {
    if (open) {
      // initialData가 있으면 기존 저장 데이터로 복원
      if (initialData) {
        setFormData({
          ...initialData,
          productName: initialData.productName || productName,
          specification: initialData.specification || specification,
        });
        if (initialData.gapPoints) {
          setGapPoints(initialData.gapPoints);
        } else {
          setGapPoints(Array(5).fill(null).map(() => ({ left: null, right: null })));
        }
        // 동적 폼 값 복원 (템플릿 기반 검사 데이터)
        if (initialData.templateValues) {
          setDynamicFormValues(initialData.templateValues);
        } else {
          setDynamicFormValues({});
        }
        return;
      }

      // 공정별 기본값 설정 - 모두 미선택(null) 상태로 초기화
      const baseData: InspectionData = {
        productName,
        specification,
        judgment: null,
        nonConformingContent: '',
      };

      // 공정별 추가 기본값 설정 (모두 null)
      switch (processType) {
        case 'screen':
          setFormData({
            ...baseData,
            processingStatus: null,
            sewingStatus: null,
            assemblyStatus: null,
            gapStatus: null,
          });
          break;
        case 'slat':
          setFormData({
            ...baseData,
            processingStatus: null,
            assemblyStatus: null,
          });
          break;
        case 'slat_jointbar':
          setFormData({
            ...baseData,
            processingStatus: null,
            assemblyStatus: null,
          });
          break;
        case 'bending':
          setFormData({
            ...baseData,
            bendingStatus: null,
          });
          break;
        case 'bending_wip':
          setFormData({
            ...baseData,
            bendingStatus: null,
          });
          break;
        default:
          setFormData(baseData);
      }

      setGapPoints(Array(5).fill(null).map(() => ({ left: null, right: null })));
      setDynamicFormValues({});
    }
  }, [open, productName, specification, processType, initialData]);

  // 자동 판정 계산 (템플릿 모드 vs 레거시 모드)
  const autoJudgment = useMemo(() => {
    if (useTemplateMode && templateData?.template) {
      return computeDynamicJudgment(templateData.template, dynamicFormValues, workItemDimensions);
    }
    return computeJudgment(processType, formData);
  }, [useTemplateMode, templateData, dynamicFormValues, workItemDimensions, processType, formData]);

  // 판정값 자동 동기화
  useEffect(() => {
    setFormData((prev) => {
      if (prev.judgment === autoJudgment) return prev;
      return { ...prev, judgment: autoJudgment };
    });
  }, [autoJudgment]);

  const handleComplete = () => {
    const data: InspectionData = {
      ...formData,
      gapPoints: processType === 'bending' ? gapPoints : undefined,
      // 동적 폼 값을 templateValues로 병합
      ...(useTemplateMode ? { templateValues: dynamicFormValues } : {}),
    };
    onComplete(data);
    onOpenChange(false);
  };

  const handleCancel = () => {
    onOpenChange(false);
  };

  // 숫자 입력 핸들러
  const handleNumberChange = (
    key: keyof InspectionData,
    value: string
  ) => {
    const num = value === '' ? null : parseFloat(value);
    setFormData((prev) => ({ ...prev, [key]: num }));
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="w-[95vw] max-w-[500px] sm:max-w-[500px] max-h-[90vh] flex flex-col p-0">
        <DialogHeader className="px-6 pt-6 pb-0 shrink-0">
          <DialogTitle className="text-lg font-bold">
            {PROCESS_TITLES[processType]}
          </DialogTitle>
        </DialogHeader>

        <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-5">
          {/* 기본 정보 (읽기전용) */}
          <div className="space-y-3">
            <div className="space-y-1.5">
              <span className="text-sm font-bold">제품명</span>
              <Input
                value={formData.productName}
                readOnly
                className="h-11 bg-gray-100 border-gray-300 rounded-lg"
              />
            </div>
            <div className="space-y-1.5">
              <span className="text-sm font-bold">규격</span>
              <Input
                value={formData.specification}
                readOnly
                className="h-11 bg-gray-100 border-gray-300 rounded-lg"
              />
            </div>
          </div>

          {/* ===== 동적 폼 (템플릿 기반) ===== */}
          {useTemplateMode && templateData?.template && (
            <DynamicInspectionForm
              template={templateData.template}
              formValues={dynamicFormValues}
              onValueChange={(key, value) =>
                setDynamicFormValues((prev) => ({ ...prev, [key]: value }))
              }
              workItemDimensions={workItemDimensions}
            />
          )}

          {/* ===== 레거시: 공정별 하드코딩 검사 항목 (템플릿 없을 때만 표시) ===== */}

          {/* ===== 재고생산 (bending_wip) 검사 항목 ===== */}
          {!useTemplateMode && processType === 'bending_wip' && (
            <>
              <div className="space-y-1.5">
                <span className="text-sm font-bold">검모양 절곡상태</span>
                <StatusToggle
                  value={formData.bendingStatus || null}
                  onChange={(v) => setFormData((prev) => ({ ...prev, bendingStatus: v }))}
                />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">길이 ({formatDimension(workItemDimensions?.width)})</span>
                  <Input
                    type="number"
                    placeholder={formatDimension(workItemDimensions?.width)}
                    value={formData.length ?? ''}
                    onChange={(e) => handleNumberChange('length', e.target.value)}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">너비 ({formatDimension(workItemDimensions?.height)})</span>
                  <Input
                    type="number"
                    placeholder={formatDimension(workItemDimensions?.height)}
                    value={formData.width ?? ''}
                    onChange={(e) => handleNumberChange('width', e.target.value)}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">간격 (1,000)</span>
                  <div className="flex gap-2">
                    <Input
                      type="number"
                      placeholder="①"
                      className="h-11 rounded-lg border-gray-300"
                    />
                    <Input
                      type="number"
                      placeholder="1,000"
                      className="h-11 rounded-lg border-gray-300"
                    />
                  </div>
                </div>
              </div>
            </>
          )}

          {/* ===== 스크린 검사 항목 ===== */}
          {!useTemplateMode && processType === 'screen' && (
            <>
              <div className="space-y-1.5">
                <span className="text-sm font-bold">검모양 가공상태</span>
                <StatusToggle
                  value={formData.processingStatus || null}
                  onChange={(v) => setFormData((prev) => ({ ...prev, processingStatus: v }))}
                />
              </div>
              <div className="space-y-1.5">
                <span className="text-sm font-bold">검모양 재봉상태</span>
                <StatusToggle
                  value={formData.sewingStatus || null}
                  onChange={(v) => setFormData((prev) => ({ ...prev, sewingStatus: v }))}
                />
              </div>
              <div className="space-y-1.5">
                <span className="text-sm font-bold">검모양 조립상태</span>
                <StatusToggle
                  value={formData.assemblyStatus || null}
                  onChange={(v) => setFormData((prev) => ({ ...prev, assemblyStatus: v }))}
                />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">길이 ({formatDimension(workItemDimensions?.width)})</span>
                  <Input
                    type="number"
                    placeholder={formatDimension(workItemDimensions?.width)}
                    value={formData.length ?? ''}
                    onChange={(e) => handleNumberChange('length', e.target.value)}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">너비 ({formatDimension(workItemDimensions?.height)})</span>
                  <Input
                    type="number"
                    placeholder={formatDimension(workItemDimensions?.height)}
                    value={formData.width ?? ''}
                    onChange={(e) => handleNumberChange('width', e.target.value)}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
              </div>
              <div className="space-y-1.5">
                <span className="text-sm font-bold">간격 (400 이하)</span>
                <OkNgToggle
                  value={formData.gapStatus || null}
                  onChange={(v) => setFormData((prev) => ({ ...prev, gapStatus: v }))}
                />
              </div>
            </>
          )}

          {/* ===== 슬랫 검사 항목 ===== */}
          {!useTemplateMode && processType === 'slat' && (
            <>
              <div className="space-y-1.5">
                <span className="text-sm font-bold">검모양 가공상태</span>
                <StatusToggle
                  value={formData.processingStatus || null}
                  onChange={(v) => setFormData((prev) => ({ ...prev, processingStatus: v }))}
                />
              </div>
              <div className="space-y-1.5">
                <span className="text-sm font-bold">검모양 조립상태</span>
                <StatusToggle
                  value={formData.assemblyStatus || null}
                  onChange={(v) => setFormData((prev) => ({ ...prev, assemblyStatus: v }))}
                />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">① 높이 (16.5 ± 1)</span>
                  <Input
                    type="number"
                    placeholder="16.5"
                    value={formData.height1 ?? ''}
                    onChange={(e) => handleNumberChange('height1', e.target.value)}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">② 높이 (14.5 ± 1)</span>
                  <Input
                    type="number"
                    placeholder="14.5"
                    value={formData.height2 ?? ''}
                    onChange={(e) => handleNumberChange('height2', e.target.value)}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
              </div>
              <div className="space-y-1.5">
                <span className="text-sm font-bold">길이 (0)</span>
                <Input
                  type="number"
                  placeholder="0"
                  value={formData.length ?? ''}
                  onChange={(e) => handleNumberChange('length', e.target.value)}
                  className="h-11 rounded-lg border-gray-300"
                />
              </div>
            </>
          )}

          {/* ===== 조인트바 검사 항목 ===== */}
          {!useTemplateMode && processType === 'slat_jointbar' && (
            <>
              <div className="space-y-1.5">
                <span className="text-sm font-bold">검모양 가공상태</span>
                <StatusToggle
                  value={formData.processingStatus || null}
                  onChange={(v) => setFormData((prev) => ({ ...prev, processingStatus: v }))}
                />
              </div>
              <div className="space-y-1.5">
                <span className="text-sm font-bold">검모양 조립상태</span>
                <StatusToggle
                  value={formData.assemblyStatus || null}
                  onChange={(v) => setFormData((prev) => ({ ...prev, assemblyStatus: v }))}
                />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">① 높이 (16.5 ± 1)</span>
                  <Input
                    type="number"
                    placeholder="16.5"
                    value={formData.height1 ?? ''}
                    onChange={(e) => handleNumberChange('height1', e.target.value)}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">② 높이 (14.5 ± 1)</span>
                  <Input
                    type="number"
                    placeholder="14.5"
                    value={formData.height2 ?? ''}
                    onChange={(e) => handleNumberChange('height2', e.target.value)}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">③ 길이 (300 ± 1)</span>
                  <Input
                    type="number"
                    placeholder="300"
                    value={formData.length3 ?? ''}
                    onChange={(e) => handleNumberChange('length3', e.target.value)}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">④ 간격 (150 ± 1)</span>
                  <Input
                    type="number"
                    placeholder="150"
                    value={formData.gap4 ?? ''}
                    onChange={(e) => handleNumberChange('gap4', e.target.value)}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
              </div>
            </>
          )}

          {/* ===== 절곡 검사 항목 ===== */}
          {!useTemplateMode && processType === 'bending' && (
            <>
              <div className="space-y-1.5">
                <span className="text-sm font-bold">검모양 절곡상태</span>
                <StatusToggle
                  value={formData.bendingStatus || null}
                  onChange={(v) => setFormData((prev) => ({ ...prev, bendingStatus: v }))}
                />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">길이 ({formatDimension(workItemDimensions?.width)})</span>
                  <Input
                    type="number"
                    placeholder={formatDimension(workItemDimensions?.width)}
                    value={formData.length ?? ''}
                    onChange={(e) => handleNumberChange('length', e.target.value)}
                    className="h-11 rounded-lg border-gray-300"
                  />
                </div>
                <div className="space-y-1.5">
                  <span className="text-sm font-bold">너비 (N/A)</span>
                  <Input
                    type="text"
                    placeholder="N/A"
                    value={formData.width ?? 'N/A'}
                    readOnly
                    className="h-11 bg-gray-100 border-gray-300 rounded-lg"
                  />
                </div>
              </div>
              <div className="space-y-3">
                <span className="text-sm font-bold">간격</span>
                {gapPoints.map((point, index) => (
                  <div key={index} className="grid grid-cols-3 gap-2 items-center">
                    <span className="text-gray-500 text-sm font-medium">⑤{index + 1}</span>
                    <Input
                      type="number"
                      placeholder={String(30 + index * 10)}
                      value={point.left ?? ''}
                      onChange={(e) => {
                        const newPoints = [...gapPoints];
                        newPoints[index] = {
                          ...newPoints[index],
                          left: e.target.value === '' ? null : parseFloat(e.target.value),
                        };
                        setGapPoints(newPoints);
                      }}
                      className="h-11 rounded-lg border-gray-300"
                    />
                    <Input
                      type="number"
                      placeholder={String(30 + index * 10)}
                      value={point.right ?? ''}
                      onChange={(e) => {
                        const newPoints = [...gapPoints];
                        newPoints[index] = {
                          ...newPoints[index],
                          right: e.target.value === '' ? null : parseFloat(e.target.value),
                        };
                        setGapPoints(newPoints);
                      }}
                      className="h-11 rounded-lg border-gray-300"
                    />
                  </div>
                ))}
              </div>
            </>
          )}

          {/* 부적합 내용 */}
          <div className="space-y-1.5">
            <span className="text-sm font-bold">부적합 내용</span>
            <Textarea
              value={formData.nonConformingContent}
              onChange={(e) =>
                setFormData((prev) => ({ ...prev, nonConformingContent: e.target.value }))
              }
              placeholder="입력 시 '일련번호: 내용' 형태로 취합되어 표시"
              className="min-h-[80px] rounded-lg border-gray-300"
            />
          </div>
        </div>

        {/* 하단 고정: 판정 + 버튼 */}
        <div className="shrink-0 border-t bg-white px-5 pb-5 pt-3 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
          <div className="space-y-2 mb-4">
            <span className="text-sm font-bold">판정 (자동)</span>
            <JudgmentDisplay value={autoJudgment} />
          </div>
          <div className="flex gap-3">
            <Button
              variant="outline"
              onClick={handleCancel}
              className="flex-1 h-11 rounded-lg border-gray-300 font-bold"
            >
              취소
            </Button>
            <Button
              variant="ghost"
              onClick={handleComplete}
              className="flex-1 h-11 rounded-lg bg-black hover:bg-gray-800 text-white font-bold"
            >
              검사 완료
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}