"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
} 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 fileInputRef = useRef<HTMLInputElement>(null);

  // 파일 아이콘 가져오기
  const getFileIcon = (fileExt: string) => {
    const ext = fileExt.toLowerCase();
    
    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
      return <ImageIcon className="w-5 h-5 text-blue-500" />;
    } else if (['pdf', 'doc', 'docx', 'txt', 'rtf'].includes(ext)) {
      return <FileText className="w-5 h-5 text-red-500" />;
    } else if (['xls', 'xlsx', 'csv'].includes(ext)) {
      return <FileText className="w-5 h-5 text-green-500" />;
    } else if (['ppt', 'pptx'].includes(ext)) {
      return <Presentation className="w-5 h-5 text-orange-500" />;
    } else if (['mp4', 'avi', 'mov', 'webm'].includes(ext)) {
      return <Video className="w-5 h-5 text-purple-500" />;
    } else if (['mp3', 'wav', 'ogg'].includes(ext)) {
      return <Music className="w-5 h-5 text-pink-500" />;
    } else if (['zip', 'rar', '7z'].includes(ext)) {
      return <Archive className="w-5 h-5 text-yellow-500" />;
    } else {
      return <File className="w-5 h-5 text-gray-500" />;
    }
  };

  // 파일 업로드 핸들러
  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);
  };

  return (
    <>
      <Dialog open={isOpen} onOpenChange={() => {}}>
        <DialogContent className="max-w-4xl max-h-[90vh] 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-gray-100"
              onClick={onClose}
              title="닫기"
            >
              <X className="w-4 h-4" />
            </Button>
          </DialogHeader>
          
          <div className="flex flex-col space-y-4 h-[70vh]">
            {/* 파일 업로드 영역 */}
            {!isDesignMode && (
              <div
                className={`
                  border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors
                  ${dragOver ? 'border-blue-400 bg-blue-50' : 'border-gray-300'}
                  ${config.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
                  ${uploading ? 'opacity-75' : ''}
                `}
                onClick={handleFileSelect}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
              >
                <input
                  ref={fileInputRef}
                  type="file"
                  multiple={config.multiple}
                  accept={config.accept}
                  onChange={handleFileInputChange}
                  className="hidden"
                  disabled={config.disabled}
                />
                
                {uploading ? (
                  <div className="flex flex-col items-center">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mb-3"></div>
                    <span className="text-blue-600 font-medium">업로드 중...</span>
                  </div>
                ) : (
                  <div className="flex flex-col items-center">
                    <Upload className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                    <p className="text-lg font-medium text-gray-900 mb-2">
                      파일을 드래그하거나 클릭하여 업로드하세요
                    </p>
                    <p className="text-sm text-gray-500">
                      {config.accept && `지원 형식: ${config.accept}`}
                      {config.maxSize && ` • 최대 ${formatFileSize(config.maxSize)}`}
                      {config.multiple && ' • 여러 파일 선택 가능'}
                    </p>
                  </div>
                )}
              </div>
            )}

            {/* 파일 목록 */}
            <div className="flex-1 overflow-y-auto border border-gray-200 rounded-lg">
              <div className="p-4">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-sm font-medium text-gray-700">
                    업로드된 파일
                  </h3>
                  {uploadedFiles.length > 0 && (
                    <Badge variant="secondary" className="text-xs">
                      총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
                    </Badge>
                  )}
                </div>

                {uploadedFiles.length > 0 ? (
                  <div className="space-y-2">
                    {uploadedFiles.map((file) => (
                      <div
                        key={file.objid}
                        className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
                      >
                        <div className="flex-shrink-0">
                          {getFileIcon(file.fileExt)}
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2">
                            <span className="text-sm font-medium text-gray-900 truncate">
                              {file.realFileName}
                            </span>
                            {file.isRepresentative && (
                              <Badge variant="default" className="h-5 px-1.5 text-xs">
                                대표
                              </Badge>
                            )}
                          </div>
                          <p className="text-xs text-gray-500">
                            {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-8 w-8 p-0"
                              onClick={() => onSetRepresentative(file)}
                              title={file.isRepresentative ? "현재 대표 파일" : "대표 파일로 설정"}
                            >
                              <Star className={`w-4 h-4 ${file.isRepresentative ? "fill-white" : ""}`} />
                            </Button>
                          )}
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 w-8 p-0"
                            onClick={() => handleFileViewInternal(file)}
                            title="미리보기"
                          >
                            <Eye className="w-4 h-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 w-8 p-0"
                            onClick={() => onFileDownload(file)}
                            title="다운로드"
                          >
                            <Download className="w-4 h-4" />
                          </Button>
                          {!isDesignMode && (
                            <Button
                              variant="ghost"
                              size="sm"
                              className="h-8 w-8 p-0 text-red-500 hover:text-red-700"
                              onClick={() => onFileDelete(file)}
                              title="삭제"
                            >
                              <Trash2 className="w-4 h-4" />
                            </Button>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="flex flex-col items-center justify-center py-12 text-gray-500">
                    <File className="w-16 h-16 mb-4 text-gray-300" />
                    <p className="text-lg font-medium text-gray-600">업로드된 파일이 없습니다</p>
                    <p className="text-sm text-gray-500 mt-2">
                      {isDesignMode ? '디자인 모드에서는 파일을 업로드할 수 없습니다' : '위의 영역에 파일을 드래그하거나 클릭하여 업로드하세요'}
                    </p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>

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