"use client";

import type { ImageBlockProps } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";

export type ImagePropertiesPanelProps = {
  imageProps: ImageBlockProps;
  selectedBlockId: string;
  updateBlock: (id: string, partial: Partial<ImageBlockProps>) => void;
};

export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock }: ImagePropertiesPanelProps) {
  return (
    <>
      <div className="space-y-1">
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>이미지 URL</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="이미지 URL"
            value={imageProps.src}
            onChange={(e) => {
              updateBlock(selectedBlockId, { src: 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>
          <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={imageProps.alt}
            onChange={(e) => {
              updateBlock(selectedBlockId, { alt: e.target.value } as any);
            }}
          />
        </label>
      </div>

      <div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
        <h4 className="text-[11px] font-semibold text-slate-200">이미지 스타일</h4>

        {/* 정렬 */}
        <label className="flex flex-col gap-1">
          <span>정렬</span>
          <select
            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
            aria-label="이미지 정렬"
            value={imageProps.align ?? "center"}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
                align: e.target.value as ImageBlockProps["align"],
              } as any)
            }
          >
            <option value="left">왼쪽</option>
            <option value="center">가운데</option>
            <option value="right">오른쪽</option>
          </select>
        </label>

        {/* 너비 모드 */}
        <label className="flex flex-col gap-1">
          <span>너비 모드</span>
          <select
            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
            aria-label="이미지 너비 모드"
            value={imageProps.widthMode ?? "auto"}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
                widthMode: e.target.value as ImageBlockProps["widthMode"],
              } as any)
            }
          >
            <option value="auto">내용에 맞춤</option>
            <option value="fixed">고정 너비 (px)</option>
          </select>
        </label>

        {(imageProps.widthMode ?? "auto") === "fixed" && (
          <NumericPropertyControl
            label="고정 너비 (px)"
            unitLabel="(px)"
            value={imageProps.widthPx ?? 320}
            min={40}
            max={1200}
            step={10}
            presets={[
              { id: "sm", label: "작게", value: 240 },
              { id: "md", label: "보통", value: 320 },
              { id: "lg", label: "넓게", value: 480 },
            ]}
            onChangeValue={(v) => {
              updateBlock(selectedBlockId, {
                widthPx: v,
              } as any);
            }}
          />
        )}

        {/* 모서리 둥글기 */}
        <NumericPropertyControl
          label="모서리 둥글기"
          value={(() => {
            const r = imageProps.borderRadius ?? "md";
            return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4;
          })()}
          min={0}
          max={8}
          step={1}
          presets={[
            { id: "none", label: "없음", value: 0 },
            { id: "sm", label: "작게", value: 2 },
            { id: "md", label: "보통", value: 4 },
            { id: "lg", label: "크게", value: 6 },
            { id: "full", label: "완전 둥글게", value: 8 },
          ]}
          onChangeValue={(v) => {
            const next =
              v <= 0 ? "none" : v <= 2 ? "sm" : v <= 5 ? "md" : v <= 7 ? "lg" : "full";
            updateBlock(selectedBlockId, {
              borderRadius: next,
            } as any);
          }}
        />
      </div>
    </>
  );
}