"use client";

import React, { 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 {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
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 [dialogOpen, setDialogOpen] = useState(false);
  const [selectedDocument, setSelectedDocument] = useState<SwpDocumentWithStats | null>(null);

  const table = useReactTable({
    data: initialData,
    columns: swpDocumentColumns,
    state: {
      expanded,
    },
    onExpandedChange: setExpanded,
    getCoreRowModel: getCoreRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    getRowCanExpand: () => 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;
      });
    }
  };

  // 문서 클릭 핸들러 - Dialog 열기
  const handleDocumentClick = async (document: SwpDocumentWithStats) => {
    setSelectedDocument(document);
    setDialogOpen(true);
    
    // 리비전 데이터 로드
    if (!revisionData[document.DOC_NO]) {
      await loadRevisions(document.DOC_NO);
    }
  };

  // 모든 리비전의 파일을 로드
  const loadAllFiles = async (docNo: string) => {
    const revisions = revisionData[docNo];
    if (!revisions) return;

    for (const revision of revisions) {
      if (!fileData[revision.id]) {
        await loadFiles(revision.id);
      }
    }
  };

  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) => (
                <React.Fragment key={row.id}>
                  {/* 문서 행 */}
                  <TableRow
                    data-state={row.getIsSelected() && "selected"}
                    className="hover:bg-muted/50"
                  >
                    {row.getVisibleCells().map((cell) => (
                      <TableCell key={cell.id}>
                        {cell.column.id === "expander" ? (
                          <div
                            onClick={() => handleDocumentClick(row.original)}
                            className="cursor-pointer"
                          >
                            {flexRender(
                              cell.column.columnDef.cell,
                              cell.getContext()
                            )}
                          </div>
                        ) : (
                          flexRender(cell.column.columnDef.cell, cell.getContext())
                        )}
                      </TableCell>
                    ))}
                  </TableRow>
                </React.Fragment>
              ))
            ) : (
              <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>

      {/* 문서 상세 Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-w-6xl max-h-[90vh]">
          <DialogHeader>
            <DialogTitle>문서 상세</DialogTitle>
            {selectedDocument && (
              <DialogDescription>
                {selectedDocument.DOC_NO} - {selectedDocument.DOC_TITLE}
              </DialogDescription>
            )}
          </DialogHeader>

          {selectedDocument && (
            <div className="space-y-4 overflow-y-auto">
              {/* 문서 정보 */}
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-4 bg-muted/30 rounded-lg">
                <div>
                  <span className="text-sm font-semibold">프로젝트:</span>
                  <div className="text-sm">{selectedDocument.PROJ_NO}</div>
                  {selectedDocument.PROJ_NM && (
                    <div className="text-xs text-muted-foreground">{selectedDocument.PROJ_NM}</div>
                  )}
                </div>
                <div>
                  <span className="text-sm font-semibold">패키지:</span>
                  <div className="text-sm">{selectedDocument.PKG_NO || "-"}</div>
                </div>
                <div>
                  <span className="text-sm font-semibold">업체:</span>
                  <div className="text-sm">{selectedDocument.CPY_NM || "-"}</div>
                  {selectedDocument.VNDR_CD && (
                    <div className="text-xs text-muted-foreground">{selectedDocument.VNDR_CD}</div>
                  )}
                </div>
                <div>
                  <span className="text-sm font-semibold">최신 리비전:</span>
                  <div className="text-sm">{selectedDocument.LTST_REV_NO || "-"}</div>
                </div>
              </div>

              {/* 리비전 및 파일 목록 */}
              {loadingRevisions.has(selectedDocument.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[selectedDocument.DOC_NO]?.length ? (
                <DocumentDetailView
                  revisions={revisionData[selectedDocument.DOC_NO]}
                  fileData={fileData}
                  loadingFiles={loadingFiles}
                  onLoadFiles={loadFiles}
                  onLoadAllFiles={() => loadAllFiles(selectedDocument.DOC_NO)}
                />
              ) : (
                <div className="p-8 text-center text-muted-foreground">
                  리비전 없음
                </div>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}

// ============================================================================
// 문서 상세 뷰 (Dialog용)
// ============================================================================

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

function DocumentDetailView({
  revisions,
  fileData,
  loadingFiles,
  onLoadFiles,
  onLoadAllFiles,
}: DocumentDetailViewProps) {
  const [expandedRevisions, setExpandedRevisions] = useState<ExpandedState>({});
  const [allExpanded, setAllExpanded] = useState(false);

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

  const handleExpandAll = () => {
    if (allExpanded) {
      setExpandedRevisions({});
    } else {
      const expanded: ExpandedState = {};
      revisions.forEach((_, index) => {
        expanded[index] = true;
      });
      setExpandedRevisions(expanded);
      onLoadAllFiles();
    }
    setAllExpanded(!allExpanded);
  };

  const handleRevisionExpand = (revisionId: number) => {
    onLoadFiles(revisionId);
  };

  return (
    <div className="space-y-4">
      {/* 전체 펼치기/접기 버튼 */}
      <div className="flex justify-end">
        <Button
          variant="outline"
          size="sm"
          onClick={handleExpandAll}
        >
          {allExpanded ? "모두 접기" : "모두 펼치기"}
        </Button>
      </div>

      {/* 리비전 테이블 */}
      <div className="rounded-md border">
        <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) => (
              <React.Fragment key={row.id}>
                {/* 리비전 행 */}
                <TableRow className="bg-muted/20">
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {cell.column.id === "expander" ? (
                        <div
                          onClick={() => {
                            row.toggleExpanded();
                            if (!row.getIsExpanded()) {
                              handleRevisionExpand(row.original.id);
                            }
                          }}
                          className="cursor-pointer"
                        >
                          {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>
                )}
              </React.Fragment>
            ))}
          </TableBody>
        </Table>
      </div>
    </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>
  );
}