import { Button } from "@xtablo/ui/components/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@xtablo/ui/components/dialog";
import { Input } from "@xtablo/ui/components/input";
import { Label } from "@xtablo/ui/components/label";
import { RadioGroup, RadioGroupItem } from "@xtablo/ui/components/radio-group";
import {
  Briefcase,
  Building2,
  CheckCircle2,
  FolderKanban,
  Plus,
  Sparkles,
  Trash2,
} from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useCreateTablo } from "../hooks/tablos";
import { useCreateEtape } from "../hooks/tasks";
import { OnboardingCelebration } from "./OnboardingCelebration";
import { TabloPointer } from "./TabloPointer";

interface OnboardingModalProps {
  open: boolean;
  onComplete: () => void;
}

type ProfileType = "freelance" | "agency" | null;

const STEP_ICONS = [Sparkles, Briefcase, FolderKanban, Building2, CheckCircle2];

export function OnboardingModal({ open, onComplete }: OnboardingModalProps) {
  const { t } = useTranslation("onboarding");
  const [currentStep, setCurrentStep] = useState(0);
  const [showCelebration, setShowCelebration] = useState(false);
  const [showPointer, setShowPointer] = useState(false);
  const [createdTabloId, setCreatedTabloId] = useState<string | null>(null);

  // Form state
  const [profileType, setProfileType] = useState<ProfileType>(null);
  const [serviceName, setServiceName] = useState("");
  const [stepNames, setStepNames] = useState<string[]>(["", "", ""]);
  const [projectName, setProjectName] = useState("");

  const createTablo = useCreateTablo();
  const createEtape = useCreateEtape();

  const STEP_KEYS = ["welcome", "profile", "service", "structure", "project"];

  const Icon = STEP_ICONS[currentStep];
  const isLastStep = currentStep === STEP_KEYS.length - 1;
  const isFirstStep = currentStep === 0;

  const canProceed = () => {
    switch (currentStep) {
      case 0: // Welcome
        return true;
      case 1: // Profile
        return profileType !== null;
      case 2: // Service
        return serviceName.trim().length > 0;
      case 3: // Structure
        return stepNames.filter((name) => name.trim().length > 0).length >= 2;
      case 4: // Project
        return projectName.trim().length > 0;
      default:
        return false;
    }
  };

  const handleNext = async () => {
    if (isLastStep) {
      // Create the tablo with the collected information
      try {
        const tabloData = {
          name: projectName.trim(),
          color: "bg-blue-500",
          image: null,
          status: "in_progress" as const,
        };

        const result = await createTablo.mutateAsync(tabloData);

        // Extract tablo ID from the result
        // The API now returns { message: string, tablo: TabloData }
        const tabloId = (result as { message: string; tablo?: { id: string } })?.tablo?.id;

        if (tabloId) {
          // Create etapes for the tablo
          const validSteps = stepNames.filter((name) => name.trim().length > 0);

          for (let i = 0; i < validSteps.length; i++) {
            await createEtape.mutateAsync({
              tabloId,
              title: validSteps[i].trim(),
              position: i,
            });
          }

          // Show celebration animation
          setCreatedTabloId(tabloId);
          setShowCelebration(true);

          // Navigate after celebration
          onComplete();
          // Show pointer after navigation
          setTimeout(() => {
            setShowPointer(true);
          }, 500);
        } else {
          onComplete();
        }
      } catch {
        // Still complete onboarding even if creation fails
        onComplete();
      }
    } else {
      setCurrentStep((prev) => prev + 1);
    }
  };

  const handleBack = () => {
    setCurrentStep((prev) => Math.max(0, prev - 1));
  };

  const handleSkip = () => {
    onComplete();
  };

  const addStep = () => {
    setStepNames([...stepNames, ""]);
  };

  const removeStep = (index: number) => {
    if (stepNames.length > 2) {
      setStepNames(stepNames.filter((_, i) => i !== index));
    }
  };

  const updateStepName = (index: number, value: string): void => {
    const newSteps = [...stepNames];
    newSteps[index] = value;
    setStepNames(newSteps);
  };

  const renderStepContent = () => {
    const stepKey = STEP_KEYS[currentStep];

    if (stepKey === "welcome") {
      return (
        <div className="space-y-4 sm:space-y-6 py-4 sm:py-6 lg:py-8">
          <div className="text-center space-y-3 sm:space-y-4">
            <div className="mx-auto w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-primary/20 to-primary/5 rounded-2xl flex items-center justify-center">
              <Sparkles className="h-8 w-8 sm:h-10 sm:w-10 text-primary" />
            </div>
            <p className="text-muted-foreground text-base sm:text-lg max-w-md mx-auto leading-relaxed px-2">
              {t("modal.steps.welcome.content.intro")}
            </p>
          </div>
        </div>
      );
    }

    if (stepKey === "profile") {
      return (
        <div className="space-y-4 sm:space-y-6 py-2 sm:py-4">
          <div className="space-y-4 sm:space-y-5">
            <Label className="text-sm sm:text-base font-semibold block mb-1 sm:mb-2">
              {t("modal.steps.profile.question")}
            </Label>
            <RadioGroup
              value={profileType || ""}
              onValueChange={(value: string) => setProfileType(value as ProfileType)}
              className="space-y-2.5 sm:space-y-3"
            >
              <label
                htmlFor="freelance"
                className={`flex items-center space-x-3 sm:space-x-4 rounded-xl border-2 p-4 sm:p-5 cursor-pointer transition-all touch-manipulation ${
                  profileType === "freelance"
                    ? "border-primary bg-primary/5 shadow-sm"
                    : "border-border hover:border-primary/50 hover:bg-accent/50 active:bg-accent"
                }`}
              >
                <RadioGroupItem value="freelance" id="freelance" className="shrink-0" />
                <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
                  <div className="p-1.5 sm:p-2 bg-primary/10 rounded-lg shrink-0">
                    <Briefcase className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
                  </div>
                  <span className="font-medium text-sm sm:text-base">
                    {t("modal.steps.profile.options.freelance")}
                  </span>
                </div>
              </label>
              <label
                htmlFor="agency"
                className={`flex items-center space-x-3 sm:space-x-4 rounded-xl border-2 p-4 sm:p-5 cursor-pointer transition-all touch-manipulation ${
                  profileType === "agency"
                    ? "border-primary bg-primary/5 shadow-sm"
                    : "border-border hover:border-primary/50 hover:bg-accent/50 active:bg-accent"
                }`}
              >
                <RadioGroupItem value="agency" id="agency" className="shrink-0" />
                <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
                  <div className="p-1.5 sm:p-2 bg-primary/10 rounded-lg shrink-0">
                    <Building2 className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
                  </div>
                  <span className="font-medium text-sm sm:text-base">
                    {t("modal.steps.profile.options.agency")}
                  </span>
                </div>
              </label>
            </RadioGroup>
          </div>
        </div>
      );
    }

    if (stepKey === "service") {
      return (
        <div className="space-y-4 sm:space-y-6 py-2 sm:py-4 px-1">
          <div>
            <Label
              htmlFor="service"
              className="text-sm sm:text-base font-semibold block mb-1 sm:mb-2"
            >
              {t("modal.steps.service.question")}
            </Label>
            <Input
              id="service"
              value={serviceName}
              onChange={(e) => setServiceName(e.target.value)}
              placeholder={t("modal.steps.service.placeholder")}
              className="text-sm sm:text-base sm:h-12 px-4"
              autoFocus
            />
          </div>
        </div>
      );
    }

    if (stepKey === "structure") {
      return (
        <div className="space-y-4 sm:space-y-6 py-2 sm:py-4">
          <div className="space-y-4 sm:space-y-5">
            <div>
              <Label className="text-sm sm:text-base font-semibold">
                {t("modal.steps.structure.question")}
              </Label>
              <p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5">
                {t("modal.steps.structure.steps_label")}
              </p>
            </div>
            <div className="space-y-2 sm:space-y-2.5 max-h-[200px] sm:max-h-[280px] overflow-y-auto px-1 py-1">
              {stepNames.map((step, index) => (
                <div key={index} className="flex gap-2 items-center group">
                  <div className="flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-primary/10 text-primary text-xs sm:text-sm font-semibold shrink-0">
                    {index + 1}
                  </div>
                  <Input
                    value={step}
                    onChange={(e) => updateStepName(index, e.target.value)}
                    placeholder={t("modal.steps.structure.step_placeholder", { index: index + 1 })}
                    className="flex-1 h-10 sm:h-11 text-sm sm:text-base min-w-0"
                  />
                  {stepNames.length > 2 && (
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      onClick={() => removeStep(index)}
                      className="shrink-0 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity h-10 w-10 sm:h-11 sm:w-11"
                    >
                      <Trash2 className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-destructive" />
                    </Button>
                  )}
                </div>
              ))}
            </div>
            <Button
              type="button"
              variant="outline"
              onClick={addStep}
              className="w-full h-10 sm:h-11 border-dashed text-sm sm:text-base"
              disabled={stepNames.length >= 10}
            >
              <Plus className="h-3.5 w-3.5 sm:h-4 sm:w-4 mr-2" />
              Ajouter une étape
            </Button>
          </div>
        </div>
      );
    }

    if (stepKey === "project") {
      return (
        <div className="space-y-4 sm:space-y-6 py-2 sm:py-4">
          <div className="space-y-3 sm:space-y-4">
            <Label htmlFor="project" className="text-sm sm:text-base font-semibold">
              {t("modal.steps.project.question")}
            </Label>
            <Input
              id="project"
              value={projectName}
              onChange={(e) => setProjectName(e.target.value)}
              placeholder={t("modal.steps.project.placeholder")}
              className="text-sm sm:text-base h-11 sm:h-12 px-4"
              autoFocus
            />
            {projectName && (
              <div className="bg-accent/50 rounded-lg p-3 sm:p-4 space-y-2">
                <p className="text-xs sm:text-sm font-medium">Récapitulatif :</p>
                <div className="text-xs sm:text-sm text-muted-foreground space-y-1">
                  <p>
                    <span className="font-medium">Service :</span> {serviceName}
                  </p>
                  <p>
                    <span className="font-medium">Étapes :</span>{" "}
                    {stepNames.filter((s) => s.trim()).length} étapes configurées
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      );
    }

    return null;
  };

  const renderPreview = () => {
    const stepKey = STEP_KEYS[currentStep];

    if (stepKey === "welcome") {
      return (
        <div className="flex flex-col items-center justify-center h-full p-6 lg:p-8 animate-fade-in">
          <div className="relative">
            <div className="absolute inset-0 bg-primary/20 blur-3xl rounded-full animate-pulse" />
            <Sparkles className="h-24 w-24 lg:h-32 lg:w-32 text-primary relative animate-float" />
          </div>
          <div className="mt-6 lg:mt-8 text-center space-y-2">
            <h3 className="text-xl lg:text-2xl font-bold">XTablo</h3>
            <p className="text-sm lg:text-base text-muted-foreground">
              Votre espace de gestion projet
            </p>
          </div>
        </div>
      );
    }

    if (stepKey === "profile") {
      return (
        <div className="flex flex-col items-center justify-center h-full p-4 lg:p-8 animate-fade-in">
          <div className="relative w-full max-w-md">
            {/* Modern Illustration */}
            {profileType === "freelance" ? (
              // Freelance illustration
              <div className="relative bg-card border-2 border-primary/20 rounded-2xl lg:rounded-3xl p-6 lg:p-8 shadow-2xl overflow-hidden mb-4 lg:mb-6">
                <div className="absolute inset-0 bg-linear-to-br from-primary/10 via-transparent to-primary/5" />
                <div className="relative z-10 flex flex-col items-center space-y-4 lg:space-y-6">
                  <div className="relative">
                    <div className="absolute inset-0 bg-primary/20 blur-2xl rounded-full animate-pulse" />
                    <div className="relative bg-primary/10 rounded-full p-6 lg:p-8 animate-float">
                      <Briefcase
                        className="h-16 w-16 lg:h-20 lg:w-20 text-primary"
                        strokeWidth={1.5}
                      />
                    </div>
                  </div>
                  <div className="text-center space-y-2">
                    <h3 className="text-xl lg:text-2xl font-bold">Freelance</h3>
                    <p className="text-sm lg:text-base text-muted-foreground">
                      Travail en solo
                      <br />
                      Prestations personnalisées
                    </p>
                  </div>
                  <div className="flex gap-2 pt-2 lg:pt-4">
                    <div className="h-1.5 lg:h-2 w-10 lg:w-12 bg-primary/30 rounded-full" />
                    <div className="h-1.5 lg:h-2 w-6 lg:w-8 bg-primary/20 rounded-full" />
                    <div className="h-1.5 lg:h-2 w-8 lg:w-10 bg-primary/25 rounded-full" />
                  </div>
                </div>
                <div className="absolute top-4 right-4 h-12 w-12 lg:h-16 lg:w-16 bg-primary/5 rounded-full blur-xl" />
                <div className="absolute bottom-4 left-4 h-16 w-16 lg:h-20 lg:w-20 bg-primary/5 rounded-full blur-xl" />
              </div>
            ) : profileType === "agency" ? (
              // Agency illustration
              <div className="relative bg-card border-2 border-primary/20 rounded-2xl lg:rounded-3xl p-6 lg:p-8 shadow-2xl overflow-hidden mb-4 lg:mb-6">
                <div className="absolute inset-0 bg-linear-to-br from-primary/10 via-transparent to-primary/5" />
                <div className="relative z-10 flex flex-col items-center space-y-4 lg:space-y-6">
                  <div className="relative">
                    <div className="absolute inset-0 bg-primary/20 blur-2xl rounded-full animate-pulse" />
                    <div className="relative flex items-end justify-center gap-1.5 lg:gap-2 animate-float">
                      <div className="bg-primary/20 rounded-full p-3 lg:p-4">
                        <div className="h-10 w-10 lg:h-12 lg:w-12 rounded-full bg-primary/40 flex items-center justify-center">
                          <div className="h-5 w-5 lg:h-6 lg:w-6 rounded-full bg-primary" />
                        </div>
                      </div>
                      <div className="bg-primary/30 rounded-full p-4 lg:p-5 -mb-1.5 lg:-mb-2">
                        <div className="h-12 w-12 lg:h-14 lg:w-14 rounded-full bg-primary/50 flex items-center justify-center">
                          <div className="h-6 w-6 lg:h-7 lg:w-7 rounded-full bg-primary" />
                        </div>
                      </div>
                      <div className="bg-primary/20 rounded-full p-3 lg:p-4">
                        <div className="h-10 w-10 lg:h-12 lg:w-12 rounded-full bg-primary/40 flex items-center justify-center">
                          <div className="h-5 w-5 lg:h-6 lg:w-6 rounded-full bg-primary" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="text-center space-y-2">
                    <h3 className="text-xl lg:text-2xl font-bold">Agence</h3>
                    <p className="text-sm lg:text-base text-muted-foreground">
                      Équipe collaborative
                      <br />
                      Plusieurs projets simultanés
                    </p>
                  </div>
                  <div className="flex gap-1.5 lg:gap-2 pt-2 lg:pt-4">
                    <div className="h-1.5 lg:h-2 w-8 lg:w-10 bg-primary/30 rounded-full" />
                    <div className="h-1.5 lg:h-2 w-10 lg:w-12 bg-primary/25 rounded-full" />
                    <div className="h-1.5 lg:h-2 w-6 lg:w-8 bg-primary/20 rounded-full" />
                    <div className="h-1.5 lg:h-2 w-8 lg:w-10 bg-primary/25 rounded-full" />
                  </div>
                </div>
                <div className="absolute top-4 right-4 h-12 w-12 lg:h-16 lg:w-16 bg-primary/5 rounded-full blur-xl" />
                <div className="absolute bottom-4 left-4 h-16 w-16 lg:h-20 lg:w-20 bg-primary/5 rounded-full blur-xl" />
              </div>
            ) : (
              // Placeholder
              <div className="relative bg-card border-2 border-muted/20 rounded-2xl lg:rounded-3xl p-6 lg:p-8 shadow-xl overflow-hidden mb-4 lg:mb-6">
                <div className="relative z-10 flex flex-col items-center space-y-4 lg:space-y-6">
                  <div className="bg-muted/30 rounded-full p-10 lg:p-12 animate-pulse">
                    <div className="h-12 w-12 lg:h-16 lg:w-16 rounded-full bg-muted/50" />
                  </div>
                  <div className="text-center space-y-2">
                    <h3 className="text-lg lg:text-xl font-semibold text-muted-foreground">
                      Choisissez votre profil
                    </h3>
                    <p className="text-xs lg:text-sm text-muted-foreground">
                      Sélectionnez votre type d'activité
                      <br />
                      pour continuer
                    </p>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      );
    }

    if (stepKey === "service") {
      return (
        <div className="flex flex-col items-center justify-center h-full p-4 lg:p-8 animate-fade-in">
          <div className="relative w-full max-w-xs">
            <div className="bg-card border-2 border-primary/20 rounded-2xl p-4 lg:p-6 shadow-xl">
              <div className="flex items-center gap-2 lg:gap-3 mb-3 lg:mb-4">
                <FolderKanban className="h-6 w-6 lg:h-8 lg:w-8 text-primary shrink-0" />
                <div className="flex-1 min-w-0">
                  <div className="font-semibold text-base lg:text-lg truncate">
                    {serviceName || "Votre service"}
                  </div>
                  <div className="text-xs lg:text-sm text-muted-foreground">Service principal</div>
                </div>
              </div>
              <div className="space-y-2 lg:space-y-3">
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="h-3.5 w-3.5 lg:h-4 lg:w-4 text-primary shrink-0" />
                  <div className="h-1.5 lg:h-2 bg-muted rounded flex-1" />
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="h-3.5 w-3.5 lg:h-4 lg:w-4 text-primary shrink-0" />
                  <div className="h-1.5 lg:h-2 bg-muted rounded flex-1" />
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="h-3.5 w-3.5 lg:h-4 lg:w-4 text-primary shrink-0" />
                  <div className="h-1.5 lg:h-2 bg-muted rounded flex-1" />
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }

    if (stepKey === "structure") {
      const validSteps = stepNames.filter((s) => s.trim());
      return (
        <div className="flex flex-col items-center justify-center h-full p-4 lg:p-8 animate-fade-in">
          <div className="relative w-full max-w-xs">
            <div className="bg-card border-2 border-primary/20 rounded-2xl p-4 lg:p-6 shadow-xl">
              <div className="flex items-center gap-2 mb-3 lg:mb-4">
                <Building2 className="h-5 w-5 lg:h-6 lg:w-6 text-primary shrink-0" />
                <div className="font-semibold text-sm lg:text-base">Étapes</div>
              </div>
              <div className="space-y-2 lg:space-y-3">
                {validSteps.length > 0 ? (
                  validSteps.map((step, index) => (
                    <div
                      key={index}
                      className="flex items-center gap-2 lg:gap-3 animate-slide-in"
                      style={{ animationDelay: `${index * 100}ms` }}
                    >
                      <div className="flex items-center justify-center w-7 h-7 lg:w-8 lg:h-8 rounded-full bg-primary/10 text-primary text-xs lg:text-sm font-semibold shrink-0">
                        {index + 1}
                      </div>
                      <div className="flex-1 bg-accent/50 rounded-lg px-2.5 lg:px-3 py-1.5 lg:py-2 text-xs lg:text-sm font-medium truncate">
                        {step}
                      </div>
                    </div>
                  ))
                ) : (
                  <>
                    <div className="flex items-center gap-2 lg:gap-3">
                      <div className="w-7 h-7 lg:w-8 lg:h-8 rounded-full bg-muted animate-pulse" />
                      <div className="h-7 lg:h-8 bg-muted rounded flex-1 animate-pulse" />
                    </div>
                    <div className="flex items-center gap-2 lg:gap-3">
                      <div className="w-7 h-7 lg:w-8 lg:h-8 rounded-full bg-muted animate-pulse" />
                      <div className="h-7 lg:h-8 bg-muted rounded flex-1 animate-pulse" />
                    </div>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      );
    }

    if (stepKey === "project") {
      return (
        <div className="flex flex-col items-center justify-center h-full p-4 lg:p-8 animate-fade-in">
          <div className="relative w-full max-w-xs">
            <div className="bg-linear-to-br from-primary/20 to-primary/5 border-2 border-primary/30 rounded-2xl p-4 lg:p-6 shadow-2xl">
              <div className="flex items-center gap-2 lg:gap-3 mb-3 lg:mb-4">
                <CheckCircle2 className="h-8 w-8 lg:h-10 lg:w-10 text-primary animate-bounce-gentle shrink-0" />
                <div className="flex-1 min-w-0">
                  <div className="font-bold text-lg lg:text-xl truncate">
                    {projectName || "Nom du projet"}
                  </div>
                  <div className="text-xs lg:text-sm text-muted-foreground truncate">
                    {serviceName || "Service"}
                  </div>
                </div>
              </div>
              <div className="space-y-1.5 lg:space-y-2 text-xs lg:text-sm">
                <div className="flex items-center justify-between">
                  <span className="text-muted-foreground">Étapes</span>
                  <span className="font-semibold">{stepNames.filter((s) => s.trim()).length}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-muted-foreground">Type</span>
                  <span className="font-semibold capitalize">{profileType || "—"}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }

    return null;
  };

  return (
    <>
      <OnboardingCelebration show={showCelebration} onComplete={() => setShowCelebration(false)} />
      <TabloPointer
        show={showPointer}
        tabloId={createdTabloId || ""}
        onDismiss={() => setShowPointer(false)}
      />
      <Dialog open={open && !showCelebration} onOpenChange={(open) => !open && handleSkip()}>
        <DialogContent className="max-w-[95vw] sm:max-w-2xl lg:max-w-4xl xl:max-w-6xl p-0 gap-0 overflow-hidden h-[95vh] sm:h-auto max-h-[95vh] flex flex-col">
          <div className="flex flex-col lg:flex-row min-h-0 flex-1 overflow-hidden">
            {/* Left side - Form */}
            <div className="flex-1 flex flex-col p-4 sm:p-6 lg:p-8 min-h-0 overflow-y-auto">
              <DialogHeader className="mb-4 sm:mb-6">
                <div className="flex items-start sm:items-center gap-3 sm:gap-4">
                  <div className="p-2 sm:p-3 bg-linear-to-br from-primary/20 to-primary/5 rounded-xl shadow-sm shrink-0">
                    <Icon className="h-5 w-5 sm:h-6 sm:w-6 lg:h-7 lg:w-7 text-primary" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <DialogTitle className="text-xl sm:text-2xl font-bold leading-tight">
                      {t(`modal.steps.${STEP_KEYS[currentStep]}.title`)}
                    </DialogTitle>
                    <DialogDescription className="text-sm sm:text-base mt-1">
                      {t(`modal.steps.${STEP_KEYS[currentStep]}.description`)}
                    </DialogDescription>
                  </div>
                </div>
              </DialogHeader>

              <div className="flex-1 min-h-[200px] sm:min-h-[280px] overflow-y-auto">
                {renderStepContent()}
              </div>

              {/* Progress indicators */}
              <div className="flex gap-1.5 sm:gap-2 justify-center my-4 sm:my-6 shrink-0">
                {STEP_KEYS.map((_, index) => (
                  <div
                    key={index}
                    className={`h-1.5 sm:h-2 rounded-full transition-all duration-300 ${
                      index === currentStep
                        ? "w-8 sm:w-10 bg-primary shadow-sm"
                        : index < currentStep
                          ? "w-1.5 sm:w-2 bg-primary/60"
                          : "w-1.5 sm:w-2 bg-muted"
                    }`}
                  />
                ))}
              </div>

              <DialogFooter className="flex-col sm:flex-row justify-between gap-2 sm:gap-3 shrink-0 pt-2 sm:pt-0">
                <Button
                  variant="ghost"
                  onClick={handleSkip}
                  className="text-muted-foreground hover:text-foreground w-full sm:w-auto order-2 sm:order-1"
                >
                  {t("modal.skipTutorial")}
                </Button>
                <div className="flex gap-2 w-full sm:w-auto order-1 sm:order-2">
                  {!isFirstStep && (
                    <Button
                      variant="outline"
                      onClick={handleBack}
                      className="flex-1 sm:flex-none min-w-[100px]"
                    >
                      {t("modal.back")}
                    </Button>
                  )}
                  <Button
                    onClick={handleNext}
                    disabled={!canProceed() || createTablo.isPending || createEtape.isPending}
                    className="flex-1 sm:flex-none min-w-[120px]"
                  >
                    {createTablo.isPending || createEtape.isPending
                      ? "Création..."
                      : isLastStep
                        ? t("modal.getStarted")
                        : t("modal.next")}
                  </Button>
                </div>
              </DialogFooter>
            </div>

            {/* Right side - Animated Preview */}
            <div className="hidden lg:flex flex-1 bg-linear-to-br from-accent/30 to-accent/10 border-l border-border relative overflow-hidden min-h-[300px]">
              {/* Decorative background elements */}
              <div className="absolute top-10 right-10 w-32 h-32 bg-primary/10 rounded-full blur-3xl" />
              <div className="absolute bottom-10 left-10 w-40 h-40 bg-primary/5 rounded-full blur-3xl" />

              {/* Preview content */}
              <div className="relative w-full overflow-y-auto">{renderPreview()}</div>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      <style>{`
        @keyframes fade-in {
          from {
            opacity: 0;
            transform: scale(0.95);
          }
          to {
            opacity: 1;
            transform: scale(1);
          }
        }

        @keyframes float {
          0%, 100% {
            transform: translateY(0px);
          }
          50% {
            transform: translateY(-20px);
          }
        }

        @keyframes slide-in {
          from {
            opacity: 0;
            transform: translateX(-20px);
          }
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }

        .animate-fade-in {
          animation: fade-in 0.5s ease-out forwards;
        }

        .animate-float {
          animation: float 3s ease-in-out infinite;
        }

        .animate-slide-in {
          animation: slide-in 0.3s ease-out forwards;
          opacity: 0;
        }
      `}</style>
    </>
  );
}
