'use client';

/**
 * 입고 상세/등록/수정 페이지
 * 기획서 2026-01-28 기준 마이그레이션
 *
 * mode 패턴:
 * - view: 상세 조회 (읽기 전용)
 * - edit: 수정 모드
 * - new: 신규 등록 모드
 *
 * 섹션:
 * 1. 기본 정보 - 로트번호, 품목코드, 품목명, 규격, 단위, 발주처, 입고수량, 입고일, 작성자, 상태, 비고
 * 2. 수입검사 정보 - 검사일, 검사결과, 업체 제공 성적서 자료
 */

import { useState, useCallback, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { FileText, Search, Plus, ClipboardCheck, Trash2 } from 'lucide-react';
import { getTodayString } from '@/lib/utils/date';
import { FileDropzone } from '@/components/ui/file-dropzone';
import { ItemSearchModal } from '@/components/quotes/ItemSearchModal';
import { InspectionModal } from '@/app/[locale]/(protected)/quality/qms/components/InspectionModal';
import { ImportInspectionInputModal } from './ImportInspectionInputModal';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { DatePicker } from '@/components/ui/date-picker';
import { Label } from '@/components/ui/label';
import { SupplierSearchModal } from './SupplierSearchModal';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
import { receivingConfig } from './receivingConfig';
import { ServerErrorPage } from '@/components/common/ServerErrorPage';
import {
  getReceivingById,
  createReceiving,
  updateReceiving,
  checkInspectionTemplate,
  uploadInspectionFiles,
} from './actions';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  RECEIVING_STATUS_OPTIONS,
  type ReceivingDetail as ReceivingDetailType,
  type ReceivingStatus,
} from './types';
import { isNextRedirectError } from '@/lib/utils/redirect-error';
import { toast } from 'sonner';
import { useDevFill, generateReceivingData } from '@/components/dev';

interface Props {
  id: string;
  mode?: 'view' | 'edit' | 'new';
}

// 초기 폼 데이터 (동적 함수 — 세션 사용자 이름 + 오늘 날짜 기본값)
function createInitialFormData(): Partial<ReceivingDetailType> {
  return {
    materialNo: '',
    supplierMaterialNo: '',
    lotNo: '',
    itemCode: '',
    itemName: '',
    specification: '',
    unit: 'EA',
    supplier: '',
    manufacturer: '',
    receivingQty: undefined,
    receivingDate: getTodayString(),
    createdBy: getLoggedInUserName(),
    status: 'receiving_pending',
    remark: '',
    inspectionDate: '',
    inspectionResult: '',
    certificateFile: undefined,
    certificateFileId: undefined,
    inventoryAdjustments: [],
  };
}

// localStorage에서 로그인 사용자 정보 가져오기
function getLoggedInUser(): { name: string; department: string } {
  if (typeof window === 'undefined') return { name: '', department: '' };
  try {
    const userData = localStorage.getItem('user');
    if (userData) {
      const parsed = JSON.parse(userData);
      return { name: parsed.name || '', department: parsed.department || '' };
    }
  } catch {
    // ignore
  }
  return { name: '', department: '' };
}

function getLoggedInUserName(): string {
  return getLoggedInUser().name;
}

export function ReceivingDetail({ id, mode = 'view' }: Props) {
  const router = useRouter();
  const isNewMode = mode === 'new' || id === 'new';
  const isEditMode = mode === 'edit';
  const isViewMode = mode === 'view' && !isNewMode;

  // API 데이터 상태
  const [detail, setDetail] = useState<ReceivingDetailType | null>(null);
  const [isLoading, setIsLoading] = useState(!isNewMode);
  const [, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // 폼 데이터 (등록/수정 모드용)
  const [formData, setFormData] = useState<Partial<ReceivingDetailType>>(createInitialFormData);

  // 업로드된 파일 상태 (File 객체)
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
  // 서버에 저장된 기존 성적서 파일 정보
  const [existingCertFile, setExistingCertFile] = useState<{ id: number; name: string } | null>(null);

  // 수입검사 성적서 모달 상태
  const [isInspectionModalOpen, setIsInspectionModalOpen] = useState(false);
  // 수입검사 입력 모달 상태
  const [isImportInspectionModalOpen, setIsImportInspectionModalOpen] = useState(false);
  const [isItemSearchOpen, setIsItemSearchOpen] = useState(false);
  const [isSupplierSearchOpen, setIsSupplierSearchOpen] = useState(false);

  // 수입검사 성적서 템플릿 존재 여부
  const [hasInspectionTemplate, setHasInspectionTemplate] = useState(false);

  // 수입검사 첨부파일 (document_attachments)
  const [inspectionAttachments, setInspectionAttachments] = useState<Array<{
    id: number;
    file_id: number;
    attachment_type: string;
    file?: { id: number; display_name?: string; original_name?: string; file_path: string; file_size: number; mime_type?: string };
  }>>([]);

  // Dev 모드 폼 자동 채우기
  useDevFill(
    'receiving',
    useCallback(async () => {
      if (!isNewMode) return;
      const data = generateReceivingData();
      setFormData((prev) => ({
        ...prev,
        itemCode: data.itemCode,
        itemName: data.itemName,
        specification: data.specification,
        unit: data.unit,
        supplier: data.supplier,
        receivingQty: data.receivingQty,
        receivingDate: data.receivingDate,
        createdBy: getLoggedInUserName(),
        status: data.status as ReceivingStatus,
        remark: data.remark,
      }));
    }, [isNewMode])
  );

  // API 데이터 로드
  const loadData = useCallback(async () => {
    if (isNewMode) {
      setIsLoading(false);
      return;
    }

    setIsLoading(true);
    setError(null);

    try {
      const result = await getReceivingById(id);

      if (result.success && result.data) {
        setDetail(result.data);
        // 기존 성적서 파일 정보 설정
        if (result.data.certificateFileId) {
          setExistingCertFile({
            id: result.data.certificateFileId,
            name: result.data.certificateFileName || `file-${result.data.certificateFileId}`,
          });
        }
        // 수정 모드일 때 폼 데이터 설정
        if (isEditMode) {
          setFormData({
            materialNo: result.data.materialNo || '',
            supplierMaterialNo: result.data.supplierMaterialNo || '',
            lotNo: result.data.lotNo || '',
            itemCode: result.data.itemCode,
            itemName: result.data.itemName,
            specification: result.data.specification || '',
            unit: result.data.unit || 'EA',
            supplier: result.data.supplier,
            manufacturer: result.data.manufacturer || '',
            receivingQty: result.data.receivingQty,
            receivingDate: result.data.receivingDate || '',
            createdBy: result.data.createdBy || '',
            status: result.data.status,
            remark: result.data.remark || '',
            inspectionDate: result.data.inspectionDate || '',
            inspectionResult: result.data.inspectionResult || '',
            certificateFile: result.data.certificateFile,
            certificateFileId: result.data.certificateFileId,
          });
        }

        // 수입검사 성적서 템플릿 존재 여부 + 첨부파일 확인
        if (result.data.itemId) {
          const templateCheck = await checkInspectionTemplate(result.data.itemId);
          // API 성공 시에만 값 업데이트 (실패 시 기존 값 유지 — 버튼 사라짐 방지)
          if (templateCheck.success) {
            setHasInspectionTemplate(templateCheck.hasTemplate);
          }
          setInspectionAttachments(templateCheck.attachments ?? []);
        } else {
          setHasInspectionTemplate(false);
        }
      } else {
        setError(result.error || '입고 정보를 찾을 수 없습니다.');
      }
    } catch (err) {
      if (isNextRedirectError(err)) throw err;
      console.error('[ReceivingDetail] loadData error:', err);
      setError('데이터를 불러오는 중 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  }, [id, isNewMode, isEditMode]);

  // 데이터 로드
  useEffect(() => {
    loadData();
  }, [loadData]);

  // 폼 입력 핸들러
  const handleInputChange = (field: keyof ReceivingDetailType, value: string | number | undefined) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  // 저장 핸들러 - 결과 반환
  const handleSave = async (): Promise<{ success: boolean; error?: string }> => {
    setIsSaving(true);
    try {
      let certificateFileId = formData.certificateFileId;

      // 새 파일이 선택된 경우 먼저 업로드
      if (uploadedFile) {
        const uploadResult = await uploadInspectionFiles([uploadedFile]);
        if (!uploadResult.success) {
          toast.error(uploadResult.error || '성적서 파일 업로드에 실패했습니다.');
          return { success: false, error: uploadResult.error };
        }
        certificateFileId = uploadResult.data?.[0]?.id;
      }

      const saveData = { ...formData, certificateFileId };

      if (isNewMode) {
        const result = await createReceiving(saveData);
        if (result.success) {
          toast.success('입고가 등록되었습니다.');
          const newId = result.data?.id;
          if (newId) {
            router.push(`/ko/material/receiving-management/${newId}?mode=view`);
          } else {
            router.push('/ko/material/receiving-management');
          }
          // 커스텀 네비게이션 처리: error='' → 템플릿의 navigateToList() 호출 방지
          return { success: false, error: '' };
        } else {
          toast.error(result.error || '등록에 실패했습니다.');
          return { success: false, error: result.error };
        }
      } else if (isEditMode) {
        const result = await updateReceiving(id, saveData);
        if (result.success) {
          toast.success('입고 정보가 수정되었습니다.');
          router.push(`/ko/material/receiving-management/${id}?mode=view`);
          return { success: true };
        } else {
          toast.error(result.error || '수정에 실패했습니다.');
          return { success: false, error: result.error };
        }
      }
      return { success: false, error: '알 수 없는 모드입니다.' };
    } catch (err) {
      if (isNextRedirectError(err)) throw err;
      console.error('[ReceivingDetail] handleSave error:', err);
      toast.error('저장 중 오류가 발생했습니다.');
      return { success: false, error: '저장 중 오류가 발생했습니다.' };
    } finally {
      setIsSaving(false);
    }
  };

  // 수입검사하기 버튼 핸들러 - 수입검사 입력 모달 표시
  const handleInspection = () => {
    setIsImportInspectionModalOpen(true);
  };

  // 수입검사성적서 보기 버튼 핸들러 - 성적서 모달 표시
  const handleViewInspectionReport = () => {
    setIsInspectionModalOpen(true);
  };

  // 수입검사 저장 완료 핸들러 → 데이터 새로고침
  const handleImportInspectionSave = () => {
    loadData();
  };

  // 취소 핸들러 - 등록 모드면 목록으로, 수정 모드면 상세로 이동
  const handleCancel = () => {
    if (isNewMode) {
      router.push('/ko/material/receiving-management');
    } else {
      router.push(`/ko/material/receiving-management/${id}?mode=view`);
    }
  };

  // ===== 읽기 전용 필드 렌더링 =====
  const renderReadOnlyField = (label: string, value: string | number | undefined, isEditModeStyle = false) => (
    <div>
      <Label className="text-sm text-muted-foreground">{label}</Label>
      {isEditModeStyle ? (
        <div className="mt-1.5 px-3 py-2 bg-gray-200 border border-gray-300 rounded-md text-sm text-gray-500 cursor-not-allowed select-none">
          {value || '-'}
        </div>
      ) : (
        <div className="mt-1.5 px-3 py-2 bg-gray-50 border rounded-md text-sm">
          {value || '-'}
        </div>
      )}
    </div>
  );

  // ===== 상세 보기 콘텐츠 =====
  const renderViewContent = useCallback(() => {
    if (!detail) return null;

    return (
      <div className="space-y-6">
        {/* 기본 정보 */}
        <Card>
          <CardHeader className="pb-4">
            <CardTitle className="text-base font-medium">기본 정보</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              {renderReadOnlyField('입고번호', detail.materialNo)}
              {renderReadOnlyField('자재번호', detail.supplierMaterialNo)}
              {renderReadOnlyField('원자재로트', detail.lotNo)}
              {renderReadOnlyField('품목코드', detail.itemCode)}
              {renderReadOnlyField('품목명', detail.itemName)}
              {renderReadOnlyField('규격', detail.specification)}
              {renderReadOnlyField('단위', detail.unit)}
              {renderReadOnlyField('발주처', detail.supplier)}
              {renderReadOnlyField('제조사', detail.manufacturer)}
              {renderReadOnlyField('입고수량', detail.receivingQty)}
              {renderReadOnlyField('입고일', detail.receivingDate)}
              {renderReadOnlyField('작성자', detail.createdBy)}
              {renderReadOnlyField('상태',
                detail.status === 'receiving_pending' ? '입고대기' :
                detail.status === 'completed' ? '입고완료' :
                detail.status === 'inspection_completed' ? '검사완료' :
                detail.status
              )}
            </div>
            {/* 비고 - 전체 너비 */}
            <div className="mt-4">
              {renderReadOnlyField('비고', detail.remark)}
            </div>
          </CardContent>
        </Card>

        {/* 수입검사 정보 */}
        <Card>
          <CardHeader className="pb-4">
            <CardTitle className="text-base font-medium">수입검사 정보</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {renderReadOnlyField('검사일', detail.inspectionDate)}
              {renderReadOnlyField('검사결과', detail.inspectionResult)}
            </div>
            <div className="mt-4">
              <Label className="text-sm text-muted-foreground">업체 제공 성적서 자료</Label>
              {existingCertFile ? (
                <div className="mt-1.5 flex items-center gap-3 p-2 rounded-md border bg-muted/30">
                  <FileText className="w-5 h-5 shrink-0 text-muted-foreground" />
                  <span className="text-sm font-medium truncate flex-1">{existingCertFile.name}</span>
                  <a
                    href={`/api/proxy/files/${existingCertFile.id}/download`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-xs text-blue-600 hover:underline shrink-0"
                  >
                    다운로드
                  </a>
                </div>
              ) : (
                <div className="mt-1.5 px-3 py-2 bg-gray-50 border rounded-md text-sm text-muted-foreground">
                  첨부된 파일이 없습니다.
                </div>
              )}
            </div>
            <div className="mt-4">
              <Label className="text-sm text-muted-foreground">검사 첨부파일</Label>
              {inspectionAttachments.length > 0 ? (
                <div className="mt-1.5 space-y-2">
                  {inspectionAttachments.map((att) => {
                    const fileName = att.file?.display_name || att.file?.original_name || `file-${att.file_id}`;
                    const fileSize = att.file?.file_size;
                    const isImage = att.file?.mime_type?.startsWith('image/');
                    const downloadUrl = `/api/proxy/files/${att.file_id}/download`;
                    return (
                      <div key={att.id} className="flex items-center gap-3 p-2 rounded-md border bg-muted/30">
                        {isImage && att.file?.file_path ? (
                          <img
                            src={downloadUrl}
                            alt={fileName}
                            className="w-10 h-10 rounded object-cover shrink-0"
                          />
                        ) : (
                          <FileText className="w-5 h-5 shrink-0 text-muted-foreground" />
                        )}
                        <div className="min-w-0 flex-1">
                          <p className="text-sm font-medium truncate">{fileName}</p>
                          {fileSize && (
                            <p className="text-xs text-muted-foreground">
                              {fileSize < 1024 * 1024
                                ? `${(fileSize / 1024).toFixed(1)} KB`
                                : `${(fileSize / (1024 * 1024)).toFixed(1)} MB`}
                            </p>
                          )}
                        </div>
                        <a
                          href={downloadUrl}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-xs text-blue-600 hover:underline shrink-0"
                        >
                          다운로드
                        </a>
                      </div>
                    );
                  })}
                </div>
              ) : (
                <div className="mt-1.5 px-4 py-8 border-2 border-dashed rounded-md bg-gray-50 text-center text-sm text-muted-foreground">
                  첨부된 파일이 없습니다.
                </div>
              )}
            </div>
          </CardContent>
        </Card>

      </div>
    );
  }, [detail, inspectionAttachments, existingCertFile]);

  // ===== 등록/수정 폼 콘텐츠 =====
  const renderFormContent = useCallback(() => {
    return (
      <div className="space-y-6">
        {/* 기본 정보 */}
        <Card>
          <CardHeader className="pb-4">
            <CardTitle className="text-base font-medium">기본 정보</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              {/* 입고번호 - 읽기전용 */}
              {renderReadOnlyField('입고번호', formData.materialNo, true)}

              {/* 자재번호 (거래처) - 수정 가능 */}
              <div>
                <Label className="text-sm text-muted-foreground">자재번호</Label>
                <Input
                  className="mt-1.5"
                  value={formData.supplierMaterialNo || ''}
                  onChange={(e) => setFormData((prev) => ({ ...prev, supplierMaterialNo: e.target.value }))}
                  placeholder="거래처 자재번호"
                />
              </div>

              {/* 원자재로트 - 자동채번 (readOnly) */}
              <div>
                <Label className="text-sm text-muted-foreground">원자재로트</Label>
                <div className="mt-1.5 px-3 py-2 bg-gray-200 border border-gray-300 rounded-md text-sm text-gray-500 cursor-not-allowed select-none">
                  {formData.lotNo || (isNewMode ? '저장 시 자동 생성' : '-')}
                </div>
              </div>

              {/* 품목코드 - 검색 모달 선택 */}
              <div>
                <Label className="text-sm text-muted-foreground">
                  품목코드 <span className="text-red-500">*</span>
                </Label>
                <div className="mt-1.5 flex gap-1">
                  <Input
                    value={formData.itemCode || ''}
                    readOnly
                    placeholder="품목코드를 검색하세요"
                    className="cursor-pointer bg-gray-50"
                    onClick={() => setIsItemSearchOpen(true)}
                  />
                  <Button
                    type="button"
                    variant="outline"
                    size="icon"
                    onClick={() => setIsItemSearchOpen(true)}
                    className="shrink-0"
                  >
                    <Search className="h-4 w-4" />
                  </Button>
                </div>
              </div>

              {/* 품목명 - 읽기전용 */}
              {renderReadOnlyField('품목명', formData.itemName, true)}

              {/* 규격 - 읽기전용 */}
              {renderReadOnlyField('규격', formData.specification, true)}

              {/* 단위 - 읽기전용 */}
              {renderReadOnlyField('단위', formData.unit, true)}

              {/* 발주처 - 검색 모달 선택 */}
              <div>
                <Label className="text-sm text-muted-foreground">
                  발주처 <span className="text-red-500">*</span>
                </Label>
                <div className="mt-1.5 flex gap-1">
                  <Input
                    value={formData.supplier || ''}
                    readOnly
                    placeholder="발주처를 검색하세요"
                    className="cursor-pointer bg-gray-50"
                    onClick={() => setIsSupplierSearchOpen(true)}
                  />
                  <Button
                    type="button"
                    variant="outline"
                    size="icon"
                    onClick={() => setIsSupplierSearchOpen(true)}
                    className="shrink-0"
                  >
                    <Search className="h-4 w-4" />
                  </Button>
                </div>
              </div>

              {/* 제조사 - 수정가능 */}
              <div>
                <Label htmlFor="manufacturer" className="text-sm text-muted-foreground">
                  제조사
                </Label>
                <Input
                  id="manufacturer"
                  value={formData.manufacturer || ''}
                  onChange={(e) => handleInputChange('manufacturer', e.target.value)}
                  className="mt-1.5"
                  placeholder="제조사 입력"
                />
              </div>

              {/* 입고수량 - 수정가능 */}
              <div>
                <Label htmlFor="receivingQty" className="text-sm text-muted-foreground">
                  입고수량 <span className="text-red-500">*</span>
                </Label>
                <Input
                  id="receivingQty"
                  type="number"
                  value={formData.receivingQty ?? ''}
                  onChange={(e) => handleInputChange('receivingQty', e.target.value ? Number(e.target.value) : undefined)}
                  className="mt-1.5"
                  placeholder="입고수량 입력"
                />
              </div>

              {/* 입고일 - 수정가능 */}
              <div>
                <Label htmlFor="receivingDate" className="text-sm text-muted-foreground">
                  입고일 <span className="text-red-500">*</span>
                </Label>
                <DatePicker
                  value={formData.receivingDate || ''}
                  onChange={(date) => handleInputChange('receivingDate', date)}
                />
              </div>

              {/* 작성자 - 읽기전용 */}
              {renderReadOnlyField('작성자', formData.createdBy, true)}

              {/* 상태 - 신규: 입고대기 고정 / 수정: 셀렉트 */}
              {isNewMode ? (
                renderReadOnlyField('상태', '입고대기', true)
              ) : (
                <div>
                  <Label htmlFor="status" className="text-sm text-muted-foreground">
                    상태 <span className="text-red-500">*</span>
                  </Label>
                  <Select
                    key={`status-${formData.status}`}
                    value={formData.status}
                    onValueChange={(value) => handleInputChange('status', value as ReceivingStatus)}
                  >
                    <SelectTrigger className="mt-1.5">
                      <SelectValue placeholder="상태 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      {RECEIVING_STATUS_OPTIONS.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}

              {/* 비고 - 수정가능 */}
              <div>
                <Label htmlFor="remark" className="text-sm text-muted-foreground">
                  비고
                </Label>
                <Input
                  id="remark"
                  value={formData.remark || ''}
                  onChange={(e) => handleInputChange('remark', e.target.value)}
                  className="mt-1.5"
                  placeholder="비고 입력"
                />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 수입검사 정보 */}
        <Card>
          <CardHeader className="pb-4">
            <CardTitle className="text-base font-medium">수입검사 정보</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {/* 검사일 - 읽기전용 */}
              {renderReadOnlyField('검사일', formData.inspectionDate, true)}

              {/* 검사결과 - 읽기전용 */}
              {renderReadOnlyField('검사결과', formData.inspectionResult, true)}
            </div>

            {/* 업체 제공 성적서 자료 - 파일 업로드 */}
            <div className="mt-4">
              <Label className="text-sm text-muted-foreground">업체 제공 성적서 자료</Label>
              {!uploadedFile && !existingCertFile ? (
                <div className="mt-1.5">
                  <FileDropzone
                    onFilesSelect={(files) => setUploadedFile(files[0])}
                    accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xlsx"
                    maxSize={10}
                    title="클릭하거나 파일을 드래그하세요"
                    description="성적서 파일 (PDF, 이미지, 문서 / 최대 10MB)"
                  />
                </div>
              ) : (
                <div className="mt-1.5 flex items-center gap-3 p-3 rounded-md border bg-muted/30">
                  <FileText className="w-5 h-5 shrink-0 text-muted-foreground" />
                  <span className="text-sm font-medium truncate flex-1">
                    {uploadedFile ? uploadedFile.name : existingCertFile?.name}
                  </span>
                  {uploadedFile && (
                    <span className="text-xs text-muted-foreground shrink-0">
                      {uploadedFile.size < 1024 * 1024
                        ? `${(uploadedFile.size / 1024).toFixed(1)} KB`
                        : `${(uploadedFile.size / (1024 * 1024)).toFixed(1)} MB`}
                    </span>
                  )}
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="h-7 w-7 text-red-500 hover:text-red-700 hover:bg-red-50 shrink-0"
                    onClick={() => {
                      if (uploadedFile) {
                        setUploadedFile(null);
                      } else {
                        setExistingCertFile(null);
                        setFormData((prev) => ({ ...prev, certificateFileId: undefined }));
                      }
                    }}
                  >
                    <Trash2 className="w-4 h-4" />
                  </Button>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

      </div>
    );
  }, [formData, uploadedFile, existingCertFile]);

  // ===== 커스텀 헤더 액션 (view/edit 모드) =====
  // 수정 버튼은 IntegratedDetailTemplate의 DetailActions에서 아이콘으로 제공하므로 중복 제거
  // 수입검사하기 버튼은 수입검사 성적서 템플릿이 있는 품목만 표시
  // 수입검사 버튼 표시 조건: 템플릿이 있거나 이미 검사 완료된 경우
  const showInspectionActions = hasInspectionTemplate || !!detail?.inspectionResult || !!detail?.inspectionDate;
  const customHeaderActions = (isViewMode || isEditMode) && detail && showInspectionActions ? (
      <div className="flex gap-2">
            <Button variant="outline" size="sm" onClick={handleInspection}>
              <ClipboardCheck className="w-4 h-4 md:mr-2" />
              <span className="hidden md:inline">수입검사하기</span>
            </Button>
            <Button variant="outline" size="sm" onClick={handleViewInspectionReport}>
                <FileText className="w-4 h-4 md:mr-2" />
                <span className="hidden md:inline">수입검사성적서 보기</span>
            </Button>
        </div>
  ) : undefined;

  // 에러 상태 표시 (view/edit 모드에서만)
  if (!isNewMode && !isLoading && (error || !detail)) {
    return (
      <ServerErrorPage
        title="입고 정보를 불러올 수 없습니다"
        message={error || '입고 정보를 찾을 수 없습니다.'}
        onRetry={loadData}
        showBackButton={true}
        showHomeButton={true}
      />
    );
  }

  // 동적 config 생성
  const dynamicConfig = {
    ...receivingConfig,
    title: isViewMode ? '입고 상세' : '입고',
    description: isNewMode
      ? '새로운 입고를 등록합니다'
      : isEditMode
        ? '입고 정보를 수정합니다'
        : '입고 상세를 관리합니다',
    actions: {
      ...receivingConfig.actions,
      showEdit: isViewMode,
      showDelete: false,
    },
  };

  return (
    <>
      <IntegratedDetailTemplate
        config={dynamicConfig}
        mode={isNewMode ? 'create' : isEditMode ? 'edit' : 'view'}
        initialData={(detail as unknown as Record<string, unknown>) || {}}
        itemId={isNewMode ? undefined : id}
        isLoading={isLoading}
        headerActions={customHeaderActions}
        renderView={() => renderViewContent()}
        renderForm={() => renderFormContent()}
        onSubmit={async () => {
          return await handleSave();
        }}
        onCancel={handleCancel}
      />

      {/* 품목 검색 모달 */}
      <ItemSearchModal
        open={isItemSearchOpen}
        onOpenChange={setIsItemSearchOpen}
        onSelectItem={(item) => {
          setFormData((prev) => ({
            ...prev,
            itemCode: item.code,
            itemName: item.name,
            specification: item.specification || '',
            unit: item.unit || prev.unit || 'EA',
          }));
        }}
        itemType="RM,SM,CS"
      />

      <SupplierSearchModal
        open={isSupplierSearchOpen}
        onOpenChange={setIsSupplierSearchOpen}
        onSelectSupplier={(supplier) => {
          setFormData((prev) => ({
            ...prev,
            supplier: supplier.name,
          }));
        }}
      />

      {/* 수입검사 성적서 모달 (읽기 전용) */}
      <InspectionModal
        isOpen={isInspectionModalOpen}
        onClose={() => setIsInspectionModalOpen(false)}
        document={{
          id: 'import-inspection',
          type: 'import',
          title: '수입검사 성적서',
          count: 0,
        }}
        documentItem={{
          id: id,
          title: detail?.itemName || '수입검사 성적서',
          date: detail?.inspectionDate || '',
          code: detail?.lotNo || '',
        }}
        // 수입검사 템플릿 로드용 props
        itemId={detail?.itemId}
        itemName={detail?.itemName}
        specification={detail?.specification}
        supplier={detail?.supplier}
        inspector={getLoggedInUserName()}
        inspectorDept={getLoggedInUser().department}
        lotSize={detail?.receivingQty}
        materialNo={detail?.materialNo}
        readOnly={true}
      />

        {/* 수입검사 입력 모달 */}
        <ImportInspectionInputModal
            open={isImportInspectionModalOpen}
            onOpenChange={setIsImportInspectionModalOpen}
            itemId={detail?.itemId}
            itemName={detail?.itemName}
            specification={detail?.specification}
            supplier={detail?.supplier}
            inspector={getLoggedInUserName()}
            lotSize={detail?.receivingQty}
            materialNo={detail?.materialNo}
            receivingId={id}
            onSave={handleImportInspectionSave}
        />
    </>
  );
}
