path: root/lib/legal-review/status/legal-table copy.tsx

// ============================================================================
// legal-works-table.tsx - EvaluationTargetsTable을 정확히 복사해서 수정
// ============================================================================
"use client";

import * as React from "react";
import { useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import type {
  DataTableAdvancedFilterField,
  DataTableFilterField,
  DataTableRowAction,
} from "@/types/table";
import { useDataTable } from "@/hooks/use-data-table";
import { DataTable } from "@/components/data-table/data-table";
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar";
import { getLegalWorks } from "../service";
import { cn } from "@/lib/utils";
import { useTablePresets } from "@/components/data-table/use-table-presets";
import { TablePresetManager } from "@/components/data-table/data-table-preset";
import { getLegalWorksColumns } from "./legal-works-columns";
import { LegalWorksTableToolbarActions } from "./legal-works-toolbar-actions";
import { LegalWorkFilterSheet } from "./legal-work-filter-sheet";
import { LegalWorksDetailView } from "@/db/schema";
import { EditLegalWorkSheet } from "./update-legal-work-dialog";
import { LegalWorkDetailDialog } from "./legal-work-detail-dialog";
import { DeleteLegalWorksDialog } from "./delete-legal-works-dialog";

/* -------------------------------------------------------------------------- */
/*                                 Stats Card                                 */
/* -------------------------------------------------------------------------- */
function LegalWorksStats({ data }: { data: LegalWorksDetailView[] }) {
  const stats = React.useMemo(() => {
    const total = data.length;
    const pending = data.filter(item => item.status === '검토요청').length;
    const assigned = data.filter(item => item.status === '담당자배정').length;
    const inProgress = data.filter(item => item.status === '검토중').length;
    const completed = data.filter(item => item.status === '답변완료').length;
    const urgent = data.filter(item => item.isUrgent).length;

    return { total, pending, assigned, inProgress, completed, urgent };
  }, [data]);

  if (stats.total === 0) {
    return (
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5 mb-6">
        <Card className="col-span-full">
          <CardContent className="pt-6 text-center text-sm text-muted-foreground">
            등록된 법무업무가 없습니다.
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5 mb-6">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">총 건수</CardTitle>
          <Badge variant="outline">전체</Badge>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{stats.total.toLocaleString()}</div>
          <div className="text-xs text-muted-foreground mt-1">
            긴급 {stats.urgent}건
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">검토요청</CardTitle>
          <Badge variant="secondary">대기</Badge>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-blue-600">{stats.pending.toLocaleString()}</div>
          <div className="text-xs text-muted-foreground mt-1">
            {stats.total ? Math.round((stats.pending / stats.total) * 100) : 0}% of total
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">담당자배정</CardTitle>
          <Badge variant="secondary">진행</Badge>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-yellow-600">{stats.assigned.toLocaleString()}</div>
          <div className="text-xs text-muted-foreground mt-1">
            {stats.total ? Math.round((stats.assigned / stats.total) * 100) : 0}% of total
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">검토중</CardTitle>
          <Badge variant="secondary">진행</Badge>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-orange-600">{stats.inProgress.toLocaleString()}</div>
          <div className="text-xs text-muted-foreground mt-1">
            {stats.total ? Math.round((stats.inProgress / stats.total) * 100) : 0}% of total
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">답변완료</CardTitle>
          <Badge variant="default">완료</Badge>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-green-600">{stats.completed.toLocaleString()}</div>
          <div className="text-xs text-muted-foreground mt-1">
            {stats.total ? Math.round((stats.completed / stats.total) * 100) : 0}% of total
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/*                        LegalWorksTable                                      */
/* -------------------------------------------------------------------------- */
interface LegalWorksTableProps {
  promises: Promise<[Awaited<ReturnType<typeof getLegalWorks>>]>;
  currentYear?: number; // ✅ EvaluationTargetsTable의 evaluationYear와 동일한 역할
  className?: string;
}

export function LegalWorksTable({ promises, currentYear = new Date().getFullYear(), className }: LegalWorksTableProps) {
  const [rowAction, setRowAction] = React.useState<DataTableRowAction<LegalWorksDetailView> | null>(null);
  const [isFilterPanelOpen, setIsFilterPanelOpen] = React.useState(false);
  const searchParams = useSearchParams();

  // ✅ EvaluationTargetsTable과 정확히 동일한 외부 필터 상태
  const [externalFilters, setExternalFilters] = React.useState<any[]>([]);
  const [externalJoinOperator, setExternalJoinOperator] = React.useState<"and" | "or">("and");

  // ✅ EvaluationTargetsTable과 정확히 동일한 필터 핸들러
  const handleFiltersApply = React.useCallback((filters: any[], joinOperator: "and" | "or") => {
    console.log("=== 폼에서 필터 전달받음 ===", filters, joinOperator);
    setExternalFilters(filters);
    setExternalJoinOperator(joinOperator);
    setIsFilterPanelOpen(false);
  }, []);

  const searchString = React.useMemo(
    () => searchParams.toString(),
    [searchParams]
  );

  const getSearchParam = React.useCallback(
    (key: string, def = "") =>
      new URLSearchParams(searchString).get(key) ?? def,
    [searchString]
  );

  // ✅ EvaluationTargetsTable과 정확히 동일한 URL 필터 변경 감지 및 데이터 새로고침
  React.useEffect(() => {
    const refetchData = async () => {
      try {
        setIsDataLoading(true);
        
        // 현재 URL 파라미터 기반으로 새 검색 파라미터 생성
        const currentFilters = getSearchParam("filters");
        const currentJoinOperator = getSearchParam("joinOperator", "and");
        const currentPage = parseInt(getSearchParam("page", "1"));
        const currentPerPage = parseInt(getSearchParam("perPage", "10"));
        const currentSort = getSearchParam('sort') ? JSON.parse(getSearchParam('sort')!) : [{ id: "createdAt", desc: true }];
        const currentSearch = getSearchParam("search", "");
        
        const searchParams = {
          filters: currentFilters ? JSON.parse(currentFilters) : [],
          joinOperator: currentJoinOperator as "and" | "or",
          page: currentPage,
          perPage: currentPerPage,
          sort: currentSort,
          search: currentSearch,
          // ✅ currentYear 추가 (EvaluationTargetsTable의 evaluationYear와 동일)
          currentYear: currentYear
        };
        
        console.log("=== 새 데이터 요청 ===", searchParams);
        
        // 서버 액션 직접 호출
        const newData = await getLegalWorks(searchParams);
        setTableData(newData);
        
        console.log("=== 데이터 업데이트 완료 ===", newData.data.length, "건");
      } catch (error) {
        console.error("데이터 새로고침 오류:", error);
      } finally {
        setIsDataLoading(false);
      }
    };

    // 필터나 검색 파라미터가 변경되면 데이터 새로고침 (디바운스 적용)
    const timeoutId = setTimeout(() => {
      // 필터, 검색, 페이지네이션, 정렬 중 하나라도 변경되면 새로고침
      const hasChanges = getSearchParam("filters") || 
                        getSearchParam("search") || 
                        getSearchParam("page") !== "1" || 
                        getSearchParam("perPage") !== "10" ||
                        getSearchParam("sort");
      
      if (hasChanges) {
        refetchData();
      }
    }, 300); // 디바운스 시간 단축

    return () => clearTimeout(timeoutId);
  }, [searchString, currentYear, getSearchParam]); // ✅ EvaluationTargetsTable과 정확히 동일한 의존성

  const refreshData = React.useCallback(async () => {
    try {
      setIsDataLoading(true);
      
      // 현재 URL 파라미터로 데이터 새로고침
      const currentFilters = getSearchParam("filters");
      const currentJoinOperator = getSearchParam("joinOperator", "and");
      const currentPage = parseInt(getSearchParam("page", "1"));
      const currentPerPage = parseInt(getSearchParam("perPage", "10"));
      const currentSort = getSearchParam('sort') ? JSON.parse(getSearchParam('sort')!) : [{ id: "createdAt", desc: true }];
      const currentSearch = getSearchParam("search", "");
      
      const searchParams = {
        filters: currentFilters ? JSON.parse(currentFilters) : [],
        joinOperator: currentJoinOperator as "and" | "or",
        page: currentPage,
        perPage: currentPerPage,
        sort: currentSort,
        search: currentSearch,
        currentYear: currentYear
      };
      
      const newData = await getLegalWorks(searchParams);
      setTableData(newData);
      
      console.log("=== 데이터 새로고침 완료 ===", newData.data.length, "건");
    } catch (error) {
      console.error("데이터 새로고침 오류:", error);
    } finally {
      setIsDataLoading(false);
    }
  }, [currentYear, getSearchParam]); // ✅ EvaluationTargetsTable과 동일한 의존성

  /* --------------------------- layout refs --------------------------- */
  const containerRef = React.useRef<HTMLDivElement>(null);
  const [containerTop, setContainerTop] = React.useState(0);

  const updateContainerBounds = React.useCallback(() => {
    if (containerRef.current) {
      const rect = containerRef.current.getBoundingClientRect()
      const newTop = rect.top
      setContainerTop(prevTop => {
        if (Math.abs(prevTop - newTop) > 1) {  // 1px 이상 차이날 때만 업데이트
          return newTop
        }
        return prevTop
      })
    }
  }, [])

  React.useEffect(() => {
    updateContainerBounds();
    
    const handleResize = () => {
      updateContainerBounds();
    };
    
    window.addEventListener('resize', handleResize);
    window.addEventListener('scroll', updateContainerBounds);
    
    return () => {
      window.removeEventListener('resize', handleResize);
      window.removeEventListener('scroll', updateContainerBounds);
    };
  }, [updateContainerBounds]);

  /* ---------------------- 데이터 상태 관리 ---------------------- */
  // 초기 데이터 설정
  const [initialPromiseData] = React.use(promises);
  
  // ✅ 테이블 데이터 상태 추가  
  const [tableData, setTableData] = React.useState(initialPromiseData);
  const [isDataLoading, setIsDataLoading] = React.useState(false);

  const parseSearchParamHelper = React.useCallback((key: string, defaultValue: any): any => {
    try {
      const value = getSearchParam(key);
      return value ? JSON.parse(value) : defaultValue;
    } catch {
      return defaultValue;
    }
  }, [getSearchParam]);

  const parseSearchParam = <T,>(key: string, defaultValue: T): T => {
    return parseSearchParamHelper(key, defaultValue);
  };

  /* ---------------------- 초기 설정 ---------------------------- */
  const initialSettings = React.useMemo(() => ({
    page: parseInt(getSearchParam("page", "1")),
    perPage: parseInt(getSearchParam("perPage", "10")),
    sort: getSearchParam('sort') ? JSON.parse(getSearchParam('sort')!) : [{ id: "createdAt", desc: true }],
    filters: parseSearchParam("filters", []),
    joinOperator: (getSearchParam("joinOperator") as "and" | "or") || "and",
    search: getSearchParam("search", ""),
    columnVisibility: {},
    columnOrder: [],
    pinnedColumns: { left: [], right: ["actions"] },
    groupBy: [],
    expandedRows: [],
  }), [getSearchParam, parseSearchParam]);

  /* --------------------- 프리셋 훅 ------------------------------ */
  const {
    presets,
    activePresetId,
    hasUnsavedChanges,
    isLoading: presetsLoading,
    createPreset,
    applyPreset,
    updatePreset,
    deletePreset,
    setDefaultPreset,
    renamePreset,
    getCurrentSettings,
  } = useTablePresets<LegalWorksDetailView>(
    "legal-works-table",
    initialSettings
  );

  /* --------------------- 컬럼 ------------------------------ */
  const columns = React.useMemo(() => getLegalWorksColumns({ setRowAction }), [setRowAction]);

  /* 기본 필터 */
  const filterFields: DataTableFilterField<LegalWorksDetailView>[] = [
    { id: "vendorCode", label: "벤더 코드" },
    { id: "vendorName", label: "벤더명" },
    { id: "status", label: "상태" },
  ];

  /* 고급 필터 */
  const advancedFilterFields: DataTableAdvancedFilterField<LegalWorksDetailView>[] = [
    {
      id: "category", label: "구분", type: "select", options: [
        { label: "CP", value: "CP" },
        { label: "GTC", value: "GTC" },
        { label: "기타", value: "기타" }
      ]
    },
    {
      id: "status", label: "상태", type: "select", options: [
        { label: "검토요청", value: "검토요청" },
        { label: "담당자배정", value: "담당자배정" },
        { label: "검토중", value: "검토중" },
        { label: "답변완료", value: "답변완료" },
        { label: "재검토요청", value: "재검토요청" },
        { label: "보류", value: "보류" },
        { label: "취소", value: "취소" }
      ]
    },
    { id: "vendorCode", label: "벤더 코드", type: "text" },
    { id: "vendorName", label: "벤더명", type: "text" },
    {
      id: "isUrgent", label: "긴급여부", type: "select", options: [
        { label: "긴급", value: "true" },
        { label: "일반", value: "false" }
      ]
    },
    {
      id: "reviewDepartment", label: "검토부문", type: "select", options: [
        { label: "준법문의", value: "준법문의" },
        { label: "법무검토", value: "법무검토" }
      ]
    },
    {
      id: "inquiryType", label: "문의종류", type: "select", options: [
        { label: "국내계약", value: "국내계약" },
        { label: "국내자문", value: "국내자문" },
        { label: "해외계약", value: "해외계약" },
        { label: "해외자문", value: "해외자문" }
      ]
    },
    { id: "reviewer", label: "검토요청자", type: "text" },
    { id: "legalResponder", label: "법무답변자", type: "text" },
    { id: "requestDate", label: "답변요청일", type: "date" },
    { id: "consultationDate", label: "의뢰일", type: "date" },
    { id: "expectedAnswerDate", label: "답변예정일", type: "date" },
    { id: "legalCompletionDate", label: "법무완료일", type: "date" },
    { id: "createdAt", label: "생성일", type: "date" },
  ];

  /* current settings */
  const currentSettings = React.useMemo(() => getCurrentSettings(), [getCurrentSettings]);

  const initialState = React.useMemo(() => {
    return {
      sorting: initialSettings.sort.filter(sortItem => {
        const columnExists = columns.some(col => col.accessorKey === sortItem.id)
        return columnExists
      }) as any,
      columnVisibility: currentSettings.columnVisibility,
      columnPinning: currentSettings.pinnedColumns,
    }
  }, [currentSettings, initialSettings.sort, columns])

  /* ----------------------- useDataTable ------------------------ */
  const { table } = useDataTable({
    data: tableData.data,
    columns,
    pageCount: tableData.pageCount,
    rowCount: tableData.total || tableData.data.length,
    filterFields,
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState,
    getRowId: (row) => String(row.id),
    shallow: false,
    clearOnDefault: true,
  });

  /* ---------------------- helper ------------------------------ */
  const getActiveFilterCount = React.useCallback(() => {
    try {
      // URL에서 현재 필터 수 확인
      const filtersParam = getSearchParam("filters");
      if (filtersParam) {
        const filters = JSON.parse(filtersParam);
        return Array.isArray(filters) ? filters.length : 0;
      }
      return 0;
    } catch {
      return 0;
    }
  }, [getSearchParam]);

  const FILTER_PANEL_WIDTH = 400;

  /* ---------------------------- JSX ---------------------------- */
  return (
    <>      
      {/* Filter Panel */}
      <div
        className={cn(
          "fixed left-0 bg-background border-r z-50 flex flex-col transition-all duration-300 ease-in-out overflow-hidden",
          isFilterPanelOpen ? "border-r shadow-lg" : "border-r-0"
        )}
        style={{ 
          width: isFilterPanelOpen ? `${FILTER_PANEL_WIDTH}px` : "0px",
          top: `${containerTop}px`,
          height: `calc(100vh - ${containerTop}px)`
        }}
      >
        <LegalWorkFilterSheet
          isOpen={isFilterPanelOpen}
          onClose={() => setIsFilterPanelOpen(false)}
          onFiltersApply={handleFiltersApply}
          isLoading={false}
        />
      </div>

      {/* Main Container */}
      <div ref={containerRef} className={cn("relative w-full overflow-hidden", className)}>
        <div className="flex w-full h-full">
          <div
            className="flex flex-col min-w-0 overflow-hidden transition-all duration-300 ease-in-out"
            style={{
              width: isFilterPanelOpen ? `calc(100% - ${FILTER_PANEL_WIDTH}px)` : "100%",
              marginLeft: isFilterPanelOpen ? `${FILTER_PANEL_WIDTH}px` : "0px",
            }}
          >
            {/* Header */}
            <div className="flex items-center justify-between p-4 bg-background shrink-0">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
                className="flex items-center shadow-sm"
              >
                {isFilterPanelOpen ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
                {getActiveFilterCount() > 0 && (
                  <span className="ml-2 bg-primary text-primary-foreground rounded-full px-2 py-0.5 text-xs">
                    {getActiveFilterCount()}
                  </span>
                )}
              </Button>
              <div className="text-sm text-muted-foreground">
                총 {tableData.total || tableData.data.length}건
              </div>
            </div>

            {/* Stats */}
            <div className="px-4">
              <LegalWorksStats data={tableData.data} />
            </div>

            {/* Table */}
            <div className="flex-1 overflow-hidden relative" style={{ height: "calc(100vh - 500px)" }}>
              {isDataLoading && (
                <div className="absolute inset-0 bg-background/50 backdrop-blur-sm z-10 flex items-center justify-center">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
                    필터링 중...
                  </div>
                </div>
              )}
              <DataTable table={table} className="h-full">
                {/* ✅ EvaluationTargetsTable과 정확히 동일한 DataTableAdvancedToolbar */}
                <DataTableAdvancedToolbar
                  table={table}
                  filterFields={advancedFilterFields}
                  debounceMs={300}
                  shallow={false}
                  externalFilters={externalFilters}
                  externalJoinOperator={externalJoinOperator}
                  onFiltersChange={(filters, joinOperator) => {
                    console.log("=== 필터 변경 감지 ===", filters, joinOperator);
                  }}
                >
                  <div className="flex items-center gap-2">
                    <TablePresetManager<LegalWorksDetailView>
                      presets={presets}
                      activePresetId={activePresetId}
                      currentSettings={currentSettings}
                      hasUnsavedChanges={hasUnsavedChanges}
                      isLoading={presetsLoading}
                      onCreatePreset={createPreset}
                      onUpdatePreset={updatePreset}
                      onDeletePreset={deletePreset}
                      onApplyPreset={applyPreset}
                      onSetDefaultPreset={setDefaultPreset}
                      onRenamePreset={renamePreset}
                    />

                    <LegalWorksTableToolbarActions table={table} onRefresh={refreshData} />
                  </div>
                </DataTableAdvancedToolbar>
              </DataTable>

              {/* 편집 다이얼로그 */}
              <EditLegalWorkSheet
                open={rowAction?.type === "update"}
                onOpenChange={() => setRowAction(null)}
                work={rowAction?.row.original ?? null}
                onSuccess={() => {
                  rowAction?.row.toggleSelected(false);
                  refreshData();
                }}
              />

              <LegalWorkDetailDialog
                open={rowAction?.type === "view"}
                onOpenChange={(open) => !open && setRowAction(null)}
                work={rowAction?.row.original || null}
              />

              <DeleteLegalWorksDialog
                open={rowAction?.type === "delete"}
                onOpenChange={(open) => !open && setRowAction(null)}
                legalWorks={rowAction?.row.original ? [rowAction.row.original] : []}
                showTrigger={false}
                onSuccess={() => {
                  setRowAction(null);
                  refreshData();
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}