"use client";

import { useState, type ReactNode } from 'react';
import { ArrowRight, BadgeEuro, CheckCircle2, ShieldCheck } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

export type DistributionCEEZone = { zone: string; regions: string; prime: string };

export const defaultZones: DistributionCEEZone[] = [
  { zone: 'H1', regions: 'Nord et est', prime: '~0,80 à 1,45 €/m²' },
  { zone: 'H2', regions: 'Centre et ouest', prime: '~0,85 à 1,55 €/m²' },
  { zone: 'H3', regions: 'Sud et Méditerranée', prime: '~1,35 à 2,45 €/m²' },
];

const fieldsClass =
  'w-full rounded-xl border border-foreground/10 bg-white px-4 py-3 font-body text-sm text-foreground outline-none transition-all focus:border-teal-vivid/40 focus:ring-2 focus:ring-teal-vivid/15';

const defaultTitre = (
  <>
    Covalba vérifie
    <br />
    <span className="text-foreground/42">votre éligibilité CEE.</span>
  </>
);

const defaultIntro = (
  <>
    La fiche <strong className="font-semibold text-foreground">BAT-EN-112</strong> peut financer
    une partie du chantier pour les bâtiments commerciaux climatisés par pompe à chaleur.
    On vérifie les critères avant devis.
  </>
);

type DistributionCEEProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: ReactNode;
  zones?: DistributionCEEZone[];
  zonesNote?: string;
  retenirNote?: string;
  transition?: string;
  ctaLabel?: string;
};

const DistributionCEE = ({
  badge = 'Prime CEE',
  titre = defaultTitre,
  intro = defaultIntro,
  zones = defaultZones,
  zonesNote = 'La prime dépend surtout de la zone climatique et de la surface traitée.',
  retenirNote = "La prime n'est pas automatique. Covalba confirme la PAC, la surface, la zone et la conformité du revêtement avant de l'intégrer au chiffrage.",
  transition = "Une fois le financement cadré, l'enjeu est d'intervenir sans perturber le magasin.",
  ctaLabel = 'Envoyer à Covalba',
}: DistributionCEEProps = {}) => {
  const [submitted, setSubmitted] = useState(false);

  return (
    <section id="prime-cee-distribution" className="relative overflow-hidden bg-white py-16 lg:py-28">
      <div
        aria-hidden="true"
        className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-foreground/10 to-transparent"
      />
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="mx-auto mb-10 grid max-w-6xl grid-cols-1 items-end gap-7 lg:mb-14 lg:grid-cols-[0.9fr_1.1fr] lg:gap-16">
            <div>
              <div className="mb-5 flex items-center gap-3">
                <span className="h-px w-10 bg-teal-vivid" aria-hidden="true" />
                <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
                  {badge}
                </span>
              </div>
              <h2
                className="font-satoshi font-bold !leading-[1.04] text-foreground"
                style={{ fontSize: 'clamp(1.95rem, 3vw, 2.75rem)', letterSpacing: '-0.03em' }}
              >
                {titre}
              </h2>
            </div>

            <p className="max-w-2xl font-body text-base leading-relaxed text-foreground/68 lg:text-[16px]">
              {intro}
            </p>
          </div>
        </ScrollReveal>

        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-5 lg:grid-cols-[0.82fr_1.18fr] lg:gap-7">
          <ScrollReveal>
            <div className="h-full rounded-2xl bg-cream/70 p-6 ring-1 ring-foreground/[0.06] lg:p-7">
              {!submitted ? (
                <>
                  <div className="mb-6 flex items-center gap-3">
                    <span className="flex h-11 w-11 items-center justify-center rounded-full bg-teal-vivid/12 text-teal-vivid">
                      <BadgeEuro className="h-5 w-5" strokeWidth={1.7} />
                    </span>
                    <div>
                      <h3 className="font-satoshi text-xl font-bold leading-tight text-foreground">
                        Vérifier mon éligibilité
                      </h3>
                      <p className="mt-1 font-body text-sm text-foreground/55">Réponse personnalisée sous 24h</p>
                    </div>
                  </div>

                  <form
                    className="grid gap-3"
                    onSubmit={(event) => {
                      event.preventDefault();
                      setSubmitted(true);
                    }}
                  >
                    <select required className={fieldsClass} defaultValue="">
                      <option value="" disabled>
                        Type de surface
                      </option>
                      <option>Supermarché / hypermarché</option>
                      <option>Centre commercial</option>
                      <option>Grande surface spécialisée</option>
                      <option>Commerce de proximité</option>
                    </select>
                    <select required className={fieldsClass} defaultValue="">
                      <option value="" disabled>
                        Zone climatique
                      </option>
                      <option>H1 - Nord et est</option>
                      <option>H2 - Centre et ouest</option>
                      <option>H3 - Sud et Méditerranée</option>
                      <option>Je ne sais pas</option>
                    </select>
                    <input required min="1" type="number" className={fieldsClass} placeholder="Surface toiture (m²)" />
                    <select required className={fieldsClass} defaultValue="">
                      <option value="" disabled>
                        Pompe à chaleur sur site ?
                      </option>
                      <option>Oui</option>
                      <option>Non</option>
                      <option>À confirmer</option>
                    </select>
                    <input required type="email" className={fieldsClass} placeholder="Email professionnel" />
                    <button className="group mt-1 inline-flex items-center justify-center gap-2 rounded-full bg-teal-vivid py-2.5 pl-6 pr-2 font-semibold text-white">
                      <span className="text-sm">{ctaLabel}</span>
                      <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5">
                        <ArrowRight className="h-3.5 w-3.5" />
                      </span>
                    </button>
                  </form>
                </>
              ) : (
                <div className="flex min-h-[440px] flex-col items-center justify-center text-center">
                  <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-full bg-teal-vivid/12">
                    <ShieldCheck className="h-7 w-7 text-teal-vivid" strokeWidth={1.7} />
                  </div>
                  <h3 className="mb-3 font-satoshi text-2xl font-bold text-foreground">
                    Demande reçue.
                  </h3>
                  <p className="max-w-sm font-body text-sm leading-relaxed text-foreground/62">
                    Covalba vérifiera l'éligibilité BAT-EN-112 et le montant indicatif avant devis.
                  </p>
                  <button
                    onClick={() => setSubmitted(false)}
                    className="mt-6 font-body text-sm font-semibold text-primary hover:underline"
                  >
                    Modifier les informations
                  </button>
                </div>
              )}
            </div>
          </ScrollReveal>

          <ScrollReveal>
            <div className="overflow-hidden rounded-2xl bg-white shadow-[0_24px_60px_-42px_hsl(var(--navy)/0.22)] ring-1 ring-foreground/[0.08]">
              <div className="border-b border-foreground/8 bg-foreground px-6 py-5 text-white">
                <p className="font-body text-[11px] font-bold uppercase tracking-[0.18em] text-teal-vivid">
                  Repère rapide
                </p>
                <p className="mt-2 font-body text-sm leading-relaxed text-white/62">
                  {zonesNote}
                </p>
              </div>
              <div className="grid divide-y divide-foreground/8">
                {zones.map((zone) => (
                  <div key={zone.zone} className="grid grid-cols-[72px_minmax(0,1fr)_auto] items-center gap-4 px-5 py-5">
                    <span className="font-satoshi text-2xl font-bold text-teal-vivid">{zone.zone}</span>
                    <span className="font-body text-sm text-foreground/64">{zone.regions}</span>
                    <span className="text-right font-body text-sm font-semibold text-foreground">{zone.prime}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="mt-5 rounded-2xl bg-foreground p-6 text-white">
              <p className="mb-3 font-body text-[11px] font-bold uppercase tracking-[0.18em] text-teal-vivid">
                À retenir
              </p>
              <p className="font-body text-sm leading-relaxed text-white/68 lg:text-[15px]">
                {retenirNote}
              </p>
            </div>
          </ScrollReveal>
        </div>

        <ScrollReveal>
          <p className="mx-auto mt-8 max-w-2xl text-center font-body text-sm leading-relaxed text-foreground/54">
            {transition}
          </p>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default DistributionCEE;