invyone/frontend/components/v2/config-panels/InvLegacyTextConfigPanel.tsx

"use client";

/**
 * InvLegacyTextConfigPanel — 제목/텍스트 (v2-text-display) cp 톤 설정 패널
 *
 * 흐름:
 *   ① 표시 텍스트   — CPText
 *   ② 폰트          — 크기 (CPVisualGrid Aa preview) + 굵기 (CPVisualGrid 가나다 preview) + 직접 입력
 *   ③ 정렬          — CPVisualGrid (icon)
 *   ④ 색            — CPColor
 *   ▾ 고급 설정     — 배경색 / 패딩 / 모서리 / 테두리 + disabled (FeatureChipGrid)
 *
 * Reference: notes/gbpark/2026-04-28-cp-panel-standard.md
 */

import React from "react";
import { AlignLeft, AlignCenter, AlignRight } from "lucide-react";
import {
  CPSection,
  CPRow,
  CPGroup,
  CPText,
  CPColor,
  CPVisualGrid,
  FeatureChipGrid,
} from "./_shared/cp";
import { TextDisplayConfig } from "@/lib/registry/components/v2-text-display/types";

interface InvLegacyTextConfigPanelProps {
  config: TextDisplayConfig;
  onChange: (config: Partial<TextDisplayConfig>) => void;
}

export const InvLegacyTextConfigPanel: React.FC<InvLegacyTextConfigPanelProps> = ({ config, onChange }) => {
  const update = (field: keyof TextDisplayConfig, value: any) => {
    const next = { ...config, [field]: value };
    onChange({ [field]: value });
    if (typeof window !== "undefined") {
      window.dispatchEvent(
        new CustomEvent("componentConfigChanged", { detail: { config: next } }),
      );
    }
  };

  const fontSize = config.fontSize || "14px";
  const fontWeight = config.fontWeight || "normal";
  const textAlign = config.textAlign || "left";
  const color = config.color || "#212121";

  return (
    <div style={{ fontFamily: "var(--v5-font-sans)", color: "var(--cp-text)", padding: "0 12px" }}>
      {/* ── ① 표시 텍스트 ─────────────────────────── */}
      <CPSection title="① 표시 텍스트" desc="화면에 보일 텍스트">
        <CPRow label="텍스트">
          <CPText
            value={config.text || ""}
            onChange={(v) => update("text", v)}
            placeholder="표시할 텍스트를 입력하세요"
          />
        </CPRow>
      </CPSection>

      {/* ── ② 폰트 ─────────────────────────── */}
      <CPSection title="② 폰트" desc="크기와 굵기 선택">
        <CPRow label="크기" />
        <CPVisualGrid
          cols={4}
          value={fontSize}
          onChange={(v) => update("fontSize", v)}
          cardHeight={60}
          options={[
            {
              value: "12px",
              label: "작게",
              preview: <span style={{ fontSize: 12, fontWeight: 600 }}>Aa</span>,
            },
            {
              value: "14px",
              label: "보통",
              preview: <span style={{ fontSize: 14, fontWeight: 600 }}>Aa</span>,
            },
            {
              value: "18px",
              label: "크게",
              preview: <span style={{ fontSize: 18, fontWeight: 600 }}>Aa</span>,
            },
            {
              value: "24px",
              label: "제목",
              preview: <span style={{ fontSize: 22, fontWeight: 700 }}>Aa</span>,
            },
          ]}
        />

        <div style={{ marginTop: 8 }}>
          <CPRow label="직접 입력">
            <CPText
              value={fontSize}
              onChange={(v) => update("fontSize", v)}
              placeholder="14px"
            />
          </CPRow>
        </div>

        <div style={{ marginTop: 10 }}>
          <CPRow label="굵기" />
          <CPVisualGrid
            cols={3}
            value={fontWeight}
            onChange={(v) => update("fontWeight", v)}
            cardHeight={50}
            options={[
              {
                value: "lighter",
                label: "얇게",
                preview: <span style={{ fontSize: 13, fontWeight: 300 }}>가나다</span>,
              },
              {
                value: "normal",
                label: "보통",
                preview: <span style={{ fontSize: 13, fontWeight: 400 }}>가나다</span>,
              },
              {
                value: "bold",
                label: "굵게",
                preview: <span style={{ fontSize: 13, fontWeight: 700 }}>가나다</span>,
              },
            ]}
          />
        </div>
      </CPSection>

      {/* ── ③ 정렬 ─────────────────────────── */}
      <CPSection title="③ 정렬">
        <CPVisualGrid
          cols={3}
          value={textAlign}
          onChange={(v) => update("textAlign", v)}
          cardHeight={48}
          options={[
            { value: "left", label: "왼쪽", preview: <AlignLeft size={16} /> },
            { value: "center", label: "가운데", preview: <AlignCenter size={16} /> },
            { value: "right", label: "오른쪽", preview: <AlignRight size={16} /> },
          ]}
        />
      </CPSection>

      {/* ── ④ 색상 ─────────────────────────── */}
      <CPSection title="④ 색상">
        <CPRow label="텍스트 색">
          <CPColor value={color} onChange={(v) => update("color", v)} />
        </CPRow>
      </CPSection>

      {/* ── ▾ 고급 설정 ─────────────────────────── */}
      <CPGroup title="고급 설정" defaultOpen={false}>
        <CPRow label="배경색">
          <CPColor
            value={config.backgroundColor || "#ffffff"}
            onChange={(v) => update("backgroundColor", v)}
          />
        </CPRow>
        <CPRow label="패딩" help="예: 8px / 4px 8px">
          <CPText
            value={config.padding || ""}
            onChange={(v) => update("padding", v)}
            placeholder="8px"
          />
        </CPRow>
        <CPRow label="모서리 둥글기" help="예: 4px / 8px">
          <CPText
            value={config.borderRadius || ""}
            onChange={(v) => update("borderRadius", v)}
            placeholder="4px"
          />
        </CPRow>
        <CPRow label="테두리" help="예: 1px solid #d1d5db">
          <CPText
            value={config.border || ""}
            onChange={(v) => update("border", v)}
            placeholder="1px solid #d1d5db"
          />
        </CPRow>

        <div style={{ marginTop: 8 }}>
          <FeatureChipGrid
            items={[
              {
                key: "disabled",
                label: "비활성화",
                desc: "텍스트를 회색으로 흐리게 표시하고 클릭/이벤트를 차단합니다.\n조건부 표시와 함께 자주 쓰여요.",
              },
            ]}
            source={config as any}
            onToggle={(k, v) => update(k as keyof TextDisplayConfig, v)}
          />
        </div>
      </CPGroup>
    </div>
  );
};

InvLegacyTextConfigPanel.displayName = "InvLegacyTextConfigPanel";

export default InvLegacyTextConfigPanel;