path: root/lib/swp/table/swp-table.tsx

"use client";

import { useState } from "react";
import {
  useReactTable,
  getCoreRowModel,
  getExpandedRowModel,
  flexRender,
  ExpandedState,
} from "@tanstack/react-table";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Loader2 } from "lucide-react";
import { swpDocumentColumns, swpRevisionColumns, swpFileColumns, type RevisionRow, type FileRow } from "./swp-table-columns";
import { fetchDocumentRevisions, fetchRevisionFiles, type SwpDocumentWithStats } from "../actions";

interface SwpTableProps {
  initialData: SwpDocumentWithStats[];
  total: number;
  page: number;
  pageSize: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

export function SwpTable({
  initialData,
  total,
  page,
  pageSize,
  totalPages,
  onPageChange,
}: SwpTableProps) {
  const [expanded, setExpanded] = useState<ExpandedState>({});
  const [revisionData, setRevisionData] = useState<Record<string, RevisionRow[]>>({});
  const [fileData, setFileData] = useState<Record<number, FileRow[]>>({});
  const [loadingRevisions, setLoadingRevisions] = useState<Set<string>>(new Set());
  const [loadingFiles, setLoadingFiles] = useState<Set<number>>(new Set());

  const table = useReactTable({
    data: initialData,
    columns: swpDocumentColumns,
    state: {
      expanded,
    },
    onExpandedChange: setExpanded,
    getCoreRowModel: getCoreRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    getRowCanExpand: (row) => true, // 모든 문서는 확장 가능
  });

  // 리비전 로드
  const loadRevisions = async (docNo: string) => {
    if (revisionData[docNo]) return; // 이미 로드됨
    
    setLoadingRevisions((prev) => {
      const newSet = new Set(prev);
      newSet.add(docNo);
      return newSet;
    });
    
    try {
      const revisions = await fetchDocumentRevisions(docNo);
      setRevisionData((prev) => ({ ...prev, [docNo]: revisions }));
    } catch (error) {
      console.error("리비전 로드 실패:", error);
    } finally {
      setLoadingRevisions((prev) => {
        const next = new Set(prev);
        next.delete(docNo);
        return next;
      });
    }
  };

  // 파일 로드
  const loadFiles = async (revisionId: number) => {
    if (fileData[revisionId]) return; // 이미 로드됨
    
    setLoadingFiles((prev) => {
      const newSet = new Set(prev);
      newSet.add(revisionId);
      return newSet;
    });
    
    try {
      const files = await fetchRevisionFiles(revisionId);
      setFileData((prev) => ({ ...prev, [revisionId]: files }));
    } catch (error) {
      console.error("파일 로드 실패:", error);
    } finally {
      setLoadingFiles((prev) => {
        const next = new Set(prev);
        next.delete(revisionId);
        return next;
      });
    }
  };

  // 문서 행 확장 핸들러
  const handleDocumentExpand = (docNo: string, isExpanded: boolean) => {
    if (!isExpanded) {
      loadRevisions(docNo);
    }
  };

  return (
    <div className="space-y-4">
      {/* 테이블 */}
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <TableHead key={header.id}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <>
                  {/* 문서 행 */}
                  <TableRow
                    key={row.id}
                    data-state={row.getIsSelected() && "selected"}
                    className="hover:bg-muted/50"
                  >
                    {row.getVisibleCells().map((cell) => (
                      <TableCell key={cell.id}>
                        {cell.column.id === "expander" ? (
                          <div
                            onClick={() => {
                              row.toggleExpanded();
                              handleDocumentExpand(row.original.DOC_NO, row.getIsExpanded());
                            }}
                          >
                            {flexRender(
                              cell.column.columnDef.cell,
                              cell.getContext()
                            )}
                          </div>
                        ) : (
                          flexRender(cell.column.columnDef.cell, cell.getContext())
                        )}
                      </TableCell>
                    ))}
                  </TableRow>

                  {/* 리비전 행들 (확장 시) */}
                  {row.getIsExpanded() && (
                    <TableRow>
                      <TableCell colSpan={swpDocumentColumns.length} className="p-0 bg-muted/30">
                        {loadingRevisions.has(row.original.DOC_NO) ? (
                          <div className="flex items-center justify-center p-8">
                            <Loader2 className="h-6 w-6 animate-spin" />
                            <span className="ml-2">리비전 로딩 중...</span>
                          </div>
                        ) : revisionData[row.original.DOC_NO]?.length ? (
                          <RevisionSubTable
                            revisions={revisionData[row.original.DOC_NO]}
                            fileData={fileData}
                            loadingFiles={loadingFiles}
                            onLoadFiles={loadFiles}
                          />
                        ) : (
                          <div className="p-8 text-center text-muted-foreground">
                            리비전 없음
                          </div>
                        )}
                      </TableCell>
                    </TableRow>
                  )}
                </>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={swpDocumentColumns.length} className="h-24 text-center">
                  데이터 없음
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

      {/* 페이지네이션 */}
      <div className="flex items-center justify-between">
        <div className="text-sm text-muted-foreground">
          총 {total}개 중 {(page - 1) * pageSize + 1}-
          {Math.min(page * pageSize, total)}개 표시
        </div>
        <div className="flex items-center space-x-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => onPageChange(page - 1)}
            disabled={page === 1}
          >
            이전
          </Button>
          <div className="text-sm">
            {page} / {totalPages}
          </div>
          <Button
            variant="outline"
            size="sm"
            onClick={() => onPageChange(page + 1)}
            disabled={page === totalPages}
          >
            다음
          </Button>
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// 리비전 서브 테이블
// ============================================================================

interface RevisionSubTableProps {
  revisions: RevisionRow[];
  fileData: Record<number, FileRow[]>;
  loadingFiles: Set<number>;
  onLoadFiles: (revisionId: number) => void;
}

function RevisionSubTable({
  revisions,
  fileData,
  loadingFiles,
  onLoadFiles,
}: RevisionSubTableProps) {
  const [expandedRevisions, setExpandedRevisions] = useState<ExpandedState>({});

  const revisionTable = useReactTable({
    data: revisions,
    columns: swpRevisionColumns,
    state: {
      expanded: expandedRevisions,
    },
    onExpandedChange: setExpandedRevisions,
    getCoreRowModel: getCoreRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    getRowCanExpand: () => true,
  });

  const handleRevisionExpand = (revisionId: number, isExpanded: boolean) => {
    if (!isExpanded) {
      onLoadFiles(revisionId);
    }
  };

  return (
    <div className="border-l-4 border-blue-200">
      <Table>
        <TableHeader>
          {revisionTable.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id} className="bg-muted/50">
              {headerGroup.headers.map((header) => (
                <TableHead key={header.id} className="font-semibold">
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </TableHead>
              ))}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {revisionTable.getRowModel().rows.map((row) => (
            <>
              {/* 리비전 행 */}
              <TableRow key={row.id} className="bg-muted/20">
                {row.getVisibleCells().map((cell) => (
                  <TableCell key={cell.id}>
                    {cell.column.id === "expander" ? (
                      <div
                        onClick={() => {
                          row.toggleExpanded();
                          handleRevisionExpand(row.original.id, row.getIsExpanded());
                        }}
                      >
                        {flexRender(
                          cell.column.columnDef.cell,
                          cell.getContext()
                        )}
                      </div>
                    ) : (
                      flexRender(cell.column.columnDef.cell, cell.getContext())
                    )}
                  </TableCell>
                ))}
              </TableRow>

              {/* 파일 행들 (확장 시) */}
              {row.getIsExpanded() && (
                <TableRow>
                  <TableCell colSpan={swpRevisionColumns.length} className="p-0 bg-blue-50/30">
                    {loadingFiles.has(row.original.id) ? (
                      <div className="flex items-center justify-center p-4">
                        <Loader2 className="h-5 w-5 animate-spin" />
                        <span className="ml-2 text-sm">파일 로딩 중...</span>
                      </div>
                    ) : fileData[row.original.id]?.length ? (
                      <FileSubTable files={fileData[row.original.id]} />
                    ) : (
                      <div className="p-4 text-center text-sm text-muted-foreground">
                        파일 없음
                      </div>
                    )}
                  </TableCell>
                </TableRow>
              )}
            </>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

// ============================================================================
// 파일 서브 테이블
// ============================================================================

interface FileSubTableProps {
  files: FileRow[];
}

function FileSubTable({ files }: FileSubTableProps) {
  const fileTable = useReactTable({
    data: files,
    columns: swpFileColumns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div className="border-l-4 border-green-200">
      <Table>
        <TableHeader>
          {fileTable.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id} className="bg-blue-50/50">
              {headerGroup.headers.map((header) => (
                <TableHead key={header.id} className="font-semibold text-xs">
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </TableHead>
              ))}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {fileTable.getRowModel().rows.map((row) => (
            <TableRow key={row.id} className="bg-green-50/20 hover:bg-green-50/40">
              {row.getVisibleCells().map((cell) => (
                <TableCell key={cell.id} className="py-2">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}