import React from 'react';
import { ArrowLeft, ArrowRight } from 'lucide-react';

interface CompanyFormProps {
  formData: any;
  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
  errors: Record<string, string>;
  prevStep: () => void;
  nextStep: () => void;
}

export const CompanyForm: React.FC<CompanyFormProps> = ({
  formData,
  handleChange,
  errors,
  prevStep,
  nextStep
}) => {
  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">Détails de l'entreprise</h2>
        <p className="text-slate-500 mt-2 font-medium">Où faut-il facturer ?</p>
      </div>

      <div>
        <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Nom de l'entreprise <span className="text-red-500">*</span></label>
        <input name="companyName" value={formData.companyName} 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.companyName && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.companyName}</p>}
      </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 <span className="text-red-500">*</span></label>
          <input name="addressLine1" value={formData.addressLine1} 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.addressLine1 && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.addressLine1}</p>}
        </div>
        <div>
          <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Complément d'adresse</label>
          <input name="addressLine2" value={formData.addressLine2} 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 md:grid-cols-3">
        <div className="md:col-span-2">
          <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Ville <span className="text-red-500">*</span></label>
          <input name="city" value={formData.city} 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.city && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.city}</p>}
        </div>
        <div>
          <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Code Postal</label>
          <input name="postcode" value={formData.postcode} 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>
        <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Pays <span className="text-red-500">*</span></label>
        <input name="country" value={formData.country} 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.country && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.country}</p>}
      </div>

      <div className="pt-4 border-t border-slate-100 dark:border-slate-800">
        <label className="flex items-center gap-3 cursor-pointer mb-6">
          <input type="checkbox" name="billingSameAsCompany" checked={formData.billingSameAsCompany} onChange={handleChange} className="w-5 h-5 accent-blue-600 rounded bg-slate-100" />
          <span className="font-medium text-slate-700 dark:text-slate-300">Mon adresse de facturation est identique</span>
        </label>

        {!formData.billingSameAsCompany && (
            <div className="space-y-6 animate-in fade-in slide-in-from-top-4 p-6 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-800">
              <h4 className="font-bold text-slate-900 dark:text-white mb-2">Adresse de facturation</h4>
              <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 <span className="text-red-500">*</span></label>
                  <input name="billingAddressLine1" value={formData.billingAddressLine1} onChange={handleChange} className="w-full bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 rounded-2xl px-4 py-3 focus:outline-none focus:border-blue-500" />
                  {errors.billingAddressLine1 && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.billingAddressLine1}</p>}
                </div>
                <div>
                  <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Ville <span className="text-red-500">*</span></label>
                  <input name="billingCity" value={formData.billingCity} onChange={handleChange} className="w-full bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 rounded-2xl px-4 py-3 focus:outline-none focus:border-blue-500" />
                  {errors.billingCity && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.billingCity}</p>}
                </div>
                <div>
                  <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Code Postal</label>
                  <input name="billingPostcode" value={formData.billingPostcode} onChange={handleChange} className="w-full bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 rounded-2xl px-4 py-3 focus:outline-none focus:border-blue-500" />
                </div>
                <div>
                  <label className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-1 block">Pays <span className="text-red-500">*</span></label>
                  <input name="billingCountry" value={formData.billingCountry} onChange={handleChange} className="w-full bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 rounded-2xl px-4 py-3 focus:outline-none focus:border-blue-500" />
                  {errors.billingCountry && <p className="text-[10px] text-red-500 font-bold pl-1 italic">{errors.billingCountry}</p>}
                </div>
              </div>
            </div>
        )}
      </div>

      <div className="pt-6 border-t border-slate-100 dark:border-slate-800 flex justify-between">
        <button onClick={prevStep} className="px-6 py-3 font-bold text-slate-500 hover:text-slate-800 dark:hover:text-white transition-colors flex items-center gap-2">
          <ArrowLeft className="w-4 h-4" /> Précédent
        </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>
  );
};