"use client";

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

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

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

  const sectionProps: SectionBlockProps = {
    background: "primary",
    paddingY: "md",
    // CTA 는 강한 색상과 적당한 여백, 비교적 좁은 폭을 사용한다.
    paddingYPx: 64,
    maxWidthPx: 960,
    gapXPx: 24,
    backgroundColorCustom: "#0c4a6e",
    columns,
  } as any;

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

  const leftColumnId = `${sectionId}_col_1`;
  const rightColumnId = `${sectionId}_col_2`;

  const textId = createId();
  const textProps: TextBlockProps = {
    text: "지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.\n망설이지 말고 시작하세요!",
    align: "left",
    size: "lg",
  } as any;
  const textBlock: Block = {
    id: textId,
    type: "text",
    props: textProps,
    sectionId,
    columnId: leftColumnId,
  };

  const buttonId = createId();
  const buttonProps: ButtonBlockProps = {
    label: "CTA 버튼",
    href: "#",
    align: "center",
    size: "lg",
    variant: "solid",
    colorPalette: "primary",
    fullWidth: true,
    borderRadius: "md",
    textColorCustom: "#0b1120",
    fillColorCustom: "#0ea5e9",
    strokeColorCustom: "#0284c7",
  };
  const buttonBlock: Block = {
    id: buttonId,
    type: "button",
    props: buttonProps,
    sectionId,
    columnId: rightColumnId,
  };

  const blocks: Block[] = [sectionBlock, textBlock, buttonBlock];
  const lastSelectedId = buttonId;

  return { blocks, lastSelectedId };
}