"use client";

import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } from "@/features/editor/state/editorStore";

export function createPricingTemplateBlocks(opts: {
  sectionId: string;
  createId: () => string;
}): { blocks: Block[]; lastSelectedId: string } {
  const { sectionId, createId } = opts;

  const columns: SectionBlockProps["columns"] = [
    { id: `${sectionId}_col_1`, span: 4 },
    { id: `${sectionId}_col_2`, span: 4 },
    { id: `${sectionId}_col_3`, span: 4 },
  ];

  const sectionProps: SectionBlockProps = {
    background: "muted",
    paddingY: "lg",
    // 요금제는 꽤 넓은 여백과 넓은 최대 폭, 넉넉한 컬럼 간격을 사용한다.
    paddingYPx: 88,
    maxWidthPx: 1120,
    gapXPx: 40,
    backgroundColorCustom: "#0f172a",
    columns,
  } as any;

  const sectionBlock: Block = {
    id: sectionId,
    type: "section",
    props: sectionProps,
    sectionId: null,
    columnId: null,
  };

  const planDefinitions: Array<{ name: string; price: string; popular?: boolean }> = [
    { name: "Basic", price: "₩9,900/월" },
    { name: "Pro", price: "₩29,900/월", popular: true },
    { name: "Enterprise", price: "문의" },
  ];

  const pricingBlocks: Block[] = columns.flatMap((col, index) => {
    const plan = planDefinitions[index] ?? planDefinitions[0];
    const isPopular = !!plan.popular;

    const blocksInCol: Block[] = [];

    // Popular Badge (only for middle)
    if (isPopular) {
      const badgeId = createId();
      const badgeProps: TextBlockProps = {
        text: "MOST POPULAR",
        align: "center",
        size: "xs",
        color: "primary",
        bold: true,
      } as any;
      blocksInCol.push({
        id: badgeId,
        type: "text",
        props: badgeProps,
        sectionId,
        columnId: col.id,
      });
    }

    const nameId = createId();
    const nameProps: TextBlockProps = {
      text: plan.name,
      align: "center",
      size: "lg",
      bold: true,
    } as any;
    blocksInCol.push({
      id: nameId,
      type: "text",
      props: nameProps,
      sectionId,
      columnId: col.id,
    });

    const priceId = createId();
    const priceProps: TextBlockProps = {
      text: plan.price,
      align: "center",
      size: "xl", // Price larger
    } as any;
    blocksInCol.push({
      id: priceId,
      type: "text",
      props: priceProps,
      sectionId,
      columnId: col.id,
    });

    // Features list (simple text for now)
    const featuresId = createId();
    const featuresProps: TextBlockProps = {
      text: "• 모든 기본 기능\n• 이메일 지원\n• 1GB 스토리지",
      align: "center",
      size: "sm",
      color: "muted",
    } as any;
    blocksInCol.push({
      id: featuresId,
      type: "text",
      props: featuresProps,
      sectionId,
      columnId: col.id,
    });

    // Button
    const buttonId = createId();
    const buttonProps: ButtonBlockProps = {
      label: isPopular ? "시작하기" : "선택하기",
      href: "#",
      align: "center",
      size: "md",
      variant: isPopular ? "solid" : "outline",
      colorPalette: "primary",
      fullWidth: true,
      borderRadius: "md",
      textColorCustom: isPopular ? "#0b1120" : "#e2e8f0",
      fillColorCustom: isPopular ? "#0ea5e9" : "transparent",
      strokeColorCustom: "#0ea5e9",
    };
    blocksInCol.push({
      id: buttonId,
      type: "button",
      props: buttonProps,
      sectionId,
      columnId: col.id,
    });

    return blocksInCol;
  });

  const blocks: Block[] = [sectionBlock, ...pricingBlocks];
  const lastSelectedId = pricingBlocks[pricingBlocks.length - 1]?.id ?? sectionId;

  return { blocks, lastSelectedId };
}