"use client";

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

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

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

  const sectionProps: SectionBlockProps = {
    background: "default",
    paddingY: "md",
    // FAQ 는 비교적 좁은 폭과 보통 여백을 사용한다.
    paddingYPx: 56,
    maxWidthPx: 720,
    backgroundColorCustom: "#020617",
    columns,
  } as any;

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

  const firstColumnId = `${sectionId}_col_1`;

  const faqPairs = [
    {
      question: "자주 묻는 질문 1",
      answer: "첫 번째 질문에 대한 답변을 여기에 입력하세요.",
    },
    {
      question: "자주 묻는 질문 2",
      answer: "두 번째 질문에 대한 답변을 여기에 입력하세요.",
    },
    {
      question: "자주 묻는 질문 3",
      answer: "세 번째 질문에 대한 답변을 여기에 입력하세요.",
    },
  ];

  const faqBlocks: Block[] = faqPairs.flatMap((pair) => {
    const qId = createId();
    const aId = createId();

    const questionProps: TextBlockProps = {
      text: pair.question,
      align: "left",
      size: "lg",
    } as any;

    const answerProps: TextBlockProps = {
      text: pair.answer,
      align: "left",
      size: "sm",
    } as any;

    const questionBlock: Block = {
      id: qId,
      type: "text",
      props: questionProps,
      sectionId,
      columnId: firstColumnId,
    };

    const answerBlock: Block = {
      id: aId,
      type: "text",
      props: answerProps,
      sectionId,
      columnId: firstColumnId,
    };

    return [questionBlock, answerBlock];
  });

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

  return { blocks, lastSelectedId };
}