ERP-node/frontend/components/report/ReportListTable.tsx

"use client";

import { useState } from "react";
import { ReportMaster } from "@/types/report";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Copy, Trash2, Loader2 } from "lucide-react";
import { reportApi } from "@/lib/api/reportApi";
import { useToast } from "@/hooks/use-toast";
import { useRouter } from "next/navigation";
import { format } from "date-fns";

interface ReportListTableProps {
  reports: ReportMaster[];
  total: number;
  page: number;
  limit: number;
  isLoading: boolean;
  onPageChange: (page: number) => void;
  onRefresh: () => void;
}

export function ReportListTable({
  reports,
  total,
  page,
  limit,
  isLoading,
  onPageChange,
  onRefresh,
}: ReportListTableProps) {
  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);
  const [isCopying, setIsCopying] = useState(false);
  const { toast } = useToast();
  const router = useRouter();

  const totalPages = Math.ceil(total / limit);

  // 수정
  const handleEdit = (reportId: string) => {
    router.push(`/admin/screenMng/reportList/designer/${reportId}`);
  };

  // 복사
  const handleCopy = async (reportId: string) => {
    setIsCopying(true);
    try {
      const response = await reportApi.copyReport(reportId);
      if (response.success) {
        toast({
          title: "성공",
          description: "리포트가 복사되었습니다.",
        });
        onRefresh();
      }
    } catch (error: any) {
      toast({
        title: "오류",
        description: error.message || "리포트 복사에 실패했습니다.",
        variant: "destructive",
      });
    } finally {
      setIsCopying(false);
    }
  };

  // 삭제 확인
  const handleDeleteClick = (reportId: string) => {
    setDeleteTarget(reportId);
  };

  // 삭제 실행
  const handleDeleteConfirm = async () => {
    if (!deleteTarget) return;

    setIsDeleting(true);
    try {
      const response = await reportApi.deleteReport(deleteTarget);
      if (response.success) {
        toast({
          title: "성공",
          description: "리포트가 삭제되었습니다.",
        });
        setDeleteTarget(null);
        onRefresh();
      }
    } catch (error: any) {
      toast({
        title: "오류",
        description: error.message || "리포트 삭제에 실패했습니다.",
        variant: "destructive",
      });
    } finally {
      setIsDeleting(false);
    }
  };

  // 날짜 포맷
  const formatDate = (dateString: string | null) => {
    if (!dateString) return "-";
    try {
      return format(new Date(dateString), "yyyy-MM-dd");
    } catch {
      return dateString;
    }
  };

  if (isLoading) {
    return (
      <div className="flex h-64 items-center justify-center">
        <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
      </div>
    );
  }

  if (reports.length === 0) {
    return (
      <div className="text-muted-foreground flex h-64 flex-col items-center justify-center">
        <p>등록된 리포트가 없습니다.</p>
      </div>
    );
  }

  return (
    <>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[80px]">No</TableHead>
              <TableHead>리포트명</TableHead>
              <TableHead className="w-[120px]">작성자</TableHead>
              <TableHead className="w-[120px]">수정일</TableHead>
              <TableHead className="w-[200px]">액션</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {reports.map((report, index) => {
              const rowNumber = (page - 1) * limit + index + 1;
              return (
                <TableRow
                  key={report.report_id}
                  onClick={() => handleEdit(report.report_id)}
                  className="cursor-pointer hover:bg-muted/50"
                >
                  <TableCell className="font-medium">{rowNumber}</TableCell>
                  <TableCell>
                    <div>
                      <div className="font-medium">{report.report_name_kor}</div>
                      {report.report_name_eng && (
                        <div className="text-muted-foreground text-sm">{report.report_name_eng}</div>
                      )}
                    </div>
                  </TableCell>
                  <TableCell>{report.created_by || "-"}</TableCell>
                  <TableCell>{formatDate(report.updated_at || report.created_at)}</TableCell>
                  <TableCell>
                    <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
                      <Button
                        size="icon"
                        variant="outline"
                        onClick={() => handleCopy(report.report_id)}
                        disabled={isCopying}
                        className="h-8 w-8"
                        title="복사"
                      >
                        <Copy className="h-4 w-4" />
                      </Button>
                      <Button
                        size="icon"
                        variant="destructive"
                        onClick={() => handleDeleteClick(report.report_id)}
                        className="h-8 w-8"
                        title="삭제"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>

      {/* 페이지네이션 */}
      {totalPages > 1 && (
        <div className="flex items-center justify-center gap-2 p-4">
          <Button variant="outline" size="sm" onClick={() => onPageChange(page - 1)} disabled={page === 1}>
            이전
          </Button>
          <span className="text-muted-foreground text-sm">
            {page} / {totalPages}
          </span>
          <Button variant="outline" size="sm" onClick={() => onPageChange(page + 1)} disabled={page === totalPages}>
            다음
          </Button>
        </div>
      )}

      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog open={deleteTarget !== null} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>리포트 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              이 리포트를 삭제하시겠습니까?
              <br />
              삭제된 리포트는 복구할 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDeleteConfirm}
              disabled={isDeleting}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {isDeleting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  삭제 중...
                </>
              ) : (
                "삭제"
              )}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}