"use client";

import { useCallback } from "react";
import { useEditorStore } from "@/features/editor/state/editorStore";

// 좌측 블록/폼/템플릿 추가 사이드바를 분리한 컴포넌트
export function BlocksSidebar() {
  const addTextBlock = useEditorStore((state) => state.addTextBlock);
  const addButtonBlock = useEditorStore((state) => state.addButtonBlock);
  const addImageBlock = useEditorStore((state) => state.addImageBlock);
  const addVideoBlock = useEditorStore((state) => (state as any).addVideoBlock);
  const addDividerBlock = useEditorStore((state) => state.addDividerBlock);
  const addListBlock = useEditorStore((state) => state.addListBlock);
  const addSectionBlock = useEditorStore((state) => state.addSectionBlock);

  const addFormBlock = useEditorStore((state) => state.addFormBlock);
  const addFormInputBlock = useEditorStore((state) => (state as any).addFormInputBlock);
  const addFormSelectBlock = useEditorStore((state) => (state as any).addFormSelectBlock);
  const addFormCheckboxBlock = useEditorStore((state) => (state as any).addFormCheckboxBlock);
  const addFormRadioBlock = useEditorStore((state) => (state as any).addFormRadioBlock);

  const addHeroTemplateSection = useEditorStore((state) => state.addHeroTemplateSection);
  const addFeaturesTemplateSection = useEditorStore((state) => state.addFeaturesTemplateSection);
  const addCtaTemplateSection = useEditorStore((state) => state.addCtaTemplateSection);
  const addFaqTemplateSection = useEditorStore((state) => state.addFaqTemplateSection);
  const addPricingTemplateSection = useEditorStore((state) => state.addPricingTemplateSection);
  const addTestimonialsTemplateSection = useEditorStore((state) => state.addTestimonialsTemplateSection);
  const addBlogTemplateSection = useEditorStore((state) => state.addBlogTemplateSection);
  const addTeamTemplateSection = useEditorStore((state) => state.addTeamTemplateSection);
  const addFooterTemplateSection = useEditorStore((state) => state.addFooterTemplateSection);

  // 버튼 핸들러를 useCallback으로 래핑해 불필요한 재생성을 줄인다.
  const handleAddText = useCallback(() => addTextBlock(), [addTextBlock]);
  const handleAddButton = useCallback(() => addButtonBlock(), [addButtonBlock]);
  const handleAddImage = useCallback(() => addImageBlock(), [addImageBlock]);
  const handleAddVideo = useCallback(() => addVideoBlock(), [addVideoBlock]);
  const handleAddDivider = useCallback(() => addDividerBlock(), [addDividerBlock]);
  const handleAddList = useCallback(() => addListBlock(), [addListBlock]);
  const handleAddSection = useCallback(() => addSectionBlock(), [addSectionBlock]);

  const handleAddFormBlock = useCallback(() => addFormBlock(), [addFormBlock]);
  const handleAddFormInput = useCallback(() => addFormInputBlock(), [addFormInputBlock]);
  const handleAddFormSelect = useCallback(() => addFormSelectBlock(), [addFormSelectBlock]);
  const handleAddFormRadio = useCallback(() => addFormRadioBlock(), [addFormRadioBlock]);
  const handleAddFormCheckbox = useCallback(() => addFormCheckboxBlock(), [addFormCheckboxBlock]);

  const handleAddHeroTemplate = useCallback(
    () => addHeroTemplateSection(),
    [addHeroTemplateSection],
  );
  const handleAddFeaturesTemplate = useCallback(
    () => addFeaturesTemplateSection(),
    [addFeaturesTemplateSection],
  );
  const handleAddCtaTemplate = useCallback(() => addCtaTemplateSection(), [addCtaTemplateSection]);
  const handleAddFaqTemplate = useCallback(() => addFaqTemplateSection(), [addFaqTemplateSection]);
  const handleAddPricingTemplate = useCallback(
    () => addPricingTemplateSection(),
    [addPricingTemplateSection],
  );
  const handleAddTestimonialsTemplate = useCallback(
    () => addTestimonialsTemplateSection(),
    [addTestimonialsTemplateSection],
  );
  const handleAddBlogTemplate = useCallback(() => addBlogTemplateSection(), [addBlogTemplateSection]);
  const handleAddTeamTemplate = useCallback(() => addTeamTemplateSection(), [addTeamTemplateSection]);
  const handleAddFooterTemplate = useCallback(
    () => addFooterTemplateSection(),
    [addFooterTemplateSection],
  );

  return (
    <aside className="w-60 border-r border-slate-800 p-4 text-sm space-y-3 overflow-y-auto pb-scroll">
      <h2 className="font-medium">블록</h2>
      <button
        type="button"
        className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
        onClick={handleAddText}
      >
        텍스트 블록 추가
      </button>
      <button
        type="button"
        className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
        onClick={handleAddButton}
      >
        버튼 블록 추가
      </button>
      <button
        type="button"
        className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
        onClick={handleAddImage}
      >
        이미지 블록 추가
      </button>
      <button
        type="button"
        className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
        onClick={handleAddVideo}
      >
        비디오 블록 추가
      </button>
      <button
        type="button"
        className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
        onClick={handleAddDivider}
      >
        구분선 블록 추가
      </button>
      <button
        type="button"
        className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
        onClick={handleAddList}
      >
        리스트 블록 추가
      </button>
      <button
        type="button"
        className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
        onClick={handleAddSection}
      >
        섹션 블록 추가
      </button>

      <div className="pt-3 border-t border-slate-800 mt-3 space-y-2">
        <h3 className="text-[11px] font-medium text-slate-300">폼 요소</h3>
        <button
          type="button"
          className="w-full rounded border border-emerald-700 bg-emerald-950 px-3 py-2 text-left text-xs text-emerald-100 hover:bg-emerald-900"
          onClick={handleAddFormBlock}
        >
          폼 블록 추가
        </button>
        <button
          type="button"
          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
          onClick={handleAddFormInput}
        >
          폼 입력 추가
        </button>
        <button
          type="button"
          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
          onClick={handleAddFormSelect}
        >
          폼 셀렉트 추가
        </button>
        <button
          type="button"
          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
          onClick={handleAddFormRadio}
        >
          폼 라디오 추가
        </button>
        <button
          type="button"
          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
          onClick={handleAddFormCheckbox}
        >
          폼 체크박스 추가
        </button>
      </div>

      <div className="pt-3 border-t border-slate-800 mt-3 space-y-3">
        <h3 className="text-[11px] font-medium text-slate-300">템플릿</h3>

        <div className="space-y-2">
          <p className="text-[10px] font-semibold text-slate-400">히어로 · CTA</p>
          <div className="space-y-2">
            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
              <div className="flex items-center justify-between gap-2">
                <button
                  type="button"
                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
                  onClick={handleAddHeroTemplate}
                >
                  Hero 템플릿 추가
                </button>
                <div
                  data-testid="template-preview-hero"
                  className="shrink-0 flex h-6 w-10 rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
                  <div className="flex h-full w-full flex-col items-center justify-center gap-[2px]">
                    <div className="h-[2px] w-3/4 bg-slate-700/70" />
                    <div className="h-[2px] w-1/2 bg-slate-700/50" />
                    <div className="h-2 w-4 rounded-[1px] bg-slate-700/70 mt-[1px]" />
                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">
                페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)
              </p>
            </div>

            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
              <div className="flex items-center justify-between gap-2">
                <button
                  type="button"
                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
                  onClick={handleAddCtaTemplate}
                >
                  CTA 템플릿 추가
                </button>
                <div
                  data-testid="template-preview-cta"
                  className="shrink-0 flex h-6 w-10 rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
                  <div className="flex h-full w-full items-center gap-[2px]">
                    <div className="flex-1 flex flex-col justify-center gap-[1px]">
                      <div className="h-[2px] w-full bg-slate-700/70" />
                      <div className="h-[2px] w-2/3 bg-slate-700/50" />
                    </div>
                    <div className="w-3 h-2 rounded-[1px] bg-slate-700/70" />
                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">콜투액션(CTA) 섹션</p>
            </div>
          </div>
        </div>

        <div className="space-y-2">
          <p className="text-[10px] font-semibold text-slate-400">콘텐츠 섹션</p>
          <div className="space-y-2">
            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
              <div className="flex items-center justify-between gap-2">
                <button
                  type="button"
                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
                  onClick={handleAddFeaturesTemplate}
                >
                  Features 템플릿 추가
                </button>
                <div
                  data-testid="template-preview-features"
                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
                  <div className="flex-1 flex flex-col gap-[1px]">
                    <div className="h-[2px] w-full bg-slate-700/70" />
                    <div className="h-[2px] w-full bg-slate-700/50" />
                  </div>
                  <div className="flex-1 flex flex-col gap-[1px]">
                    <div className="h-[2px] w-full bg-slate-700/70" />
                    <div className="h-[2px] w-full bg-slate-700/50" />
                  </div>
                  <div className="flex-1 flex flex-col gap-[1px]">
                    <div className="h-[2px] w-full bg-slate-700/70" />
                    <div className="h-[2px] w-full bg-slate-700/50" />
                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">3컬럼 기능 소개 섹션</p>
            </div>

            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
              <div className="flex items-center justify-between gap-2">
                <button
                  type="button"
                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
                  onClick={handleAddFaqTemplate}
                >
                  FAQ 템플릿 추가
                </button>
                <div
                  data-testid="template-preview-faq"
                  className="shrink-0 flex h-6 w-10 items-start gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
                  <div className="w-2 flex flex-col gap-[1px]">
                    <div className="h-[2px] w-full bg-slate-700/70" />
                  </div>
                  <div className="flex-1 flex flex-col gap-[2px]">
                    <div className="h-[1px] w-full bg-slate-700/50" />
                    <div className="h-[1px] w-full bg-slate-700/50" />
                    <div className="h-[1px] w-full bg-slate-700/50" />
                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">자주 묻는 질문(FAQ) 섹션</p>
            </div>

            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
              <div className="flex items-center justify-between gap-2">
                <button
                  type="button"
                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
                  onClick={handleAddPricingTemplate}
                >
                  Pricing 템플릿 추가
                </button>
                <div
                  data-testid="template-preview-pricing"
                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
                  <div className="flex-1 flex flex-col items-center justify-end gap-[1px] border border-slate-700/30 rounded-[1px]">
                    <div className="h-[1px] w-1/2 bg-slate-700/70" />
                    <div className="h-[1px] w-3/4 bg-slate-700/50" />
                  </div>
                  <div className="flex-1 flex flex-col items-center justify-end gap-[1px] border border-sky-700/50 bg-sky-900/20 rounded-[1px]">
                    <div className="h-[1px] w-1/2 bg-sky-500/70" />
                    <div className="h-[1px] w-3/4 bg-sky-500/50" />
                    <div className="h-[2px] w-3/4 bg-sky-500/70 mt-[1px] rounded-[1px]" />
                  </div>
                  <div className="flex-1 flex flex-col items-center justify-end gap-[1px] border border-slate-700/30 rounded-[1px]">
                    <div className="h-[1px] w-1/2 bg-slate-700/70" />
                    <div className="h-[1px] w-3/4 bg-slate-700/50" />
                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">요금제/플랜 소개 섹션</p>
            </div>

            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
              <div className="flex items-center justify-between gap-2">
                <button
                  type="button"
                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
                  onClick={handleAddBlogTemplate}
                >
                  Blog 템플릿 추가
                </button>
                <div
                  data-testid="template-preview-blog"
                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
                  <div className="flex-1 flex flex-col gap-[1px]">
                    <div className="h-2 w-full bg-slate-600/50 rounded-[1px]" />
                    <div className="h-[1px] w-full bg-slate-700/70" />
                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
                  </div>
                  <div className="flex-1 flex flex-col gap-[1px]">
                    <div className="h-2 w-full bg-slate-600/50 rounded-[1px]" />
                    <div className="h-[1px] w-full bg-slate-700/70" />
                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
                  </div>
                  <div className="flex-1 flex flex-col gap-[1px]">
                    <div className="h-2 w-full bg-slate-600/50 rounded-[1px]" />
                    <div className="h-[1px] w-full bg-slate-700/70" />
                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">블로그 포스트 목록 섹션</p>
            </div>
          </div>
        </div>

        <div className="space-y-2">
          <p className="text-[10px] font-semibold text-slate-400">신뢰/소개</p>
          <div className="space-y-2">
            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
              <div className="flex items-center justify-between gap-2">
                <button
                  type="button"
                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
                  onClick={handleAddTestimonialsTemplate}
                >
                  Testimonials 템플릿 추가
                </button>
                <div
                  data-testid="template-preview-testimonials"
                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
                  <div className="flex-1 flex flex-col justify-between border border-slate-700/30 rounded-[1px] p-[1px]">
                    <div className="h-[1px] w-full bg-slate-700/50" />
                    <div className="h-[1px] w-1/2 bg-slate-700/70" />
                  </div>
                  <div className="flex-1 flex flex-col justify-between border border-slate-700/30 rounded-[1px] p-[1px]">
                    <div className="h-[1px] w-full bg-slate-700/50" />
                    <div className="h-[1px] w-1/2 bg-slate-700/70" />
                  </div>
                  <div className="flex-1 flex flex-col justify-between border border-slate-700/30 rounded-[1px] p-[1px]">
                    <div className="h-[1px] w-full bg-slate-700/50" />
                    <div className="h-[1px] w-1/2 bg-slate-700/70" />
                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">고객 후기(Testimonials) 섹션</p>
            </div>

            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
              <div className="flex items-center justify-between gap-2">
                <button
                  type="button"
                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
                  onClick={handleAddTeamTemplate}
                >
                  Team 템플릿 추가
                </button>
                <div
                  data-testid="template-preview-team"
                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
                  <div className="flex-1 flex flex-col items-center gap-[1px]">
                    <div className="h-2 w-2 rounded-full bg-slate-600/80" />
                    <div className="h-[1px] w-full bg-slate-700/70" />
                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
                  </div>
                  <div className="flex-1 flex flex-col items-center gap-[1px]">
                    <div className="h-2 w-2 rounded-full bg-slate-600/80" />
                    <div className="h-[1px] w-full bg-slate-700/70" />
                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
                  </div>
                  <div className="flex-1 flex flex-col items-center gap-[1px]">
                    <div className="h-2 w-2 rounded-full bg-slate-600/80" />
                    <div className="h-[1px] w-full bg-slate-700/70" />
                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">팀 소개 섹션</p>
            </div>
          </div>
        </div>

        <div className="space-y-2">
          <p className="text-[10px] font-semibold text-slate-400">푸터/기타</p>
          <div className="space-y-2">
            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
              <div className="flex items-center justify-between gap-2">
                <button
                  type="button"
                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
                  onClick={handleAddFooterTemplate}
                >
                  Footer 템플릿 추가
                </button>
                <div
                  data-testid="template-preview-footer"
                  className="shrink-0 flex h-6 w-10 items-center justify-between gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
                  <div className="flex-1 h-[2px] bg-slate-700/70" />
                  <div className="flex-1 flex flex-col gap-[1px]">
                    <div className="h-[1px] w-full bg-slate-700/50" />
                    <div className="h-[1px] w-full bg-slate-700/50" />
                  </div>
                  <div className="flex-1 h-[1px] bg-slate-700/40" />
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">페이지 푸터 섹션</p>
            </div>
          </div>
        </div>
      </div>
    </aside>
  );
}
