"use client";

import { useState, type ReactNode } from 'react';
import { ClipboardCheck, CalendarClock, Shield, TrendingDown, Play, ArrowRight } from 'lucide-react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import ScrollReveal from './ScrollReveal';
import { type Locale } from '@/config/i18nRoutes';
import { useLocale } from '@/components/blocks/localeContext';
import { MICROCOPY } from '@/components/blocks/microcopy';

// Libellés codés en dur (jamais fournis par WP) → traduits pour ne pas fuiter en EN/ES.
const PROCESS_I18N: Record<Locale, { videoCta: string; stepPrefix: string; tagline: string; videoTitle: string }> = {
  fr: {
    videoCta: 'Voir un chantier en 2 minutes',
    stepPrefix: 'Étape',
    tagline: 'On se déplace, on analyse, on chiffre',
    videoTitle: 'Covalba Cool Roof, un chantier en 2 minutes',
  },
  en: {
    videoCta: 'Watch a project in 2 minutes',
    stepPrefix: 'Step',
    tagline: 'We visit, we assess, we quote',
    videoTitle: 'Covalba Cool Roof, a project in 2 minutes',
  },
  es: {
    videoCta: 'Vea una obra en 2 minutos',
    stepPrefix: 'Paso',
    tagline: 'Nos desplazamos, analizamos y presupuestamos',
    videoTitle: 'Covalba Cool Roof, una obra en 2 minutos',
  },
};

const defaultSteps = [
  {
    num: '01',
    icon: ClipboardCheck,
    title: 'Devis gratuit',
    text: "Un technicien analyse votre toiture et chiffre vos économies.",
  },
  {
    num: '02',
    icon: CalendarClock,
    title: 'Planification sur-mesure',
    text: "Le chantier s'organise autour de vos contraintes. Zéro interruption.",
  },
  {
    num: '03',
    icon: Shield,
    title: 'Application sécurisée depuis le sol',
    text: "Nos machines restent au pied du bâtiment. Seuls des flexibles montent en toiture. Zéro charge sur votre étanchéité, zéro risque d'effondrement. Application en 2 à 5 jours.",
  },
  {
    num: '04',
    icon: TrendingDown,
    title: 'Économies immédiates',
    text: "Vous constatez la différence dès le premier été. Capteurs de mesure en option.",
  },
];

interface ProcessSectionProps {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  /** Surcharges texte (par index) des étapes — icônes/numéros conservés. */
  stepsContent?: { title?: string; text?: string }[];
  reassurance?: string;
  videoEmbedUrl?: string;
}

const ProcessSection = ({
  badge = 'Le process',
  titre,
  intro = "Tout se passe depuis l'extérieur. Vous continuez à travailler normalement. Sans impact sur vos certifications (HACCP, BPF).",
  stepsContent,
  reassurance = "Durée moyenne : 3 jours · Sans arrêt d'activité",
  videoEmbedUrl = 'https://www.youtube.com/embed/9HOB5OVH0Ac?autoplay=1',
}: ProcessSectionProps = {}) => {
  const locale = useLocale();
  const t = PROCESS_I18N[locale];
  const [videoOpen, setVideoOpen] = useState(false);
  const steps = stepsContent
    ? defaultSteps.map((step, i) => ({
        ...step,
        title: stepsContent[i]?.title ?? step.title,
        text: stepsContent[i]?.text ?? step.text,
      }))
    : defaultSteps;

  return (
    <section className="py-16 lg:py-32 bg-white">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="flex flex-col lg:flex-row gap-12 lg:gap-20 items-start">
          {/* Left : titre sticky */}
          <div className="lg:w-[40%] lg:sticky lg:top-[120px]">
            <ScrollReveal>
              <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
                {badge}
              </p>
              <h2
                className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05] mb-6"
                style={{ letterSpacing: '-0.03em' }}
              >
                {titre ?? (<>4 étapes. Zéro interruption.<span className="text-foreground/30"> Zéro risque.</span></>)}
              </h2>
              <p className="text-muted-foreground text-base lg:text-lg leading-relaxed mb-8">
                {intro}
              </p>

              {/* Video CTA intégré */}
              <button
                onClick={() => setVideoOpen(true)}
                className="group flex items-center gap-3 text-primary hover:text-primary transition-colors"
              >
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                  <Play className="w-5 h-5" />
                </div>
                <span className="font-semibold text-sm">{t.videoCta}</span>
              </button>
            </ScrollReveal>
          </div>

          {/* Right : timeline */}
          <div className="lg:w-[60%] relative">
            <div className="absolute left-5 lg:left-6 top-4 bottom-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent" />

            <div className="flex flex-col gap-0">
              {steps.map((s, i) => (
                <ScrollReveal key={s.num}>
                  <div className="relative flex items-start gap-5 lg:gap-7 py-8 lg:py-10 group">
                    <div className="relative z-10 flex-shrink-0 w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center group-hover:bg-primary/15 transition-colors duration-500">
                      <s.icon className="w-4 h-4 lg:w-5 lg:h-5 text-primary" />
                    </div>
                    <div className="pt-1">
                      <span className="text-xs font-bold text-primary/50 uppercase tracking-widest mb-2 block font-body">
                        {t.stepPrefix} {s.num}
                      </span>
                      <h3 className="text-xl lg:text-2xl text-foreground mb-2">
                        {s.title}
                      </h3>
                      <p className="text-muted-foreground text-sm lg:text-base leading-relaxed max-w-md">
                        {s.text}
                      </p>
                    </div>
                  </div>
                  {i < steps.length - 1 && <div className="ml-5 lg:ml-6 h-px bg-border" />}
                </ScrollReveal>
              ))}
            </div>

            <ScrollReveal>
              <div className="ml-16 lg:ml-20 mt-4">
                <p className="text-muted-foreground/50 text-xs font-medium">
                  {reassurance}
                </p>
              </div>
            </ScrollReveal>
          </div>
        </div>

        <ScrollReveal>
          <div className="flex flex-col items-center mt-16 pt-12 border-t border-border">
            <a
              href="#contact"
              className="group inline-flex items-center gap-2 cta-gradient text-white font-semibold pl-6 pr-2 py-2 rounded-full"
            >
              <span className="text-sm">{MICROCOPY[locale].demanderDevis}</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-3.5 h-3.5" />
              </span>
            </a>
            <p className="text-xs text-muted-foreground mt-3">{t.tagline}</p>
          </div>
        </ScrollReveal>
      </div>

      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>
        <DialogContent className="max-w-4xl p-0 bg-black border-none overflow-hidden">
          <div className="aspect-video">
            <iframe
              src={videoEmbedUrl}
              className="w-full h-full"
              allow="autoplay; encrypted-media"
              allowFullScreen
              title={t.videoTitle}
            />
          </div>
        </DialogContent>
      </Dialog>
    </section>
  );
};

export default ProcessSection;