path: root/components/ui/file-actions.tsx

// components/ui/file-actions.tsx
// 재사용 가능한 파일 액션 컴포넌트들

"use client";

import * as React from "react";
import { 
  Download, 
  Eye, 
  Paperclip, 
  Loader2, 
  AlertCircle,
  FileText,
  Image as ImageIcon,
  Archive
} from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

import { useMultiFileDownload } from "@/hooks/use-file-download";
import { getFileInfo, quickDownload, quickPreview, smartFileAction } from "@/lib/file-download";
import { cn } from "@/lib/utils";

/**
 * 파일 아이콘 컴포넌트
 */
interface FileIconProps {
  fileName: string;
  className?: string;
}

export const FileIcon: React.FC<FileIconProps> = ({ fileName, className }) => {
  const fileInfo = getFileInfo(fileName);
  
  const iconMap = {
    pdf: FileText,
    document: FileText,
    spreadsheet: FileText,
    image: ImageIcon,
    archive: Archive,
    other: Paperclip,
  };
  
  const IconComponent = iconMap[fileInfo.type];
  
  return (
    <IconComponent className={cn("h-4 w-4", className)} />
  );
};

/**
 * 기본 파일 다운로드 버튼
 */
interface FileDownloadButtonProps {
  filePath: string;
  fileName: string;
  variant?: "default" | "ghost" | "outline";
  size?: "default" | "sm" | "lg" | "icon";
  children?: React.ReactNode;
  className?: string;
  showIcon?: boolean;
  disabled?: boolean;
}

export const FileDownloadButton: React.FC<FileDownloadButtonProps> = ({
  filePath,
  fileName,
  variant = "ghost",
  size = "icon",
  children,
  className,
  showIcon = true,
  disabled,
}) => {
  const { downloadFile, isFileLoading, getFileError } = useMultiFileDownload();
  
  const isLoading = isFileLoading(filePath);
  const error = getFileError(filePath);
  
  const handleClick = () => {
    if (!disabled && !isLoading) {
      quickDownload(filePath, fileName);
    }
  };

  if (isLoading) {
    return (
      <Button variant={variant} size={size} disabled className={className}>
        <Loader2 className="h-4 w-4 animate-spin" />
        {children}
      </Button>
    );
  }

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant={variant}
            size={size}
            onClick={handleClick}
            disabled={disabled}
            className={cn(
              error && "text-destructive hover:text-destructive",
              className
            )}
          >
            {error ? (
              <AlertCircle className="h-4 w-4" />
            ) : showIcon ? (
              <Download className="h-4 w-4" />
            ) : null}
            {children}
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          {error ? `오류: ${error} (클릭하여 재시도)` : `${fileName} 다운로드`}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

/**
 * 미리보기 버튼
 */
interface FilePreviewButtonProps extends Omit<FileDownloadButtonProps, 'children'> {
  fallbackToDownload?: boolean;
}

export const FilePreviewButton: React.FC<FilePreviewButtonProps> = ({
  filePath,
  fileName,
  variant = "ghost",
  size = "icon",
  className,
  fallbackToDownload = true,
  disabled,
}) => {
  const { isFileLoading, getFileError } = useMultiFileDownload();
  const fileInfo = getFileInfo(fileName);
  
  const isLoading = isFileLoading(filePath);
  const error = getFileError(filePath);
  
  const handleClick = () => {
    if (!disabled && !isLoading) {
      if (fileInfo.canPreview) {
        quickPreview(filePath, fileName);
      } else if (fallbackToDownload) {
        quickDownload(filePath, fileName);
      }
    }
  };

  if (!fileInfo.canPreview && !fallbackToDownload) {
    return (
      <Button variant={variant} size={size} disabled className={className}>
        <Eye className="h-4 w-4 opacity-50" />
      </Button>
    );
  }

  if (isLoading) {
    return (
      <Button variant={variant} size={size} disabled className={className}>
        <Loader2 className="h-4 w-4 animate-spin" />
      </Button>
    );
  }

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant={variant}
            size={size}
            onClick={handleClick}
            disabled={disabled}
            className={cn(
              error && "text-destructive hover:text-destructive",
              className
            )}
          >
            {error ? (
              <AlertCircle className="h-4 w-4" />
            ) : fileInfo.canPreview ? (
              <Eye className="h-4 w-4" />
            ) : (
              <Download className="h-4 w-4" />
            )}
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          {error 
            ? `오류: ${error} (클릭하여 재시도)` 
            : fileInfo.canPreview 
              ? `${fileName} 미리보기`
              : `${fileName} 다운로드`
          }
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

/**
 * 드롭다운 파일 액션 버튼 (미리보기 + 다운로드)
 */
interface FileActionsDropdownProps {
  filePath: string;
  fileName: string;
  description?: string;
  variant?: "default" | "ghost" | "outline";
  size?: "default" | "sm" | "lg" | "icon";
  className?: string;
  disabled?: boolean;
  triggerIcon?: React.ReactNode;
}

export const FileActionsDropdown: React.FC<FileActionsDropdownProps> = ({
  filePath,
  fileName,
  variant = "ghost",
  size = "icon",
  className,
  disabled,
  triggerIcon,
  description
}) => {
  const { isFileLoading, getFileError } = useMultiFileDownload();
  const fileInfo = getFileInfo(fileName);
  
  const isLoading = isFileLoading(filePath);
  const error = getFileError(filePath);

  const handlePreview = () => quickPreview(filePath, fileName);
  const handleDownload = () => quickDownload(filePath, fileName);

  if (isLoading) {
    return (
      <Button variant={variant} size={size} disabled className={className}>
        <Loader2 className="h-4 w-4 animate-spin" />
      </Button>
    );
  }

  if (error) {
    return (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant={variant}
              size={size}
              onClick={handleDownload}
              className={cn("text-destructive hover:text-destructive", className)}
            >
              <AlertCircle className="h-4 w-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            <div className="text-sm">
              <div className="font-medium text-destructive">오류 발생</div>
              <div className="text-muted-foreground">{error}</div>
              <div className="mt-1 text-xs">클릭하여 재시도</div>
            </div>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    );
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button 
          variant={variant} 
          size={size} 
          disabled={disabled}
          className={className}
        >
          {triggerIcon || <Paperclip className="h-4 w-4" />}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {fileInfo.canPreview && (
          <>
            <DropdownMenuItem onClick={handlePreview}>
              <Eye className="mr-2 h-4 w-4" />
              {fileInfo.icon} 미리보기
            </DropdownMenuItem>
            <DropdownMenuSeparator />
          </>
        )}
        <DropdownMenuItem onClick={handleDownload}>
          <Download className="mr-2 h-4 w-4" />
          {description} 다운로드
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

/**
 * 스마트 파일 액션 버튼 (자동 판단)
 */
interface SmartFileActionButtonProps extends Omit<FileDownloadButtonProps, 'children'> {
  showLabel?: boolean;
}

export const SmartFileActionButton: React.FC<SmartFileActionButtonProps> = ({
  filePath,
  fileName,
  variant = "ghost",
  size = "icon",
  className,
  showLabel = false,
  disabled,
}) => {
  const { isFileLoading, getFileError } = useMultiFileDownload();
  const fileInfo = getFileInfo(fileName);
  
  const isLoading = isFileLoading(filePath);
  const error = getFileError(filePath);
  
  const handleClick = () => {
    if (!disabled && !isLoading) {
      smartFileAction(filePath, fileName);
    }
  };

  if (isLoading) {
    return (
      <Button variant={variant} size={size} disabled className={className}>
        <Loader2 className="h-4 w-4 animate-spin" />
        {showLabel && <span className="ml-2">처리 중...</span>}
      </Button>
    );
  }

  const actionText = fileInfo.canPreview ? '미리보기' : '다운로드';
  const IconComponent = fileInfo.canPreview ? Eye : Download;

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant={variant}
            size={size}
            onClick={handleClick}
            disabled={disabled}
            className={cn(
              error && "text-destructive hover:text-destructive",
              className
            )}
          >
            {error ? (
              <AlertCircle className="h-4 w-4" />
            ) : (
              <IconComponent className="h-4 w-4" />
            )}
            {showLabel && (
              <span className="ml-2">
                {error ? '재시도' : actionText}
              </span>
            )}
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          {error 
            ? `오류: ${error} (클릭하여 재시도)` 
            : `${fileInfo.icon} ${fileName} ${actionText}`
          }
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

/**
 * 파일명 링크 컴포넌트
 */
interface FileNameLinkProps {
  filePath: string;
  fileName: string;
  className?: string;
  showIcon?: boolean;
  maxLength?: number;
}

export const FileNameLink: React.FC<FileNameLinkProps> = ({
  filePath,
  fileName,
  className,
  showIcon = true,
  maxLength = 200,
}) => {
  const fileInfo = getFileInfo(fileName);
  
  const handleClick = () => {
    smartFileAction(filePath, fileName);
  };

  const displayName = fileName.length > maxLength 
    ? `${fileName.substring(0, maxLength)}...`
    : fileName;

  return (
    <button
      onClick={handleClick}
      className={cn(
        "flex items-center gap-1 text-blue-600 hover:text-blue-800 hover:underline cursor-pointer text-left",
        className
      )}
      title={`${fileInfo.icon} ${fileName} ${fileInfo.canPreview ? '미리보기' : '다운로드'}`}
    >
      {showIcon && (
        <span className="text-xs flex-shrink-0">{fileInfo.icon}</span>
      )}
      <span className="truncate">{displayName}</span>
    </button>
  );
};