"use client";

import type { ButtonBlockProps } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";

export type ButtonPropertiesPanelProps = {
  buttonProps: ButtonBlockProps;
  selectedBlockId: string;
  updateBlock: (id: string, partial: Partial<ButtonBlockProps>) => void;
};

export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBlock }: ButtonPropertiesPanelProps) {
  return (
    <>
      <div className="space-y-1">
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>버튼 텍스트</span>
          <textarea
            className="w-full min-h-[60px] rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
            aria-label="버튼 텍스트"
            value={buttonProps.label}
            onChange={(e) => {
              updateBlock(selectedBlockId, { label: e.target.value } as any);
            }}
          />
        </label>
      </div>
      <div className="space-y-1">
        <NumericPropertyControl
          label="가로 패딩 (px)"
          unitLabel="(px)"
          value={buttonProps.paddingX ?? 16}
          min={0}
          max={120}
          step={4}
          presets={[
            { id: "xs", label: "XS", value: 8 },
            { id: "sm", label: "S", value: 12 },
            { id: "md", label: "M", value: 16 },
            { id: "lg", label: "L", value: 24 },
            { id: "xl", label: "XL", value: 32 },
          ]}
          onChangeValue={(v) => {
            updateBlock(selectedBlockId, {
              paddingX: v,
            } as any);
          }}
        />
      </div>
      <div className="space-y-1">
        <NumericPropertyControl
          label="세로 패딩 (px)"
          unitLabel="(px)"
          value={buttonProps.paddingY ?? 10}
          min={0}
          max={80}
          step={2}
          presets={[
            { id: "xs", label: "XS", value: 6 },
            { id: "sm", label: "S", value: 8 },
            { id: "md", label: "M", value: 10 },
            { id: "lg", label: "L", value: 14 },
            { id: "xl", label: "XL", value: 20 },
          ]}
          onChangeValue={(v) => {
            updateBlock(selectedBlockId, {
              paddingY: v,
            } as any);
          }}
        />
      </div>
      <div className="space-y-1">
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>버튼 링크</span>
          <input
            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
            aria-label="버튼 링크"
            value={buttonProps.href}
            onChange={(e) => {
              updateBlock(selectedBlockId, { href: e.target.value } as any);
            }}
          />
        </label>
      </div>
      <div className="space-y-1">
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>정렬</span>
          <select
            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
            aria-label="버튼 정렬"
            value={buttonProps.align ?? "left"}
            onChange={(e) => {
              const value = e.target.value as NonNullable<ButtonBlockProps["align"]>;
              updateBlock(selectedBlockId, { align: value } as any);
            }}
          >
            <option value="left">왼쪽</option>
            <option value="center">가운데</option>
            <option value="right">오른쪽</option>
          </select>
        </label>
      </div>
      <div className="space-y-1">
        {/* 버튼 크기 스케일 컨트롤은 paddingX/paddingY 및 폰트 크기(px) 컨트롤로 충분하므로 제거했다. */}
      </div>
      <div className="space-y-1">
        <ColorPickerField
          label="텍스트 색상"
          ariaLabelColorInput="버튼 텍스트 색상 피커"
          ariaLabelHexInput="버튼 텍스트 색상 HEX"
          value={
            buttonProps.textColorCustom && buttonProps.textColorCustom.startsWith("#")
              ? buttonProps.textColorCustom
              : "#f9fafb"
          }
          onChange={(hex) => {
            updateBlock(selectedBlockId, {
              textColorCustom: hex,
            } as any);
          }}
          palette={TEXT_COLOR_PALETTE}
          onPaletteSelect={(item) => {
            updateBlock(selectedBlockId, {
              textColorCustom: item.color,
            } as any);
          }}
        />
      </div>
      <div className="space-y-1">
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>스타일</span>
          <select
            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
            aria-label="버튼 스타일"
            value={buttonProps.variant ?? "solid"}
            onChange={(e) => {
              const value = e.target.value as NonNullable<ButtonBlockProps["variant"]>;
              updateBlock(selectedBlockId, { variant: value } as any);
            }}
          >
            <option value="solid">채움</option>
            <option value="outline">외곽선</option>
            <option value="ghost">고스트</option>
          </select>
        </label>
      </div>
      <div className="space-y-1">
        <ColorPickerField
          label="채움 색상"
          ariaLabelColorInput="버튼 채움 색상 피커"
          ariaLabelHexInput="버튼 채움 색상 HEX"
          value={
            buttonProps.fillColorCustom && buttonProps.fillColorCustom.startsWith("#")
              ? buttonProps.fillColorCustom
              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
          }
          onChange={(hex) => {
            updateBlock(selectedBlockId, {
              fillColorCustom: hex,
            } as any);
          }}
          palette={TEXT_COLOR_PALETTE}
          onPaletteSelect={(item) => {
            updateBlock(selectedBlockId, {
              fillColorCustom: item.color,
            } as any);
          }}
        />
      </div>
      <div className="space-y-1">
        <ColorPickerField
          label="외곽선 색상"
          ariaLabelColorInput="버튼 외곽선 색상 피커"
          ariaLabelHexInput="버튼 외곽선 색상 HEX"
          value={
            buttonProps.strokeColorCustom && buttonProps.strokeColorCustom.startsWith("#")
              ? buttonProps.strokeColorCustom
              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
          }
          onChange={(hex) => {
            updateBlock(selectedBlockId, {
              strokeColorCustom: hex,
            } as any);
          }}
          palette={TEXT_COLOR_PALETTE}
          onPaletteSelect={(item) => {
            updateBlock(selectedBlockId, {
              strokeColorCustom: item.color,
            } as any);
          }}
        />
      </div>
      <div className="space-y-1">
        <NumericPropertyControl
          label="모서리 둥글기"
          value={(() => {
            const r = buttonProps.borderRadius ?? "md";
            return r === "none" ? 0 : r === "sm" ? 1 : r === "lg" ? 3 : r === "full" ? 4 : 2;
          })()}
          min={0}
          max={4}
          step={1}
          presets={[
            { id: "none", label: "없음", value: 0 },
            { id: "sm", label: "작게", value: 1 },
            { id: "md", label: "보통", value: 2 },
            { id: "lg", label: "크게", value: 3 },
            { id: "full", label: "완전 둥글게", value: 4 },
          ]}
          onChangeValue={(v) => {
            const next =
              v <= 0 ? "none" : v === 1 ? "sm" : v === 3 ? "lg" : v >= 4 ? "full" : "md";
            updateBlock(selectedBlockId, { borderRadius: next } as any);
          }}
        />
      </div>
      <div className="space-y-1">
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>버튼 너비 모드</span>
          <select
            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
            aria-label="버튼 너비 모드"
            value={buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")}
            onChange={(e) => {
              updateBlock(selectedBlockId, {
                widthMode: e.target.value as NonNullable<ButtonBlockProps["widthMode"]>,
              } as any);
            }}
          >
            <option value="auto">자동</option>
            <option value="full">전체 폭</option>
            <option value="fixed">고정 값</option>
          </select>
        </label>
        {(buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")) === "fixed" && (
          <NumericPropertyControl
            label="버튼 고정 너비"
            unitLabel="(px)"
            value={buttonProps.widthPx ?? 240}
            min={80}
            max={600}
            step={10}
            presets={[
              { id: "sm", label: "작게", value: 180 },
              { id: "md", label: "보통", value: 240 },
              { id: "lg", label: "넓게", value: 320 },
            ]}
            onChangeValue={(v) => {
              updateBlock(selectedBlockId, {
                widthPx: v,
              } as any);
            }}
          />
        )}
      </div>
      <div className="space-y-1">
        <NumericPropertyControl
          label="버튼 크기"
          unitLabel="(px)"
          value={(() => {
            const raw = buttonProps.fontSizeCustom ?? "";
            const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
            if (match) return Number(match[1]);
            // 기본 버튼 텍스트 크기: md 스케일(16px) 기준
            return 16;
          })()}
          min={10}
          max={32}
          step={1}
          presets={[
            { id: "xs", label: "XS", value: 12 },
            { id: "sm", label: "S", value: 14 },
            { id: "base", label: "M", value: 16 },
            { id: "lg", label: "L", value: 18 },
            { id: "xl", label: "XL", value: 20 },
            { id: "2xl", label: "2XL", value: 24 },
            { id: "3xl", label: "3XL", value: 30 },
          ]}
          onChangeValue={(px) => {
            // 버튼은 텍스트 스케일 상태 없이 px만 저장하지만,
            // 프리셋 값은 TextPropertiesPanel과 동일한 테이블을 사용한다.
            updateBlock(selectedBlockId, {
              fontSizeCustom: `${px}px`,
            } as any);
          }}
        />
      </div>
      <div className="space-y-1">
        <NumericPropertyControl
          label="줄 간격"
          value={(() => {
            const raw = buttonProps.lineHeightCustom ?? "";
            const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
            if (match) return Number(match[1]);
            return 1.4;
          })()}
          min={0.8}
          max={3}
          step={0.05}
          presets={[
            { id: "tight", label: "좁게", value: 1.1 },
            { id: "normal", label: "보통", value: 1.4 },
            { id: "relaxed", label: "넓게", value: 1.8 },
          ]}
          onChangeValue={(v) => {
            updateBlock(selectedBlockId, {
              lineHeightCustom: v.toString(),
            } as any);
          }}
        />
      </div>
      <div className="space-y-1">
        <NumericPropertyControl
          label="글자 간격"
          unitLabel="(px)"
          value={(() => {
            const raw = buttonProps.letterSpacingCustom ?? "";
            const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
            if (match) {
              const em = Number(match[1]);
              if (Number.isFinite(em)) return em * 16;
            }
            return 0;
          })()}
          min={-2}
          max={10}
          step={0.1}
          presets={[
            { id: "tighter", label: "아주 좁게", value: -1.5 },
            { id: "tight", label: "좁게", value: -0.5 },
            { id: "normal", label: "보통", value: 0 },
            { id: "wide", label: "넓게", value: 1 },
            { id: "wider", label: "아주 넓게", value: 2 },
          ]}
          onChangeValue={(px) => {
            const em = px / 16;
            updateBlock(selectedBlockId, {
              letterSpacingCustom: `${em}em`,
            } as any);
          }}
        />
      </div>
      <div className="space-y-1">
        <label className="flex items-center justify-between text-xs text-slate-400">
          <span>가로 전체 사용</span>
          <input
            type="checkbox"
            checked={buttonProps.fullWidth ?? false}
            onChange={(e) => {
              updateBlock(selectedBlockId, { fullWidth: e.target.checked } as any);
            }}
          />
        </label>
      </div>
    </>
  );
}
