"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: 3 },
    { id: `${sectionId}_col_2`, span: 9 },
  ];

  const sectionProps: SectionBlockProps = {
    background: "default",
    paddingY: "md",
    // FAQ 는 비교적 좁은 폭과 보통 여백을 사용한다.
    paddingYPx: 80,
    maxWidthPx: 1024,
    gapXPx: 48,
    backgroundColorCustom: "#020617",
    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`;

  // Left Column: Title
  const titleId = createId();
  const titleProps: TextBlockProps = {
    text: "FAQ",
    align: "left",
    size: "xl",
    bold: true,
  } as any;
  const titleBlock: Block = {
    id: titleId,
    type: "text",
    props: titleProps,
    sectionId,
    columnId: leftColumnId,
  };

  const subTitleId = createId();
  const subTitleProps: TextBlockProps = {
    text: "자주 묻는 질문",
    align: "left",
    size: "sm",
    color: "muted",
  } as any;
  const subTitleBlock: Block = {
    id: subTitleId,
    type: "text",
    props: subTitleProps,
    sectionId,
    columnId: leftColumnId,
  };


  // Right Column: Q&A List
  const faqPairs = [
    {
      question: "서비스 이용료는 얼마인가요?",
      answer: "기본 기능은 무료로 제공되며, 프리미엄 기능은 월 구독료가 발생합니다.",
    },
    {
      question: "환불 정책은 어떻게 되나요?",
      answer: "결제 후 7일 이내에 사용 이력이 없는 경우 전액 환불 가능합니다.",
    },
    {
      question: "팀원 초대 기능이 있나요?",
      answer: "네, 프로 요금제 이상부터 팀원 초대가 가능합니다.",
    },
  ];

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

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

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

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

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

    return [questionBlock, answerBlock];
  });

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

  return { blocks, lastSelectedId };
}
