import { useRef, useState, useCallback, ReactNode, forwardRef, useImperativeHandle } from "react";
import { Button } from "./Button";
import uploadAreaStyles from "~/styles/components/upload-area.css?url";

interface UploadAreaProps {
  onFilesSelected: (files: FileList) => void;
  className?: string;
  accept?: string;
  multiple?: boolean;
  icon?: string;
  buttonText?: string;
  mainText?: string;
  tipText?: ReactNode;
  disabled?: boolean;
  shouldPreventFileSelect?: boolean;
}

export interface UploadAreaRef {
  resetFileInput: () => void;
}

export function links() {
  return [{ rel: "stylesheet", href: uploadAreaStyles }];
}

export const UploadArea = forwardRef<UploadAreaRef, UploadAreaProps>(({
  onFilesSelected,
  className = "",
  accept = "",
  multiple = false,
  icon = "ri-upload-cloud-2-line",
  buttonText = "选择文件",
  mainText = "点击或拖拽文件到此区域上传",
  tipText = "",
  disabled = false,
  shouldPreventFileSelect = false
}, ref) => {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [isDragOver, setIsDragOver] = useState(false);

  const resetFileInput = useCallback(() => {
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  }, []);

  // 暴露resetFileInput方法给父组件
  useImperativeHandle(ref, () => ({
    resetFileInput
  }));

  const handleClick = useCallback(() => {
    if (disabled) return;

    if (shouldPreventFileSelect) {
      // 如果应该阻止文件选择，则触发表单提交
      const form = fileInputRef.current?.closest('form');
      if (form) {
        form.requestSubmit();
      }
    } else if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  }, [disabled, shouldPreventFileSelect]);

  const handleFileChange = useCallback(() => {
    if (fileInputRef.current?.files?.length) {
      onFilesSelected(fileInputRef.current.files);
    }
  }, [onFilesSelected]);

  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    if (!disabled && !shouldPreventFileSelect) {
      setIsDragOver(true);
    }
  }, [disabled, shouldPreventFileSelect]);

  const handleDragLeave = useCallback(() => {
    setIsDragOver(false);
  }, []);

  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragOver(false);
    
    if (disabled) return;

    if (shouldPreventFileSelect) {
      // 如果应该阻止文件选择，则触发表单提交
      const form = e.currentTarget.closest('form');
      if (form) {
        form.requestSubmit();
      }
    } else if (e.dataTransfer.files.length > 0) {
      onFilesSelected(e.dataTransfer.files);
    }
  }, [disabled, shouldPreventFileSelect, onFilesSelected]);

  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
    if ((e.key === 'Enter' || e.key === ' ') && !disabled && !shouldPreventFileSelect) {
      e.preventDefault();
      handleClick();
    }
  }, [handleClick, disabled, shouldPreventFileSelect]);

  return (
    <div 
      className={`upload-area ${isDragOver ? 'dragover' : ''} ${disabled ? 'disabled' : ''} ${className}`}
      onClick={handleClick}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
      onKeyDown={handleKeyDown}
      role="button"
      tabIndex={disabled ? -1 : 0}
      aria-label="上传文件区域"
    >
      <input 
        type="file" 
        ref={fileInputRef} 
        style={{ display: 'none' }} 
        onChange={handleFileChange}
        accept={accept}
        multiple={multiple}
        disabled={disabled}
      />
      <i className={`${icon} upload-icon`} aria-hidden="true"></i>
      <div className="upload-text">{mainText}</div>
      {tipText && <p className="upload-tip mb-2">{tipText}</p>}
      <Button 
        type="primary" 
        icon="ri-file-upload-line"
        disabled={disabled}
        onClick={(e) => {
          e.stopPropagation();
          handleClick();
        }}
      >
        {buttonText}
      </Button>
    </div>
  );
});

UploadArea.displayName = "UploadArea";