"use client";

// Widget hero « Estimez votre budget » = déclencheur d'une **demande de devis**.
// Au clic, ouvre un modal PLEIN ÉCRAN contenant le formulaire Diagnostic
// multi-étapes (le vrai « demander un devis »), soumis à HubSpot via l'API publique.
// Affiché sur mobile ET desktop (le StickyMobileCTA reste un rappel au scroll).

import { useState } from "react";
import dynamic from "next/dynamic";
import { ArrowRight, ChevronDown } from "lucide-react";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { cn } from "@/lib/utils";

// Le formulaire Diagnostic (lourd : multi-étapes + libphonenumber) n'est chargé
// qu'à l'ouverture du modal → le hero reste léger (pas de bundle eager).
const DiagnosticForm = dynamic(
  () => import("@/components/diagnostic/DiagnosticForm").then((m) => m.DiagnosticForm),
  {
    ssr: false,
    loading: () => (
      <div className="py-12 text-center font-body text-foreground/50">Chargement du formulaire…</div>
    ),
  },
);

const DEVIS_PORTAL_ID = "5524202";
// Formulaire HubSpot « demande de devis » (FR). Pas de variante EN (contact seulement).
const DEVIS_FORM_GUID_FR = "1c93aed6-b986-4c13-901b-45ddc5199397";

const FauxField = ({ label, chevron = false }: { label: string; chevron?: boolean }) => (
  <div className="flex items-center justify-between rounded-xl bg-white/[0.07] border border-white/[0.12] px-4 py-3 text-sm font-body text-white/45">
    <span>{label}</span>
    {chevron && <ChevronDown className="h-4 w-4 text-white/50" />}
  </div>
);

type Props = {
  /** GUID HubSpot du formulaire devis (défaut : FR). */
  formGuid?: string;
  portalId?: string;
  /** Classe sur le déclencheur (positionnement / animation). */
  className?: string;
  title?: string;
  subtitle?: string;
  ctaLabel?: string;
  modalTitle?: string;
  modalIntro?: string;
};

export const BudgetQuoteModal = ({
  formGuid = DEVIS_FORM_GUID_FR,
  portalId = DEVIS_PORTAL_ID,
  className,
  title = "Estimez votre budget",
  subtitle = "Réponse personnalisée sous 24h",
  ctaLabel = "Estimer mon budget",
  modalTitle = "Demandez votre devis",
  modalIntro = "Quelques informations sur votre toiture et votre projet pour un chiffrage adapté.",
}: Props) => {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      {/* Déclencheur — affiché sur mobile et desktop. */}
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-haspopup="dialog"
        className={cn("group block w-full text-left", className)}
      >
        <div className="rounded-[1.5rem] bg-white/[0.04] border border-white/[0.08] p-1.5 backdrop-blur-sm transition-transform duration-300 group-hover:-translate-y-0.5">
          <div className="rounded-[calc(1.5rem-6px)] bg-[#0b1a2b]/80 backdrop-blur-xl border border-white/[0.06] shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)] p-5 lg:p-7">
            <h2 className="font-satoshi text-2xl font-bold text-white mb-1 text-center">{title}</h2>
            <p className="text-[12px] text-white/50 mb-4 font-body text-center">{subtitle}</p>
            <div className="space-y-3">
              <FauxField label="Secteur d'activité" chevron />
              <FauxField label="Surface approximative (m²)" />
              <FauxField label="Email professionnel" />
              <span className="cta-gradient mt-1 flex w-full items-center justify-center gap-3 rounded-full py-3 font-semibold text-white transition-shadow group-hover:shadow-[0_8px_40px_rgba(153,20,55,0.35)]">
                <span className="text-[15px]">{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 group-hover:scale-105">
                  <ArrowRight className="h-4 w-4" />
                </span>
              </span>
            </div>
            <div className="mt-3 flex items-center justify-center gap-4 font-body text-[11px] text-white/35">
              <span>Gratuit</span>
              <span className="h-1 w-1 rounded-full bg-white/20" />
              <span>Sans engagement</span>
              <span className="h-1 w-1 rounded-full bg-white/20" />
              <span>Primes CEE incluses</span>
            </div>
          </div>
        </div>
      </button>

      {/* `text-white` : le bouton X de fermeture hérite de currentColor → lisible sur fond sombre. */}
      <DialogContent className="left-0 top-0 h-[100dvh] w-screen max-w-none translate-x-0 translate-y-0 gap-0 overflow-y-auto rounded-none border-0 bg-[#0b1a2b] p-0 text-white">
        <DialogTitle className="sr-only">{modalTitle}</DialogTitle>
        <div className="container mx-auto max-w-3xl px-4 py-12 lg:py-16">
          <div className="mb-8 text-center">
            <h2
              className="font-satoshi text-3xl font-black text-white lg:text-4xl"
              style={{ letterSpacing: "-0.03em" }}
            >
              {modalTitle}
            </h2>
            <p className="mt-2 font-body text-white/60">{modalIntro}</p>
          </div>
          <DiagnosticForm hubspotForm={{ portalId, formGuid }} theme="dark" />
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default BudgetQuoteModal;