"use client";

import type { Block, SectionBlockProps, TextBlockProps } 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 }> = [
    { name: "Basic", price: "₩9,900/월" },
    { name: "Pro", price: "₩29,900/월" },
    { name: "Enterprise", price: "문의" },
  ];

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

    const nameId = createId();
    const priceId = createId();

    const nameProps: TextBlockProps = {
      text: plan.name,
      align: "center",
      size: "lg",
    } as any;

    const priceProps: TextBlockProps = {
      text: plan.price,
      align: "center",
      size: "base",
    } as any;

    const nameBlock: Block = {
      id: nameId,
      type: "text",
      props: nameProps,
      sectionId,
      columnId: col.id,
    };

    const priceBlock: Block = {
      id: priceId,
      type: "text",
      props: priceProps,
      sectionId,
      columnId: col.id,
    };

    return [nameBlock, priceBlock];
  });

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

  return { blocks, lastSelectedId };
}