import { useRef } from 'react';

interface FileSelectorProps {
  onFileSelected: (file: File) => void;
}

export default function FileSelector({ onFileSelected }: FileSelectorProps) {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      onFileSelected(e.target.files[0]);
    }
  };

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: 320,
        minWidth: 420,
        maxWidth: 520,
        width: '90%',
        background: 'rgba(255,255,255,0.25)',
        borderRadius: 24,
        boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.18)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        border: '1.5px solid rgba(255,255,255,0.18)',
        margin: '48px 0 32px 0',
        position: 'relative',
        transition: 'box-shadow 0.3s',
      }}
    >
      <div style={{ fontSize: 56, color: '#1890ff', marginTop: 32, marginBottom: 12, opacity: 0.85 }}>
        <span role="img" aria-label="upload">📤</span>
      </div>
      <input
        type="file"
        ref={inputRef}
        style={{ display: 'none' }}
        onChange={handleChange}
      />
      <button
        type="button"
        onClick={() => {
          if (inputRef.current) {
            inputRef.current.value = '';
            inputRef.current.click();
          }
        }}
        style={{
          padding: '18px 48px',
          borderRadius: 32,
          background: 'linear-gradient(90deg, #1890ff 0%, #40a9ff 100%)',
          color: '#fff',
          border: 'none',
          fontSize: 22,
          fontWeight: 600,
          letterSpacing: 2,
          boxShadow: '0 4px 16px rgba(24,144,255,0.18)',
          cursor: 'pointer',
          transition: 'all 0.2s, transform 0.2s',
          marginTop: 12,
          marginBottom: 18,
          outline: 'none',
        }}
        onMouseOver={e => {
          e.currentTarget.style.background = 'linear-gradient(90deg, #40a9ff 0%, #1890ff 100%)';
          e.currentTarget.style.transform = 'scale(1.04)';
        }}
        onMouseOut={e => {
          e.currentTarget.style.background = 'linear-gradient(90deg, #1890ff 0%, #40a9ff 100%)';
          e.currentTarget.style.transform = 'scale(1)';
        }}
      >
        选择本地文件
      </button>
      <div style={{ marginBottom: 32, color: '#555', fontSize: 16, opacity: 0.85 }}>
        支持各类文档，极速上传，安全存储
      </div>
    </div>
  );
} 