'use client';

import { FileText, Trash2, Download, Pencil, Upload } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';

export interface FileUploadFieldsProps {
  mode: 'create' | 'edit';
  isSubmitting: boolean;
  // 시방서 관련
  specificationFile: File | null;
  setSpecificationFile: (file: File | null) => void;
  existingSpecificationFile: string;
  existingSpecificationFileName: string;
  existingSpecificationFileId: number | null;
  // 인정서 관련
  certificationFile: File | null;
  setCertificationFile: (file: File | null) => void;
  existingCertificationFile: string;
  existingCertificationFileName: string;
  existingCertificationFileId: number | null;
  // 핸들러
  onFileDownload: (fileId: number | null, fileName?: string) => void;
  onDeleteFile: (fileType: 'specification' | 'certification') => void;
  isDeletingFile: string | null;
}

/**
 * FG(제품) 전용 파일 업로드 필드 - 시방서/인정서
 */
export function FileUploadFields({
  mode,
  isSubmitting,
  specificationFile,
  setSpecificationFile,
  existingSpecificationFile,
  existingSpecificationFileName,
  existingSpecificationFileId,
  certificationFile,
  setCertificationFile,
  existingCertificationFile,
  existingCertificationFileName,
  existingCertificationFileId,
  onFileDownload,
  onDeleteFile,
  isDeletingFile,
}: FileUploadFieldsProps) {
  return (
    <div className="mt-4 space-y-4">
      {/* 시방서 파일 */}
      <div>
        <Label htmlFor="specification_file">시방서 (PDF)</Label>
        <div className="mt-1.5">
          {/* 기존 파일이 있고, 새 파일 선택 안한 경우: 파일명 + 버튼들 */}
          {mode === 'edit' && existingSpecificationFile && !specificationFile ? (
            <div className="flex items-center gap-2">
              <div className="flex items-center gap-2 flex-1 px-3 py-2 bg-gray-50 rounded-md border text-sm">
                <FileText className="h-4 w-4 text-blue-600 shrink-0" />
                <span className="truncate">{existingSpecificationFileName}</span>
              </div>
              <button
                type="button"
                onClick={() => onFileDownload(existingSpecificationFileId, existingSpecificationFileName)}
                className="inline-flex items-center justify-center h-9 w-9 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground text-blue-600"
                title="다운로드"
              >
                <Download className="h-4 w-4" />
              </button>
              <label
                htmlFor="specification_file_edit"
                className="inline-flex items-center justify-center h-9 w-9 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground text-gray-600 cursor-pointer"
                title="수정"
              >
                <Pencil className="h-4 w-4" />
                <input
                  id="specification_file_edit"
                  type="file"
                  accept=".pdf"
                  onChange={(e) => {
                    const file = e.target.files?.[0] || null;
                    setSpecificationFile(file);
                  }}
                  disabled={isSubmitting}
                  className="hidden"
                />
              </label>
              <Button
                type="button"
                variant="outline"
                size="icon"
                onClick={() => onDeleteFile('specification')}
                disabled={isDeletingFile === 'specification' || isSubmitting}
                className="h-9 w-9 text-red-500 hover:text-red-700 hover:bg-red-50"
                title="삭제"
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          ) : specificationFile ? (
            /* 새 파일 선택된 경우: 커스텀 UI로 파일명 표시 */
            <div className="flex items-center gap-2">
              <div className="flex items-center gap-2 flex-1 px-3 py-2 bg-blue-50 rounded-md border border-blue-200 text-sm">
                <FileText className="h-4 w-4 text-blue-600 shrink-0" />
                <span className="truncate">{specificationFile.name}</span>
                <span className="text-xs text-blue-500">(새 파일)</span>
              </div>
              <Button
                type="button"
                variant="outline"
                size="icon"
                onClick={() => setSpecificationFile(null)}
                disabled={isSubmitting}
                className="h-9 w-9 text-red-500 hover:text-red-700 hover:bg-red-50"
                title="취소"
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          ) : (
            /* 파일 없는 경우: 파일 선택 버튼 */
            <div className="flex items-center gap-2">
              <label
                htmlFor="specification_file"
                className="flex items-center gap-2 flex-1 px-3 py-2 bg-gray-50 rounded-md border text-sm cursor-pointer hover:bg-gray-100 transition-colors"
              >
                <Upload className="h-4 w-4 text-gray-500 shrink-0" />
                <span className="text-gray-500">PDF 파일을 선택하세요</span>
              </label>
              <input
                id="specification_file"
                type="file"
                accept=".pdf"
                onChange={(e) => {
                  const file = e.target.files?.[0] || null;
                  setSpecificationFile(file);
                }}
                disabled={isSubmitting}
                className="hidden"
              />
            </div>
          )}
        </div>
      </div>
      {/* 인정서 파일 */}
      <div>
        <Label htmlFor="certification_file">인정서 (PDF)</Label>
        <div className="mt-1.5">
          {/* 기존 파일이 있고, 새 파일 선택 안한 경우: 파일명 + 버튼들 */}
          {mode === 'edit' && existingCertificationFile && !certificationFile ? (
            <div className="flex items-center gap-2">
              <div className="flex items-center gap-2 flex-1 px-3 py-2 bg-gray-50 rounded-md border text-sm">
                <FileText className="h-4 w-4 text-green-600 shrink-0" />
                <span className="truncate">{existingCertificationFileName}</span>
              </div>
              <button
                type="button"
                onClick={() => onFileDownload(existingCertificationFileId, existingCertificationFileName)}
                className="inline-flex items-center justify-center h-9 w-9 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground text-green-600"
                title="다운로드"
              >
                <Download className="h-4 w-4" />
              </button>
              <label
                htmlFor="certification_file_edit"
                className="inline-flex items-center justify-center h-9 w-9 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground text-gray-600 cursor-pointer"
                title="수정"
              >
                <Pencil className="h-4 w-4" />
                <input
                  id="certification_file_edit"
                  type="file"
                  accept=".pdf"
                  onChange={(e) => {
                    const file = e.target.files?.[0] || null;
                    setCertificationFile(file);
                  }}
                  disabled={isSubmitting}
                  className="hidden"
                />
              </label>
              <Button
                type="button"
                variant="outline"
                size="icon"
                onClick={() => onDeleteFile('certification')}
                disabled={isDeletingFile === 'certification' || isSubmitting}
                className="h-9 w-9 text-red-500 hover:text-red-700 hover:bg-red-50"
                title="삭제"
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          ) : certificationFile ? (
            /* 새 파일 선택된 경우: 커스텀 UI로 파일명 표시 */
            <div className="flex items-center gap-2">
              <div className="flex items-center gap-2 flex-1 px-3 py-2 bg-green-50 rounded-md border border-green-200 text-sm">
                <FileText className="h-4 w-4 text-green-600 shrink-0" />
                <span className="truncate">{certificationFile.name}</span>
                <span className="text-xs text-green-500">(새 파일)</span>
              </div>
              <Button
                type="button"
                variant="outline"
                size="icon"
                onClick={() => setCertificationFile(null)}
                disabled={isSubmitting}
                className="h-9 w-9 text-red-500 hover:text-red-700 hover:bg-red-50"
                title="취소"
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          ) : (
            /* 파일 없는 경우: 파일 선택 버튼 */
            <div className="flex items-center gap-2">
              <label
                htmlFor="certification_file"
                className="flex items-center gap-2 flex-1 px-3 py-2 bg-gray-50 rounded-md border text-sm cursor-pointer hover:bg-gray-100 transition-colors"
              >
                <Upload className="h-4 w-4 text-gray-500 shrink-0" />
                <span className="text-gray-500">PDF 파일을 선택하세요</span>
              </label>
              <input
                id="certification_file"
                type="file"
                accept=".pdf"
                onChange={(e) => {
                  const file = e.target.files?.[0] || null;
                  setCertificationFile(file);
                }}
                disabled={isSubmitting}
                className="hidden"
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}