"use client";

import * as React from "react";
import { useParams } from "next/navigation";
import { useTranslation } from "react-i18next";
import { DataTable } from "@/components/data-table/data-table";
import { Button } from "@/components/ui/button";
import { Plus, Loader2 } from "lucide-react";
import { useDataTable } from "@/hooks/use-data-table";
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar";
import type {
  DataTableAdvancedFilterField,
  DataTableFilterField,
  DataTableRowAction,
} from "@/types/table"
import { toast } from "sonner";
import { getColumns } from "./basic-contract-columns";
import { getBasicContracts, getBasicContractsByVendorId } from "../service";
import { BasicContractView } from "@/db/schema";
import { BasicContractTableToolbarActions } from "./basicContract-table-toolbar-actions";

interface BasicTemplateTableProps {
  promises: Promise<
    [
      Awaited<ReturnType<typeof getBasicContractsByVendorId>>,
    ]
  >
}

export function BasicContractsVendorTable({ promises }: BasicTemplateTableProps) {
  const params = useParams();
  const lng = (params?.lng as string) || "ko";
  const { t, ready } = useTranslation(lng, "procurement");
  
  const [rowAction, setRowAction] =
    React.useState<DataTableRowAction<BasicContractView> | null>(null)
  
  const [{ data, pageCount }] =
    React.use(promises)

    console.log(data,"data")


  // 안전한 번역 함수 (fallback 포함)
  const safeT = React.useCallback((key: string, fallback: string) => {
    if (!ready) return fallback;
    const translated = t(key);
    return translated === key ? fallback : translated;
  }, [t, ready]);

  // 디버깅용 로그 (개발환경에서만)
  React.useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      console.log('Translation ready:', ready);
      console.log('Current language:', lng);
      console.log('Template name translation:', t("basicContracts.templateName"));
      console.log('Status PENDING translation:', t("basicContracts.statusValues.PENDING"));
    }
  }, [ready, lng, t]);

  // 컬럼 설정 - 번역이 준비된 후에만 생성
  const columns = React.useMemo(
    () => {
      if (!ready) return []; // 번역이 준비되지 않으면 빈 배열 반환
      return getColumns({ setRowAction, locale: lng, t });
    },
    [setRowAction, lng, t, ready]
  )

  // config 기반으로 필터 필드 설정 - 안전한 번역 함수 사용
  const advancedFilterFields: DataTableAdvancedFilterField<BasicContractView>[] = React.useMemo(() => {
    return [
      { 
        id: "templateName", 
        label: safeT("basicContracts.templateName", lng === 'ko' ? "템플릿명" : "Template Name"), 
        type: "text" 
      },
      {
        id: "status", 
        label: safeT("basicContracts.status", lng === 'ko' ? "상태" : "Status"), 
        type: "select", 
        options: [
          { 
            label: safeT("basicContracts.statusValues.PENDING", lng === 'ko' ? "서명대기" : "Pending"), 
            value: "PENDING" 
          },
          { 
            label: safeT("basicContracts.statusValues.COMPLETED", lng === 'ko' ? "서명완료" : "Completed"), 
            value: "COMPLETED" 
          },
        ]
      },
      { 
        id: "createdAt", 
        label: safeT("basicContracts.createdAt", lng === 'ko' ? "생성일" : "Created Date"), 
        type: "date" 
      },
      { 
        id: "updatedAt", 
        label: safeT("basicContracts.updatedAt", lng === 'ko' ? "수정일" : "Updated Date"), 
        type: "date" 
      },
    ];
  }, [safeT, lng]);

  const { table } = useDataTable({
    data,
    columns,
    pageCount,
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState: {
      sorting: [{ id: "createdAt", desc: true }],
      columnPinning: { right: ["actions"] },
    },
    getRowId: (originalRow) => String(originalRow.id),
    shallow: false,
    clearOnDefault: true,
  })

  return (
    <>
      <DataTable table={table}>
        <DataTableAdvancedToolbar
          table={table}
          filterFields={advancedFilterFields}
        >
          <BasicContractTableToolbarActions table={table} />
        </DataTableAdvancedToolbar>
      </DataTable>
    </>
  );
}