"use client";

import React, { useState, useRef } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { FileInfo, FileUploadConfig } from "./types";
import {
  Upload,
  Download,
  Trash2,
  Eye,
  File,
  FileText,
  Image as ImageIcon,
  Video,
  Music,
  Archive,
  Presentation,
  X,
  Star,
  ZoomIn,
  ZoomOut,
  RotateCcw,
} from "lucide-react";
import { formatFileSize } from "@/lib/utils";
import { FileViewerModal } from "./FileViewerModal";

interface FileManagerModalProps {
  isOpen: boolean;
  onClose: () => void;
  uploadedFiles: FileInfo[];
  onFileUpload: (files: File[]) => Promise<void>;
  onFileDownload: (file: FileInfo) => void;
  onFileDelete: (file: FileInfo) => void;
  onFileView: (file: FileInfo) => void;
  onSetRepresentative?: (file: FileInfo) => void; // 대표 이미지 설정 콜백
  config: FileUploadConfig;
  isDesignMode?: boolean;
}

export const FileManagerModal: React.FC<FileManagerModalProps> = ({
  isOpen,
  onClose,
  uploadedFiles,
  onFileUpload,
  onFileDownload,
  onFileDelete,
  onFileView,
  onSetRepresentative,
  config,
  isDesignMode = false,
}) => {
  const [dragOver, setDragOver] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [viewerFile, setViewerFile] = useState<FileInfo | null>(null);
  const [isViewerOpen, setIsViewerOpen] = useState(false);
  const [selectedFile, setSelectedFile] = useState<FileInfo | null>(null); // 선택된 파일 (좌측 미리보기용)
  const [previewImageUrl, setPreviewImageUrl] = useState<string | null>(null); // 이미지 미리보기 URL
  const [zoomLevel, setZoomLevel] = useState(1); // 🔍 확대/축소 레벨
  const [imagePosition, setImagePosition] = useState({ x: 0, y: 0 }); // 🖱️ 이미지 위치
  const [isDragging, setIsDragging] = useState(false); // 🖱️ 드래그 중 여부
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 }); // 🖱️ 드래그 시작 위치
  const fileInputRef = useRef<HTMLInputElement>(null);
  const imageContainerRef = useRef<HTMLDivElement>(null);

  // 파일 아이콘 가져오기
  const getFileIcon = (fileExt: string) => {
    const ext = fileExt.toLowerCase();

    if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) {
      return <ImageIcon className="h-5 w-5 text-primary" />;
    } else if (["pdf", "doc", "docx", "txt", "rtf"].includes(ext)) {
      return <FileText className="h-5 w-5 text-destructive" />;
    } else if (["xls", "xlsx", "csv"].includes(ext)) {
      return <FileText className="h-5 w-5 text-emerald-500" />;
    } else if (["ppt", "pptx"].includes(ext)) {
      return <Presentation className="h-5 w-5 text-amber-500" />;
    } else if (["mp4", "avi", "mov", "webm"].includes(ext)) {
      return <Video className="h-5 w-5 text-purple-500" />;
    } else if (["mp3", "wav", "ogg"].includes(ext)) {
      return <Music className="h-5 w-5 text-pink-500" />;
    } else if (["zip", "rar", "7z"].includes(ext)) {
      return <Archive className="h-5 w-5 text-amber-500" />;
    } else {
      return <File className="h-5 w-5 text-muted-foreground" />;
    }
  };

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

    setUploading(true);
    try {
      const fileArray = Array.from(files);
      await onFileUpload(fileArray);
      console.log("✅ FileManagerModal: 파일 업로드 완료");
    } catch (error) {
      console.error("❌ FileManagerModal: 파일 업로드 오류:", error);
    } finally {
      setUploading(false);
      console.log("🔄 FileManagerModal: 업로드 상태 초기화");
    }
  };

  // 드래그 앤 드롭 핸들러
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    setDragOver(true);
  };

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    setDragOver(false);
  };

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

    if (config.disabled || isDesignMode) return;

    const files = e.dataTransfer.files;
    handleFileUpload(files);
  };

  // 파일 선택 핸들러
  const handleFileSelect = () => {
    if (config.disabled || isDesignMode) return;
    fileInputRef.current?.click();
  };

  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files) {
      handleFileUpload(files);
    }
    // 입력값 초기화
    e.target.value = "";
  };

  // 파일 뷰어 핸들러
  const handleFileViewInternal = (file: FileInfo) => {
    setViewerFile(file);
    setIsViewerOpen(true);
  };

  const handleViewerClose = () => {
    setIsViewerOpen(false);
    setViewerFile(null);
  };

  // 파일 클릭 시 미리보기 로드
  const handleFileClick = async (file: FileInfo) => {
    setSelectedFile(file);
    setZoomLevel(1); // 🔍 파일 선택 시 확대/축소 레벨 초기화
    setImagePosition({ x: 0, y: 0 }); // 🖱️ 이미지 위치 초기화

    // 이미지 파일인 경우 미리보기 로드
    // 🔑 점(.)을 제거하고 확장자만 비교
    const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg"];
    const ext = file.fileExt.toLowerCase().replace(".", "");
    if (imageExtensions.includes(ext) || file.isImage) {
      try {
        // 이전 Blob URL 해제
        if (previewImageUrl) {
          URL.revokeObjectURL(previewImageUrl);
        }

        // 🔑 항상 apiClient를 통해 Blob 다운로드 (Docker 환경에서 상대 경로 문제 방지)
        const { apiClient } = await import("@/lib/api/client");
        const response = await apiClient.get(`/files/preview/${file.objid}`, {
          responseType: "blob",
        });

        const blob = new Blob([response.data]);
        const blobUrl = URL.createObjectURL(blob);
        setPreviewImageUrl(blobUrl);
      } catch (error) {
        console.error("이미지 로드 실패:", error);
        setPreviewImageUrl(null);
      }
    } else {
      setPreviewImageUrl(null);
    }
  };

  // 컴포넌트 언마운트 시 Blob URL 해제
  React.useEffect(() => {
    return () => {
      if (previewImageUrl) {
        URL.revokeObjectURL(previewImageUrl);
      }
    };
  }, [previewImageUrl]);

  // 🔑 모달이 열릴 때 첫 번째 파일을 자동으로 선택하고 확대/축소 레벨 초기화
  React.useEffect(() => {
    if (isOpen) {
      setZoomLevel(1); // 🔍 모달 열릴 때 확대/축소 레벨 초기화
      setImagePosition({ x: 0, y: 0 }); // 🖱️ 이미지 위치 초기화
      if (uploadedFiles.length > 0 && !selectedFile) {
        const firstFile = uploadedFiles[0];
        handleFileClick(firstFile);
      }
    }
  }, [isOpen, uploadedFiles, selectedFile]);

  // 🖱️ 마우스 드래그 핸들러
  const handleMouseDown = (e: React.MouseEvent) => {
    if (zoomLevel > 1) {
      setIsDragging(true);
      setDragStart({ x: e.clientX - imagePosition.x, y: e.clientY - imagePosition.y });
    }
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (isDragging && zoomLevel > 1) {
      setImagePosition({
        x: e.clientX - dragStart.x,
        y: e.clientY - dragStart.y,
      });
    }
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  // 🔍 확대/축소 레벨이 1로 돌아가면 위치도 초기화
  React.useEffect(() => {
    if (zoomLevel <= 1) {
      setImagePosition({ x: 0, y: 0 });
    }
  }, [zoomLevel]);

  return (
    <>
      <Dialog open={isOpen} onOpenChange={() => {}}>
        <DialogContent className="max-h-[90vh] w-[1400px] max-w-[95vw] overflow-hidden [&>button]:hidden">
          <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <DialogTitle className="text-lg font-semibold">파일 관리 ({uploadedFiles.length}개)</DialogTitle>
            <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-muted" onClick={onClose} title="닫기">
              <X className="h-4 w-4" />
            </Button>
          </DialogHeader>

          <div className="flex h-[75vh] flex-col space-y-3">
            {/* 파일 업로드 영역 - readonly/disabled이면 숨김 */}
            {!isDesignMode && !config.readonly && !config.disabled && (
              <div
                className={`cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors ${dragOver ? "border-primary/60 bg-primary/10" : "border-input"} hover:border-input ${uploading ? "opacity-75" : ""} `}
                onClick={() => {
                  fileInputRef.current?.click();
                }}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
              >
                <input
                  ref={fileInputRef}
                  type="file"
                  multiple={config.multiple}
                  accept={config.accept}
                  onChange={handleFileInputChange}
                  className="hidden"
                />

                {uploading ? (
                  <div className="flex items-center justify-center gap-2">
                    <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-primary"></div>
                    <span className="text-sm font-medium text-primary">업로드 중...</span>
                  </div>
                ) : (
                  <div className="flex items-center justify-center gap-3">
                    <Upload className="h-6 w-6 text-muted-foreground/70" />
                    <p className="text-sm font-medium text-foreground">파일을 드래그하거나 클릭하여 업로드하세요</p>
                  </div>
                )}
              </div>
            )}

            {/* 좌우 분할 레이아웃 - 좌측 넓게, 우측 고정 너비 */}
            <div className="flex min-h-0 flex-1 gap-4">
              {/* 좌측: 이미지 미리보기 (확대/축소 가능) - showPreview가 false면 숨김 */}
              {(config.showPreview !== false) && <div className="relative flex flex-1 flex-col overflow-hidden rounded-lg border border-border bg-foreground">
                {/* 확대/축소 컨트롤 */}
                {selectedFile && previewImageUrl && (
                  <div className="absolute top-3 left-3 z-10 flex items-center gap-1 rounded-lg bg-black/60 p-1">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 text-white hover:bg-white/20"
                      onClick={() => setZoomLevel((prev) => Math.max(0.25, prev - 0.25))}
                      disabled={zoomLevel <= 0.25}
                    >
                      <ZoomOut className="h-4 w-4" />
                    </Button>
                    <span className="min-w-[50px] text-center text-xs text-white">{Math.round(zoomLevel * 100)}%</span>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 text-white hover:bg-white/20"
                      onClick={() => setZoomLevel((prev) => Math.min(4, prev + 0.25))}
                      disabled={zoomLevel >= 4}
                    >
                      <ZoomIn className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 text-white hover:bg-white/20"
                      onClick={() => setZoomLevel(1)}
                    >
                      <RotateCcw className="h-4 w-4" />
                    </Button>
                  </div>
                )}

                {/* 이미지 미리보기 영역 - 마우스 휠로 확대/축소, 드래그로 이동 */}
                <div
                  ref={imageContainerRef}
                  className={`flex flex-1 items-center justify-center overflow-hidden p-4 ${
                    zoomLevel > 1 ? (isDragging ? "cursor-grabbing" : "cursor-grab") : "cursor-zoom-in"
                  }`}
                  onWheel={(e) => {
                    if (selectedFile && previewImageUrl) {
                      e.preventDefault();
                      const delta = e.deltaY > 0 ? -0.1 : 0.1;
                      setZoomLevel((prev) => Math.min(4, Math.max(0.25, prev + delta)));
                    }
                  }}
                  onMouseDown={handleMouseDown}
                  onMouseMove={handleMouseMove}
                  onMouseUp={handleMouseUp}
                  onMouseLeave={handleMouseUp}
                >
                  {selectedFile && previewImageUrl ? (
                    <img
                      src={previewImageUrl}
                      alt={selectedFile.realFileName}
                      className="transition-transform duration-100 select-none"
                      style={{
                        transform: `translate(${imagePosition.x}px, ${imagePosition.y}px) scale(${zoomLevel})`,
                        transformOrigin: "center center",
                      }}
                      draggable={false}
                    />
                  ) : selectedFile ? (
                    <div className="flex flex-col items-center text-muted-foreground/70">
                      {getFileIcon(selectedFile.fileExt)}
                      <p className="mt-2 text-sm">미리보기 불가능</p>
                    </div>
                  ) : (
                    <div className="flex flex-col items-center text-muted-foreground/70">
                      <ImageIcon className="mb-2 h-16 w-16" />
                      <p className="text-sm">파일을 선택하면 미리보기가 표시됩니다</p>
                    </div>
                  )}
                </div>

                {/* 파일 정보 바 */}
                {selectedFile && (
                  <div className="truncate bg-black/60 px-3 py-2 text-center text-xs text-white">
                    {selectedFile.realFileName}
                  </div>
                )}
              </div>}

              {/* 우측: 파일 목록 - showFileList가 false면 숨김, showPreview가 false면 전체 너비 */}
              {(config.showFileList !== false) && <div className={`flex shrink-0 flex-col overflow-hidden rounded-lg border border-border ${config.showPreview !== false ? "w-[400px]" : "flex-1"}`}>
                <div className="border-b border-border bg-muted p-3">
                  <div className="flex items-center justify-between">
                    <h3 className="text-sm font-medium text-foreground">업로드된 파일</h3>
                    {uploadedFiles.length > 0 && (
                      <Badge variant="secondary" className="text-xs">
                        총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
                      </Badge>
                    )}
                  </div>
                </div>

                <div className="flex-1 overflow-y-auto p-3">
                  {uploadedFiles.length > 0 ? (
                    <div className="space-y-2">
                      {uploadedFiles.map((file) => (
                        <div
                          key={file.objid}
                          className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-colors ${selectedFile?.objid === file.objid ? "border border-primary/20 bg-primary/10" : "bg-muted hover:bg-muted"} `}
                          onClick={() => handleFileClick(file)}
                        >
                          <div className="flex-shrink-0">{getFileIcon(file.fileExt)}</div>
                          <div className="min-w-0 flex-1">
                            <div className="flex items-center gap-2">
                              <span className="truncate text-sm font-medium text-foreground">{file.realFileName}</span>
                              {file.isRepresentative && (
                                <Badge variant="default" className="h-5 px-1.5 text-xs">
                                  대표
                                </Badge>
                              )}
                            </div>
                            <p className="text-xs text-muted-foreground">
                              {config.showFileSize !== false && <>{formatFileSize(file.fileSize)} • </>}{file.fileExt.toUpperCase()}
                            </p>
                          </div>
                          <div className="flex items-center space-x-1">
                            {onSetRepresentative && (
                              <Button
                                variant={file.isRepresentative ? "default" : "ghost"}
                                size="sm"
                                className="h-7 w-7 p-0"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  onSetRepresentative(file);
                                }}
                                title={file.isRepresentative ? "현재 대표 파일" : "대표 파일로 설정"}
                              >
                                <Star className={`h-3 w-3 ${file.isRepresentative ? "fill-white" : ""}`} />
                              </Button>
                            )}
                            <Button
                              variant="ghost"
                              size="sm"
                              className="h-7 w-7 p-0"
                              onClick={(e) => {
                                e.stopPropagation();
                                handleFileViewInternal(file);
                              }}
                              title="미리보기"
                            >
                              <Eye className="h-3 w-3" />
                            </Button>
                            {config.allowDownload !== false && (
                              <Button
                                variant="ghost"
                                size="sm"
                                className="h-7 w-7 p-0"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  onFileDownload(file);
                                }}
                                title="다운로드"
                              >
                                <Download className="h-3 w-3" />
                              </Button>
                            )}
                            {!isDesignMode && config.allowDelete !== false && (
                              <Button
                                variant="ghost"
                                size="sm"
                                className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  onFileDelete(file);
                                }}
                                title="삭제"
                              >
                                <Trash2 className="h-3 w-3" />
                              </Button>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
                      <File className="mb-3 h-12 w-12 text-muted-foreground/50" />
                      <p className="text-sm font-medium text-muted-foreground">업로드된 파일이 없습니다</p>
                      <p className="mt-1 text-xs text-muted-foreground">
                        {isDesignMode
                          ? "디자인 모드에서는 파일을 업로드할 수 없습니다"
                          : "위의 영역에 파일을 업로드하세요"}
                      </p>
                    </div>
                  )}
                </div>
              </div>}
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* 파일 뷰어 모달 */}
      <FileViewerModal
        file={viewerFile}
        isOpen={isViewerOpen}
        onClose={handleViewerClose}
        onDownload={config.allowDownload !== false ? onFileDownload : undefined}
        onDelete={!isDesignMode && config.allowDelete !== false ? onFileDelete : undefined}
      />
    </>
  );
};
