import React from 'react';
import { ArrowRight } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';

interface AccountFormProps {
  formData: any;
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  errors: Record<string, string>;
  isSubmitting: boolean;
  handleGoogleSignup: () => void;
  nextStep: () => void;
  navigate: (path: string) => void;
}

export const AccountForm: React.FC<AccountFormProps> = ({
  formData,
  handleChange,
  errors,
  isSubmitting,
  handleGoogleSignup,
  nextStep,
  navigate
}) => {
  const { currentUser } = useAuth();
  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-right-8">
      <div className="text-center mb-8">
        <h2 className="text-3xl font-black text-slate-900 dark:text-white">Vos informations</h2>
        <p className="text-slate-500 mt-2 font-medium">Créez votre compte administrateur</p>
      </div>

      {!currentUser && (
        <div className="mb-8 p-1">
          <button
            type="button"
            onClick={handleGoogleSignup}
            disabled={isSubmitting}
            className="w-full flex justify-center items-center gap-3 py-4 px-4 border-2 border-slate-100 dark:border-slate-800 rounded-2xl text-lg font-black text-slate-900 dark:text-white bg-white dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all active:scale-[0.98] disabled:opacity-70 group"
          >
            <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" alt="Google" className="w-6 h-6" />
            <span>S'inscrire avec Google</span>
          </button>
          <div className="relative my-8">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-slate-100 dark:border-slate-800"></div>
            </div>
            <div className="relative flex justify-center text-sm uppercase">
              <span className="bg-white dark:bg-slate-900 px-4 text-[10px] font-black text-slate-400 tracking-widest leading-none">Ou par email</span>
            </div>
          </div>
        </div>
      )}

      <div className="grid md:grid-cols-2 gap-6">
        <div>
          <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Prénom <span className="text-red-500">*</span></label>
          <input name="firstName" value={formData.firstName} onChange={handleChange} className="w-full bg-slate-50 dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 rounded-2xl px-4 py-3 focus:outline-none focus:border-blue-500" />
          {errors.firstName && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.firstName}</p>}
        </div>
        <div>
          <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Nom <span className="text-red-500">*</span></label>
          <input name="lastName" value={formData.lastName} onChange={handleChange} className="w-full bg-slate-50 dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 rounded-2xl px-4 py-3 focus:outline-none focus:border-blue-500" />
          {errors.lastName && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.lastName}</p>}
        </div>
      </div>
      <div className="grid md:grid-cols-2 gap-6">
        <div>
          <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Adresse Email <span className="text-red-500">*</span></label>
          <input name="email" type="email" value={formData.email} onChange={handleChange} className="w-full bg-slate-50 dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 rounded-2xl px-4 py-3 focus:outline-none focus:border-blue-500" />
          {errors.email && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.email}</p>}
        </div>
        <div>
          <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Téléphone</label>
          <input name="phone" value={formData.phone} onChange={handleChange} className="w-full bg-slate-50 dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 rounded-2xl px-4 py-3 focus:outline-none focus:border-blue-500" />
        </div>
      </div>

      <div className="grid md:grid-cols-2 gap-6">
        <div>
          <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Mot de passe <span className="text-red-500">*</span></label>
          <input name="password" type="password" value={formData.password} onChange={handleChange} className="w-full bg-slate-50 dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 rounded-2xl px-4 py-3 focus:outline-none focus:border-blue-500" />
          {errors.password && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.password}</p>}
        </div>
        <div>
          <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Confirmer mot de passe <span className="text-red-500">*</span></label>
          <input name="confirmPassword" type="password" value={formData.confirmPassword} onChange={handleChange} className="w-full bg-slate-50 dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 rounded-2xl px-4 py-3 focus:outline-none focus:border-blue-500" />
          {errors.confirmPassword && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.confirmPassword}</p>}
        </div>
      </div>

      <div className="pt-6 border-t border-slate-100 dark:border-slate-800 flex justify-between">
        <button onClick={() => navigate('/tarifs')} className="px-6 py-3 font-bold text-slate-500 hover:text-slate-800 dark:hover:text-white transition-colors">Annuler</button>
        <button onClick={nextStep} className="px-8 py-3 bg-blue-600 text-white rounded-xl font-bold flex items-center gap-2 hover:bg-blue-700 transition-colors">
          Suivant <ArrowRight className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
};