import { createStore } from "zustand";
import { create } from "zustand";
import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate";
import { createFeaturesTemplateBlocks } from "@/app/editor/templates/featuresTemplate";
import { createBlogTemplateBlocks } from "@/app/editor/templates/blogTemplate";
import { createTeamTemplateBlocks } from "@/app/editor/templates/teamTemplate";
import { createFooterTemplateBlocks } from "@/app/editor/templates/footerTemplate";
import { createCtaTemplateBlocks } from "@/app/editor/templates/ctaTemplate";
import { createFaqTemplateBlocks } from "@/app/editor/templates/faqTemplate";
import { createPricingTemplateBlocks } from "@/app/editor/templates/pricingTemplate";
import { createTestimonialsTemplateBlocks } from "@/app/editor/templates/testimonialsTemplate";

// 블록 타입 정의: 텍스트/버튼/이미지/섹션/구분선/리스트/폼 블록/폼 요소 블록
export type BlockType =
  | "text"
  | "button"
  | "image"
  | "section"
  | "divider"
  | "list"
  | "form"
  | "formInput"
  | "formSelect"
  | "formCheckbox"
  | "formRadio";

// 텍스트 블록 속성
export interface TextBlockProps {
  text: string;
  // 텍스트 정렬: 기본은 left
  align: "left" | "center" | "right";
  // 텍스트 크기: 기본은 base (기존 필드, 하위호환 유지)
  size: "sm" | "base" | "lg";

  // 폰트 크기 모드: 프리셋 스케일 또는 커스텀 값
  fontSizeMode?: "scale" | "custom";
  // 폰트 크기 스케일 (scale 모드일 때 사용)
  fontSizeScale?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
  // 폰트 크기 커스텀 값 (예: "18px", "1.125rem")
  fontSizeCustom?: string;

  // 줄 간격 모드: 프리셋 스케일 또는 커스텀 값
  lineHeightMode?: "scale" | "custom";
  // 줄 간격 스케일
  lineHeightScale?: "tight" | "snug" | "normal" | "relaxed" | "loose";
  // 줄 간격 커스텀 값 (예: "1.4", "24px")
  lineHeightCustom?: string;

  // 폰트 굵기 모드: 프리셋 스케일 또는 커스텀 값
  fontWeightMode?: "scale" | "custom";
  // 폰트 굵기 스케일
  fontWeightScale?: "normal" | "medium" | "semibold" | "bold";
  // 폰트 굵기 커스텀 값 (예: "500", "650")
  fontWeightCustom?: string;

  // 글자 간격 커스텀 값 (em 단위, 예: "0.05em", "-0.02em")
  letterSpacingCustom?: string;

  // 텍스트 색상 모드: 팔레트 또는 커스텀 웹색상
  colorMode?: "palette" | "custom";
  // 텍스트 색상 팔레트 (디자인 토큰)
  colorPalette?:
    | "default"
    | "muted"
    | "strong"
    | "accent"
    | "danger"
    | "success"
    | "warning"
    | "info"
    | "neutral";
  // 커스텀 색상 값 (예: "#ff0000", "rgb(…)" 등)
  colorCustom?: string;

  // 최대 너비 모드: 프리셋 또는 커스텀 값
  maxWidthMode?: "scale" | "custom";
  // 최대 너비 스케일
  maxWidthScale?: "none" | "prose" | "narrow";
  // 최대 너비 커스텀 값 (예: "600px", "40rem")
  maxWidthCustom?: string;

  // 텍스트 장식
  underline?: boolean;
  strike?: boolean;
  italic?: boolean;
}

// 버튼 블록 속성
export interface ButtonBlockProps {
  label: string;
  href: string;
  align?: "left" | "center" | "right";
  // 버튼 크기: 더 세분화된 스케일(xs~xl)
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  variant?: "solid" | "outline" | "ghost";
  colorPalette?: "primary" | "muted" | "danger" | "success" | "neutral";
  fullWidth?: boolean;
  widthMode?: "auto" | "full" | "fixed";
  widthPx?: number;
  borderRadius?: "none" | "sm" | "md" | "lg" | "full";
  paddingX?: number;
  paddingY?: number;
  // 버튼 텍스트 크기 (예: "14px")
  fontSizeCustom?: string;
  // 버튼 텍스트 줄 간격 (예: "1.4")
  lineHeightCustom?: string;
  // 버튼 텍스트 글자 간격 (em 단위, 예: "0.05em")
  letterSpacingCustom?: string;
  // 채움(배경) 색상 커스텀 값
  fillColorCustom?: string;
  // 외곽선(보더) 색상 커스텀 값
  strokeColorCustom?: string;
  // 버튼 텍스트 색상 커스텀 값
  textColorCustom?: string;
}

// 이미지 블록 속성
export interface ImageBlockProps {
  src: string;
  alt: string;
  // 이미지 정렬: 기본은 center
  align?: "left" | "center" | "right";
  // 너비 모드: auto(콘텐츠에 맞춤) 또는 fixed(px 지정)
  widthMode?: "auto" | "fixed";
  widthPx?: number;
  // 모서리 둥글기
  borderRadius?: "none" | "sm" | "md" | "lg" | "full";
}

// 구분선 블록 속성
export interface DividerBlockProps {
  align: "left" | "center" | "right";
  thickness: "thin" | "medium";
  // 길이/너비
  widthMode?: "auto" | "full" | "fixed";
  widthPx?: number;
  // 색상
  colorHex?: string;
  // 상하 여백 (토큰, 호환용)
  marginY?: "sm" | "md" | "lg";
  // 상하 여백(px) 숫자 값
  marginYPx?: number;
}

// 리스트 아이템 트리(중첩 리스트) 노드 정의
export interface ListItemNode {
  id: string;
  text: string;
  children?: ListItemNode[];
}

export interface ListLine {
  depth: number;
  text: string;
}

// 리스트 아이템 트리 조작 유틸 (pure helper)

type ListTreeOpResult = {
  tree: ListItemNode[];
  changed: boolean;
};

const cloneNode = (node: ListItemNode): ListItemNode => ({
  id: node.id,
  text: node.text,
  children: node.children ? node.children.map(cloneNode) : [],
});

export const buildItemsTreeFromItems = (blockId: string, items: string[]): ListItemNode[] =>
  items.map((text, index) => ({
    id: `${blockId}_item_${index + 1}`,
    text,
    children: [],
  }));

export const flattenItemsTreeToItems = (tree: ListItemNode[]): string[] => {
  const result: string[] = [];

  const walk = (nodes: ListItemNode[]) => {
    for (const node of nodes) {
      result.push(node.text);
      if (node.children && node.children.length > 0) {
        walk(node.children);
      }
    }
  };

  walk(tree);
  return result;
};

export const linesToItemsTree = (blockId: string, lines: ListLine[]): ListItemNode[] => {
  const roots: ListItemNode[] = [];
  const stack: ListItemNode[] = [];

  lines.forEach((line, index) => {
    const depth = Number.isFinite(line.depth) && line.depth > 0 ? Math.floor(line.depth) : 0;

    const node: ListItemNode = {
      id: `${blockId}_item_${index + 1}`,
      text: line.text,
      children: [],
    };

    if (depth === 0 || stack.length === 0) {
      roots.push(node);
      stack.length = 1;
      stack[0] = node;
      return;
    }

    // depth 가 현재 스택 깊이보다 크면, 스택 마지막을 부모로 사용한다.
    const parentDepth = Math.min(depth - 1, stack.length - 1);
    const parent = stack[parentDepth];

    if (!parent.children) {
      parent.children = [];
    }
    parent.children.push(node);

    // 현재 노드를 해당 depth 위치에 두고, 그 이후 스택은 잘라낸다.
    stack.length = parentDepth + 2;
    stack[parentDepth + 1] = node;
  });

  return roots;
};

export const itemsTreeToLines = (tree: ListItemNode[]): ListLine[] => {
  const lines: ListLine[] = [];

  const walk = (nodes: ListItemNode[], depth: number) => {
    for (const node of nodes) {
      lines.push({ depth, text: node.text });
      if (node.children && node.children.length > 0) {
        walk(node.children, depth + 1);
      }
    }
  };

  walk(tree, 0);
  return lines;
};

export const parseTextareaToLines = (text: string): ListLine[] => {
  const rawLines = text.split(/\r?\n/);

  return rawLines.map((raw) => {
    let depth = 0;
    let i = 0;

    while (i < raw.length) {
      const ch = raw[i];
      if (ch === "\t") {
        depth += 1;
        i += 1;
      } else if (ch === " ") {
        let spaceCount = 0;
        while (i < raw.length && raw[i] === " ") {
          spaceCount += 1;
          i += 1;
        }
        depth += Math.floor(spaceCount / 2);
      } else {
        break;
      }
    }

    const textWithoutIndent = raw.slice(i);
    return {
      depth,
      text: textWithoutIndent,
    };
  });
};

export const stringifyLinesToTextarea = (lines: ListLine[]): string => {
  return lines
    .map((line) => {
      const indent = "  ".repeat(Math.max(0, Math.floor(line.depth)));
      return `${indent}${line.text}`;
    })
    .join("\n");
};

// 내부 재귀 유틸: siblings 배열과 targetId 를 받아 조작을 수행한다.
const withSiblings = (
  siblings: ListItemNode[],
  targetId: string,
  op: (args: {
    siblings: ListItemNode[];
    index: number;
    parentPath: ListItemNode[];
  }) => ListTreeOpResult,
  parentPath: ListItemNode[] = [],
): ListTreeOpResult => {
  for (let i = 0; i < siblings.length; i += 1) {
    const node = siblings[i];
    if (node.id === targetId) {
      return op({ siblings, index: i, parentPath });
    }
    if (node.children && node.children.length > 0) {
      const childResult = withSiblings(node.children, targetId, op, [...parentPath, node]);
      if (childResult.changed) {
        const cloned = siblings.map(cloneNode);
        const idx = cloned.findIndex((n) => n.id === node.id);
        if (idx >= 0) {
          cloned[idx].children = childResult.tree;
        }
        return { tree: cloned, changed: true };
      }
    }
  }
  return { tree: siblings, changed: false };
};

export const indentListItem = (tree: ListItemNode[], targetId: string): ListItemNode[] => {
  const { tree: next } = withSiblings(
    tree,
    targetId,
    ({ siblings, index }) => {
      // 첫 번째 아이템은 들여쓰기 불가
      if (index === 0) {
        return { tree: siblings, changed: false };
      }

      const prev = siblings[index - 1];
      const target = siblings[index];

      const newPrev: ListItemNode = cloneNode(prev);
      const newTarget: ListItemNode = cloneNode(target);
      const newSiblings = siblings.map(cloneNode);

      // siblings 에서 target 제거
      newSiblings.splice(index, 1);

      // prev 위치의 노드를 newPrev 로 교체
      const prevIndex = index - 1;
      const prevNode = newSiblings[prevIndex];
      const prevChildren = prevNode.children ? [...prevNode.children] : [];
      prevChildren.push(newTarget);
      newSiblings[prevIndex] = { ...newPrev, children: prevChildren };

      return { tree: newSiblings, changed: true };
    },
  );
  return next;
};

export const outdentListItem = (tree: ListItemNode[], targetId: string): ListItemNode[] => {
  // 부모의 children 에서 targetId 를 찾아 제거하고,
  // 부모가 속한 siblings 배열에서 부모 바로 다음 위치에 target 을 삽입한다.

  const liftFromChildren = (nodes: ListItemNode[]): ListTreeOpResult => {
    const clonedSiblings = nodes.map(cloneNode);

    for (let i = 0; i < clonedSiblings.length; i += 1) {
      const node = clonedSiblings[i];
      const children = node.children ?? [];

      // 1단계: 현재 node 의 children 에 target 이 있는지 확인한다.
      const childIndex = children.findIndex((c) => c.id === targetId);
      if (childIndex >= 0) {
        const child = children[childIndex];
        const newChildren = [...children];
        newChildren.splice(childIndex, 1);

        // 부모의 children 에서 target 제거
        clonedSiblings[i] = {
          ...node,
          children: newChildren,
        };

        // 부모 바로 뒤에 target 을 siblings 레벨로 삽입
        clonedSiblings.splice(i + 1, 0, cloneNode(child));

        return { tree: clonedSiblings, changed: true };
      }

      // 2단계: 더 깊은 레벨에서 검색한다.
      if (children.length > 0) {
        const childResult = liftFromChildren(children);
        if (childResult.changed) {
          clonedSiblings[i] = {
            ...node,
            children: childResult.tree,
          };
          return { tree: clonedSiblings, changed: true };
        }
      }
    }

    return { tree: nodes, changed: false };
  };

  const { tree: next } = liftFromChildren(tree);
  return next;
};

export const moveListItemUp = (tree: ListItemNode[], targetId: string): ListItemNode[] => {
  const { tree: next } = withSiblings(
    tree,
    targetId,
    ({ siblings, index }) => {
      if (index === 0) {
        return { tree: siblings, changed: false };
      }
      const cloned = siblings.map(cloneNode);
      const tmp = cloned[index - 1];
      cloned[index - 1] = cloned[index];
      cloned[index] = tmp;
      return { tree: cloned, changed: true };
    },
  );
  return next;
};

export const moveListItemDown = (tree: ListItemNode[], targetId: string): ListItemNode[] => {
  const { tree: next } = withSiblings(
    tree,
    targetId,
    ({ siblings, index }) => {
      if (index >= siblings.length - 1) {
        return { tree: siblings, changed: false };
      }
      const cloned = siblings.map(cloneNode);
      const tmp = cloned[index + 1];
      cloned[index + 1] = cloned[index];
      cloned[index] = tmp;
      return { tree: cloned, changed: true };
    },
  );
  return next;
};

// 리스트 블록 속성
export interface ListBlockProps {
  items: string[]; // 1단계 하위호환용 단순 배열
  itemsTree?: ListItemNode[]; // 중첩 리스트용 트리 구조
  ordered: boolean;
  align: "left" | "center" | "right";
  // 타이포/색상
  fontSizeCustom?: string;
  lineHeightCustom?: string;
  textColorCustom?: string;
  // 불릿/간격
  bulletStyle?:
    | "disc"
    | "circle"
    | "square"
    | "decimal"
    | "none"
    | "lower-alpha"
    | "upper-alpha"
    | "lower-roman"
    | "upper-roman";
  // 토큰 기반 간격(호환용)
  gapY?: "sm" | "md" | "lg";
  // 아이템 간 여백(px) 숫자 값
  gapYPx?: number;
}

// 섹션 블록 속성
export interface SectionBlockProps {
  background: "default" | "muted" | "primary";
  paddingY: "sm" | "md" | "lg";
  // px 단위 세로 패딩(있으면 토큰 대신 우선 적용)
  paddingYPx?: number;
  // 레이아웃 컬럼 정의 (12 그리드 기준 span)
  columns: Array<{
    id: string;
    span: number;
  }>;
  // 섹션 레이아웃 스타일
  maxWidthMode?: "narrow" | "normal" | "wide";
  // px 단위 최대 폭(있으면 토큰 기반 maxWidth 대신 우선 적용)
  maxWidthPx?: number;
  gapX?: "sm" | "md" | "lg";
  // px 단위 컬럼 간 간격(있으면 토큰 기반 gap 대신 우선 적용)
  gapXPx?: number;
  alignItems?: "top" | "center" | "bottom";
  backgroundColorCustom?: string;
}

// 폼 입력/셀렉트/체크박스/라디오 공통 스타일 속성
export interface FormFieldStyleProps {
  align?: "left" | "center" | "right";
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  fullWidth?: boolean;
  // 필드 너비 및 레이아웃
  widthMode?: "auto" | "full" | "fixed";
  widthPx?: number;
  paddingX?: number;
  paddingY?: number;
  optionGapPx?: number;
  labelGapPx?: number;
  labelLayout?: "stacked" | "inline";
  borderRadius?: "none" | "sm" | "md" | "lg" | "full";
  // 필드 텍스트 색상/타이포그라피
  fontSizeCustom?: string;
  lineHeightCustom?: string;
  letterSpacingCustom?: string;
  textColorCustom?: string;
  // 필드 배경/테두리 색상
  fillColorCustom?: string;
  strokeColorCustom?: string;
}

// 폼 입력 블록 속성
export type FormLabelMode = "text" | "image";

export interface FormInputBlockProps extends FormFieldStyleProps {
  label: string;
  formFieldName: string;
  required?: boolean;
  inputType?: "text" | "email" | "textarea";
  placeholder?: string;
  labelMode?: FormLabelMode;
  labelImageUrl?: string;
  labelImageAlt?: string;
}

// 폼 셀렉트 옵션/블록 속성
export interface FormSelectOption {
  label: string;
  value: string;
}

export interface FormSelectBlockProps extends FormFieldStyleProps {
  label: string;
  formFieldName: string;
  options: FormSelectOption[];
  required?: boolean;
  labelMode?: FormLabelMode;
  labelImageUrl?: string;
  labelImageAlt?: string;
}

// 폼 체크박스 옵션/블록 속성 (여러 체크박스를 한 그룹으로 표현)
export interface FormCheckboxOption {
  label: string;
  value: string;
  // 각 체크박스 옵션도 개별 이미지 라벨을 가질 수 있도록 확장한다.
  labelImageUrl?: string;
}

export interface FormCheckboxBlockProps extends FormFieldStyleProps {
  groupLabel: string;
  formFieldName: string;
  options: FormCheckboxOption[];
  required?: boolean;
  // 그룹 타이틀 자체도 텍스트/이미지 모드를 가질 수 있도록 분리한다.
  groupLabelMode?: FormLabelMode;
  groupLabelImageUrl?: string;
}

// 폼 라디오 그룹 옵션/블록 속성
export interface FormRadioOption {
  label: string;
  value: string;
  // 각 라디오 옵션도 개별 이미지 라벨을 가질 수 있도록 확장한다.
  labelImageUrl?: string;
}

export interface FormRadioBlockProps extends FormFieldStyleProps {
  groupLabel: string;
  formFieldName: string;
  options: FormRadioOption[];
  required?: boolean;
  // 라디오 그룹 타이틀의 텍스트/이미지 모드
  groupLabelMode?: FormLabelMode;
  groupLabelImageUrl?: string;
}

// 폼 필드 설정
export interface FormFieldConfig {
  id: string;
  name: string; // 실제 전송 키 (예: "email")
  label: string; // UI 라벨 (예: "이메일")
  type: "text" | "email" | "textarea";
  required?: boolean;
}

// 폼 블록 속성
export type FormSubmitTarget = "internal" | "webhook";
export type FormPayloadFormat = "form" | "json";

export interface FormBlockProps {
  kind: "contact";
  // 전송 대상: internal 또는 webhook(외부 URL, Google Sheets 포함)
  submitTarget: FormSubmitTarget;
  // 성공/실패 메시지
  successMessage?: string;
  errorMessage?: string;
  // webhook 설정 (Google Sheets 포함)
  destinationUrl?: string; // POST 보낼 URL
  method?: "POST" | "GET"; // 기본 POST
  // webhook 전송 포맷: 기본은 x-www-form-urlencoded(form).
  payloadFormat?: FormPayloadFormat;
  headers?: Record<string, string>; // Authorization 등
  extraParams?: Record<string, string>; // 항상 함께 보내는 추가 파라미터(formId 등)
  // 폼 필드 목록
  fields?: FormFieldConfig[];
  // v2 컨트롤러: 개별 폼 요소 블록과 제출 버튼을 연결하기 위한 ID 목록
  fieldIds?: string[];
  submitButtonId?: string | null;
  // 폼 레이아웃
  formWidthMode?: "auto" | "full" | "fixed";
  formWidthPx?: number;
  marginYPx?: number;
}

// 공통 블록 모델
export interface Block {
  id: string;
  type: BlockType;
  props:
    | TextBlockProps
    | ButtonBlockProps
    | ImageBlockProps
    | SectionBlockProps
    | DividerBlockProps
    | ListBlockProps
    | FormBlockProps
    | FormInputBlockProps
    | FormSelectBlockProps
    | FormCheckboxBlockProps
    | FormRadioBlockProps;
  // 레이아웃 트리 상 위치 정보 (루트 텍스트/버튼/이미지 블록은 null)
  sectionId?: string | null;
  columnId?: string | null;
}

// 에디터 상태 인터페이스
export interface EditorState {
  blocks: Block[];
  selectedBlockId: string | null;
  selectedListItemId?: string | null;
  history: Block[][];
  future: Block[][];
  addTextBlock: () => void;
  addButtonBlock: () => void;
  addImageBlock: () => void;
  addDividerBlock: () => void;
  addListBlock: () => void;
  addSectionBlock: () => void;
  addFormBlock: () => void;
  addFormInputBlock: () => void;
  addFormSelectBlock: () => void;
  addFormCheckboxBlock: () => void;
  addFormRadioBlock: () => void;
  addHeroTemplateSection: () => void;
  addFeaturesTemplateSection: () => void;
  addCtaTemplateSection: () => void;
  addFaqTemplateSection: () => void;
  addPricingTemplateSection: () => void;
  addTestimonialsTemplateSection: () => void;
  addBlogTemplateSection: () => void;
  addTeamTemplateSection: () => void;
  addFooterTemplateSection: () => void;
  selectListItem: (itemId: string | null) => void;
  indentSelectedListItem: (blockId: string) => void;
  outdentSelectedListItem: (blockId: string) => void;
  moveSelectedListItemUp: (blockId: string) => void;
  moveSelectedListItemDown: (blockId: string) => void;
  updateBlock: (
    id: string,
    partial:
      | Partial<TextBlockProps>
      | Partial<ButtonBlockProps>
      | Partial<FormBlockProps>
      | Partial<FormInputBlockProps>
      | Partial<FormSelectBlockProps>
      | Partial<FormCheckboxBlockProps>
      | Partial<FormRadioBlockProps>,
  ) => void;
  selectBlock: (id: string | null) => void;
  replaceBlocks: (blocks: Block[]) => void;
  reorderBlocks: (activeId: string, overId: string) => void;
  moveBlock: (id: string, sectionId: string | null, columnId: string | null) => void;
  undo: () => void;
  redo: () => void;
  removeBlock: (id: string) => void;
  duplicateBlock: (id: string) => void;
}

// 간단한 ID 생성기 (추후 uuid 라이브러리로 교체 가능)
let idCounter = 0;
const createId = () => `blk_${Date.now()}_${idCounter++}`;

const getNextFormFieldName = (blocks: Block[], prefix: string): string => {
  const regex = new RegExp(`^${prefix}-(\\d+)$`);
  let max = 0;

  for (const b of blocks) {
    const anyProps: any = b.props;
    const name = anyProps?.formFieldName;
    if (typeof name !== "string") continue;
    const match = name.match(regex);
    if (!match) continue;
    const n = Number(match[1] ?? 0);
    if (!Number.isNaN(n) && n > max) {
      max = n;
    }
  }

  return `${prefix}-${max + 1}`;
};

// 에디터 스토어 생성 함수 (테스트 및 앱에서 공유 사용)
// set/get 은 zustand 내부 구현에 의해 주입되므로, 여기서는 any 로 완화해 사용한다.
const createEditorState = (set: any, get: any): EditorState => ({
  blocks: [],
  selectedBlockId: null,
  selectedListItemId: null,
  history: [],
  future: [],

  // 텍스트 블록 추가: 기본 텍스트와 함께 생성 후 선택 상태로 만든다
  addTextBlock: () => {
    const id = createId();

    const { selectedBlockId, blocks } = get();
    let sectionId: string | null = null;
    let columnId: string | null = null;

    if (selectedBlockId) {
      const target = blocks.find((b: Block) => b.id === selectedBlockId);
      if (target) {
        if (target.type === "section") {
          const sProps = target.props as SectionBlockProps;
          sectionId = target.id;
          columnId = sProps.columns?.[0]?.id ?? null;
        } else {
          sectionId = (target as any).sectionId ?? null;
          columnId = (target as any).columnId ?? null;
        }
      }
    }

    const newBlock: Block = {
      id,
      type: "text",
      props: {
        text: "새 텍스트",
        align: "left",
        size: "base",
      },
      sectionId,
      columnId,
    };

    set((state: EditorState) => ({
      blocks: [...state.blocks, newBlock],
      selectedBlockId: id,
      history: [...state.history, blocks],
      future: [],
    }));
  },

    // Hero 템플릿 섹션 추가: 섹션 1개와 기본 텍스트/버튼 블록들을 첫 컬럼에 배치한다
    addHeroTemplateSection: () => {
      const sectionId = createId();
      const { blocks: templateBlocks, lastSelectedId } = createHeroTemplateBlocks({
        sectionId,
        createId,
      });

      set((state: EditorState) => {
        const newBlocks = [...state.blocks, ...templateBlocks];

        return {
          blocks: newBlocks,
          selectedBlockId: lastSelectedId,
        };
      });
    },

    // 리스트 아이템 선택 상태를 업데이트한다.
    selectListItem: (itemId) => {
      set({ selectedListItemId: itemId ?? null });
    },

    // Features 템플릿 섹션 추가: 3컬럼(4/4/4) 섹션과 각 컬럼의 제목/설명 텍스트를 생성한다
    addFeaturesTemplateSection: () => {
      const sectionId = createId();
      const { blocks: templateBlocks, lastSelectedId } = createFeaturesTemplateBlocks({
        sectionId,
        createId,
      });

      set((state: EditorState) => {
        const newBlocks = [...state.blocks, ...templateBlocks];

        return {
          blocks: newBlocks,
          selectedBlockId: lastSelectedId,
        };
      });
    },

    // Blog 템플릿 섹션 추가: 3컬럼 포스트 카드(제목/요약)를 생성한다
    addBlogTemplateSection: () => {
      const sectionId = createId();
      const { blocks: templateBlocks, lastSelectedId } = createBlogTemplateBlocks({
        sectionId,
        createId,
      });

      set((state: EditorState) => {
        const newBlocks = [...state.blocks, ...templateBlocks];

        return {
          blocks: newBlocks,
          selectedBlockId: lastSelectedId,
        };
      });
    },

    // Team 템플릿 섹션 추가: 3컬럼 팀 카드(이름/역할/소개)를 생성한다
    addTeamTemplateSection: () => {
      const sectionId = createId();
      const { blocks: templateBlocks, lastSelectedId } = createTeamTemplateBlocks({
        sectionId,
        createId,
      });

      set((state: EditorState) => {
        const newBlocks = [...state.blocks, ...templateBlocks];

        return {
          blocks: newBlocks,
          selectedBlockId: lastSelectedId,
        };
      });
    },

    // Footer 템플릿 섹션 추가: 링크/카피라이트 텍스트가 포함된 1컬럼 섹션을 생성한다
    addFooterTemplateSection: () => {
      const sectionId = createId();
      const { blocks: templateBlocks, lastSelectedId } = createFooterTemplateBlocks({
        sectionId,
        createId,
      });

      set((state: EditorState) => {
        const newBlocks = [...state.blocks, ...templateBlocks];

        return {
          blocks: newBlocks,
          selectedBlockId: lastSelectedId,
        };
      });
    },

    // CTA 템플릿 섹션 추가: 텍스트와 버튼이 포함된 1컬럼 섹션을 생성한다
    addCtaTemplateSection: () => {
      const sectionId = createId();
      const { blocks: templateBlocks, lastSelectedId } = createCtaTemplateBlocks({
        sectionId,
        createId,
      });

      set((state: EditorState) => {
        const newBlocks = [...state.blocks, ...templateBlocks];

        return {
          blocks: newBlocks,
          selectedBlockId: lastSelectedId,
        };
      });
    },

    // FAQ 템플릿 섹션 추가: 질문/답변 쌍이 수직으로 나열된 섹션을 생성한다
    addFaqTemplateSection: () => {
      const sectionId = createId();

      const { blocks: templateBlocks, lastSelectedId } = createFaqTemplateBlocks({
        sectionId,
        createId,
      });

      set((state: EditorState) => {
        const newBlocks = [...state.blocks, ...templateBlocks];

        return {
          blocks: newBlocks,
          selectedBlockId: lastSelectedId,
        };
      });
    },

    // Pricing 템플릿 섹션 추가: 3컬럼 요금제 카드(플랜 이름/가격/설명)를 생성한다
    addPricingTemplateSection: () => {
      const sectionId = createId();

      const { blocks: templateBlocks, lastSelectedId } = createPricingTemplateBlocks({
        sectionId,
        createId,
      });

      set((state: EditorState) => {
        const newBlocks = [...state.blocks, ...templateBlocks];

        return {
          blocks: newBlocks,
          selectedBlockId: lastSelectedId,
        };
      });
    },

    // Testimonials 템플릿 섹션 추가: 3컬럼 후기 카드(본문/작성자)를 생성한다
    addTestimonialsTemplateSection: () => {
      const sectionId = createId();

      const { blocks: templateBlocks, lastSelectedId } = createTestimonialsTemplateBlocks({
        sectionId,
        createId,
      });

      set((state: EditorState) => {
        const newBlocks = [...state.blocks, ...templateBlocks];

        return {
          blocks: newBlocks,
          selectedBlockId: lastSelectedId,
        };
      });
    },

    // 이미지 블록 추가: 기본 플레이스홀더와 스타일 기본값과 함께 생성 후 선택 상태로 만든다
    addImageBlock: () => {
      const id = createId();

      const { selectedBlockId, blocks } = get();
      let sectionId: string | null = null;
      let columnId: string | null = null;

      if (selectedBlockId) {
        const target = blocks.find((b: Block) => b.id === selectedBlockId);
        if (target) {
          if (target.type === "section") {
            const sProps = target.props as SectionBlockProps;
            sectionId = target.id;
            columnId = sProps.columns?.[0]?.id ?? null;
          } else {
            sectionId = (target as any).sectionId ?? null;
            columnId = (target as any).columnId ?? null;
          }
        }
      }

      const newBlock: Block = {
        id,
        type: "image",
        props: {
          src: "",
          alt: "이미지 설명",
          align: "center",
          widthMode: "auto",
          borderRadius: "md",
        },
        sectionId,
        columnId,
      };

      set((state: EditorState) => ({
        blocks: [...state.blocks, newBlock],
        selectedBlockId: id,
      }));
    },

    // 폼 입력 블록 추가: 루트에 기본 label/formFieldName 과 함께 생성 후 선택 상태로 만든다
    addFormInputBlock: () => {
      const id = createId();
      const { blocks } = get();

      const label = "입력 필드";
      const formFieldName = getNextFormFieldName(blocks, "text");

      const newBlock: Block = {
        id,
        type: "formInput",
        props: {
          label,
          formFieldName,
          required: false,
          inputType: "text",
          placeholder: "",
          labelMode: "text",
          borderRadius: "md",
          fillColorCustom: "",
          strokeColorCustom: "",
          textColorCustom: "",
          widthMode: "full",
          paddingX: 12,
          paddingY: 10,
          optionGapPx: 4,
          labelLayout: "stacked",
          labelGapPx: 8,
        },
        sectionId: null,
        columnId: null,
      };

      set((state: EditorState) => ({
        blocks: [...state.blocks, newBlock],
        selectedBlockId: id,
      }));
    },

    // 폼 셀렉트 블록 추가: 루트에 기본 label/formFieldName/options 와 함께 생성 후 선택 상태로 만든다
    addFormSelectBlock: () => {
      const id = createId();
      const { blocks } = get();

      const label = "선택 필드";
      const formFieldName = getNextFormFieldName(blocks, "select");
      const options: FormSelectOption[] = [
        { label: "옵션 1", value: "option_1" },
        { label: "옵션 2", value: "option_2" },
      ];

      const newBlock: Block = {
        id,
        type: "formSelect",
        props: {
          label,
          formFieldName,
          options,
          required: false,
          labelMode: "text",
          borderRadius: "md",
          fillColorCustom: "",
          strokeColorCustom: "",
          textColorCustom: "",
          widthMode: "full",
          paddingX: 12,
          paddingY: 10,
          labelLayout: "stacked",
          labelGapPx: 8,
        },
        sectionId: null,
        columnId: null,
      };

      set((state: EditorState) => ({
        blocks: [...state.blocks, newBlock],
        selectedBlockId: id,
      }));
    },

    // 폼 체크박스 블록 추가: 루트에 기본 groupLabel/formFieldName/options 와 함께 생성 후 선택 상태로 만든다
    addFormCheckboxBlock: () => {
      const id = createId();
      const { blocks } = get();

      const groupLabel = "체크박스";
      const formFieldName = getNextFormFieldName(blocks, "checkbox");
      const options: FormCheckboxOption[] = [
        { label: "체크 1", value: "check_1" },
        { label: "체크 2", value: "check_2" },
      ];

      const newBlock: Block = {
        id,
        type: "formCheckbox",
        props: {
          groupLabel,
          formFieldName,
          options,
          required: false,
          groupLabelMode: "text",
          borderRadius: "md",
          fillColorCustom: "",
          strokeColorCustom: "",
          textColorCustom: "",
          widthMode: "full",
          paddingX: 12,
          paddingY: 10,
          optionGapPx: 4,
          labelLayout: "stacked",
          labelGapPx: 8,
        },
        sectionId: null,
        columnId: null,
      };

      set((state: EditorState) => ({
        blocks: [...state.blocks, newBlock],
        selectedBlockId: id,
      }));
    },

    // 폼 라디오 그룹 블록 추가: 루트에 기본 groupLabel/formFieldName/options 와 함께 생성 후 선택 상태로 만든다
    addFormRadioBlock: () => {
      const id = createId();
      const { blocks } = get();

      const groupLabel = "라디오 그룹";
      const formFieldName = getNextFormFieldName(blocks, "radio");
      const options: FormRadioOption[] = [
        { label: "옵션 A", value: "option_a" },
        { label: "옵션 B", value: "option_b" },
      ];

      const newBlock: Block = {
        id,
        type: "formRadio",
        props: {
          groupLabel,
          formFieldName,
          options,
          required: false,
          groupLabelMode: "text",
          borderRadius: "md",
          fillColorCustom: "",
          strokeColorCustom: "",
          textColorCustom: "",
          widthMode: "full",
          paddingX: 12,
          paddingY: 10,
          optionGapPx: 4,
          labelLayout: "stacked",
          labelGapPx: 8,
        },
        sectionId: null,
        columnId: null,
      };

      set((state: EditorState) => ({
        blocks: [...state.blocks, newBlock],
        selectedBlockId: id,
      }));
    },

    // 구분선 블록 추가: 기본 정렬/두께와 함께 생성 후 선택 상태로 만든다
    addDividerBlock: () => {
      const id = createId();

      const { selectedBlockId, blocks } = get();
      let sectionId: string | null = null;
      let columnId: string | null = null;

      if (selectedBlockId) {
        const target = blocks.find((b: Block) => b.id === selectedBlockId);
        if (target) {
          if (target.type === "section") {
            const sProps = target.props as SectionBlockProps;
            sectionId = target.id;
            columnId = sProps.columns?.[0]?.id ?? null;
          } else {
            sectionId = (target as any).sectionId ?? null;
            columnId = (target as any).columnId ?? null;
          }
        }
      }

      const newBlock: Block = {
        id,
        type: "divider",
        props: {
          align: "center",
          thickness: "thin",
          colorHex: "#475569",
        },
        sectionId,
        columnId,
      };

      set((state: EditorState) => ({
        blocks: [...state.blocks, newBlock],
        selectedBlockId: id,
      }));
    },

    // 리스트 블록 추가: 기본 항목/정렬과 함께 생성 후 선택 상태로 만든다
    addListBlock: () => {
      const id = createId();

      const { selectedBlockId, blocks } = get();
      let sectionId: string | null = null;
      let columnId: string | null = null;

      if (selectedBlockId) {
        const target = blocks.find((b: Block) => b.id === selectedBlockId);
        if (target) {
          if (target.type === "section") {
            const sProps = target.props as SectionBlockProps;
            sectionId = target.id;
            columnId = sProps.columns?.[0]?.id ?? null;
          } else {
            sectionId = (target as any).sectionId ?? null;
            columnId = (target as any).columnId ?? null;
          }
        }
      }

      const newBlock: Block = {
        id,
        type: "list",
        props: {
          items: ["리스트 아이템 1"],
          itemsTree: [
            {
              id: `${id}_item_1`,
              text: "리스트 아이템 1",
              children: [],
            },
          ],
          ordered: false,
          align: "left",
        },
        sectionId,
        columnId,
      };

      set((state: EditorState) => ({
        blocks: [...state.blocks, newBlock],
        selectedBlockId: id,
      }));
    },

    // 섹션 블록 추가: 배경/패딩 기본값과 함께 생성 후 선택 상태로 만든다
    addSectionBlock: () => {
      const id = createId();
      const newBlock: Block = {
        id,
        type: "section",
        props: {
          background: "default",
          paddingY: "md",
          columns: [
            {
              id: `${id}_col_1`,
              span: 12,
            },
          ],
        },
        sectionId: null,
        columnId: null,
      };

      set((state: EditorState) => ({
        blocks: [...state.blocks, newBlock],
        selectedBlockId: id,
      }));
    },

    // 폼 블록 추가: 기본 contact 폼 설정과 함께 생성 후 선택 상태로 만든다
    addFormBlock: () => {
      const id = createId();

      const fields: FormFieldConfig[] = [
        {
          id: `${id}_field_name`,
          name: "name",
          label: "이름",
          type: "text",
          required: true,
        },
        {
          id: `${id}_field_email`,
          name: "email",
          label: "이메일",
          type: "email",
          required: true,
        },
        {
          id: `${id}_field_message`,
          name: "message",
          label: "메시지",
          type: "textarea",
          required: true,
        },
      ];

      const newBlock: Block = {
        id,
        type: "form",
        props: {
          kind: "contact",
          submitTarget: "internal",
          successMessage: "성공적으로 전송되었습니다.",
          errorMessage: "전송 중 오류가 발생했습니다.",
          fields,
          fieldIds: [],
          submitButtonId: null,
        },
        sectionId: null,
        columnId: null,
      };

      set((state: EditorState) => ({
        blocks: [...state.blocks, newBlock],
        selectedBlockId: id,
      }));
    },

    // 버튼 블록 추가: 기본 라벨/링크와 함께 생성 후 선택 상태로 만든다
    addButtonBlock: () => {
      const id = createId();

      const { selectedBlockId, blocks } = get();
      let sectionId: string | null = null;
      let columnId: string | null = null;

      if (selectedBlockId) {
        const target = blocks.find((b: Block) => b.id === selectedBlockId);
        if (target) {
          if (target.type === "section") {
            const sProps = target.props as SectionBlockProps;
            sectionId = target.id;
            columnId = sProps.columns?.[0]?.id ?? null;
          } else {
            sectionId = (target as any).sectionId ?? null;
            columnId = (target as any).columnId ?? null;
          }
        }
      }
      const newBlock: Block = {
        id,
        type: "button",
        props: {
          label: "버튼",
          href: "#",
          align: "left",
          size: "md",
          variant: "solid",
          colorPalette: "primary",
          fullWidth: false,
          widthMode: "auto",
          widthPx: 240,
          borderRadius: "md",
          paddingX: 16,
          paddingY: 10,
          fontSizeCustom: "14px",
          // 기본 primary/solid 버튼 색상과 동일한 커스텀 색상 값을 사용해
          // 에디터/프리뷰/속성 패널이 모두 같은 색상을 공유하도록 한다.
          textColorCustom: "#0b1120",
          fillColorCustom: "#0ea5e9",
          strokeColorCustom: "#0284c7",
        },
        sectionId,
        columnId,
      };

      set((state: EditorState) => ({
        blocks: [...state.blocks, newBlock],
        selectedBlockId: id,
      }));
    },

    // 특정 블록의 속성을 부분 업데이트 (텍스트/버튼 공통 사용)
    updateBlock: (id, partial) => {
      set((state: EditorState) => ({
        blocks: state.blocks.map((block: Block) =>
          block.id === id
            ? {
                ...block,
                props: { ...(block.props as any), ...(partial as any) },
              }
            : block,
        ),
      }));
    },

    // 선택된 리스트 아이템을 들여쓰기한다.
    indentSelectedListItem: (blockId) => {
      const { blocks, selectedListItemId } = get();
      if (!selectedListItemId) return;

      const target = blocks.find((b: Block) => b.id === blockId && b.type === "list");
      if (!target) return;

      const listProps = target.props as ListBlockProps & { itemsTree?: ListItemNode[] };
      const currentTree: ListItemNode[] =
        (listProps.itemsTree as ListItemNode[] | undefined) && listProps.itemsTree!.length > 0
          ? (listProps.itemsTree as ListItemNode[])
          : [];

      const nextTree = indentListItem(currentTree, selectedListItemId);

      set((state: EditorState) => ({
        blocks: state.blocks.map((block: Block) =>
          block.id === blockId
            ? {
                ...block,
                props: {
                  ...(block.props as any),
                  itemsTree: nextTree,
                },
              }
            : block,
        ),
      }));
    },

    // 선택된 리스트 아이템을 부모의 다음 형제로 내어쓰기한다.
    outdentSelectedListItem: (blockId) => {
      const { blocks, selectedListItemId } = get();
      if (!selectedListItemId) return;

      const target = blocks.find((b: Block) => b.id === blockId && b.type === "list");
      if (!target) return;

      const listProps = target.props as ListBlockProps & { itemsTree?: ListItemNode[] };
      const currentTree: ListItemNode[] =
        (listProps.itemsTree as ListItemNode[] | undefined) && listProps.itemsTree!.length > 0
          ? (listProps.itemsTree as ListItemNode[])
          : [];

      const nextTree = outdentListItem(currentTree, selectedListItemId);

      set((state: EditorState) => ({
        blocks: state.blocks.map((block: Block) =>
          block.id === blockId
            ? {
                ...block,
                props: {
                  ...(block.props as any),
                  itemsTree: nextTree,
                },
              }
            : block,
        ),
      }));
    },

    // 선택된 리스트 아이템을 같은 레벨에서 한 칸 위로 이동시킨다.
    moveSelectedListItemUp: (blockId) => {
      const { blocks, selectedListItemId } = get();
      if (!selectedListItemId) return;

      const target = blocks.find((b: Block) => b.id === blockId && b.type === "list");
      if (!target) return;

      const listProps = target.props as ListBlockProps & { itemsTree?: ListItemNode[] };
      const currentTree: ListItemNode[] =
        (listProps.itemsTree as ListItemNode[] | undefined) && listProps.itemsTree!.length > 0
          ? (listProps.itemsTree as ListItemNode[])
          : [];

      const nextTree = moveListItemUp(currentTree, selectedListItemId);

      set((state: EditorState) => ({
        blocks: state.blocks.map((block: Block) =>
          block.id === blockId
            ? {
                ...block,
                props: {
                  ...(block.props as any),
                  itemsTree: nextTree,
                },
              }
            : block,
        ),
      }));
    },

    // 선택된 리스트 아이템을 같은 레벨에서 한 칸 아래로 이동시킨다.
    moveSelectedListItemDown: (blockId) => {
      const { blocks, selectedListItemId } = get();
      if (!selectedListItemId) return;

      const target = blocks.find((b: Block) => b.id === blockId && b.type === "list");
      if (!target) return;

      const listProps = target.props as ListBlockProps & { itemsTree?: ListItemNode[] };
      const currentTree: ListItemNode[] =
        (listProps.itemsTree as ListItemNode[] | undefined) && listProps.itemsTree!.length > 0
          ? (listProps.itemsTree as ListItemNode[])
          : [];

      const nextTree = moveListItemDown(currentTree, selectedListItemId);

      set((state: EditorState) => ({
        blocks: state.blocks.map((block: Block) =>
          block.id === blockId
            ? {
                ...block,
                props: {
                  ...(block.props as any),
                  itemsTree: nextTree,
                },
              }
            : block,
        ),
      }));
    },

    // 선택된 블록 ID를 변경
    selectBlock: (id) => {
      const { blocks } = get();
      // 존재하지 않는 ID를 선택하려고 할 경우, 그냥 null 로 초기화
      if (id && !blocks.some((b: Block) => b.id === id)) {
        set({ selectedBlockId: null });
        return;
      }
      set({ selectedBlockId: id });
    },

    replaceBlocks: (blocks) => {
      set({
        blocks,
        selectedBlockId: blocks.length > 0 ? blocks[0].id : null,
      });
    },

    reorderBlocks: (activeId, overId) => {
      set((state: EditorState) => {
        const current = state.blocks;
        const oldIndex = current.findIndex((b: Block) => b.id === activeId);
        const newIndex = current.findIndex((b: Block) => b.id === overId);

        if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) {
          return { blocks: current };
        }

        const updated = [...current];
        const [moved] = updated.splice(oldIndex, 1);
        updated.splice(newIndex, 0, moved);

        return { blocks: updated };
      });
    },
    moveBlock: (id, sectionId, columnId) => {
      set((state: EditorState) => ({
        blocks: state.blocks.map((block: Block) =>
          block.id === id
            ? {
                ...block,
                sectionId,
                columnId,
              }
            : block,
        ),
      }));
    },
    removeBlock: (id) => {
      set((state: EditorState) => {
        const current = state.blocks;
        const index = current.findIndex((b) => b.id === id);
        if (index === -1) {
          return state;
        }
        const target = current[index];

        let nextBlocks: Block[];
        if (target.type === "section") {
          // 섹션 블록이 삭제될 때는 해당 섹션 안에 속한 자식 블록들도 함께 제거한다.
          nextBlocks = current.filter((b) => b.id !== id && b.sectionId !== id);
        } else {
          nextBlocks = current.filter((b) => b.id !== id);
        }

        // 선택 상태는 삭제된 블록의 이전 블록 또는 다음 블록으로 이동한다.
        let nextSelected: string | null = null;
        if (nextBlocks.length > 0) {
          const candidateIndex = Math.min(Math.max(index - 1, 0), nextBlocks.length - 1);
          nextSelected = nextBlocks[candidateIndex].id;
        }

        return {
          ...state,
          blocks: nextBlocks,
          selectedBlockId: nextSelected,
        };
      });
    },
    duplicateBlock: (id) => {
      set((state: EditorState) => {
        const current = state.blocks;
        const index = current.findIndex((b) => b.id === id);
        if (index === -1) {
          return state;
        }

        const original = current[index];
        const newId = createId();

        const cloned: Block = {
          ...original,
          id: newId,
          // props 는 얕은 복사로 충분 (현재 props 는 모두 평면 구조)
          props: { ...(original.props as any) },
        };

        const nextBlocks = [...current];
        nextBlocks.splice(index + 1, 0, cloned);

        return {
          ...state,
          blocks: nextBlocks,
          selectedBlockId: newId,
        };
      });
    },
    undo: () => {
      const { history, blocks } = get();
      if (history.length === 0) return;

      const previous = history[history.length - 1];
      const nextHistory = history.slice(0, -1);

      set((state: EditorState) => ({
        blocks: previous,
        selectedBlockId: previous.length > 0 ? previous[previous.length - 1].id : null,
        history: nextHistory,
        future: [...state.future, blocks],
      }));
    },
    redo: () => {
      const { future, blocks } = get();
      if (future.length === 0) return;

      const next = future[future.length - 1];
      const nextFuture = future.slice(0, -1);

      set((state: EditorState) => ({
        blocks: next,
        selectedBlockId: next.length > 0 ? next[next.length - 1].id : null,
        history: [...state.history, blocks],
        future: nextFuture,
      }));
    },
  });

// React 컴포넌트에서 사용하는 전역 훅 스토어
export const useEditorStore = create<EditorState>()(createEditorState);

// 테스트 등에서 독립적인 스토어 인스턴스를 만들 때 사용하는 팩토리
export const createEditorStore = () => createStore<EditorState>(createEditorState);