// simplified-documents-table.tsx - 최적화된 버전
"use client"

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

import { useDataTable } from "@/hooks/use-data-table"
import { getUserVendorDocuments, getUserVendorDocumentStats } from "@/lib/vendor-document-list/enhanced-document-service"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { toast } from "sonner"
import { Badge } from "@/components/ui/badge"
import { FileText } from "lucide-react"

import { Label } from "@/components/ui/label"
import { DataTable } from "@/components/data-table/data-table"
import { SimplifiedDocumentsView } from "@/db/schema"
import { getSimplifiedDocumentColumns } from "./enhanced-doc-table-columns"
import { EnhancedDocTableToolbarActions } from "./enhanced-doc-table-toolbar-actions"

// DrawingKind별 설명 매핑
const DRAWING_KIND_INFO = {
  B3: {
    title: "B3 Vendor",
    description: "Approval-focused drawings progressing through Approval → Work stages",
    color: "bg-blue-50 text-blue-700 border-blue-200"
  },
  B4: {
    title: "B4 GTT", 
    description: "DOLCE-integrated drawings progressing through Pre → Work stages",
    color: "bg-green-50 text-green-700 border-green-200"
  },
  B5: {
    title: "B5 FMEA",
    description: "Sequential drawings progressing through First → Second stages", 
    color: "bg-purple-50 text-purple-700 border-purple-200"
  }
} as const

interface SimplifiedDocumentsTableProps {
  allPromises: Promise<[
    Awaited<ReturnType<typeof getUserVendorDocuments>>,
    Awaited<ReturnType<typeof getUserVendorDocumentStats>>
  ]>
  onDataLoaded?: (data: SimplifiedDocumentsView[]) => void
}

export function SimplifiedDocumentsTable({
  allPromises,
  onDataLoaded,
}: SimplifiedDocumentsTableProps) {
  // 🔥 React.use() 결과를 안전하게 처리
  const promiseResults = React.use(allPromises)
  const [documentResult, statsResult] = promiseResults
  
  // 🔥 데이터 구조분해를 메모이제이션
  const { data, pageCount, total, drawingKind, vendorInfo } = React.useMemo(() => documentResult, [documentResult])
  const { stats, totalDocuments, primaryDrawingKind } = React.useMemo(() => statsResult, [statsResult])

  // 🔥 데이터 로드 콜백을 useCallback으로 최적화
  const handleDataLoaded = React.useCallback((loadedData: SimplifiedDocumentsView[]) => {
    onDataLoaded?.(loadedData)
  }, [onDataLoaded])

  // 🔥 데이터가 로드되면 콜백 호출 (의존성 최적화)
  React.useEffect(() => {
    if (data && handleDataLoaded) {
      handleDataLoaded(data)
    }
  }, [data, handleDataLoaded])

  // 🔥 상태들을 안정적으로 관리
  const [rowAction, setRowAction] = React.useState<DataTableRowAction<SimplifiedDocumentsView> | null>(null)
  const [expandedRows] = React.useState<Set<string>>(() => new Set())

  // 🔥 컬럼 메모이제이션 최적화
  const columns = React.useMemo(
    () => getSimplifiedDocumentColumns({ 
      setRowAction,
    }),
    [] // setRowAction은 항상 동일한 함수이므로 의존성에서 제외
  )

  // 🔥 필터 필드들을 메모이제이션
  const advancedFilterFields: DataTableAdvancedFilterField<SimplifiedDocumentsView>[] = React.useMemo(() => [
    {
      id: "docNumber",
      label: "Document No",
      type: "text",
    },
    {
      id: "title",
      label: "Document Title",
      type: "text",
    },
    {
      id: "drawingKind",
      label: "Document Type",
      type: "select",
      options: [
        { label: "B3", value: "B3" },
        { label: "B4", value: "B4" },
        { label: "B5", value: "B5" },
      ],
    },
    {
      id: "projectCode",
      label: "Project Code",
      type: "text",
    },
    {
      id: "vendorName",
      label: "Vendor Name",
      type: "text",
    },
    {
      id: "vendorCode",
      label: "Vendor Code",
      type: "text",
    },
    {
      id: "pic",
      label: "PIC",
      type: "text",
    },
    {
      id: "status",
      label: "Document Status",
      type: "select",
      options: [
        { label: "Active", value: "ACTIVE" },
        { label: "Inactive", value: "INACTIVE" },
        { label: "Pending", value: "PENDING" },
        { label: "Completed", value: "COMPLETED" },
      ],
    },
    {
      id: "firstStageName",
      label: "First Stage",
      type: "text",
    },
    {
      id: "secondStageName",
      label: "Second Stage",
      type: "text",
    },
    {
      id: "firstStagePlanDate",
      label: "First Planned Date",
      type: "date",
    },
    {
      id: "firstStageActualDate",
      label: "First Actual Date",
      type: "date",
    },
    {
      id: "secondStagePlanDate",
      label: "Second Planned Date",
      type: "date",
    },
    {
      id: "secondStageActualDate",
      label: "Second Actual Date",
      type: "date",
    },
    {
      id: "issuedDate",
      label: "Issue Date",
      type: "date",
    },
    {
      id: "createdAt",
      label: "Created Date",
      type: "date",
    },
    {
      id: "updatedAt",
      label: "Updated Date",
      type: "date",
    },
  ], [])

  // 🔥 B4 전용 필드들 메모이제이션
  const b4FilterFields: DataTableAdvancedFilterField<SimplifiedDocumentsView>[] = React.useMemo(() => [
    {
      id: "cGbn",
      label: "C Category",
      type: "text",
    },
    {
      id: "dGbn",
      label: "D Category",
      type: "text",
    },
    {
      id: "degreeGbn",
      label: "Degree Category",
      type: "text",
    },
    {
      id: "deptGbn",
      label: "Dept Category",
      type: "text",
    },
    {
      id: "jGbn",
      label: "J Category",
      type: "text",
    },
    {
      id: "sGbn",
      label: "S Category",
      type: "text",
    },
  ], [])

  // 🔥 B4 문서 존재 여부 체크 메모이제이션
  const hasB4Documents = React.useMemo(() => {
    return data.some(doc => doc.drawingKind === 'B4')
  }, [data])

  // 🔥 최종 필터 필드 메모이제이션
  const finalFilterFields = React.useMemo(() => {
    return hasB4Documents ? [...advancedFilterFields, ...b4FilterFields] : advancedFilterFields
  }, [hasB4Documents, advancedFilterFields, b4FilterFields])

  // 🔥 테이블 초기 상태 메모이제이션
  const tableInitialState = React.useMemo(() => ({
    sorting: [{ id: "createdAt", desc: true }],
    columnPinning: { right: ["actions"] },
  }), [])

  // 🔥 getRowId 함수 메모이제이션
  const getRowId = React.useCallback((originalRow: SimplifiedDocumentsView) => String(originalRow.documentId), [])

  const { table } = useDataTable({
    data,
    columns,
    pageCount,
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState: tableInitialState,
    getRowId,
    shallow: false,
    clearOnDefault: true,
    columnResizeMode: "onEnd",
  })

  // 🔥 활성 drawingKind 메모이제이션
  const activeDrawingKind = React.useMemo(() => {
    return drawingKind || primaryDrawingKind
  }, [drawingKind, primaryDrawingKind])

  // 🔥 kindInfo 메모이제이션
  const kindInfo = React.useMemo(() => {
    return activeDrawingKind ? DRAWING_KIND_INFO[activeDrawingKind] : null
  }, [activeDrawingKind])

  return (
    <div className="w-full space-y-4">
      {/* DrawingKind 정보 간단 표시 */}
      {kindInfo && (
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            {/* 주석 처리된 부분은 그대로 유지 */}
          </div>
          <div className="flex items-center gap-2">
            <Badge variant="outline">
              {total} documents
            </Badge>
          </div>
        </div>
      )}

      {/* 테이블 */}
      <div className="overflow-x-auto">
        <DataTable table={table} compact>
          <DataTableAdvancedToolbar
            table={table}
            filterFields={finalFilterFields}
            shallow={false}
          >
            <EnhancedDocTableToolbarActions
              table={table}
              projectType="ship"
            />
          </DataTableAdvancedToolbar>
        </DataTable>
      </div>
    </div>
  )
}