import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { ListTemplate } from "./ListTemplate";
import { fn } from "storybook/test";
import { buildListDefaults } from "@/lib/admin/builder/state/defaults/list";
import type { ListScreenDefinition } from "@/lib/funnel/types";

// Получаем дефолтные значения из builder
const defaultScreen = buildListDefaults("list-screen-story") as ListScreenDefinition;

// Более богатый список опций для демонстрации
const richOptionsScreen: ListScreenDefinition = {
  ...defaultScreen,
  title: {
    ...defaultScreen.title,
    text: "Выберите ваш знак зодиака",
  },
  list: {
    ...defaultScreen.list,
    options: [
      { id: "aries", label: "Овен", emoji: "♈" },
      { id: "taurus", label: "Телец", emoji: "♉" },
      { id: "gemini", label: "Близнецы", emoji: "♊" },
      { id: "cancer", label: "Рак", emoji: "♋" },
      { id: "leo", label: "Лев", emoji: "♌" },
      { id: "virgo", label: "Дева", emoji: "♍" },
    ],
  },
};

/** ListTemplate - экраны с выбором опций (single/multi selection) */
const meta: Meta<typeof ListTemplate> = {
  title: "Funnel Templates/ListTemplate",
  component: ListTemplate,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    screen: richOptionsScreen,
    selectedOptionIds: [],
    onSelectionChange: fn(),
    actionButtonProps: {
      children: "Continue",
      onClick: fn(),
    },
    canGoBack: true,
    onBack: fn(),
    screenProgress: { current: 5, total: 10 },
  },
  argTypes: {
    screen: {
      control: { type: "object" },
    },
    selectedOptionIds: {
      control: { type: "object" },
    },
    actionButtonProps: {
      control: { type: "object" },
    },
    screenProgress: {
      control: { type: "object" },
    },
    onSelectionChange: { action: "selection changed" },
    onBack: { action: "back" },
  },
};

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

/** Дефолтный single selection список (кнопка disabled пока не выбрано) */
export const SingleSelection: Story = {};

/** Multi selection список (кнопка disabled пока не выбрано) */
export const MultiSelection: Story = {
  args: {
    screen: {
      ...richOptionsScreen,
      title: {
        ...richOptionsScreen.title,
        text: "Выберите несколько вариантов",
      },
      list: {
        ...richOptionsScreen.list,
        selectionType: "multi",
      },
    },
  },
};

/** Single selection с предвыбранным значением (кнопка активна) */
export const WithPreselection: Story = {
  args: {
    selectedOptionIds: ["leo"],
  },
};

/** Multi selection с несколькими выбранными (кнопка активна) */
export const MultiWithPreselection: Story = {
  args: {
    screen: {
      ...richOptionsScreen,
      list: {
        ...richOptionsScreen.list,
        selectionType: "multi",
      },
    },
    selectedOptionIds: ["aries", "leo", "virgo"],
  },
};

/** Single selection с автопереходом (без кнопки) */
export const SingleAutoAdvance: Story = {
  args: {
    screen: {
      ...richOptionsScreen,
      bottomActionButton: {
        show: false, // Автопереход при выборе
      },
    },
    actionButtonProps: undefined, // Нет кнопки
  },
};

/** Список без header */
export const WithoutHeader: Story = {
  args: {
    screen: {
      ...richOptionsScreen,
      header: {
        show: false,
      },
    },
  },
};

/** Простой список без эмодзи */
export const SimpleList: Story = {
  args: {
    screen: {
      ...defaultScreen, // Используем базовые дефолты без эмодзи
    },
  },
};
