"use client";

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

const WATCH_PROJECT_VIDEO: Record<string, string> = {
  fr: 'Voir un chantier en 2 minutes',
  en: 'Watch a project in 2 minutes',
  es: 'Vea una obra en 2 minutos',
};

export type DistributionMethodStep = {
  num: string;
  icon: LucideIcon;
  title: string;
  text: string;
};

export const defaultSteps: DistributionMethodStep[] = [
  {
    num: '01',
    icon: ClipboardCheck,
    title: 'Diagnostic du magasin',
    text: 'Un technicien analyse la toiture, les accès, la surface et l’éligibilité CEE.',
  },
  {
    num: '02',
    icon: CalendarClock,
    title: 'Planification autour de vos horaires',
    text: "Le chantier s'organise sans fermeture du point de vente.",
  },
  {
    num: '03',
    icon: Shield,
    title: 'Application sécurisée depuis le sol',
    text: 'Les machines restent au pied du bâtiment. Seuls les flexibles montent en toiture.',
  },
  {
    num: '04',
    icon: TrendingDown,
    title: 'Confort mesurable dès l’été',
    text: 'La toiture transmet moins de chaleur et la climatisation est moins sollicitée.',
  },
];

const defaultTitre = (
  <>
    4 étapes.
    <br />
    Magasin ouvert.
    <span className="text-foreground/30"> Zéro interruption.</span>
  </>
);

type DistributionMethodProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  steps?: DistributionMethodStep[];
  duration?: string;
  bottomNote?: string;
  videoEmbedUrl?: string;
};

const DistributionMethod = ({
  badge = 'Le process',
  titre = defaultTitre,
  intro = "Tout se passe depuis l'extérieur. Votre point de vente continue d'accueillir ses clients, sans charge lourde sur la toiture.",
  steps = defaultSteps,
  duration = "Durée moyenne : 2 à 5 jours · Sans arrêt d'activité",
  bottomNote = 'On se déplace, on analyse, on chiffre',
  videoEmbedUrl = 'https://www.youtube.com/embed/9HOB5OVH0Ac?autoplay=1',
}: DistributionMethodProps = {}) => {
  const locale = useLocale();
  const [videoOpen, setVideoOpen] = useState(false);

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

              <button
                onClick={() => setVideoOpen(true)}
                className="group flex items-center gap-3 text-primary transition-colors hover:text-primary"
              >
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 transition-colors group-hover:bg-primary/20">
                  <Play className="h-5 w-5" />
                </div>
                <span className="font-body text-sm font-semibold">{WATCH_PROJECT_VIDEO[locale]}</span>
              </button>
            </ScrollReveal>
          </div>

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

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

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

        <ScrollReveal>
          <div className="mt-16 flex flex-col items-center border-t border-border pt-12">
            <a
              href="/diagnostic"
              className="group inline-flex items-center gap-2 rounded-full cta-gradient py-2 pl-6 pr-2 font-semibold text-white"
            >
              <span className="text-sm">Demander un devis</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-3.5 w-3.5" />
              </span>
            </a>
            <p className="mt-3 font-body text-xs text-muted-foreground">{bottomNote}</p>
          </div>
        </ScrollReveal>
      </div>

      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>
        <DialogContent className="max-w-4xl overflow-hidden border-none bg-black p-0">
          <div className="aspect-video">
            <iframe
              src={videoEmbedUrl}
              className="h-full w-full"
              allow="autoplay; encrypted-media"
              allowFullScreen
              title="Covalba Cool Roof, un chantier en 2 minutes"
            />
          </div>
        </DialogContent>
      </Dialog>
    </section>
  );
};

export default DistributionMethod;