import React, { useState } from 'react';
import { useLanguage } from '../i18n/LanguageContext';

interface SignUpPageProps {
    onSignUp: (name: string, email: string, password: string) => void;
    onNavigateToLogin: () => void;
}

const AppIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-green-600 dark:text-green-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
);

const SignUpPage: React.FC<SignUpPageProps> = ({ onSignUp, onNavigateToLogin }) => {
    const { t } = useLanguage();
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (name.trim() && email.trim() && password.trim()) {
            onSignUp(name.trim(), email.trim(), password);
        }
    };

    return (
        <div className="bg-white dark:bg-slate-800 p-8 sm:p-10 rounded-3xl shadow-sm border border-slate-200/80 dark:border-slate-700 w-full max-w-md mx-auto">
            <AppIcon />
            <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100 mb-2 text-center">{t('createAccount')}</h2>
            <p className="text-slate-600 dark:text-slate-400 mb-6 text-center">{t('signupSubtitle')}</p>
            <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                    <label htmlFor="name" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">{t('fullName')}</label>
                    <input
                        type="text"
                        id="name"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        className="w-full p-3 bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 focus:bg-white dark:focus:bg-slate-700 transition-shadow placeholder:text-slate-400 dark:placeholder:text-slate-500"
                        placeholder={t('namePlaceholder')}
                        required
                    />
                </div>
                <div>
                    <label htmlFor="signup-email" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">{t('email')}</label>
                    <input
                        type="email"
                        id="signup-email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        className="w-full p-3 bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 focus:bg-white dark:focus:bg-slate-700 transition-shadow placeholder:text-slate-400 dark:placeholder:text-slate-500"
                        placeholder="you@example.com"
                        required
                    />
                </div>
                <div>
                    <label htmlFor="signup-password" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">{t('password')}</label>
                    <input
                        type="password"
                        id="signup-password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        className="w-full p-3 bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 focus:bg-white dark:focus:bg-slate-700 transition-shadow placeholder:text-slate-400 dark:placeholder:text-slate-500"
                        placeholder="••••••••"
                        required
                    />
                </div>
                <button
                    type="submit"
                    className="w-full bg-emerald-600 text-white font-semibold px-6 py-3 rounded-xl hover:bg-emerald-700 transition-colors disabled:bg-slate-300 dark:disabled:bg-slate-600 disabled:cursor-not-allowed"
                    disabled={!name || !email || !password}
                >
                    {t('createAccount')}
                </button>
            </form>
            <p className="text-sm text-center text-slate-500 dark:text-slate-400 mt-6">
                {t('hasAccount')}{' '}
                <button onClick={onNavigateToLogin} className="font-semibold text-green-600 dark:text-green-400 hover:underline">
                    {t('logIn')}
                </button>
            </p>
        </div>
    );
};

export default SignUpPage;