"use client";

import { PopComponentRegistry } from "../../PopComponentRegistry";
import { PopStatusBarComponent } from "./PopStatusBarComponent";
import { PopStatusBarConfigPanel } from "./PopStatusBarConfig";
import type { StatusBarConfig } from "./types";
import { DEFAULT_STATUS_BAR_CONFIG } from "./types";

function PopStatusBarPreviewComponent({
  config,
  label,
}: {
  config?: StatusBarConfig;
  label?: string;
}) {
  const cfg = config || DEFAULT_STATUS_BAR_CONFIG;
  const options = cfg.options || [];
  const displayLabel = label || "상태 바";

  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-1 p-2">
      <span className="text-[10px] font-medium text-muted-foreground">
        {displayLabel}
      </span>
      <div className="flex items-center gap-1">
        {options.length === 0 ? (
          <span className="text-[9px] text-muted-foreground">
            옵션 없음
          </span>
        ) : (
          options.slice(0, 4).map((opt) => (
            <div
              key={opt.value}
              className="flex flex-col items-center rounded bg-muted/60 px-2 py-0.5"
            >
              <span className="text-[10px] font-bold leading-tight">0</span>
              <span className="text-[8px] leading-tight text-muted-foreground">
                {opt.label}
              </span>
            </div>
          ))
        )}
      </div>
    </div>
  );
}

PopComponentRegistry.registerComponent({
  id: "pop-status-bar",
  name: "상태 바",
  description: "상태별 건수 대시보드 + 필터",
  category: "display",
  icon: "BarChart3",
  component: PopStatusBarComponent,
  configPanel: PopStatusBarConfigPanel,
  preview: PopStatusBarPreviewComponent,
  defaultProps: DEFAULT_STATUS_BAR_CONFIG,
  connectionMeta: {
    sendable: [
      {
        key: "filter_value",
        label: "필터 값",
        type: "filter_value",
        category: "filter",
        description: "선택한 상태 칩 값을 카드에 필터로 전달",
      },
    ],
    receivable: [
      {
        key: "all_rows",
        label: "전체 데이터",
        type: "all_rows",
        category: "data",
        description: "연결된 카드의 전체 데이터를 받아 상태별 건수 집계",
      },
      {
        key: "set_value",
        label: "값 설정",
        type: "filter_value",
        category: "filter",
        description: "외부에서 선택 값 설정",
      },
    ],
  },
  touchOptimized: true,
  supportedDevices: ["mobile", "tablet"],
});