"use client";

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

export function createTeamTemplateBlocks(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: 80,
    maxWidthPx: 1120,
    gapXPx: 32,
    backgroundColorCustom: "#1e1b4b", // 보라/인디고 계열
    columns,
  } as any;

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

  const memberDefinitions = [
    { name: "홍길동", role: "Product Designer", bio: "사용자 경험을 설계합니다." },
    { name: "김영희", role: "Frontend Engineer", bio: "깔끔한 UI를 구현합니다." },
    { name: "이철수", role: "Backend Engineer", bio: "안정적인 인프라를 책임집니다." },
  ];

  const teamBlocks: Block[] = columns.flatMap((col, index) => {
    const m = memberDefinitions[index] ?? memberDefinitions[0];

    const imageId = createId();
    const nameId = createId();
    const roleId = createId();
    const bioId = createId();

    const imageProps: ImageBlockProps = {
      src: "https://via.placeholder.com/150x150/334155/94a3b8?text=User",
      alt: m.name,
      align: "center",
      widthMode: "fixed",
      widthPx: 120,
      borderRadius: "full",
    };

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

    const roleProps: TextBlockProps = {
      text: m.role,
      align: "center",
      size: "base",
      color: "primary",
    } as any;

    const bioProps: TextBlockProps = {
      text: m.bio,
      align: "center",
      size: "sm",
      color: "muted",
    } as any;

    const imageBlock: Block = {
      id: imageId,
      type: "image",
      props: imageProps,
      sectionId,
      columnId: col.id,
    };

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

    const roleBlock: Block = {
      id: roleId,
      type: "text",
      props: roleProps,
      sectionId,
      columnId: col.id,
    };

    const bioBlock: Block = {
      id: bioId,
      type: "text",
      props: bioProps,
      sectionId,
      columnId: col.id,
    };

    return [imageBlock, nameBlock, roleBlock, bioBlock];
  });

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

  return { blocks, lastSelectedId };
}