"use client";

import { useState } from 'react';
import { Check, ArrowRight } from 'lucide-react';
import ScrollReveal from './ScrollReveal';

type PaysCode = 'FR' | 'BE' | 'CH';

const secteurs = [
  'Industrie',
  'Pharma',
  'Aéronautique / Défense',
  'Agroalimentaire',
  'Tertiaire',
  'Collectivités',
  'Autre',
];

const typeBatiments = ['Climatisé', 'Non climatisé'];

const formatNumber = (n: number): string =>
  new Intl.NumberFormat('fr-FR').format(n);

interface MidPageFormProps {
  /** La Prime CEE est franco-française : on masque sa mention hors France (CH, BE…). */
  pays?: PaysCode;
}

const MidPageForm = ({ pays = 'FR' }: MidPageFormProps) => {
  const reassurance = [
    'Réponse détaillée sous 24h',
    ...(pays === 'FR' ? ['Calcul des primes CEE si éligible'] : []),
    'Sans engagement',
  ];
  const [form, setForm] = useState({
    email: '',
    surface: '',
    typeBatiment: '',
    secteur: '',
  });
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

  const surfaceNum = parseFloat(form.surface) || 0;
  const estimationMin = surfaceNum * 18;
  const estimationMax = surfaceNum * 25;

  const inputClasses =
    'w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-primary transition-colors';

  const selectClasses =
    'w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-primary appearance-none transition-colors';

  return (
    <section className="relative py-20 lg:py-28 bg-[#192A3A] text-white overflow-hidden">
      {/* Blobs décoratifs teal — cohérent avec WinterObjectionSection */}
      <img
        src="/images/applicateur-blobs.svg"
        alt=""
        aria-hidden="true"
        className="absolute -right-[15%] -top-[40%] w-[60%] opacity-20 pointer-events-none select-none"
        style={{
          maskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
          WebkitMaskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
        }}
      />
      <img
        src="/images/applicateur-blobs.svg"
        alt=""
        aria-hidden="true"
        className="absolute -left-[20%] -bottom-[40%] w-[50%] opacity-15 pointer-events-none select-none rotate-180"
        style={{
          maskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
          WebkitMaskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
        }}
      />

      <div className="relative container mx-auto px-4 lg:px-8">
        {/* Section header */}
        <ScrollReveal>
          <div className="text-center mb-12">
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
              Estimation
            </p>
            <h2
              className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-white !leading-[1.05] mb-3"
              style={{ letterSpacing: '-0.03em' }}
            >
              L'été prochain, votre toit
              <span className="text-white/30"> vous rapporte.</span>
            </h2>
          </div>
        </ScrollReveal>

        <ScrollReveal>
          <div className="grid lg:grid-cols-2 gap-12 max-w-4xl mx-auto">
            {/* Left : Form */}
            <div className="bg-navy-light rounded-xl p-8">
              {!submitted ? (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <input
                    type="email"
                    placeholder="Email professionnel"
                    required
                    value={form.email}
                    onChange={(e) => setForm({ ...form, email: e.target.value })}
                    className={inputClasses}
                  />

                  <input
                    type="number"
                    placeholder="Surface approximative en m²"
                    required
                    min="1"
                    value={form.surface}
                    onChange={(e) => setForm({ ...form, surface: e.target.value })}
                    className={inputClasses}
                  />

                  <select
                    value={form.typeBatiment}
                    onChange={(e) => setForm({ ...form, typeBatiment: e.target.value })}
                    required
                    className={selectClasses}
                  >
                    <option value="" disabled className="text-foreground bg-card">
                      Type de bâtiment
                    </option>
                    {typeBatiments.map((t) => (
                      <option key={t} value={t} className="text-foreground bg-card">
                        {t}
                      </option>
                    ))}
                  </select>

                  <select
                    value={form.secteur}
                    onChange={(e) => setForm({ ...form, secteur: e.target.value })}
                    required
                    className={selectClasses}
                  >
                    <option value="" disabled className="text-foreground bg-card">
                      Secteur d'activité
                    </option>
                    {secteurs.map((s) => (
                      <option key={s} value={s} className="text-foreground bg-card">
                        {s}
                      </option>
                    ))}
                  </select>

                  <button
                    type="submit"
                    className="group w-full cta-gradient text-white font-semibold py-3.5 rounded-full transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] hover:shadow-[0_8px_40px_rgba(153,20,55,0.35)] active:scale-[0.98] flex items-center justify-center gap-3"
                  >
                    <span>Estimer mon investissement</span>
                    <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
                      <ArrowRight className="w-4 h-4" />
                    </span>
                  </button>

                  <p className="text-sm text-white/40 text-center">
                    Réponse sous 24h · Sans engagement
                  </p>
                </form>
              ) : (
                /* Result card */
                <div className="flex flex-col items-center text-center py-8">
                  <div className="w-14 h-14 rounded-full bg-primary/20 flex items-center justify-center mb-6">
                    <Check className="w-7 h-7 text-primary" />
                  </div>
                  <p className="text-white/70 text-sm mb-2">Budget indicatif pour</p>
                  <p className="text-3xl lg:text-4xl font-bold text-white mb-1">
                    {formatNumber(surfaceNum)} m²
                  </p>
                  <p className="text-white/60 text-sm mb-6">
                    {form.typeBatiment} · {form.secteur}
                  </p>

                  <div className="bg-white/[0.06] border border-white/10 rounded-xl p-6 w-full">
                    <p className="text-white/60 text-sm mb-2">Investissement estimé entre</p>
                    <p className="text-2xl lg:text-3xl font-bold text-primary">
                      {formatNumber(estimationMin)}€ <span className="text-white/40 text-lg font-normal">et</span> {formatNumber(estimationMax)}€
                    </p>
                  </div>

                  <p className="text-white/50 text-sm mt-6">
                    Un conseiller vous contactera sous 24h avec un chiffrage détaillé.
                  </p>

                  <button
                    onClick={() => setSubmitted(false)}
                    className="mt-4 text-primary text-sm font-semibold hover:underline"
                  >
                    Modifier ma demande
                  </button>
                </div>
              )}
            </div>

            {/* Right : Reassurance */}
            <div className="flex flex-col justify-center space-y-8">
              <div className="space-y-5">
                {reassurance.map((item) => (
                  <div key={item} className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                      <Check className="w-4 h-4 text-primary" />
                    </div>
                    <p className="text-white/80 text-base">{item}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default MidPageForm;