"use client";

import { useState, type FormEvent } from 'react';

interface NurturingFormData {
  nomPrenom: string;
  email: string;
  entreprise: string;
  fonction: 'dg' | 'directeur_site' | 'responsable_travaux' | 'responsable_maintenance' | 'acheteur' | 'autre';
  typeBatiment: 'logistique' | 'industriel' | 'tertiaire' | 'commercial' | 'autre';
  typeToiture: 'bac_acier' | 'bitume' | 'membrane' | 'beton' | 'inconnu';
  surface: 'moins_2000' | '2000_5000' | '5000_15000' | 'plus_15000';
}

const inputClass =
  'w-full px-4 py-3 rounded-xl border border-foreground/15 bg-white text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm font-body';

const selectClass =
  'w-full px-4 py-3 rounded-xl border border-foreground/15 bg-white text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm font-body appearance-none bg-[url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23666%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27/%3E%3C/svg%3E")] bg-[length:16px] bg-[right_12px_center] bg-no-repeat pr-10';

const NurturingPDFSection = () => {
  const [formData, setFormData] = useState<NurturingFormData>({
    nomPrenom: '',
    email: '',
    entreprise: '',
    fonction: 'dg',
    typeBatiment: 'logistique',
    typeToiture: 'bac_acier',
    surface: 'moins_2000',
  });

  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');

  const handleChange = (field: keyof NurturingFormData, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();

    // Basic email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(formData.email)) {
      setStatus('error');
      return;
    }

    setStatus('submitting');

    // TODO: brancher API (SendGrid / Brevo / Make / n8n)
    setTimeout(() => {
      setStatus('success');
      const a = document.createElement('a');
      a.href = '/documents/covalba-business-case-placeholder.pdf';
      a.download = '';
      a.click();
    }, 800);
  };

  return (
    <section className="bg-foreground/[0.02] py-16 lg:py-28">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left — PDF mockup */}
          <div className="flex justify-center">
            <div className="relative w-full max-w-[320px] aspect-[3/4] bg-white rounded-2xl shadow-xl flex flex-col items-center justify-center p-8 border border-foreground/5">
              {/* Decorative top bar */}
              <div className="absolute top-0 left-0 right-0 h-2 bg-primary rounded-t-2xl" />

              <div className="mt-6 text-center space-y-6">
                <p className="text-xs uppercase tracking-[0.2em] font-semibold text-primary/60 font-body">
                  Covalba
                </p>
                <div className="space-y-2">
                  <h3 className="font-satoshi text-lg font-black text-foreground leading-tight">
                    Business Case
                  </h3>
                  <h3 className="font-satoshi text-lg font-black text-foreground leading-tight">
                    Cool Roof
                  </h3>
                </div>

                {/* Decorative lines */}
                <div className="space-y-2 w-full px-4">
                  <div className="h-[3px] bg-foreground/10 rounded-full w-full" />
                  <div className="h-[3px] bg-foreground/10 rounded-full w-4/5 mx-auto" />
                  <div className="h-[3px] bg-foreground/10 rounded-full w-3/5 mx-auto" />
                </div>

                <div className="space-y-1.5 w-full px-4 pt-4">
                  <div className="h-[2px] bg-foreground/5 rounded-full w-full" />
                  <div className="h-[2px] bg-foreground/5 rounded-full w-full" />
                  <div className="h-[2px] bg-foreground/5 rounded-full w-full" />
                  <div className="h-[2px] bg-foreground/5 rounded-full w-3/4" />
                </div>

                <p className="text-[10px] text-foreground/30 font-body mt-auto">
                  12 pages — ROI, cas clients, calendrier
                </p>
              </div>
            </div>
          </div>

          {/* Right — Form */}
          <div>
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/65 font-body mb-3">
              Pour les decideurs
            </p>
            <h2 className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-foreground !leading-[1.05] mb-4" style={{ letterSpacing: '-0.03em' }}>
              Le dossier qui convainc votre direction — en PDF
            </h2>
            <p className="text-base lg:text-lg text-foreground/75 leading-relaxed font-body mb-8">
              Un dossier de 12 pages a presenter en comite de direction : ROI chiffre, etudes de cas, methodologie projet, garanties.
            </p>

            {status === 'success' ? (
              <div className="bg-green-50 border border-green-200 rounded-xl p-6 text-green-800 font-body text-sm leading-relaxed">
                Telechargement en cours — une copie a egalement ete envoyee a l'adresse email renseignee
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-4">
                <input
                  type="text"
                  placeholder="Nom et prenom"
                  required
                  value={formData.nomPrenom}
                  onChange={(e) => handleChange('nomPrenom', e.target.value)}
                  className={inputClass}
                />
                <input
                  type="email"
                  placeholder="Email professionnel"
                  required
                  value={formData.email}
                  onChange={(e) => handleChange('email', e.target.value)}
                  className={inputClass}
                />
                {status === 'error' && (
                  <p className="text-xs text-red-500 font-body">Veuillez renseigner une adresse email valide.</p>
                )}
                <input
                  type="text"
                  placeholder="Entreprise"
                  required
                  value={formData.entreprise}
                  onChange={(e) => handleChange('entreprise', e.target.value)}
                  className={inputClass}
                />

                <select
                  value={formData.fonction}
                  onChange={(e) => handleChange('fonction', e.target.value)}
                  className={selectClass}
                >
                  <option value="dg">Direction generale</option>
                  <option value="directeur_site">Directeur de site</option>
                  <option value="responsable_travaux">Responsable travaux</option>
                  <option value="responsable_maintenance">Responsable maintenance</option>
                  <option value="acheteur">Acheteur</option>
                  <option value="autre">Autre</option>
                </select>

                <select
                  value={formData.typeBatiment}
                  onChange={(e) => handleChange('typeBatiment', e.target.value)}
                  className={selectClass}
                >
                  <option value="logistique">Entrepot logistique</option>
                  <option value="industriel">Site industriel</option>
                  <option value="tertiaire">Batiment tertiaire</option>
                  <option value="commercial">Centre commercial</option>
                  <option value="autre">Autre</option>
                </select>

                <select
                  value={formData.typeToiture}
                  onChange={(e) => handleChange('typeToiture', e.target.value)}
                  className={selectClass}
                >
                  <option value="bac_acier">Bac acier</option>
                  <option value="bitume">Etancheite bitumineuse</option>
                  <option value="membrane">Membrane synthetique</option>
                  <option value="beton">Beton</option>
                  <option value="inconnu">Je ne sais pas</option>
                </select>

                <select
                  value={formData.surface}
                  onChange={(e) => handleChange('surface', e.target.value)}
                  className={selectClass}
                >
                  <option value="moins_2000">&lt; 2 000 m²</option>
                  <option value="2000_5000">2 000–5 000 m²</option>
                  <option value="5000_15000">5 000–15 000 m²</option>
                  <option value="plus_15000">&gt; 15 000 m²</option>
                </select>

                <button
                  type="submit"
                  disabled={status === 'submitting'}
                  className="cta-gradient text-white font-semibold py-3 rounded-full w-full flex items-center justify-center gap-2 disabled:opacity-60"
                >
                  {status === 'submitting' ? (
                    <>
                      <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
                      </svg>
                      Envoi en cours...
                    </>
                  ) : (
                    'Recevoir le business case (PDF)'
                  )}
                </button>

                <p className="text-xs text-foreground/40 font-body">
                  Vos donnees sont utilisees uniquement pour l'envoi du document et un eventuel contact commercial. Desinscription possible a tout moment.
                </p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export default NurturingPDFSection;