From e6ba8795754902eeb124bb87b84cd9d1732fb07e Mon Sep 17 00:00:00 2001
From: pennyteenycat <pennyteenycat@gmail.com>
Date: Fri, 26 Sep 2025 21:55:53 +0200
Subject: [PATCH] feat: support screen variants in funnel builder

---
 .../admin/builder/BuilderCanvas.tsx           | 110 +++++
 .../admin/builder/BuilderPreview.tsx          |  78 +++-
 .../admin/builder/BuilderSidebar.tsx          |  30 +-
 .../admin/builder/ScreenVariantsConfig.tsx    | 418 ++++++++++++++++++
 src/lib/admin/builder/context.tsx             |  48 +-
 src/lib/admin/builder/utils.ts                |  37 +-
 src/lib/admin/builder/variants.ts             | 191 ++++++++
 7 files changed, 880 insertions(+), 32 deletions(-)
 create mode 100644 src/components/admin/builder/ScreenVariantsConfig.tsx
 create mode 100644 src/lib/admin/builder/variants.ts

diff --git a/src/components/admin/builder/BuilderCanvas.tsx b/src/components/admin/builder/BuilderCanvas.tsx
index 97b2ea3..8b7eb33 100644
--- a/src/components/admin/builder/BuilderCanvas.tsx
+++ b/src/components/admin/builder/BuilderCanvas.tsx
@@ -4,6 +4,7 @@ import React, { useCallback, useMemo, useRef, useState } from "react";
 import { ArrowDown, ArrowRight, CircleSlash2, GitBranch } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useBuilderDispatch, useBuilderState } from "@/lib/admin/builder/context";
+import { formatOverridePath, listOverridePaths } from "@/lib/admin/builder/variants";
 import type {
   ListOptionDefinition,
   NavigationConditionDefinition,
@@ -225,6 +226,100 @@ function TemplateSummary({ screen }: { screen: ScreenDefinition }) {
   }
 }
 
+function VariantSummary({
+  screen,
+  screenTitleMap,
+  listOptionsMap,
+}: {
+  screen: ScreenDefinition;
+  screenTitleMap: Record<string, string>;
+  listOptionsMap: Record<string, ListOptionDefinition[]>;
+}) {
+  const variants = (screen as ScreenDefinition & { variants?: ScreenDefinition["variants"] }).variants;
+
+  if (!variants || variants.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <span className="text-xs font-semibold uppercase text-muted-foreground">Варианты</span>
+        <div className="h-px flex-1 bg-border/60" />
+        <span className="text-[11px] uppercase text-muted-foreground/70">{variants.length}</span>
+      </div>
+
+      <div className="space-y-3">
+        {variants.map((variant, index) => {
+          const [condition] = variant.conditions ?? [];
+          const controllingScreenId = condition?.screenId;
+          const controllingScreenTitle = controllingScreenId
+            ? screenTitleMap[controllingScreenId] ?? controllingScreenId
+            : "Не выбрано";
+
+          const options = controllingScreenId ? listOptionsMap[controllingScreenId] ?? [] : [];
+          const optionSummaries = (condition?.optionIds ?? []).map((optionId) => ({
+            id: optionId,
+            label: getOptionLabel(options, optionId),
+          }));
+
+          const operatorKey = condition?.operator as
+            | Exclude<NavigationConditionDefinition["operator"], undefined>
+            | undefined;
+          const operatorLabel = operatorKey ? OPERATOR_LABELS[operatorKey] ?? operatorKey : "includesAny";
+
+          const overrideHighlights = listOverridePaths(variant.overrides ?? {});
+
+          return (
+            <div
+              key={`${index}-${controllingScreenId ?? "none"}`}
+              className="space-y-3 rounded-xl border border-primary/20 bg-primary/5 p-3"
+            >
+              <div className="flex items-center justify-between gap-3">
+                <span className="text-xs font-semibold uppercase tracking-wide text-primary">Вариант {index + 1}</span>
+                <span className="rounded-full bg-white/60 px-2 py-0.5 text-[10px] uppercase tracking-wide text-primary">
+                  {operatorLabel}
+                </span>
+              </div>
+
+              <div className="space-y-1 text-xs text-primary/90">
+                <div>
+                  <span className="font-semibold">Экран:</span> {controllingScreenTitle}
+                </div>
+                {optionSummaries.length > 0 ? (
+                  <div className="flex flex-wrap gap-1.5">
+                    {optionSummaries.map((option) => (
+                      <span key={option.id} className="rounded-full bg-white/60 px-2 py-0.5 text-[11px] font-medium">
+                        {option.label}
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-primary/70">Нет выбранных ответов</div>
+                )}
+              </div>
+
+              <div className="space-y-1 text-xs text-primary/90">
+                <span className="font-semibold">Изменяет:</span>
+                <div className="flex flex-wrap gap-1.5">
+                  {(overrideHighlights.length > 0 ? overrideHighlights : ["Без изменений"]).map((highlight) => (
+                    <span
+                      key={highlight}
+                      className="rounded-lg bg-primary/10 px-2 py-0.5 text-[11px] font-medium text-primary"
+                    >
+                      {highlight === "Без изменений" ? highlight : formatOverridePath(highlight)}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
 function getOptionLabel(options: ListOptionDefinition[], optionId: string): string {
   const option = options.find((item) => item.id === optionId);
   return option ? option.label : optionId;
@@ -330,6 +425,15 @@ export function BuilderCanvas() {
     }, {});
   }, [screens]);
 
+  const listOptionsMap = useMemo(() => {
+    return screens.reduce<Record<string, ListOptionDefinition[]>>((accumulator, screen) => {
+      if (screen.template === "list") {
+        accumulator[screen.id] = screen.list.options;
+      }
+      return accumulator;
+    }, {});
+  }, [screens]);
+
   return (
     <div className="flex h-full flex-col">
       <div className="sticky top-0 z-30 flex items-center justify-between border-b border-border/60 bg-background/95 px-6 py-4 backdrop-blur-sm">
@@ -415,6 +519,12 @@ export function BuilderCanvas() {
                       <div className="mt-4 space-y-5">
                         <TemplateSummary screen={screen} />
 
+                        <VariantSummary
+                          screen={screen}
+                          screenTitleMap={screenTitleMap}
+                          listOptionsMap={listOptionsMap}
+                        />
+
                         <div className="space-y-3">
                           <div className="flex items-center gap-2">
                             <span className="text-xs font-semibold uppercase text-muted-foreground">Переходы</span>
diff --git a/src/components/admin/builder/BuilderPreview.tsx b/src/components/admin/builder/BuilderPreview.tsx
index bb720f2..7eb7101 100644
--- a/src/components/admin/builder/BuilderPreview.tsx
+++ b/src/components/admin/builder/BuilderPreview.tsx
@@ -9,16 +9,19 @@ import { FormTemplate } from "@/components/funnel/templates/FormTemplate";
 import { CouponTemplate } from "@/components/funnel/templates/CouponTemplate";
 import { useBuilderSelectedScreen } from "@/lib/admin/builder/context";
 import type { ListScreenDefinition, InfoScreenDefinition, DateScreenDefinition, FormScreenDefinition, CouponScreenDefinition } from "@/lib/funnel/types";
+import { mergeScreenWithOverrides } from "@/lib/admin/builder/variants";
 
 export function BuilderPreview() {
   const selectedScreen = useBuilderSelectedScreen();
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [formData, setFormData] = useState<Record<string, string>>({});
+  const [previewVariantIndex, setPreviewVariantIndex] = useState<number | null>(null);
 
   useEffect(() => {
     if (!selectedScreen) {
       setSelectedIds([]);
       setFormData({});
+      setPreviewVariantIndex(null);
       return;
     }
 
@@ -44,8 +47,31 @@ export function BuilderPreview() {
   }, []);
 
 
+  const variants = useMemo(() => selectedScreen?.variants ?? [], [selectedScreen]);
+
+  useEffect(() => {
+    setPreviewVariantIndex(null);
+  }, [selectedScreen]);
+
+  const previewScreen = useMemo(() => {
+    if (!selectedScreen) {
+      return null;
+    }
+
+    if (previewVariantIndex === null) {
+      return selectedScreen;
+    }
+
+    const variant = variants[previewVariantIndex];
+    if (!variant) {
+      return selectedScreen;
+    }
+
+    return mergeScreenWithOverrides(selectedScreen, variant.overrides ?? {});
+  }, [previewVariantIndex, selectedScreen, variants]);
+
   const renderScreenPreview = useCallback(() => {
-    if (!selectedScreen) return null;
+    if (!previewScreen) return null;
 
     const commonProps = {
       showGradient: false,
@@ -54,12 +80,12 @@ export function BuilderPreview() {
       onContinue: () => {}, // Mock continue handler for preview
     };
 
-    switch (selectedScreen.template) {
+    switch (previewScreen.template) {
       case "list":
         return (
           <ListTemplate
             {...commonProps}
-            screen={selectedScreen as ListScreenDefinition}
+            screen={previewScreen as ListScreenDefinition}
             selectedOptionIds={selectedIds}
             onSelectionChange={handleSelectionChange}
           />
@@ -69,7 +95,7 @@ export function BuilderPreview() {
         return (
           <InfoTemplate
             {...commonProps}
-            screen={selectedScreen as InfoScreenDefinition}
+            screen={previewScreen as InfoScreenDefinition}
           />
         );
 
@@ -77,7 +103,7 @@ export function BuilderPreview() {
         return (
           <DateTemplate
             {...commonProps}
-            screen={selectedScreen as DateScreenDefinition}
+            screen={previewScreen as DateScreenDefinition}
             selectedDate={{ month: "", day: "", year: "" }}
             onDateChange={() => {}}
           />
@@ -87,7 +113,7 @@ export function BuilderPreview() {
         return (
           <FormTemplate
             {...commonProps}
-            screen={selectedScreen as FormScreenDefinition}
+            screen={previewScreen as FormScreenDefinition}
             formData={formData}
             onFormDataChange={handleFormChange}
           />
@@ -98,7 +124,7 @@ export function BuilderPreview() {
         return (
           <CouponTemplate
             {...commonProps}
-            screen={selectedScreen as CouponScreenDefinition}
+            screen={previewScreen as CouponScreenDefinition}
           />
         );
 
@@ -109,10 +135,10 @@ export function BuilderPreview() {
           </div>
         );
     }
-  }, [selectedScreen, selectedIds, formData, handleSelectionChange, handleFormChange]);
+  }, [previewScreen, selectedIds, formData, handleSelectionChange, handleFormChange]);
 
   const preview = useMemo(() => {
-    if (!selectedScreen) {
+    if (!previewScreen) {
       return (
         <div className="flex items-center justify-center mx-auto" style={{ height: '600px', width: '320px' }}>
           <div className="flex items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 text-sm text-muted-foreground w-full h-full">
@@ -127,12 +153,36 @@ export function BuilderPreview() {
     const PREVIEW_HEIGHT = Math.round(PREVIEW_WIDTH * 2.17); // ~694px
 
     return (
-      <div className="mx-auto" style={{ width: PREVIEW_WIDTH }}>
+      <div className="mx-auto space-y-4" style={{ width: PREVIEW_WIDTH }}>
+        {variants.length > 0 && (
+          <div className="rounded-lg border border-border/60 bg-background/90 p-3 text-xs text-muted-foreground">
+            <div className="flex items-center justify-between gap-2">
+              <span className="font-semibold uppercase tracking-wide text-muted-foreground/80">
+                Вариант предпросмотра
+              </span>
+              <select
+                className="rounded-md border border-border bg-background px-2 py-1 text-xs"
+                value={previewVariantIndex === null ? "base" : String(previewVariantIndex)}
+                onChange={(event) =>
+                  setPreviewVariantIndex(event.target.value === "base" ? null : Number(event.target.value))
+                }
+              >
+                <option value="base">Основной экран</option>
+                {variants.map((variant, index) => (
+                  <option key={index} value={index}>
+                    Вариант {index + 1}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        )}
+
         {/* Mobile Frame - Simple Border */}
-        <div 
+        <div
           className="relative bg-white rounded-2xl border-4 border-gray-300 shadow-lg overflow-hidden"
-          style={{ 
-            height: PREVIEW_HEIGHT, 
+          style={{
+            height: PREVIEW_HEIGHT,
             width: PREVIEW_WIDTH 
           }}
         >
@@ -146,7 +196,7 @@ export function BuilderPreview() {
         </div>
       </div>
     );
-  }, [renderScreenPreview, selectedScreen]);
+  }, [previewScreen, renderScreenPreview, variants, previewVariantIndex]);
 
   return preview;
 }
diff --git a/src/components/admin/builder/BuilderSidebar.tsx b/src/components/admin/builder/BuilderSidebar.tsx
index aac80e6..4d14765 100644
--- a/src/components/admin/builder/BuilderSidebar.tsx
+++ b/src/components/admin/builder/BuilderSidebar.tsx
@@ -5,9 +5,14 @@ import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { TextInput } from "@/components/ui/TextInput/TextInput";
 import { Button } from "@/components/ui/button";
 import { TemplateConfig } from "@/components/admin/builder/templates";
+import { ScreenVariantsConfig } from "@/components/admin/builder/ScreenVariantsConfig";
 import { useBuilderDispatch, useBuilderSelectedScreen, useBuilderState } from "@/lib/admin/builder/context";
 import type { BuilderScreen } from "@/lib/admin/builder/types";
-import type { NavigationRuleDefinition, ScreenDefinition } from "@/lib/funnel/types";
+import type {
+  NavigationRuleDefinition,
+  ScreenDefinition,
+  ScreenVariantDefinition,
+} from "@/lib/funnel/types";
 import { cn } from "@/lib/utils";
 import { validateBuilderState } from "@/lib/admin/builder/validation";
 
@@ -280,6 +285,21 @@ export function BuilderSidebar() {
     });
   };
 
+  const handleVariantsChange = (
+    screenId: string,
+    variants: ScreenVariantDefinition<ScreenDefinition>[]
+  ) => {
+    dispatch({
+      type: "update-screen",
+      payload: {
+        screenId,
+        screen: {
+          variants: variants.length > 0 ? variants : undefined,
+        } as Partial<BuilderScreen>,
+      },
+    });
+  };
+
   const selectedScreenIsListType = selectedScreen ? isListScreen(selectedScreen) : false;
 
   return (
@@ -406,6 +426,14 @@ export function BuilderSidebar() {
               />
             </Section>
 
+            <Section title="Вариативность" description="Переопределения контента по условиям">
+              <ScreenVariantsConfig
+                screen={selectedScreen}
+                allScreens={state.screens}
+                onChange={(variants) => handleVariantsChange(selectedScreen.id, variants)}
+              />
+            </Section>
+
             <Section title="Навигация" description="Переходы между экранами">
               <label className="flex flex-col gap-2">
                 <span className="text-sm font-medium text-muted-foreground">Экран по умолчанию</span>
diff --git a/src/components/admin/builder/ScreenVariantsConfig.tsx b/src/components/admin/builder/ScreenVariantsConfig.tsx
new file mode 100644
index 0000000..6c1f571
--- /dev/null
+++ b/src/components/admin/builder/ScreenVariantsConfig.tsx
@@ -0,0 +1,418 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { TemplateConfig } from "@/components/admin/builder/templates";
+import { Button } from "@/components/ui/button";
+import type { BuilderScreen } from "@/lib/admin/builder/types";
+import {
+  extractVariantOverrides,
+  formatOverridePath,
+  listOverridePaths,
+  mergeScreenWithOverrides,
+} from "@/lib/admin/builder/variants";
+import type {
+  ListOptionDefinition,
+  NavigationConditionDefinition,
+  ScreenDefinition,
+  ScreenVariantDefinition,
+} from "@/lib/funnel/types";
+
+interface ScreenVariantsConfigProps {
+  screen: BuilderScreen;
+  allScreens: BuilderScreen[];
+  onChange: (variants: ScreenVariantDefinition<ScreenDefinition>[]) => void;
+}
+
+type ListBuilderScreen = BuilderScreen & { template: "list" };
+
+type VariantDefinition = ScreenVariantDefinition<ScreenDefinition>;
+
+type VariantCondition = NavigationConditionDefinition;
+
+function ensureCondition(variant: VariantDefinition, fallbackScreenId: string): VariantCondition {
+  const [condition] = variant.conditions;
+
+  if (!condition) {
+    return {
+      screenId: fallbackScreenId,
+      operator: "includesAny",
+      optionIds: [],
+    };
+  }
+
+  return condition;
+}
+
+function VariantOverridesEditor({
+  baseScreen,
+  overrides,
+  onChange,
+}: {
+  baseScreen: BuilderScreen;
+  overrides: VariantDefinition["overrides"];
+  onChange: (overrides: VariantDefinition["overrides"]) => void;
+}) {
+  const baseWithoutVariants = useMemo(() => {
+    const clone = mergeScreenWithOverrides(baseScreen, {});
+    const sanitized = { ...clone } as BuilderScreen;
+    if ("variants" in sanitized) {
+      delete (sanitized as Partial<BuilderScreen>).variants;
+    }
+    return sanitized;
+  }, [baseScreen]);
+
+  const mergedScreen = useMemo(
+    () => mergeScreenWithOverrides(baseWithoutVariants, overrides),
+    [baseWithoutVariants, overrides]
+  );
+
+  const handleUpdate = useCallback(
+    (updates: Partial<ScreenDefinition>) => {
+      const nextScreen = mergeScreenWithOverrides(mergedScreen, updates as Partial<ScreenDefinition>);
+      const nextOverrides = extractVariantOverrides(baseWithoutVariants, nextScreen);
+      onChange(nextOverrides);
+    },
+    [baseWithoutVariants, mergedScreen, onChange]
+  );
+
+  return (
+    <div className="space-y-3">
+      <TemplateConfig screen={mergedScreen} onUpdate={handleUpdate} />
+      <Button variant="outline" size="sm" onClick={() => onChange({})}>
+        Сбросить переопределения
+      </Button>
+    </div>
+  );
+}
+
+export function ScreenVariantsConfig({ screen, allScreens, onChange }: ScreenVariantsConfigProps) {
+  const variants = useMemo(
+    () => ((screen.variants ?? []) as VariantDefinition[]),
+    [screen.variants]
+  );
+  const [expandedVariant, setExpandedVariant] = useState<number | null>(() => (variants.length > 0 ? 0 : null));
+
+  useEffect(() => {
+    if (variants.length === 0) {
+      setExpandedVariant(null);
+      return;
+    }
+
+    if (expandedVariant === null) {
+      setExpandedVariant(0);
+      return;
+    }
+
+    if (expandedVariant >= variants.length) {
+      setExpandedVariant(variants.length - 1);
+    }
+  }, [expandedVariant, variants]);
+
+  const listScreens = useMemo(
+    () => allScreens.filter((candidate): candidate is ListBuilderScreen => candidate.template === "list"),
+    [allScreens]
+  );
+
+  const optionMap = useMemo(() => {
+    return listScreens.reduce<Record<string, ListOptionDefinition[]>>((accumulator, listScreen) => {
+      accumulator[listScreen.id] = listScreen.list.options;
+      return accumulator;
+    }, {});
+  }, [listScreens]);
+
+  const handleVariantsUpdate = useCallback(
+    (nextVariants: VariantDefinition[]) => {
+      onChange(nextVariants);
+    },
+    [onChange]
+  );
+
+  const addVariant = useCallback(() => {
+    const fallbackScreen = listScreens[0] ?? (screen.template === "list" ? (screen as ListBuilderScreen) : undefined);
+
+    if (!fallbackScreen) {
+      return;
+    }
+
+    const firstOptionId = fallbackScreen.list.options[0]?.id;
+
+    const newVariant: VariantDefinition = {
+      conditions: [
+        {
+          screenId: fallbackScreen.id,
+          operator: "includesAny",
+          optionIds: firstOptionId ? [firstOptionId] : [],
+        },
+      ],
+      overrides: {},
+    };
+
+    handleVariantsUpdate([...variants, newVariant]);
+    setExpandedVariant(variants.length);
+  }, [handleVariantsUpdate, listScreens, screen, variants]);
+
+  const removeVariant = useCallback(
+    (index: number) => {
+      handleVariantsUpdate(variants.filter((_, variantIndex) => variantIndex !== index));
+    },
+    [handleVariantsUpdate, variants]
+  );
+
+  const updateVariant = useCallback(
+    (index: number, patch: Partial<VariantDefinition>) => {
+      handleVariantsUpdate(
+        variants.map((variant, variantIndex) =>
+          variantIndex === index
+            ? {
+                ...variant,
+                ...patch,
+                conditions: patch.conditions ?? variant.conditions,
+                overrides: patch.overrides ?? variant.overrides,
+              }
+            : variant
+        )
+      );
+    },
+    [handleVariantsUpdate, variants]
+  );
+
+  const updateCondition = useCallback(
+    (index: number, updates: Partial<VariantCondition>) => {
+      updateVariant(index, {
+        conditions: [
+          {
+            ...ensureCondition(variants[index], screen.id),
+            ...updates,
+          },
+        ],
+      });
+    },
+    [screen.id, updateVariant, variants]
+  );
+
+  const toggleOption = useCallback(
+    (index: number, optionId: string) => {
+      const condition = ensureCondition(variants[index], screen.id);
+      const optionIds = new Set(condition.optionIds ?? []);
+      if (optionIds.has(optionId)) {
+        optionIds.delete(optionId);
+      } else {
+        optionIds.add(optionId);
+      }
+
+      updateCondition(index, { optionIds: Array.from(optionIds) });
+    },
+    [screen.id, updateCondition, variants]
+  );
+
+  const handleScreenChange = useCallback(
+    (variantIndex: number, screenId: string) => {
+      const listScreen = listScreens.find((candidate) => candidate.id === screenId);
+      const defaultOption = listScreen?.list.options[0]?.id;
+      updateCondition(variantIndex, {
+        screenId,
+        optionIds: defaultOption ? [defaultOption] : [],
+      });
+    },
+    [listScreens, updateCondition]
+  );
+
+  const handleOperatorChange = useCallback(
+    (variantIndex: number, operator: VariantCondition["operator"]) => {
+      updateCondition(variantIndex, { operator });
+    },
+    [updateCondition]
+  );
+
+  const handleOverridesChange = useCallback(
+    (index: number, overrides: VariantDefinition["overrides"]) => {
+      updateVariant(index, { overrides });
+    },
+    [updateVariant]
+  );
+
+  const renderVariantSummary = useCallback(
+    (variant: VariantDefinition) => {
+      const condition = ensureCondition(variant, screen.id);
+      const optionSummaries = (condition.optionIds ?? []).map((optionId) => {
+        const options = optionMap[condition.screenId] ?? [];
+        const option = options.find((item) => item.id === optionId);
+        return option?.label ?? optionId;
+      });
+
+      const listScreenTitle = listScreens.find((candidate) => candidate.id === condition.screenId)?.title.text;
+      const operatorLabel = (() => {
+        switch (condition.operator) {
+          case "includesAll":
+            return "все из";
+          case "includesExactly":
+            return "точное совпадение";
+          default:
+            return "любой из";
+        }
+      })();
+
+      const overrideHighlights = listOverridePaths(variant.overrides ?? {});
+
+      return (
+        <div className="space-y-1 text-xs text-muted-foreground">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="font-semibold text-foreground">Экран условий:</span>
+            <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
+              {listScreenTitle ?? condition.screenId}
+            </span>
+            <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground/80">{operatorLabel}</span>
+          </div>
+          {optionSummaries.length > 0 ? (
+            <div className="flex flex-wrap gap-1">
+              {optionSummaries.map((label) => (
+                <span key={label} className="rounded-full bg-primary/10 px-2 py-0.5 text-[11px] text-primary">
+                  {label}
+                </span>
+              ))}
+            </div>
+          ) : (
+            <div className="text-muted-foreground/80">Пока нет выбранных ответов</div>
+          )}
+          <div className="flex flex-wrap gap-1">
+            {(overrideHighlights.length > 0 ? overrideHighlights : ["Без изменений"]).map((item) => (
+              <span key={item} className="rounded-md bg-muted px-2 py-0.5 text-[11px]">
+                {item === "Без изменений" ? item : formatOverridePath(item)}
+              </span>
+            ))}
+          </div>
+        </div>
+      );
+    },
+    [listScreens, optionMap, screen.id]
+  );
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-start justify-between gap-3">
+        <p className="text-xs text-muted-foreground">
+          Настройте альтернативные варианты контента без изменения переходов.
+        </p>
+        <Button size="sm" onClick={addVariant} disabled={listScreens.length === 0}>
+          Добавить вариант
+        </Button>
+      </div>
+
+      {listScreens.length === 0 ? (
+        <div className="rounded-lg border border-border/60 bg-muted/30 p-3 text-xs text-muted-foreground">
+          Добавьте экран со списком, чтобы настроить вариативность.
+        </div>
+      ) : variants.length === 0 ? (
+        <div className="rounded-lg border border-dashed border-border/60 bg-muted/20 p-4 text-center text-xs text-muted-foreground">
+          Пока нет дополнительных вариантов.
+        </div>
+      ) : (
+        <div className="flex flex-col gap-4">
+          {variants.map((variant, index) => {
+            const condition = ensureCondition(variant, screen.id);
+            const isExpanded = expandedVariant === index;
+            const availableOptions = optionMap[condition.screenId] ?? [];
+
+            return (
+              <div key={index} className="space-y-3 rounded-xl border border-border/70 bg-background/80 p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <div>
+                    <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Вариант {index + 1}
+                    </div>
+                    <div className="mt-1 text-xs text-muted-foreground">{renderVariantSummary(variant)}</div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setExpandedVariant(isExpanded ? null : index)}
+                    >
+                      {isExpanded ? "Свернуть" : "Редактировать"}
+                    </Button>
+                    <Button variant="ghost" size="sm" className="text-destructive" onClick={() => removeVariant(index)}>
+                      Удалить
+                    </Button>
+                  </div>
+                </div>
+
+                {isExpanded && (
+                  <div className="space-y-4 border-t border-border/60 pt-4">
+                    <div className="grid gap-3 md:grid-cols-2">
+                      <label className="flex flex-col gap-1 text-sm">
+                        <span className="text-xs font-semibold uppercase text-muted-foreground">Экран условий</span>
+                        <select
+                          className="rounded-lg border border-border bg-background px-3 py-2 text-sm"
+                          value={condition.screenId}
+                          onChange={(event) => handleScreenChange(index, event.target.value)}
+                        >
+                          {listScreens.map((candidate) => (
+                            <option key={candidate.id} value={candidate.id}>
+                              {candidate.title.text}
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                      <label className="flex flex-col gap-1 text-sm">
+                        <span className="text-xs font-semibold uppercase text-muted-foreground">Оператор</span>
+                        <select
+                          className="rounded-lg border border-border bg-background px-3 py-2 text-sm"
+                          value={condition.operator ?? "includesAny"}
+                          onChange={(event) =>
+                            handleOperatorChange(index, event.target.value as VariantCondition["operator"])
+                          }
+                        >
+                          <option value="includesAny">любой из</option>
+                          <option value="includesAll">все из</option>
+                          <option value="includesExactly">точное совпадение</option>
+                        </select>
+                      </label>
+                    </div>
+
+                    <div className="space-y-2">
+                      <span className="text-xs font-semibold uppercase text-muted-foreground">Ответы</span>
+                      {availableOptions.length === 0 ? (
+                        <div className="rounded-lg border border-dashed border-border/60 bg-muted/20 p-3 text-xs text-muted-foreground">
+                          В выбранном экране пока нет вариантов ответа.
+                        </div>
+                      ) : (
+                        <div className="grid gap-2 md:grid-cols-2">
+                          {availableOptions.map((option) => {
+                            const isChecked = condition.optionIds?.includes(option.id) ?? false;
+                            return (
+                              <label key={option.id} className="flex items-center gap-2 text-sm">
+                                <input
+                                  type="checkbox"
+                                  checked={isChecked}
+                                  onChange={() => toggleOption(index, option.id)}
+                                />
+                                <span>
+                                  {option.label}
+                                  <span className="text-muted-foreground"> ({option.id})</span>
+                                </span>
+                              </label>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="space-y-3">
+                      <span className="text-xs font-semibold uppercase text-muted-foreground">Настройка контента</span>
+                      <VariantOverridesEditor
+                        baseScreen={screen}
+                        overrides={variant.overrides ?? {}}
+                        onChange={(overrides) => handleOverridesChange(index, overrides)}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/lib/admin/builder/context.tsx b/src/lib/admin/builder/context.tsx
index a770757..ebdd9da 100644
--- a/src/lib/admin/builder/context.tsx
+++ b/src/lib/admin/builder/context.tsx
@@ -188,23 +188,39 @@ function builderReducer(state: BuilderState, action: BuilderAction): BuilderStat
         ...state,
         screens: state.screens.map((current) =>
           current.id === screenId
-            ? ({
-                ...current,
-                ...screen,
-                title: screen.title ? { ...current.title, ...screen.title } : current.title,
-                ...(('subtitle' in screen && screen.subtitle !== undefined) ? {
-                  subtitle: screen.subtitle
-                } : ('subtitle' in current) ? {
-                  subtitle: current.subtitle
-                } : {}),
-                ...(current.template === "list" && 'list' in screen && screen.list ? {
-                  list: {
-                    ...(current as ListScreenDefinition & { position: BuilderScreenPosition }).list,
-                    ...screen.list,
-                    options: screen.list.options ?? (current as ListScreenDefinition & { position: BuilderScreenPosition }).list.options,
+            ? (() => {
+                const nextScreen = {
+                  ...current,
+                  ...screen,
+                  title: screen.title ? { ...current.title, ...screen.title } : current.title,
+                  ...(("subtitle" in screen && screen.subtitle !== undefined)
+                    ? { subtitle: screen.subtitle }
+                    : "subtitle" in current
+                      ? { subtitle: current.subtitle }
+                      : {}),
+                  ...(current.template === "list" && "list" in screen && screen.list
+                    ? {
+                        list: {
+                          ...(current as ListScreenDefinition & { position: BuilderScreenPosition }).list,
+                          ...screen.list,
+                          options:
+                            screen.list.options ??
+                            (current as ListScreenDefinition & { position: BuilderScreenPosition }).list.options,
+                        },
+                      }
+                    : {}),
+                } as BuilderScreen;
+
+                if ("variants" in screen) {
+                  if (Array.isArray(screen.variants) && screen.variants.length > 0) {
+                    nextScreen.variants = screen.variants;
+                  } else if ("variants" in nextScreen) {
+                    delete (nextScreen as Partial<BuilderScreen>).variants;
                   }
-                } : {}),
-              } as BuilderScreen)
+                }
+
+                return nextScreen;
+              })()
             : current
         ),
       });
diff --git a/src/lib/admin/builder/utils.ts b/src/lib/admin/builder/utils.ts
index e0f6fd4..f72d757 100644
--- a/src/lib/admin/builder/utils.ts
+++ b/src/lib/admin/builder/utils.ts
@@ -1,6 +1,27 @@
 import type { BuilderState } from "@/lib/admin/builder/context";
 import type { BuilderScreen, BuilderFunnelState, BuilderScreenPosition } from "@/lib/admin/builder/types";
-import type { FunnelDefinition, ScreenDefinition, ListScreenDefinition } from "@/lib/funnel/types";
+import type {
+  FunnelDefinition,
+  ScreenDefinition,
+  ListScreenDefinition,
+  ScreenVariantDefinition,
+} from "@/lib/funnel/types";
+
+function deepCloneValue<T>(value: T): T {
+  if (Array.isArray(value)) {
+    return value.map((item) => deepCloneValue(item)) as unknown as T;
+  }
+
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value as Record<string, unknown>).map(([key, entryValue]) => [
+      key,
+      deepCloneValue(entryValue),
+    ]);
+    return Object.fromEntries(entries) as T;
+  }
+
+  return value;
+}
 
 function withPositions(screens: ScreenDefinition[]): BuilderScreen[] {
   return screens.map((screen, index) => ({
@@ -47,6 +68,20 @@ export function cloneScreen(screen: BuilderScreen, overrides?: Partial<BuilderSc
         options: (screen as ListScreenDefinition & { position: BuilderScreenPosition }).list.options.map((option) => ({ ...option })),
       }
     } : {}),
+    ...(Array.isArray(screen.variants)
+      ? {
+          variants: screen.variants.map((variant) => ({
+            conditions: variant.conditions.map((condition) => ({
+              screenId: condition.screenId,
+              operator: condition.operator,
+              optionIds: [...condition.optionIds],
+            })),
+            ...(variant.overrides
+              ? { overrides: deepCloneValue(variant.overrides) as ScreenVariantDefinition<ScreenDefinition>["overrides"] }
+              : {}),
+          })),
+        }
+      : {}),
     navigation: screen.navigation
       ? {
           defaultNextScreenId: screen.navigation.defaultNextScreenId,
diff --git a/src/lib/admin/builder/variants.ts b/src/lib/admin/builder/variants.ts
new file mode 100644
index 0000000..ae5c012
--- /dev/null
+++ b/src/lib/admin/builder/variants.ts
@@ -0,0 +1,191 @@
+import type { ScreenDefinition, ScreenVariantDefinition } from "@/lib/funnel/types";
+
+const EXCLUDED_KEYS = new Set(["id", "template", "variants", "position"]);
+
+type AnyRecord = Record<string, unknown>;
+
+function isPlainObject(value: unknown): value is AnyRecord {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function deepClone<T>(value: T): T {
+  if (Array.isArray(value)) {
+    return value.map((item) => deepClone(item)) as unknown as T;
+  }
+
+  if (isPlainObject(value)) {
+    const clonedEntries = Object.entries(value).map(([key, entry]) => [key, deepClone(entry)]);
+    return Object.fromEntries(clonedEntries) as T;
+  }
+
+  return value;
+}
+
+function deepMerge<T>(base: T, patch?: Partial<T>): T {
+  const result = deepClone(base);
+
+  if (!patch) {
+    return result;
+  }
+
+  Object.entries(patch as AnyRecord).forEach(([key, patchValue]) => {
+    if (patchValue === undefined) {
+      (result as AnyRecord)[key] = undefined;
+      return;
+    }
+
+    const currentValue = (result as AnyRecord)[key];
+
+    if (isPlainObject(currentValue) && isPlainObject(patchValue)) {
+      (result as AnyRecord)[key] = deepMerge(currentValue, patchValue);
+      return;
+    }
+
+    (result as AnyRecord)[key] = deepClone(patchValue);
+  });
+
+  return result;
+}
+
+function deepEqual(a: unknown, b: unknown): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) {
+      return false;
+    }
+
+    return a.every((item, index) => deepEqual(item, b[index]));
+  }
+
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+
+    for (const key of keys) {
+      if (!deepEqual(a[key], b[key])) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  return false;
+}
+
+function diff(base: unknown, target: unknown): unknown {
+  if (deepEqual(base, target)) {
+    return undefined;
+  }
+
+  if (Array.isArray(target) || Array.isArray(base)) {
+    return deepClone(target);
+  }
+
+  if (isPlainObject(target) && isPlainObject(base)) {
+    const entries: [string, unknown][] = [];
+    const keys = new Set([...Object.keys(target), ...Object.keys(base)]);
+
+    keys.forEach((key) => {
+      if (EXCLUDED_KEYS.has(key)) {
+        return;
+      }
+
+      const baseValue = (base as AnyRecord)[key];
+      const targetValue = (target as AnyRecord)[key];
+
+      const nestedDiff = diff(baseValue, targetValue);
+
+      if (nestedDiff !== undefined) {
+        entries.push([key, nestedDiff]);
+      }
+    });
+
+    return entries.length > 0 ? Object.fromEntries(entries) : undefined;
+  }
+
+  return deepClone(target);
+}
+
+export function mergeScreenWithOverrides<T extends ScreenDefinition>(
+  base: T,
+  overrides?: ScreenVariantDefinition<T>["overrides"]
+): T {
+  return deepMerge(base, overrides as Partial<T> | undefined);
+}
+
+export function applyScreenUpdates<T extends ScreenDefinition>(screen: T, updates: Partial<T>): T {
+  return deepMerge(screen, updates);
+}
+
+export function extractVariantOverrides<T extends ScreenDefinition>(
+  base: T,
+  target: T
+): ScreenVariantDefinition<T>["overrides"] {
+  return diff(base, target) as ScreenVariantDefinition<T>["overrides"];
+}
+
+export function listOverridePaths(value: unknown, prefix = ""): string[] {
+  if (!value || typeof value !== "object") {
+    return prefix ? [prefix.slice(0, -1)] : [];
+  }
+
+  if (Array.isArray(value)) {
+    return [prefix ? `${prefix.slice(0, -1)}[]` : "[]"];
+  }
+
+  const result: string[] = [];
+
+  Object.entries(value).forEach(([key, entry]) => {
+    const nextPrefix = `${prefix}${key}.`;
+    if (!entry || typeof entry !== "object") {
+      result.push(prefix ? `${prefix.slice(0, -1)} · ${key}` : key);
+      return;
+    }
+
+    if (Array.isArray(entry)) {
+      result.push(prefix ? `${prefix.slice(0, -1)} · ${key}[]` : `${key}[]`);
+      return;
+    }
+
+    const nested = listOverridePaths(entry, nextPrefix);
+    if (nested.length === 0) {
+      result.push(prefix ? `${prefix.slice(0, -1)} · ${key}` : key);
+      return;
+    }
+
+    result.push(...nested);
+  });
+
+  return result;
+}
+
+export function formatOverridePath(path: string): string {
+  if (!path) {
+    return path;
+  }
+
+  const [head, ...tail] = path.split(" · ");
+
+  const labelMap: Record<string, string> = {
+    title: "Заголовок",
+    subtitle: "Подзаголовок",
+    bottomActionButton: "Нижняя кнопка",
+    list: "Список",
+    header: "Хедер",
+    dateInput: "Поле даты",
+    coupon: "Купон",
+    description: "Описание",
+    infoMessage: "Инфо сообщение",
+  };
+
+  const formattedHead = labelMap[head] ?? head;
+
+  if (tail.length === 0) {
+    return formattedHead;
+  }
+
+  return `${formattedHead} · ${tail.join(" · ")}`;
+}