"use client";

import type { ListBlockProps } from "@/features/editor/state/editorStore";
import {
  buildItemsTreeFromItems,
  itemsTreeToLines,
  linesToItemsTree,
  parseTextareaToLines,
  stringifyLinesToTextarea,
} from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorListPanelMessages } from "@/features/i18n/messages/editorListPanel";

export type ListPropertiesPanelProps = {
  listProps: ListBlockProps;
  selectedBlockId: string;
  selectedListItemId: string | null;
  updateBlock: (id: string, partial: Partial<ListBlockProps>) => void;
};

export function ListPropertiesPanel({
  listProps,
  selectedBlockId,
  selectedListItemId,
  updateBlock,
}: ListPropertiesPanelProps) {
  const locale = useAppLocale();
  const m = getEditorListPanelMessages(locale);
  return (
    <>
      <div className="space-y-1">
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>{m.listItemsLabel}</span>
          <textarea
            className="w-full min-h-[80px] rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            aria-label={m.listItemsAria}
            value={(() => {
              const tree = (listProps as any).itemsTree as any[] | undefined;

              if (tree && tree.length > 0) {
                // 중첩 리스트가 존재하는 경우, itemsTree → ListLine → textarea 문자열 순으로 직렬화한다.
                const lines = itemsTreeToLines(tree as any);
                return stringifyLinesToTextarea(lines as any);
              }

              // 기존 하위호환: items 배열이 있다면 그대로 줄바꿈으로 이어 붙여 사용한다.
              return (listProps.items ?? []).join("\n");
            })()}
            onChange={(e) => {
              const textValue = e.target.value;

              // textarea 내용을 ListLine 배열로 파싱한다.
              const parsedLines = parseTextareaToLines(textValue);

              // 전체 입력이 완전히 비어 있는 경우에는 빈 리스트 상태를 유지한다.
              const hasAnyContent = parsedLines.some((line) => line.text.length > 0);

              if (!hasAnyContent) {
                updateBlock(
                  selectedBlockId,
                  {
                    items: [],
                    itemsTree: [],
                  } as any,
                );
                return;
              }

              // depth 기반 라인 모델에서 중첩 리스트 트리를 생성한다.
              const nextTree = linesToItemsTree(selectedBlockId, parsedLines as any);

              // 플랫 items 배열은 기존 하위호환을 위해 text 만 뽑아서 유지한다.
              const flatItems = parsedLines.map((line) => line.text);

              updateBlock(
                selectedBlockId,
                {
                  items: flatItems,
                  itemsTree: nextTree,
                } as any,
              );
            }}
          />
        </label>
      </div>
      <div className="flex items-center justify-between text-xs text-slate-400">
        <label className="flex items-center gap-2">
          <span>{m.alignLabel}</span>
          <select
            className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            aria-label={m.alignAria}
            value={listProps.align}
            onChange={(e) => {
              const value = e.target.value as ListBlockProps["align"];
              updateBlock(selectedBlockId, { align: value } as any);
            }}
          >
            <option value="left">{m.alignOptionLeft}</option>
            <option value="center">{m.alignOptionCenter}</option>
            <option value="right">{m.alignOptionRight}</option>
          </select>
        </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-800 dark:text-slate-200">{m.styleSectionTitle}</h4>

        {/* 글자 크기 */}
        <NumericPropertyControl
          label={m.fontSizeLabel}
          unitLabel={m.fontSizeUnitLabel}
          value={(() => {
            const raw = listProps.fontSizeCustom ?? "";
            const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
            if (match) return Number(match[1]);
            return 14;
          })()}
          min={10}
          max={32}
          step={1}
          presets={[
            { id: "sm", label: m.fontSizePresetSmall, value: 12 },
            { id: "md", label: m.fontSizePresetMedium, value: 14 },
            { id: "lg", label: m.fontSizePresetLarge, value: 18 },
          ]}
          onChangeValue={(px) => {
            updateBlock(selectedBlockId, { fontSizeCustom: `${px}px` } as any);
          }}
        />

        {/* 줄 간격 */}
        <NumericPropertyControl
          label={m.lineHeightLabel}
          value={(() => {
            const raw = listProps.lineHeightCustom ?? "";
            const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
            if (match) return Number(match[1]);
            return 1.5;
          })()}
          min={1}
          max={3}
          step={0.05}
          presets={[
            { id: "tight", label: m.lineHeightPresetTight, value: 1.2 },
            { id: "normal", label: m.lineHeightPresetNormal, value: 1.5 },
            { id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.8 },
          ]}
          onChangeValue={(v) => {
            updateBlock(selectedBlockId, { lineHeightCustom: v.toString() } as any);
          }}
        />

        {/* 텍스트 색상 */}
        <ColorPickerField
          label={m.textColorLabel}
          ariaLabelColorInput={m.textColorPickerAria}
          ariaLabelHexInput={m.textColorHexAria}
          // textColorCustom 이 비어 있으면 커스텀 색상을 사용하지 않고, "없음" 상태로 취급한다.
          // 이 경우 HEX 인풋은 빈 문자열을 유지하고, 팔레트 라벨은 "없음"으로 표시된다.
          value={
            listProps.textColorCustom && listProps.textColorCustom.trim() !== ""
              ? listProps.textColorCustom
              : ""
          }
          onChange={(hex) => {
            updateBlock(selectedBlockId, { textColorCustom: hex } as any);
          }}
          palette={TEXT_COLOR_PALETTE}
          onPaletteSelect={(item) => {
            updateBlock(selectedBlockId, { textColorCustom: item.color } as any);
          }}
        />

        <ColorPickerField
          label={m.backgroundColorLabel}
          ariaLabelColorInput={m.backgroundColorPickerAria}
          ariaLabelHexInput={m.backgroundColorHexAria}
          value={listProps.backgroundColorCustom ?? ""}
          onChange={(hex) => {
            updateBlock(selectedBlockId, { backgroundColorCustom: hex } as any);
          }}
          palette={TEXT_COLOR_PALETTE}
        />

        {/* 불릿 스타일 (● / ○ / ■ / 숫자형 / 없음) */}
        <label className="flex flex-col gap-1">
          <span>{m.bulletStyleLabel}</span>
          <select
            className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            aria-label={m.bulletStyleAria}
            value={listProps.bulletStyle ?? "disc"}
            onChange={(e) => {
              const value = e.target.value as NonNullable<ListBlockProps["bulletStyle"]>;

              // 순서형 스타일(decimal / alpha / roman)은 ordered=true, 나머지는 false 로 설정한다.
              const orderedStyles: Array<NonNullable<ListBlockProps["bulletStyle"]>> = [
                "decimal",
                "lower-alpha",
                "upper-alpha",
                "lower-roman",
                "upper-roman",
              ];
              const ordered = orderedStyles.includes(value);

              updateBlock(selectedBlockId, { bulletStyle: value, ordered } as any);
            }}
          >
            <option value="disc">{m.bulletStyleOptionDisc}</option>
            <option value="circle">{m.bulletStyleOptionCircle}</option>
            <option value="square">{m.bulletStyleOptionSquare}</option>
            <option value="decimal">{m.bulletStyleOptionDecimal}</option>
            <option value="lower-alpha">{m.bulletStyleOptionLowerAlpha}</option>
            <option value="upper-alpha">{m.bulletStyleOptionUpperAlpha}</option>
            <option value="lower-roman">{m.bulletStyleOptionLowerRoman}</option>
            <option value="upper-roman">{m.bulletStyleOptionUpperRoman}</option>
            <option value="none">{m.bulletStyleOptionNone}</option>
          </select>
        </label>

        {/* 아이템 간 여백 (슬라이더) */}
        <NumericPropertyControl
          label={m.gapLabel}
          unitLabel={m.gapUnitLabel}
          value={(() => {
            if (typeof listProps.gapYPx === "number") {
              return listProps.gapYPx;
            }
            const token = listProps.gapY ?? "md";
            return token === "sm" ? 4 : token === "lg" ? 16 : 8;
          })()}
          min={0}
          max={40}
          step={2}
          presets={[
            { id: "tight", label: m.gapPresetTight, value: 4 },
            { id: "normal", label: m.gapPresetNormal, value: 8 },
            { id: "relaxed", label: m.gapPresetRelaxed, value: 16 },
          ]}
          onChangeValue={(v) => {
            updateBlock(selectedBlockId, { gapYPx: v } as any);
          }}
        />
      </div>
    </>
  );
}
