motovaultpro/frontend/src/features/settings/components/ImportButton.tsx

/**
 * @ai-summary Import button component
 * @ai-context Opens file selector and triggers import dialog
 */

import React, { useRef } from 'react';
import toast from 'react-hot-toast';

interface ImportButtonProps {
  onFileSelected: (file: File) => void;
  disabled?: boolean;
}

export const ImportButton: React.FC<ImportButtonProps> = ({
  onFileSelected,
  disabled = false,
}) => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleButtonClick = () => {
    fileInputRef.current?.click();
  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    // Validate file extension
    if (!file.name.endsWith('.tar.gz')) {
      toast.error('Please select a .tar.gz file');
      return;
    }

    // Validate file size (max 500MB)
    const maxSize = 500 * 1024 * 1024;
    if (file.size > maxSize) {
      toast.error('File size exceeds 500MB limit');
      return;
    }

    onFileSelected(file);

    // Reset input so same file can be selected again
    event.target.value = '';
  };

  return (
    <>
      <input
        ref={fileInputRef}
        type="file"
        accept=".tar.gz"
        onChange={handleFileChange}
        style={{ display: 'none' }}
        aria-label="Select import file"
      />
      <button
        onClick={handleButtonClick}
        disabled={disabled}
        className="w-full text-left p-3 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors disabled:opacity-50 dark:bg-primary-600 dark:hover:bg-primary-700"
        style={{ minHeight: '44px' }}
      >
        Import My Data
      </button>
    </>
  );
};