import { useState } from 'react';

interface SaveButtonProps {
  onSave: () => Promise<{ success: boolean; error?: string }>;
}

const SaveButton = ({ onSave }: SaveButtonProps) => {
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error' | 'auth'>('idle');

  const handleClick = async () => {
    setStatus('loading');
    try {
      const result = await onSave();
      
      if (result.error === 'AUTH_REQUIRED') {
        setStatus('auth');
      } else if (result.success) {
        setStatus('success');
      } else {
        setStatus('error');
      }
      
      setTimeout(() => {
        setStatus('idle');
      }, 2000);
    } catch (error) {
      setStatus('error');
      setTimeout(() => {
        setStatus('idle');
      }, 2000);
    }
  };

  const getButtonText = () => {
    switch (status) {
      case 'loading':
        return 'Salvando...';
      case 'success':
        return '✓ Salvo!';
      case 'error':
        return '✕ Erro ao salvar';
      case 'auth':
        return 'Faça login para salvar';
      default:
        return 'Salvar no Launchr';
    }
  };

  return (
    <button
      onClick={handleClick}
      disabled={status !== 'idle'}
      className={`launchr-save-button ${status}`}
    >
      {getButtonText()}
    </button>
  );
};

export default SaveButton;