"use client";

import React, { useEffect, useMemo, useRef, useState } from "react";
import { TableListWrapper } from "./V2TableListComponent";
import { fieldsToColumns } from "@/lib/fieldConfig/adapters";
import type { FieldConfig } from "@/types/invyone-component";

/**
 * v2-table-list 반응형 래퍼 (2026-04-10, Phase 1 Step 6)
 *
 * 카드 컨테이너 너비를 ResizeObserver 로 감지해 `displayMode` 를 자동 전환한다.
 * 내부 TableListComponent 의 렌더링 로직은 일절 건드리지 않고, props.config 에
 * displayMode 만 덮어쓴다. CardModeRenderer 는 기존 분기를 재사용.
 *
 *  - width >= NARROW_BREAKPOINT → wide (기본 테이블 렌더링)
 *  - width <  NARROW_BREAKPOINT → narrow (기존 CardModeRenderer)
 *
 * container-type: inline-size 는 향후 다른 @container 쿼리 조합에도 쓰도록 부착.
 *
 * ─── INVYONE FieldConfig 경로 (Phase 1+) ────────────────────────────────
 * props.fields: FieldConfig[] 이 있으면 화면 수준에서 정의된 단일 필드 규격을
 * 컬럼 설정으로 자동 변환해 기존 config.columns 를 덮어쓴다. 없으면 기존 경로
 * (config.columns) 그대로. 두 경로가 공존하므로 기존 화면은 수정 없이 작동.
 */
const NARROW_BREAKPOINT = 600;

type AnyProps = Record<string, any> & { fields?: FieldConfig[] };

export const TableListContainerWrapper: React.FC<AnyProps> = (props) => {
  const rootRef = useRef<HTMLDivElement | null>(null);
  const [mode, setMode] = useState<"wide" | "narrow">("wide");

  useEffect(() => {
    const el = rootRef.current;
    if (!el || typeof ResizeObserver === "undefined") return;

    const apply = (width: number) => {
      setMode((prev) => {
        const next = width < NARROW_BREAKPOINT ? "narrow" : "wide";
        return prev === next ? prev : next;
      });
    };

    apply(el.getBoundingClientRect().width);

    const ro = new ResizeObserver((entries) => {
      for (const entry of entries) {
        apply(entry.contentRect.width);
      }
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  // INVYONE FieldConfig 를 기존 columns 포맷으로 메모이즈 변환.
  // fields 가 없거나 빈 배열이면 null → 기존 config.columns 경로 유지.
  const derivedColumns = useMemo(() => {
    if (!Array.isArray(props.fields) || props.fields.length === 0) return null;
    return fieldsToColumns(props.fields);
  }, [props.fields]);

  const { fields: _fields, ...restProps } = props ?? ({} as AnyProps);
  const originalConfig = (restProps?.config ?? {}) as Record<string, any>;

  const effectiveConfig: Record<string, any> = (() => {
    const base =
      mode === "narrow"
        ? { ...originalConfig, displayMode: "card" }
        : originalConfig;
    return derivedColumns ? { ...base, columns: derivedColumns } : base;
  })();

  return (
    <div
      ref={rootRef}
      data-v2-table-list-mode={mode}
      style={{
        containerType: "inline-size",
        containerName: "v2-table-list",
        width: "100%",
        height: "100%",
      }}
    >
      <TableListWrapper
        {...(restProps as any)}
        config={effectiveConfig as any}
      />
    </div>
  );
};

TableListContainerWrapper.displayName = "TableListContainerWrapper";
