import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { TemplateLayout } from "./TemplateLayout";
import { fn } from "storybook/test";
import type { InfoScreenDefinition } from "@/lib/funnel/types";

// Создаем mock экран для демонстрации TemplateLayout
const mockScreen: InfoScreenDefinition = {
  id: "template-layout-demo",
  template: "info",
  header: {
    show: true,
    showBackButton: true,
    showProgress: true,
  },
  title: {
    text: "TemplateLayout Demo",
    weight: "bold",
    align: "center",
    size: "2xl",
    color: "default",
  },
  subtitle: {
    show: true,
    text: "Это демонстрация **TemplateLayout** - централизованного layout wrapper для всех funnel templates. Он управляет header, progress bar, кнопкой назад и нижней кнопкой.",
    font: "inter",
    weight: "regular",
    color: "default",
    align: "center",
  },
  bottomActionButton: {
    show: true,
    text: "Continue",
    showGradientBlur: true,
  },
  navigation: {
    defaultNextScreenId: undefined,
    rules: [],
  },
};

/** TemplateLayout - централизованный wrapper для всех funnel templates */
const meta: Meta<typeof TemplateLayout> = {
  title: "Funnel Templates/TemplateLayout",
  component: TemplateLayout,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        component: `
TemplateLayout - это централизованный layout wrapper, который используется всеми funnel templates.

**Основные возможности:**
- Управление header (показать/скрыть, progress bar, кнопка назад)
- Bottom action button с gradient blur
- Privacy terms consent
- Динамическая высота для фиксированного нижнего контента
- Единообразные настройки типографики

**Архитектурные принципы:**
- Устраняет дублирование кода между templates
- Централизованная логика UI элементов
- Использует только существующие UI компоненты (LayoutQuestion, BottomActionButton)
        `
      }
    }
  },
  args: {
    screen: mockScreen,
    canGoBack: true,
    onBack: fn(),
    screenProgress: { current: 5, total: 10 },
    titleDefaults: { font: "manrope", weight: "bold", align: "center", size: "2xl", color: "default" },
    subtitleDefaults: { font: "inter", weight: "medium", color: "default", align: "center", size: "lg" },
    actionButtonOptions: {
      defaultText: "Continue",
      disabled: false,
      onClick: fn(),
    },
    children: (
      <div className="w-full flex flex-col items-center gap-4 py-8">
        <div className="w-full max-w-sm text-center">
          <p className="text-muted-foreground mb-4">
            Это контент, который передается в TemplateLayout через children prop.
          </p>
          <div className="grid grid-cols-2 gap-2 text-sm">
            <div className="p-3 bg-muted/20 rounded-lg">
              <strong>Header:</strong> управляется TemplateLayout
            </div>
            <div className="p-3 bg-muted/20 rounded-lg">
              <strong>Content:</strong> передается через children
            </div>
            <div className="p-3 bg-muted/20 rounded-lg">
              <strong>Button:</strong> управляется TemplateLayout
            </div>
            <div className="p-3 bg-muted/20 rounded-lg">
              <strong>Blur:</strong> управляется TemplateLayout
            </div>
          </div>
        </div>
      </div>
    ),
  },
  argTypes: {
    screen: {
      control: { type: "object" },
      description: "Screen definition с настройками header и bottomActionButton"
    },
    screenProgress: {
      control: { type: "object" },
      description: "Прогресс для отображения в header"
    },
    actionButtonOptions: {
      control: { type: "object" },
      description: "Настройки нижней кнопки (если передается, кнопка показывается)"
    },
    children: {
      control: false,
      description: "Контент template, который рендерится внутри layout"
    },
    onBack: { action: "back" },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

/** Дефолтный TemplateLayout со всеми элементами */
export const Default: Story = {};

/** Layout без header */
export const WithoutHeader: Story = {
  args: {
    screen: {
      ...mockScreen,
      header: {
        show: false,
      },
    },
  },
};

/** Layout без progress bar */
export const WithoutProgressBar: Story = {
  args: {
    screen: {
      ...mockScreen,
      header: {
        show: true,
        showBackButton: true,
        showProgress: false,
      },
    },
  },
};

/** Layout без кнопки назад */
export const WithoutBackButton: Story = {
  args: {
    screen: {
      ...mockScreen,
      header: {
        show: true,
        showBackButton: false,
        showProgress: true,
      },
    },
    canGoBack: false,
  },
};

/** Layout без нижней кнопки */
export const WithoutActionButton: Story = {
  args: {
    actionButtonOptions: undefined,
  },
};

/** Layout только с blur gradient (без кнопки) */
export const OnlyBlurGradient: Story = {
  args: {
    screen: {
      ...mockScreen,
      bottomActionButton: {
        show: false,
        showGradientBlur: true,
      },
    },
    actionButtonOptions: undefined,
  },
};

/** Layout с Privacy Terms Consent */
export const WithPrivacyConsent: Story = {
  args: {
    screen: {
      ...mockScreen,
      bottomActionButton: {
        ...mockScreen.bottomActionButton,
        showPrivacyTermsConsent: true,
      },
    },
  },
};

/** Layout с disabled кнопкой */
export const WithDisabledButton: Story = {
  args: {
    actionButtonOptions: {
      defaultText: "Continue",
      disabled: true,
      onClick: fn(),
    },
  },
};

/** Минимальный layout (только контент) */
export const Minimal: Story = {
  args: {
    screen: {
      ...mockScreen,
      header: {
        show: false,
      },
      bottomActionButton: {
        show: false,
        showGradientBlur: false,
      },
    },
    actionButtonOptions: undefined,
    children: (
      <div className="w-full py-16 text-center">
        <h1 className="text-2xl font-bold mb-4">Минимальный Layout</h1>
        <p className="text-muted-foreground">
          Только контент, без header и нижней кнопки
        </p>
      </div>
    ),
  },
};
