ERP-node/frontend/components/screen/FileAttachmentDetailModal.tsx

"use client";

import React, { useState, useCallback, useEffect } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { 
  Upload, 
  Download, 
  Trash2, 
  Eye, 
  FileText, 
  Image, 
  FileVideo, 
  FileAudio,
  File,
  X,
  Plus,
  Save,
  AlertCircle
} from "lucide-react";
import { ComponentData, FileComponent } from "@/types/screen";
import { FileInfo } from "@/lib/registry/components/file-upload/types";
import { FileViewerModal } from "@/lib/registry/components/file-upload/FileViewerModal";
import { uploadFiles, downloadFile, deleteFile } from "@/lib/api/file";
import { formatFileSize } from "@/lib/utils";
import { toast } from "sonner";

interface FileAttachmentDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  component: FileComponent | null;
  onUpdateComponent?: (updates: Partial<FileComponent>) => void;
  screenId?: string;
  tableName?: string;
  recordId?: string;
}

/**
 * 파일 타입별 아이콘 반환
 */
const getFileIcon = (fileExt: string) => {
  const ext = fileExt.toLowerCase();
  if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
    return <Image className="w-5 h-5" />;
  }
  if (['mp4', 'avi', 'mov', 'wmv', 'flv'].includes(ext)) {
    return <FileVideo className="w-5 h-5" />;
  }
  if (['mp3', 'wav', 'aac', 'flac'].includes(ext)) {
    return <FileAudio className="w-5 h-5" />;
  }
  if (['pdf', 'doc', 'docx', 'txt', 'rtf'].includes(ext)) {
    return <FileText className="w-5 h-5" />;
  }
  return <File className="w-5 h-5" />;
};

/**
 * 파일첨부 상세 모달
 * 화면관리에서 템플릿의 파일첨부 버튼을 클릭했을 때 열리는 상세 관리 모달
 */
export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps> = ({
  isOpen,
  onClose,
  component,
  onUpdateComponent,
  screenId,
  tableName,
  recordId,
}) => {
  // State 관리
  const [uploadedFiles, setUploadedFiles] = useState<FileInfo[]>([]);
  const [dragOver, setDragOver] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [viewerFile, setViewerFile] = useState<FileInfo | null>(null);
  const [isViewerOpen, setIsViewerOpen] = useState(false);
  
  // 파일 설정 상태
  const [fileConfig, setFileConfig] = useState({
    docType: "DOCUMENT",
    docTypeName: "일반 문서",
    accept: "*/*",
    maxSize: 10 * 1024 * 1024, // 10MB
    multiple: true,
  });

  // 컴포넌트가 변경될 때 파일 목록 초기화
  useEffect(() => {
    if (component?.uploadedFiles) {
      setUploadedFiles(component.uploadedFiles);
    } else {
      setUploadedFiles([]);
    }

    if (component?.fileConfig) {
      setFileConfig({
        docType: component.fileConfig.docType || "DOCUMENT",
        docTypeName: component.fileConfig.docTypeName || "일반 문서",
        accept: component.fileConfig.accept?.join(",") || "*/*",
        maxSize: (component.fileConfig.maxSize || 10) * 1024 * 1024,
        multiple: component.fileConfig.multiple !== false,
      });
    }
  }, [component]);

  // 파일 업로드 처리
  const handleFileUpload = useCallback(async (files: FileList | File[]) => {
    if (!files || files.length === 0) return;

    const fileArray = Array.from(files);
    
    // 파일 검증
    const validFiles: File[] = [];
    for (const file of fileArray) {
      // 크기 체크
      if (file.size > fileConfig.maxSize) {
        toast.error(`${file.name}: 파일 크기가 너무 큽니다. (최대 ${formatFileSize(fileConfig.maxSize)})`);
        continue;
      }

      // 타입 체크
      if (fileConfig.accept && fileConfig.accept !== "*/*") {
        const acceptedTypes = fileConfig.accept.split(",").map(type => type.trim());
        const isValid = acceptedTypes.some(type => {
          if (type.startsWith(".")) {
            return file.name.toLowerCase().endsWith(type.toLowerCase());
          } else {
            return file.type.includes(type);
          }
        });

        if (!isValid) {
          toast.error(`${file.name}: 지원하지 않는 파일 형식입니다.`);
          continue;
        }
      }

      validFiles.push(file);
      if (!fileConfig.multiple) break;
    }

    if (validFiles.length === 0) return;

    try {
      setUploading(true);
      toast.loading(`${validFiles.length}개 파일 업로드 중...`);

      // API를 통한 파일 업로드
      const response = await uploadFiles({
        files: validFiles,
        tableName: tableName || 'screen_files',
        fieldName: component?.columnName || component?.id || 'file_attachment',
        recordId: recordId || screenId,
      });

      if (response.success && response.data) {
        const newFiles: FileInfo[] = response.data.map((file: any) => ({
          objid: file.objid || `temp_${Date.now()}_${Math.random()}`,
          savedFileName: file.saved_file_name || file.savedFileName,
          realFileName: file.real_file_name || file.realFileName,
          fileSize: file.file_size || file.fileSize,
          fileExt: file.file_ext || file.fileExt,
          filePath: file.file_path || file.filePath,
          docType: fileConfig.docType,
          docTypeName: fileConfig.docTypeName,
          targetObjid: file.target_objid || file.targetObjid || recordId || screenId || '',
          parentTargetObjid: file.parent_target_objid || file.parentTargetObjid,
          companyCode: file.company_code || file.companyCode || 'DEFAULT',
          writer: file.writer || 'user',
          regdate: file.regdate || new Date().toISOString(),
          status: file.status || 'ACTIVE',
          // 호환성 속성들
          path: file.file_path || file.filePath,
          name: file.real_file_name || file.realFileName,
          id: file.objid,
          size: file.file_size || file.fileSize,
          type: fileConfig.docType,
          uploadedAt: file.regdate || new Date().toISOString(),
        }));

        const updatedFiles = fileConfig.multiple ? [...uploadedFiles, ...newFiles] : newFiles;
        setUploadedFiles(updatedFiles);
        
        // 컴포넌트 업데이트
        if (onUpdateComponent) {
          onUpdateComponent({
            uploadedFiles: updatedFiles,
            fileConfig: {
              ...component?.fileConfig,
              docType: fileConfig.docType,
              docTypeName: fileConfig.docTypeName,
            }
          });
        }

        toast.dismiss();
        toast.success(`${validFiles.length}개 파일이 성공적으로 업로드되었습니다.`);
      } else {
        throw new Error(response.message || '파일 업로드에 실패했습니다.');
      }
    } catch (error) {
      // console.error('파일 업로드 오류:', error);
      toast.dismiss();
      toast.error('파일 업로드에 실패했습니다.');
    } finally {
      setUploading(false);
    }
  }, [fileConfig, uploadedFiles, onUpdateComponent, component, tableName, recordId, screenId]);

  // 파일 다운로드 처리
  const handleFileDownload = useCallback(async (file: FileInfo) => {
    try {
      toast.loading(`${file.realFileName} 다운로드 중...`);

      // 로컬 파일인 경우
      if (file._file) {
        const url = URL.createObjectURL(file._file);
        const link = document.createElement("a");
        link.href = url;
        link.download = file.realFileName || file._file.name;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
        toast.dismiss();
        toast.success(`${file.realFileName} 다운로드가 완료되었습니다.`);
        return;
      }

      // 서버 파일인 경우
      await downloadFile({
        fileId: file.objid,
        serverFilename: file.savedFileName,
        originalName: file.realFileName,
      });

      toast.dismiss();
      toast.success(`${file.realFileName} 다운로드가 완료되었습니다.`);
    } catch (error) {
      // console.error('파일 다운로드 오류:', error);
      toast.dismiss();
      toast.error('파일 다운로드에 실패했습니다.');
    }
  }, []);

  // 파일 삭제 처리
  const handleFileDelete = useCallback(async (file: FileInfo) => {
    if (!confirm(`${file.realFileName}을(를) 삭제하시겠습니까?`)) return;

    try {
      toast.loading(`${file.realFileName} 삭제 중...`);

      // 서버 파일인 경우 API 호출
      if (!file._file) {
        await deleteFile(file.objid, file.savedFileName);
      }

      // 상태에서 파일 제거
      const updatedFiles = uploadedFiles.filter(f => f.objid !== file.objid);
      setUploadedFiles(updatedFiles);
      
      // 컴포넌트 업데이트
      if (onUpdateComponent) {
        onUpdateComponent({
          uploadedFiles: updatedFiles,
        });
      }
      
      toast.dismiss();
      toast.success(`${file.realFileName}이 삭제되었습니다.`);
    } catch (error) {
      // console.error('파일 삭제 오류:', error);
      toast.dismiss();
      toast.error('파일 삭제에 실패했습니다.');
    }
  }, [uploadedFiles, onUpdateComponent]);

  // 파일뷰어 열기
  const handleFileView = useCallback((file: FileInfo) => {
    setViewerFile(file);
    setIsViewerOpen(true);
  }, []);

  // 파일뷰어 닫기
  const handleViewerClose = useCallback(() => {
    setIsViewerOpen(false);
    setViewerFile(null);
  }, []);

  // 드래그 앤 드롭 처리
  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragOver(true);
  }, []);

  const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragOver(false);
  }, []);

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragOver(false);

    const files = e.dataTransfer.files;
    if (files && files.length > 0) {
      handleFileUpload(files);
    }
  }, [handleFileUpload]);

  // 파일 선택 처리
  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      handleFileUpload(files);
    }
    // 같은 파일을 다시 선택할 수 있도록 value 초기화
    e.target.value = '';
  }, [handleFileUpload]);

  // 설정 저장
  const handleSaveSettings = useCallback(() => {
    if (onUpdateComponent) {
      onUpdateComponent({
        fileConfig: {
          ...component?.fileConfig,
          docType: fileConfig.docType,
          docTypeName: fileConfig.docTypeName,
          accept: fileConfig.accept.split(",").map(type => type.trim()),
          maxSize: Math.floor(fileConfig.maxSize / (1024 * 1024)), // MB로 변환
          multiple: fileConfig.multiple,
        }
      });
    }
    toast.success('설정이 저장되었습니다.');
  }, [fileConfig, onUpdateComponent, component]);

  if (!component) return null;

  return (
    <>
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden">
          <DialogHeader>
            <div className="flex items-center justify-between">
              <DialogTitle className="text-xl font-semibold">
                파일 첨부 관리 - {component.label || component.id}
              </DialogTitle>
              <Button variant="ghost" size="sm" onClick={onClose}>
                <X className="w-4 h-4" />
              </Button>
            </div>
          </DialogHeader>

          <Tabs defaultValue="files" className="flex-1">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="files">파일 관리</TabsTrigger>
              <TabsTrigger value="settings">설정</TabsTrigger>
            </TabsList>

            {/* 파일 관리 탭 */}
            <TabsContent value="files" className="flex-1 overflow-auto space-y-4">
              {/* 파일 업로드 영역 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Upload className="w-5 h-5" />
                    <span>파일 업로드</span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div
                    className={`
                      border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors
                      ${dragOver ? 'border-blue-400 bg-accent' : 'border-gray-300'}
                      ${uploading ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
                    `}
                    onDragOver={handleDragOver}
                    onDragLeave={handleDragLeave}
                    onDrop={handleDrop}
                    onClick={() => !uploading && document.getElementById('file-input')?.click()}
                  >
                    <input
                      id="file-input"
                      type="file"
                      multiple={fileConfig.multiple}
                      accept={fileConfig.accept}
                      onChange={handleFileSelect}
                      className="hidden"
                      disabled={uploading}
                    />

                    <div className="flex flex-col items-center space-y-3">
                      {uploading ? (
                        <>
                          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
                          <p className="text-lg font-medium text-gray-700">업로드 중...</p>
                        </>
                      ) : (
                        <>
                          <Upload className="w-12 h-12 text-gray-400" />
                          <div>
                            <p className="text-lg font-medium text-gray-700">
                              파일을 선택하거나 드래그하세요
                            </p>
                            <p className="text-sm text-gray-500 mt-2">
                              {fileConfig.accept && `지원 형식: ${fileConfig.accept}`}
                              {fileConfig.maxSize && ` • 최대 ${formatFileSize(fileConfig.maxSize)}`}
                              {fileConfig.multiple && ' • 여러 파일 선택 가능'}
                            </p>
                          </div>
                          <Button variant="outline">
                            <Plus className="w-4 h-4 mr-2" />
                            파일 선택
                          </Button>
                        </>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* 업로드된 파일 목록 */}
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="flex items-center space-x-2">
                      <FileText className="w-5 h-5" />
                      <span>업로드된 파일 ({uploadedFiles.length})</span>
                    </CardTitle>
                    {uploadedFiles.length > 0 && (
                      <Badge variant="secondary">
                        총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
                      </Badge>
                    )}
                  </div>
                </CardHeader>
                <CardContent>
                  {uploadedFiles.length === 0 ? (
                    <div className="text-center py-8 text-gray-500">
                      <FileText className="w-12 h-12 mx-auto mb-3 text-gray-300" />
                      <p>업로드된 파일이 없습니다.</p>
                      <p className="text-sm mt-1">위의 업로드 영역을 사용해 파일을 추가하세요.</p>
                    </div>
                  ) : (
                    <div className="space-y-3 max-h-60 overflow-y-auto">
                      {uploadedFiles.map((file) => (
                        <div key={file.objid} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                          <div className="flex items-center space-x-3 flex-1 min-w-0">
                            <div className="flex-shrink-0">
                              {getFileIcon(file.fileExt)}
                            </div>
                            <div className="flex-1 min-w-0">
                              <p className="text-sm font-medium text-gray-900 truncate">
                                {file.realFileName}
                              </p>
                              <div className="flex items-center space-x-2 text-xs text-gray-500">
                                <span>{formatFileSize(file.fileSize)}</span>
                                <span>•</span>
                                <span>{file.fileExt.toUpperCase()}</span>
                                {file.uploadedAt && (
                                  <>
                                    <span>•</span>
                                    <span>{new Date(file.uploadedAt).toLocaleDateString()}</span>
                                  </>
                                )}
                              </div>
                            </div>
                          </div>

                          <div className="flex items-center space-x-1 flex-shrink-0">
                            {/* 파일뷰어 버튼 */}
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleFileView(file)}
                              className="h-8 w-8 p-0"
                              title="미리보기"
                            >
                              <Eye className="w-4 h-4" />
                            </Button>

                            {/* 다운로드 버튼 */}
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleFileDownload(file)}
                              className="h-8 w-8 p-0"
                              title="다운로드"
                            >
                              <Download className="w-4 h-4" />
                            </Button>

                            {/* 삭제 버튼 */}
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleFileDelete(file)}
                              className="h-8 w-8 p-0 text-destructive hover:text-red-700"
                              title="삭제"
                            >
                              <Trash2 className="w-4 h-4" />
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            </TabsContent>

            {/* 설정 탭 */}
            <TabsContent value="settings" className="flex-1 overflow-auto space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>파일 첨부 설정</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="docType">문서 타입</Label>
                      <Input
                        id="docType"
                        value={fileConfig.docType}
                        onChange={(e) => setFileConfig(prev => ({ ...prev, docType: e.target.value }))}
                        placeholder="예: DOCUMENT, IMAGE, etc."
                      />
                    </div>
                    <div>
                      <Label htmlFor="docTypeName">문서 타입명</Label>
                      <Input
                        id="docTypeName"
                        value={fileConfig.docTypeName}
                        onChange={(e) => setFileConfig(prev => ({ ...prev, docTypeName: e.target.value }))}
                        placeholder="예: 일반 문서, 이미지 파일"
                      />
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="accept">허용 파일 형식</Label>
                    <Input
                      id="accept"
                      value={fileConfig.accept}
                      onChange={(e) => setFileConfig(prev => ({ ...prev, accept: e.target.value }))}
                      placeholder="예: image/*,.pdf,.doc,.docx"
                    />
                    <p className="text-xs text-gray-500 mt-1">
                      쉼표로 구분하여 입력 (예: image/*,.pdf,.doc)
                    </p>
                  </div>

                  <div>
                    <Label htmlFor="maxSize">최대 파일 크기 (MB)</Label>
                    <Input
                      id="maxSize"
                      type="number"
                      value={Math.floor(fileConfig.maxSize / (1024 * 1024))}
                      onChange={(e) => setFileConfig(prev => ({ 
                        ...prev, 
                        maxSize: parseInt(e.target.value) * 1024 * 1024 
                      }))}
                      min="1"
                      max="100"
                    />
                  </div>

                  <div className="flex items-center space-x-2">
                    <input
                      id="multiple"
                      type="checkbox"
                      checked={fileConfig.multiple}
                      onChange={(e) => setFileConfig(prev => ({ ...prev, multiple: e.target.checked }))}
                      className="rounded border-gray-300"
                    />
                    <Label htmlFor="multiple">여러 파일 업로드 허용</Label>
                  </div>

                  <div className="pt-4 border-t">
                    <Button onClick={handleSaveSettings} className="w-full">
                      <Save className="w-4 h-4 mr-2" />
                      설정 저장
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </DialogContent>
      </Dialog>

      {/* 파일뷰어 모달 */}
      <FileViewerModal
        file={viewerFile}
        isOpen={isViewerOpen}
        onClose={handleViewerClose}
        onDownload={handleFileDownload}
      />
    </>
  );
};