"use client"

import * as React from "react"
import type {
  DataTableAdvancedFilterField,
  DataTableFilterField,
} from "@/types/table"

import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { InfiniteDataTable } from "@/components/data-table/infinite-data-table"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { Button } from "@/components/ui/button"
import { Alert, AlertDescription } from "@/components/ui/alert"

import { getMaterialGroups } from "../services"
import { getColumns } from "./material-group-table-columns"
import { ViewModeToggle } from "@/components/data-table/view-mode-toggle"

// MaterialGroup 타입 정의 (서비스에서 반환되는 타입과 일치)
type MaterialGroup = {
  materialGroupCode: string | null;
  materialGroupDescription: string | null;
  materialGroupUom?: string | null;
}

interface MaterialGroupTableProps {
  promises?: Promise<
    [
      Awaited<ReturnType<typeof getMaterialGroups>>,
    ]
  >
}

export function MaterialGroupTable({ promises }: MaterialGroupTableProps) {
  // 페이지네이션 모드 데이터
  const paginationData = promises ? React.use(promises) : null
  const [{ data = [], pageCount = 0 }] = paginationData || [{ data: [], pageCount: 0 }]

  console.log('MaterialGroupTable data:', data.length, 'material groups')

  const columns = React.useMemo(
    () => getColumns(),
    []
  )

  // 기존 필터 필드들
  const filterFields: DataTableFilterField<MaterialGroup>[] = [
    {
      id: "materialGroupCode",
      label: "자재그룹코드",
    },
    {
      id: "materialGroupDescription",
      label: "자재그룹명",
    },
    {
      id: "materialGroupUom",
      label: "UOM",
    },
  ]

  const advancedFilterFields: DataTableAdvancedFilterField<MaterialGroup>[] = [
    {
      id: "materialGroupCode",
      label: "자재그룹코드",
      type: "text",
    },
    {
      id: "materialGroupDescription",
      label: "자재그룹명",
      type: "text",
    },
    {
      id: "materialGroupUom",
      label: "UOM",
      type: "text",
    },
  ]

  // 확장된 useDataTable 훅 사용 (pageSize 기반 자동 전환)
  const {
    table,
    infiniteScroll,
    isInfiniteMode,
    handlePageSizeChange,
  } = useDataTable({
    data,
    columns,
    pageCount,
    filterFields,
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState: {
      sorting: [{ id: "materialGroupCode", desc: false }],
    },
    getRowId: (originalRow) => String(originalRow.materialGroupCode || 'unknown'),
    shallow: false,
    clearOnDefault: true,
    // 무한 스크롤 설정
    infiniteScrollConfig: {
      apiEndpoint: "/api/table/material-groups/infinite",
      tableName: "material-groups",
      maxPageSize: 100,
    },
  })

  return (
    <div className="w-full space-y-2.5 overflow-x-auto" style={{maxWidth:'100vw'}}>

        {/* 모드 토글 */}
        <div className="flex items-center justify-between">
          <ViewModeToggle
            isInfiniteMode={isInfiniteMode}
            onSwitch={handlePageSizeChange}
          />
        </div>

        {/* 에러 상태 (무한 스크롤 모드) */}
        {isInfiniteMode && infiniteScroll?.error && (
          <Alert variant="destructive">
            <AlertDescription>
              데이터를 불러오는 중 오류가 발생했습니다.
              <Button
                variant="link"
                size="sm"
                onClick={() => infiniteScroll.reset()}
                className="ml-2 p-0 h-auto"
              >
                다시 시도
              </Button>
            </AlertDescription>
          </Alert>
        )}

        {/* 로딩 상태가 아닐 때만 테이블 렌더링 */}
        {!(isInfiniteMode && infiniteScroll?.isLoading && infiniteScroll?.isEmpty) ? (
          <>
            {/* 도구 모음 */}
            <DataTableAdvancedToolbar
              table={table}
              filterFields={advancedFilterFields}
              shallow={false}
            />

            {/* 테이블 렌더링 */}
            {isInfiniteMode ? (
              // 무한 스크롤 모드: InfiniteDataTable 사용
              <InfiniteDataTable
                table={table}
                hasNextPage={infiniteScroll?.hasNextPage || false}
                isLoadingMore={infiniteScroll?.isLoadingMore || false}
                onLoadMore={infiniteScroll?.onLoadMore}
                totalCount={infiniteScroll?.totalCount}
                isEmpty={infiniteScroll?.isEmpty || false}
                compact={false}
                autoSizeColumns={true}
              />
            ) : (
              // 페이지네이션 모드: DataTable 사용
              <DataTable
                table={table}
                compact={false}
                autoSizeColumns={true}
              />
            )}
          </>
        ) : (
          /* 로딩 스켈레톤 (무한 스크롤 초기 로딩) */
          <div className="space-y-3">
            <div className="text-sm text-muted-foreground mb-4">
              무한 스크롤 모드로 데이터를 로드하고 있습니다...
            </div>
            {Array.from({ length: 10 }).map((_, i) => (
              <div key={i} className="h-12 w-full bg-muted animate-pulse rounded" />
            ))}
          </div>
        )}

      </div>
      )
}