vexplor_dev/frontend/components/admin/UserTable.tsx

import { Key, History, Edit } from "lucide-react";
import { useState } from "react";
import { User } from "@/types/user";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { PaginationInfo } from "@/components/common/Pagination";
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
import { UserStatusConfirmDialog } from "./UserStatusConfirmDialog";
import { UserHistoryModal } from "./UserHistoryModal";
import { useAuth } from "@/hooks/useAuth";

interface UserTableProps {
  users: User[];
  isLoading: boolean;
  paginationInfo: PaginationInfo;
  onStatusToggle: (user: User, newStatus: string) => void;
  onPasswordReset: (userId: string, userName: string) => void;
  onEdit: (user: User) => void;
  t?: (key: string, params?: Record<string, string | number>) => string;
}

/**
 * 사용자 목록 테이블 컴포넌트
 */
export function UserTable({
  users,
  isLoading,
  paginationInfo,
  onStatusToggle,
  onPasswordReset,
  onEdit,
  t: tProp,
}: UserTableProps) {
  // 다국어 함수 (prop이 없으면 한국어 기본값 사용)
  const _t = tProp || ((key: string) => {
    const defaults: Record<string, string> = {
      "table.sabun": "사번",
      "table.company": "회사",
      "table.dept": "부서명",
      "table.position": "직책",
      "table.userId": "사용자 ID",
      "table.userName": "사용자명",
      "table.phone": "전화번호",
      "table.email": "이메일",
      "table.regDate": "등록일",
      "table.status": "상태",
      "table.dept.short": "부서",
      "table.contact": "연락처",
      "table.empty": "등록된 사용자가 없습니다.",
      "table.actions": "작업",
      "action.edit.user": "사용자 정보 수정",
      "action.reset.password": "비밀번호 초기화",
      "action.view.history": "변경이력 조회",
    };
    return defaults[key] || key;
  });
  const { user: currentUser } = useAuth();
  const isSuperAdmin = currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN";

  // 확인 모달 상태 관리
  const [confirmDialog, setConfirmDialog] = useState<{
    isOpen: boolean;
    user: User | null;
    newStatus: string;
  }>({
    isOpen: false,
    user: null,
    newStatus: "",
  });

  // 히스토리 모달 상태 관리
  const [historyModal, setHistoryModal] = useState<{
    isOpen: boolean;
    userId: string;
    userName: string;
  }>({
    isOpen: false,
    userId: "",
    userName: "",
  });

  // NO 컬럼 계산 함수 (페이지네이션 고려)
  const getRowNumber = (index: number) => {
    return paginationInfo.startItem + index;
  };

  // 날짜 포맷팅 함수
  const formatDate = (dateString: string) => {
    if (!dateString) return "-";
    return dateString.split(" ")[0];
  };

  // 상태 토글 핸들러 (확인 모달 표시)
  const handleStatusToggle = (user: User, checked: boolean) => {
    const newStatus = checked ? "active" : "inactive";
    setConfirmDialog({
      isOpen: true,
      user,
      newStatus,
    });
  };

  // 상태 변경 확인
  const handleConfirmStatusChange = () => {
    if (confirmDialog.user) {
      onStatusToggle(confirmDialog.user, confirmDialog.newStatus);
    }
    setConfirmDialog({ isOpen: false, user: null, newStatus: "" });
  };

  // 상태 변경 취소
  const handleCancelStatusChange = () => {
    setConfirmDialog({ isOpen: false, user: null, newStatus: "" });
  };

  // 변경이력 모달 열기
  const handleOpenHistoryModal = (user: User) => {
    setHistoryModal({
      isOpen: true,
      userId: user.userId,
      userName: user.userName || user.userId,
    });
  };

  // 변경이력 모달 닫기
  const handleCloseHistoryModal = () => {
    setHistoryModal({
      isOpen: false,
      userId: "",
      userName: "",
    });
  };

  // 데스크톱 테이블 컬럼 정의
  const columns: RDVColumn<User>[] = [
    {
      key: "no",
      label: "No",
      width: "60px",
      render: (_value, _row, index) => (
        <span className="font-mono font-medium">{getRowNumber(index)}</span>
      ),
    },
    {
      key: "sabun",
      label: _t("table.sabun"),
      width: "80px",
      hideOnMobile: true,
      render: (value) => <span className="font-mono">{value || "-"}</span>,
    },
    ...(isSuperAdmin
      ? [
          {
            key: "companyCode" as keyof User,
            label: _t("table.company"),
            width: "120px",
            hideOnMobile: true,
            render: (value: any, user: User) => (
              <span className="font-medium">{(user as any).companyName || value || "-"}</span>
            ),
          },
        ]
      : []),
    {
      key: "deptName",
      label: _t("table.dept"),
      width: "120px",
      hideOnMobile: true,
      render: (value) => <span className="font-medium">{value || "-"}</span>,
    },
    {
      key: "positionName",
      label: _t("table.position"),
      width: "100px",
      hideOnMobile: true,
      render: (value) => <span className="font-medium">{value || "-"}</span>,
    },
    {
      key: "userId",
      label: _t("table.userId"),
      width: "120px",
      hideOnMobile: true,
      render: (value) => <span className="font-mono">{value}</span>,
    },
    {
      key: "userName",
      label: _t("table.userName"),
      width: "100px",
      hideOnMobile: true,
      render: (value) => <span className="font-medium">{value}</span>,
    },
    {
      key: "tel",
      label: _t("table.phone"),
      width: "120px",
      hideOnMobile: true,
      render: (_value, row) => <span>{row.tel || row.cellPhone || "-"}</span>,
    },
    {
      key: "email",
      label: _t("table.email"),
      width: "200px",
      hideOnMobile: true,
      className: "max-w-[200px] truncate",
      render: (value, row) => (
        <span title={row.email}>{value || "-"}</span>
      ),
    },
    {
      key: "regDate",
      label: _t("table.regDate"),
      width: "100px",
      hideOnMobile: true,
      render: (value) => <span>{formatDate(value || "")}</span>,
    },
    {
      key: "status",
      label: _t("table.status"),
      width: "120px",
      hideOnMobile: true,
      render: (_value, row) => (
        <div className="flex items-center">
          <Switch
            checked={row.status === "active"}
            onCheckedChange={(checked) => handleStatusToggle(row, checked)}
            aria-label={`${row.userName} 상태 토글`}
          />
        </div>
      ),
    },
  ];

  // 모바일 카드 필드 정의
  const cardFields: RDVCardField<User>[] = [
    {
      label: _t("table.sabun"),
      render: (user) => <span className="font-mono font-medium">{user.sabun || "-"}</span>,
      hideEmpty: true,
    },
    ...(isSuperAdmin
      ? [
          {
            label: _t("table.company"),
            render: (user: User) => (
              <span className="font-medium">{(user as any).companyName || user.companyCode || ""}</span>
            ),
            hideEmpty: true,
          },
        ]
      : []),
    {
      label: _t("table.dept.short"),
      render: (user) => <span className="font-medium">{user.deptName || ""}</span>,
      hideEmpty: true,
    },
    {
      label: _t("table.position"),
      render: (user) => <span className="font-medium">{user.positionName || ""}</span>,
      hideEmpty: true,
    },
    {
      label: _t("table.contact"),
      render: (user) => <span>{user.tel || user.cellPhone || ""}</span>,
      hideEmpty: true,
    },
    {
      label: _t("table.email"),
      render: (user) => <span className="break-all">{user.email || ""}</span>,
      hideEmpty: true,
    },
    {
      label: _t("table.regDate"),
      render: (user) => <span>{formatDate(user.regDate || "")}</span>,
    },
  ];

  return (
    <>
      <ResponsiveDataView<User>
        data={users}
        columns={columns}
        keyExtractor={(u) => u.userId}
        isLoading={isLoading}
        emptyMessage={_t("table.empty")}
        skeletonCount={10}
        cardTitle={(u) => u.userName || ""}
        cardSubtitle={(u) => <span className="font-mono">{u.userId}</span>}
        cardHeaderRight={(u) => (
          <Switch
            checked={u.status === "active"}
            onCheckedChange={(checked) => handleStatusToggle(u, checked)}
            aria-label={`${u.userName} 상태 토글`}
          />
        )}
        cardFields={cardFields}
        actionsLabel={_t("table.actions")}
        actionsWidth="200px"
        renderActions={(user) => (
          <>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => onEdit(user)}
              className="h-8 w-8"
              title={_t("action.edit.user")}
            >
              <Edit className="h-4 w-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
              className="h-8 w-8"
              title={_t("action.reset.password")}
            >
              <Key className="h-4 w-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => handleOpenHistoryModal(user)}
              className="h-8 w-8"
              title={_t("action.view.history")}
            >
              <History className="h-4 w-4" />
            </Button>
          </>
        )}
      />

      {/* 상태 변경 확인 모달 */}
      <UserStatusConfirmDialog
        user={confirmDialog.user}
        newStatus={confirmDialog.newStatus}
        isOpen={confirmDialog.isOpen}
        onConfirm={handleConfirmStatusChange}
        onCancel={handleCancelStatusChange}
      />

      {/* 사용자 변경이력 모달 */}
      <UserHistoryModal
        isOpen={historyModal.isOpen}
        onClose={handleCloseHistoryModal}
        userId={historyModal.userId}
        userName={historyModal.userName}
      />
    </>
  );
}