import React from 'react';
import { motion } from 'motion/react';
import {
  CheckCircle2,
  ArrowRight,
  Mail,
  User,
  MessageCircle,
  Building2,
  Phone,
  Calendar,
  Sparkles,
  ShieldCheck
} from 'lucide-react';
import { useState, useEffect } from 'react';
import axios from 'axios';
import { useSearchParams } from 'react-router-dom';
import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';

const DemoPage = () => {
  const [searchParams] = useSearchParams();
  const initialPlan = searchParams.get('plan') || '';

  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    companyName: '',
    phone: '',
    plan: initialPlan,
    message: ''
  });
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const { executeRecaptcha } = useGoogleReCaptcha();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    if (errors[name]) {
      setErrors(prev => {
        const next = { ...prev };
        delete next[name];
        return next;
      });
    }
  };

  const validate = () => {
    const newErrors: Record<string, string> = {};
    if (!formData.firstName.trim()) newErrors.firstName = "Le prénom est requis";
    if (!formData.lastName.trim()) newErrors.lastName = "Le nom est requis";
    if (!formData.companyName.trim()) newErrors.companyName = "Le nom du l'entreprise est requis";
    if (!formData.plan) newErrors.plan = "Veuillez sélectionner un pack";

    if (!formData.email.trim()) {
      newErrors.email = "L'email est requis";
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = "Format d'email invalide";
    }

    if (!formData.phone.trim()) {
      newErrors.phone = "Le numéro de téléphone est requis";
    } else if (!/^(?:(?:\+|00)33|0)\s*[1-9](?:[\s.-]*\d{2}){4}$/.test(formData.phone) && !/^\d{10}$/.test(formData.phone)) {
      newErrors.phone = "Format de téléphone invalide";
    }

    if (!formData.message.trim()) {
      newErrors.message = "Le message est requis";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validate()) return;
    setIsSubmitting(true);

    try {
      let token = "dummy_token";

      if (process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY) {
        if (!executeRecaptcha) {
          setErrors({ submit: "Le système anti-spam n'est pas encore prêt. Veuillez patienter." });
          setIsSubmitting(false);
          return;
        }
        token = await executeRecaptcha('demo_request');
      }

      const recaptchaRes = await axios.post('/api/recaptcha', { token });
      if (!recaptchaRes.data.success) {
        setErrors({ submit: "La vérification anti-spam a échoué. Êtes-vous un robot ?" });
        setIsSubmitting(false);
        return;
      }

      await axios.post('/api/db', {
        collection: 'demo_requests',
        data: {
          plan: formData.plan,
          firstName: formData.firstName,
          lastName: formData.lastName,
          companyName: formData.companyName,
          phone: formData.phone,
          email: formData.email,
          message: formData.message,
          status: 'pending',
          createdAt: new Date().toISOString()
        }
      });

      setIsSubmitting(false);
      setIsSubmitted(true);
    } catch (error) {
      console.error('Error:', error);
      setErrors({ submit: "Une erreur est survenue. Veuillez réessayer." });
      setIsSubmitting(false);
    }
  };

  return (
    <div className="pt-24 min-h-screen bg-slate-50 dark:bg-slate-950 transition-colors duration-500 pb-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-20 items-center py-12 lg:py-20">
          {/* Left Content */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            className="space-y-8"
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full text-xs font-black uppercase tracking-widest">
              <Sparkles className="w-4 h-4" />
              14 Jours d'Essai Gratuit
            </div>
            <h1 className="text-5xl lg:text-7xl font-black text-slate-900 dark:text-white tracking-tighter leading-[0.9]">
              Commencez votre essai <span className="text-blue-600">gratuit</span>.
            </h1>
            <p className="text-xl text-slate-500 dark:text-slate-400 font-medium italic leading-relaxed max-w-xl">
              Testez Agendivo gratuitement pendant 14 jours. Sans engagement, sans carte bancaire requise. Découvrez comment nous pouvons automatiser 60% de votre gestion administrative.
            </p>

            <div className="space-y-6 pt-4">
              {[
                { icon: Calendar, title: "Analyse de vos besoins", desc: "Nous adaptons la démo à votre secteur d'activité." },
                { icon: Sparkles, title: "Tour complet des fonctionnalités", desc: "Du CRM à l'agenda intelligent, sans zone d'ombre." },
                { icon: ShieldCheck, title: "Sécurité & Intégration", desc: "Comment nous protégeons vos données critiques." }
              ].map((item, i) => (
                <div key={i} className="flex gap-4 group">
                  <div className="w-12 h-12 shrink-0 rounded-2xl bg-white dark:bg-slate-900 shadow-xl shadow-slate-200/50 dark:shadow-none border border-slate-100 dark:border-slate-800 flex items-center justify-center group-hover:scale-110 transition-transform">
                    <item.icon className="w-6 h-6 text-blue-600" />
                  </div>
                  <div>
                    <h4 className="font-black text-slate-900 dark:text-white">{item.title}</h4>
                    <p className="text-sm text-slate-500 dark:text-slate-400 font-medium italic">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </motion.div>

          {/* Right Form */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={{ opacity: 1, x: 0 }}
            className="relative"
          >
            <div className="absolute -inset-4 bg-gradient-to-tr from-blue-600 to-indigo-600 rounded-[3rem] blur-2xl opacity-10" />

            {isSubmitted ? (
              <div className="relative bg-white dark:bg-slate-900 p-12 lg:p-16 rounded-[4rem] border border-slate-100 dark:border-slate-800 shadow-2xl text-center">
                <div className="w-24 h-24 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mx-auto mb-8">
                  <CheckCircle2 className="text-green-600 dark:text-green-400 w-12 h-12" />
                </div>
                <h3 className="text-3xl font-black text-slate-900 dark:text-white mb-4 tracking-tight">Demande Envoyée !</h3>
                <p className="text-lg text-slate-500 dark:text-slate-400 font-medium italic leading-relaxed mb-8">
                  Merci pour votre demande. Notre équipe va activer votre essai gratuit de 14 jours très prochainement.
                  <br /><br />
                  <span className="text-blue-600 dark:text-blue-400 font-bold">Vous recevrez un email avec vos accès dans quelques instants.</span>
                </p>
                <button
                  onClick={() => window.history.back()}
                  className="px-8 py-4 bg-blue-600 text-white rounded-2xl font-bold hover:scale-105 transition-transform shadow-xl shadow-blue-500/20"
                >
                  Retourner
                </button>
              </div>
            ) : (
              <div className="relative bg-white dark:bg-slate-900 p-8 lg:p-10 rounded-[3rem] border border-slate-100 dark:border-slate-800 shadow-2xl">
                <div className="mb-10">
                  <h3 className="text-2xl font-black text-slate-900 dark:text-white mb-2 tracking-tight">Essai Gratuit 14 Jours</h3>
                  <p className="text-slate-500 dark:text-slate-400 font-medium text-sm italic">
                    Remplissez le formulaire pour activer votre période d'essai. Sans engagement.
                  </p>
                </div>

                <form onSubmit={handleSubmit} className="space-y-5">
                  <div className="grid md:grid-cols-2 gap-5">
                    <div className="space-y-1.5">
                      <label className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] pl-1">Prénom</label>
                      <input
                        name="firstName"
                        value={formData.firstName}
                        onChange={handleChange}
                        className={`w-full bg-slate-50 dark:bg-slate-800 border-2 rounded-2xl px-5 py-3.5 focus:outline-none transition-all ${errors.firstName ? 'border-red-300' : 'border-slate-100 dark:border-slate-700 focus:border-blue-500'}`}
                        placeholder="Marc"
                      />
                    </div>
                    <div className="space-y-1.5">
                      <label className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] pl-1">Nom</label>
                      <input
                        name="lastName"
                        value={formData.lastName}
                        onChange={handleChange}
                        className={`w-full bg-slate-50 dark:bg-slate-800 border-2 rounded-2xl px-5 py-3.5 focus:outline-none transition-all ${errors.lastName ? 'border-red-300' : 'border-slate-100 dark:border-slate-700 focus:border-blue-500'}`}
                        placeholder="Dupont"
                      />
                    </div>
                  </div>

                  <div className="grid md:grid-cols-2 gap-5">
                    <div className="space-y-1.5">
                      <label className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] pl-1">Entreprise</label>
                      <div className="relative">
                        <Building2 className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
                        <input
                          name="companyName"
                          value={formData.companyName}
                          onChange={handleChange}
                          className={`w-full bg-slate-50 dark:bg-slate-800 border-2 rounded-2xl pl-14 pr-5 py-3.5 focus:outline-none transition-all ${errors.companyName ? 'border-red-300' : 'border-slate-100 dark:border-slate-700 focus:border-blue-500'}`}
                          placeholder="Nom de votre société"
                        />
                      </div>
                    </div>

                    <div className="space-y-1.5">
                      <label className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] pl-1">Pack Demandé</label>
                      <div className="relative">
                        <Sparkles className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
                        <select
                          name="plan"
                          value={formData.plan}
                          onChange={handleChange}
                          className={`w-full bg-slate-50 dark:bg-slate-800 border-2 rounded-2xl pl-14 pr-5 py-3.5 focus:outline-none transition-all appearance-none ${errors.plan ? 'border-red-300' : 'border-slate-100 dark:border-slate-700 focus:border-blue-500'}`}
                        >
                          <option value="" disabled>Sélectionnez un pack</option>
                          <option value="Starter">Starter (49€/mois)</option>
                          <option value="Professionnel">Professionnel (99€/mois)</option>
                          <option value="Entreprise">Entreprise (249€/mois)</option>
                          <option value="Je ne sais pas encore">Je ne sais pas encore</option>
                        </select>
                      </div>
                    </div>
                  </div>

                  <div className="grid md:grid-cols-2 gap-5">
                    <div className="space-y-1.5">
                      <label className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] pl-1">Email Prof.</label>
                      <div className="relative">
                        <Mail className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
                        <input
                          name="email"
                          value={formData.email}
                          onChange={handleChange}
                          className={`w-full bg-slate-50 dark:bg-slate-800 border-2 rounded-2xl pl-14 pr-5 py-3.5 focus:outline-none transition-all ${errors.email ? 'border-red-300' : 'border-slate-100 dark:border-slate-700 focus:border-blue-500'}`}
                          placeholder="marc@cie.com"
                        />
                      </div>
                    </div>
                    <div className="space-y-1.5">
                      <label className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] pl-1">Téléphone</label>
                      <div className="relative">
                        <Phone className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
                        <input
                          name="phone"
                          value={formData.phone}
                          onChange={handleChange}
                          className={`w-full bg-slate-50 dark:bg-slate-800 border-2 rounded-2xl pl-14 pr-5 py-3.5 focus:outline-none transition-all ${errors.phone ? 'border-red-300' : 'border-slate-100 dark:border-slate-700 focus:border-blue-500'}`}
                          placeholder="06 12 34 56 78"
                        />
                      </div>
                    </div>
                  </div>

                  <div className="space-y-1.5">
                    <label className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] pl-1">Message</label>
                    <div className="relative">
                      <MessageCircle className="absolute left-5 top-4 w-5 h-5 text-slate-300" />
                      <textarea
                        name="message"
                        value={formData.message}
                        onChange={handleChange}
                        rows={3}
                        className={`w-full bg-slate-50 dark:bg-slate-800 border-2 rounded-2xl pl-14 pr-5 py-3.5 focus:outline-none transition-all resize-none ${errors.message ? 'border-red-300' : 'border-slate-100 dark:border-slate-700 focus:border-blue-500'}`}
                        placeholder="Quels sont vos objectifs ?"
                      />
                    </div>
                  </div>

                  {errors.submit && <p className="text-xs text-red-500 font-bold text-center italic">{errors.submit}</p>}

                  <button
                    disabled={isSubmitting}
                    className="w-full py-4.5 bg-blue-600 text-white rounded-[1.5rem] font-black text-lg hover:bg-blue-700 transition-all flex items-center justify-center gap-3 group disabled:opacity-50 shadow-xl shadow-blue-500/20 active:scale-95"
                  >
                    {isSubmitting ? "Envoi en cours..." : "Commencer mon essai gratuit"}
                  </button>
                </form>

                <p className="mt-8 text-[10px] text-center text-slate-400 font-medium italic">
                  En validant ce formulaire, vous acceptez d'être recontacté par Agendivo. Vos données sont protégées.
                </p>
              </div>
            )}
          </motion.div>
        </div>
      </div>
    </div>
  );
};

export default DemoPage;