import * as React from 'react';
import { authService } from '../services/authService';
import { Icon } from './ui/Icon';
import { useTranslation } from '../hooks/useI18n';

interface AuthProps {
    onAuthSuccess: () => void;
}

const Auth: React.FC<AuthProps> = ({ onAuthSuccess }) => {
    const { t } = useTranslation();
    const [isLogin, setIsLogin] = React.useState(true);
    const [email, setEmail] = React.useState('');
    const [password, setPassword] = React.useState('');
    const [error, setError] = React.useState('');
    const [isLoading, setIsLoading] = React.useState(false);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError('');
        setIsLoading(true);

        const action = isLogin ? authService.login : authService.register;
        const result = action(email, password);

        if (result.success) {
            onAuthSuccess();
        } else {
            setError(result.message);
        }
        setIsLoading(false);
    };
    
    return (
        <div className="w-full h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
            <div className="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700">
                <div className="text-center mb-8">
                     <div className="inline-flex items-center justify-center gap-3 mb-4">
                        <div className="bg-gradient-to-r from-green-400 to-blue-500 p-2 rounded-lg">
                            <Icon className="h-8 w-8 text-white">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </Icon>
                        </div>
                        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">GreenPage AI</h1>
                    </div>
                    <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-200">{isLogin ? t('auth.welcome_back') : t('auth.create_account')}</h2>
                    <p className="text-gray-500 dark:text-gray-400 mt-1">
                        {isLogin ? t('auth.signin_prompt') : t('auth.signup_prompt')}
                    </p>
                </div>
                <form onSubmit={handleSubmit} className="space-y-6">
                    <div>
                        <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300">{t('auth.email')}</label>
                        <input
                            id="email"
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            required
                            className="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm"
                        />
                    </div>
                    <div>
                        <label htmlFor="password"  className="block text-sm font-medium text-gray-700 dark:text-gray-300">{t('auth.password')}</label>
                        <input
                            id="password"
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            required
                            className="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm"
                        />
                    </div>
                    {error && <p className="text-sm text-red-500">{error}</p>}
                    <div>
                        <button
                            type="submit"
                            disabled={isLoading}
                            className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-brand-primary hover:bg-brand-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary disabled:bg-gray-500"
                        >
                            {isLoading ? t('auth.processing') : (isLogin ? t('auth.signin') : t('auth.signup'))}
                        </button>
                    </div>
                </form>
                <div className="mt-6 text-center">
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                        {isLogin ? t('auth.no_account') : t('auth.has_account')}
                        <button onClick={() => { setIsLogin(!isLogin); setError(''); }} className="ml-1 font-medium text-brand-primary hover:text-brand-secondary">
                            {isLogin ? t('auth.signup') : t('auth.signin')}
                        </button>
                    </p>
                </div>
            </div>
        </div>
    );
};

export default Auth;