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

"use client";

/**
 * InvLegacyDividerConfigPanel — 구분선 (v2-divider-line) cp 톤 설정 패널
 *
 * 흐름:
 *   ① 선 모양       — 두께 + 색상 (CPVisualGrid 시각 카드)
 *   ② 텍스트 표시   — 토글 + 활성 시 텍스트/색
 *   ▾ 고급 설정     — rounded / disabled (FeatureChipGrid)
 *
 * Reference: notes/gbpark/2026-04-28-cp-panel-standard.md
 */

import React from "react";
import {
  CPSection,
  CPRow,
  CPGroup,
  CPText,
  CPColor,
  CPSwitch,
  CPVisualGrid,
  FeatureChipGrid,
  Hint,
} from "./_shared/cp";

interface InvLegacyDividerConfigPanelProps {
  config: Record<string, any>;
  onChange: (config: Record<string, any>) => void;
}

const DEFAULT_LINE_COLOR = "#d1d5db";
const DEFAULT_TEXT_COLOR = "#6b7280";

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

  const lineColor = config.color || DEFAULT_LINE_COLOR;
  const thickness = config.thickness || "1px";

  return (
    <div style={{ fontFamily: "var(--v5-font-sans)", color: "var(--cp-text)", padding: "0 12px" }}>
      {/* ── ① 선 모양 ─────────────────────────── */}
      <CPSection title="① 선 모양" desc="두께와 색을 골라요">
        <CPRow label="두께" />
        <CPVisualGrid
          cols={3}
          value={thickness}
          onChange={(v) => update("thickness", v)}
          options={[
            {
              value: "1px",
              label: "얇게",
              preview: <div style={{ width: "60%", height: 1, background: lineColor }} />,
            },
            {
              value: "2px",
              label: "보통",
              preview: <div style={{ width: "60%", height: 2, background: lineColor }} />,
            },
            {
              value: "4px",
              label: "두껍게",
              preview: <div style={{ width: "60%", height: 4, background: lineColor }} />,
            },
          ]}
        />

        <div style={{ marginTop: 10 }}>
          <CPRow label="프리셋 색" />
          <CPVisualGrid
            cols={3}
            value={lineColor}
            onChange={(v) => update("color", v)}
            options={[
              {
                value: "#d1d5db",
                label: "기본",
                preview: <ColorDot color="#d1d5db" />,
              },
              {
                value: "#9ca3af",
                label: "진하게",
                preview: <ColorDot color="#9ca3af" />,
              },
              {
                value: "#3b82f6",
                label: "강조",
                preview: <ColorDot color="#3b82f6" />,
              },
            ]}
          />
        </div>

        <div style={{ marginTop: 8 }}>
          <CPRow label="커스텀 색">
            <CPColor value={lineColor} onChange={(v) => update("color", v)} />
          </CPRow>
        </div>
      </CPSection>

      {/* ── ② 텍스트 표시 ─────────────────────────── */}
      <CPSection title="② 텍스트 표시" desc="선 가운데에 텍스트 (선택)">
        <CPRow label="표시 여부">
          <CPSwitch
            value={!!config.dividerText}
            onChange={(checked) => update("dividerText", checked ? "구분" : "")}
          />
        </CPRow>

        {config.dividerText && (
          <>
            <CPRow label="텍스트">
              <CPText
                value={config.dividerText || ""}
                onChange={(v) => update("dividerText", v)}
                placeholder="구분 텍스트"
              />
            </CPRow>
            <CPRow label="텍스트 색">
              <CPColor
                value={config.textColor || DEFAULT_TEXT_COLOR}
                onChange={(v) => update("textColor", v)}
              />
            </CPRow>
            <Hint>선 가운데 텍스트가 들어가고 양옆으로 선이 나뉘어 표시됩니다.</Hint>
          </>
        )}
      </CPSection>

      {/* ── ▾ 고급 설정 ─────────────────────────── */}
      <CPGroup title="고급 설정" defaultOpen={false}>
        <FeatureChipGrid
          items={[
            {
              key: "rounded",
              label: "둥근 끝",
              desc: "선의 양쪽 끝을 둥글게(border-radius) 처리합니다.\n두꺼운 선(2px+) 일 때 자연스러워요.",
            },
            {
              key: "disabled",
              label: "비활성화",
              desc: "구분선을 회색으로 흐리게 표시하고 클릭/이벤트를 차단합니다.\n조건부 표시와 함께 자주 쓰여요.",
            },
          ]}
          source={config}
          onToggle={(k, v) => update(k, v)}
        />
      </CPGroup>
    </div>
  );
};

InvLegacyDividerConfigPanel.displayName = "InvLegacyDividerConfigPanel";

// 작은 헬퍼 — 색 점 (visual preview)
function ColorDot({ color }: { color: string }) {
  return (
    <span
      style={{
        display: "inline-block",
        width: 14,
        height: 14,
        borderRadius: 999,
        background: color,
        boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.08)",
      }}
    />
  );
}

export default InvLegacyDividerConfigPanel;