
import React, { useState } from 'react';
import { Language, translations } from '../i18n';
import { Screen, UserProfile } from '../types';

interface SignupProps {
  onSignup: (user: UserProfile) => void;
  language: Language;
  setLanguage: (lang: Language) => void;
  navigateTo: (screen: Screen) => void;
}

const Signup: React.FC<SignupProps> = ({ onSignup, language, setLanguage, navigateTo }) => {
  const [formData, setFormData] = useState({
    fullName: '',
    bigNumber: '',
    email: '',
    password: '',
    confirmPassword: ''
  });
  const [termsAccepted, setTermsAccepted] = useState(false);
  const [error, setError] = useState('');
  const [isPending, setIsPending] = useState(false);
  
  const t = translations[language].signup;

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSignupClick = () => {
    const { fullName, bigNumber, email, password, confirmPassword } = formData;

    if (!fullName || !bigNumber || !email || !password || !confirmPassword) {
      setError(language === 'nl' ? 'Alle velden zijn verplicht.' : 'All fields are required.');
      return;
    }

    if (password !== confirmPassword) {
      setError(language === 'nl' ? 'Wachtwoorden komen niet overeen.' : 'Passwords do not match.');
      return;
    }

    if (!termsAccepted) {
      setError(language === 'nl' ? 'U moet akkoord gaan met de voorwaarden.' : 'You must agree to the terms.');
      return;
    }

    const newUser: UserProfile = {
      id: `u-${Date.now()}`,
      fullName,
      email,
      bigNumber,
      roleType: 'staff', // New users are staff until changed
      status: 'pending',
      role: translations[language].staff.assistant
    };

    setError('');
    onSignup(newUser);
    setIsPending(true);
  };

  if (isPending) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center p-6 bg-background-light dark:bg-background-dark text-center">
        <div className="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mb-6 animate-bounce">
          <span className="material-icons text-primary text-4xl">mark_email_read</span>
        </div>
        <h1 className="text-2xl font-bold mb-4">{t.pendingTitle}</h1>
        <p className="text-slate-500 max-w-xs mb-8">
          {t.pendingMessage}
        </p>
        <button 
          onClick={() => navigateTo('login')}
          className="bg-primary text-white font-bold py-3 px-8 rounded-xl shadow-lg shadow-primary/20 active:scale-95 transition-all"
        >
          {t.backToLogin}
        </button>
      </div>
    );
  }
  
  return (
    <div className="min-h-screen flex flex-col items-center justify-center p-6 relative overflow-hidden bg-background-light dark:bg-background-dark">
      <div className="fixed top-0 left-0 w-full h-1/3 ios-bg-gradient -z-10 opacity-60"></div>
      <div className="fixed -bottom-24 -left-24 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-10"></div>
      <div className="fixed top-1/4 -right-16 w-48 h-48 bg-primary/5 rounded-full blur-2xl -z-10"></div>

      <div className="fixed top-0 right-0 p-6 safe-area-pt flex items-center space-x-2 text-sm font-medium z-50">
        <button onClick={() => setLanguage('nl')} className={`${language === 'nl' ? 'text-primary font-bold' : 'text-primary/60 hover:text-primary'}`}>NL</button>
        <span className="text-primary/30">|</span>
        <button onClick={() => setLanguage('en')} className={`${language === 'en' ? 'text-primary font-bold' : 'text-primary/60 hover:text-primary'}`}>EN</button>
      </div>

      <div className="w-full max-w-sm flex flex-col items-center z-10 py-10">
        <div className="mb-8 text-center">
          <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4 mx-auto border-2 border-primary/20">
            <span className="material-icons text-primary text-3xl">person_add_alt_1</span>
          </div>
          <h1 className="text-2xl font-bold text-primary dark:text-primary tracking-tight">{t.title}</h1>
          <p className="text-primary/70 dark:text-primary/60 text-sm mt-1">{t.subtitle}</p>
        </div>

        {error && (
          <div className="w-full bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm mb-6 flex items-center gap-2 animate-in fade-in slide-in-from-top-2">
            <span className="material-icons text-sm">error_outline</span>
            {error}
          </div>
        )}

        <div className="w-full space-y-4">
          <div className="space-y-1.5">
            <label className="text-xs font-semibold uppercase tracking-wider text-primary/80 dark:text-primary/60 px-1">{t.fullName}</label>
            <div className="relative">
              <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2 text-primary/40 text-lg">person_outline</span>
              <input name="fullName" value={formData.fullName} onChange={handleChange} className="w-full pl-10 pr-4 py-3 bg-white dark:bg-background-dark border border-primary/20 dark:border-primary/30 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-gray-800 dark:text-white" placeholder="John Doe" type="text" />
            </div>
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-semibold uppercase tracking-wider text-primary/80 dark:text-primary/60 px-1">{t.bigNumber}</label>
            <div className="relative">
              <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2 text-primary/40 text-lg">badge</span>
              <input name="bigNumber" value={formData.bigNumber} onChange={handleChange} className="w-full pl-10 pr-4 py-3 bg-white dark:bg-background-dark border border-primary/20 dark:border-primary/30 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-gray-800 dark:text-white" placeholder="12345678901" type="text" />
            </div>
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-semibold uppercase tracking-wider text-primary/80 dark:text-primary/60 px-1">{t.email}</label>
            <div className="relative">
              <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2 text-primary/40 text-lg">mail_outline</span>
              <input name="email" value={formData.email} onChange={handleChange} className="w-full pl-10 pr-4 py-3 bg-white dark:bg-background-dark border border-primary/20 dark:border-primary/30 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-gray-800 dark:text-white" placeholder="name@example.com" type="email" />
            </div>
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-semibold uppercase tracking-wider text-primary/80 dark:text-primary/60 px-1">{t.password}</label>
            <div className="relative">
              <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2 text-primary/40 text-lg">lock_outline</span>
              <input name="password" value={formData.password} onChange={handleChange} className="w-full pl-10 pr-4 py-3 bg-white dark:bg-background-dark border border-primary/20 dark:border-primary/30 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-gray-800 dark:text-white" placeholder="••••••••" type="password" />
            </div>
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-semibold uppercase tracking-wider text-primary/80 dark:text-primary/60 px-1">{t.confirmPassword}</label>
            <div className="relative">
              <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2 text-primary/40 text-lg">lock_reset</span>
              <input name="confirmPassword" value={formData.confirmPassword} onChange={handleChange} className="w-full pl-10 pr-4 py-3 bg-white dark:bg-background-dark border border-primary/20 dark:border-primary/30 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-gray-800 dark:text-white" placeholder="••••••••" type="password" />
            </div>
          </div>

          <div className="py-2">
            <label className="flex items-start space-x-2 cursor-pointer group">
              <div className="relative flex items-center mt-0.5">
                <input className="peer hidden" type="checkbox" checked={termsAccepted} onChange={(e) => setTermsAccepted(e.target.checked)} />
                <div className="w-5 h-5 border-2 border-primary/30 rounded flex items-center justify-center peer-checked:bg-primary peer-checked:border-primary transition-all">
                  <span className="material-icons text-white text-xs scale-0 peer-checked:scale-100 transition-transform">check</span>
                </div>
              </div>
              <span className="text-xs text-primary/70 dark:text-primary/60 group-hover:text-primary transition-colors">
                {t.termsAgree} <a href="#" className="underline font-semibold">{translations[language].login.terms}</a> & <a href="#" className="underline font-semibold">{t.privacy}</a>
              </span>
            </label>
          </div>

          <button onClick={handleSignupClick} className="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3.5 rounded-lg shadow-lg shadow-primary/20 active:scale-[0.98] transition-all flex items-center justify-center space-x-2 mt-4">
            <span>{t.submit}</span>
            <span className="material-icons text-lg">how_to_reg</span>
          </button>
        </div>

        <div className="mt-8 text-center">
          <p className="text-sm text-primary/80 dark:text-primary/70">
            {t.hasAccount} <button onClick={() => navigateTo('login')} className="font-bold text-primary hover:underline">{t.loginLink}</button>
          </p>
        </div>
      </div>
    </div>
  );
};

export default Signup;
