"use client";

import { useState } from "react";
import { useUserManagement } from "@/hooks/useUserManagement";
import { UserToolbar } from "@/components/admin/UserToolbar";
import { UserTable } from "@/components/admin/UserTable";
import { Pagination } from "@/components/common/Pagination";
import { UserPasswordResetModal } from "@/components/admin/UserPasswordResetModal";
import { UserFormModal } from "@/components/admin/UserFormModal";
import { ScrollToTop } from "@/components/common/ScrollToTop";
import { usePageMultiLang } from "@/hooks/usePageMultiLang";

// 다국어 키 목록
const USER_MNG_KEYS = [
  "user.mng.title",
  "user.mng.description",
  "error.occurred",
  "table.sabun",
  "table.company",
  "table.dept",
  "table.position",
  "table.userId",
  "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",
  "toolbar.search.placeholder",
  "toolbar.searching",
  "toolbar.advanced.search",
  "toolbar.advanced.search.title",
  "toolbar.advanced.search.desc",
  "toolbar.advanced.mode.warning",
  "toolbar.advanced.reset",
  "toolbar.total.count",
  "toolbar.total.unit",
  "toolbar.create.user",
  "toolbar.search.company",
  "toolbar.search.dept",
  "toolbar.search.position",
  "toolbar.search.userId",
  "toolbar.search.userName",
  "toolbar.search.tel",
  "toolbar.search.email",
] as const;

// 한국어 기본값
const USER_MNG_DEFAULTS: Record<string, string> = {
  "user.mng.title": "사용자 관리",
  "user.mng.description": "시스템 사용자 계정 및 권한을 관리합니다",
  "error.occurred": "오류가 발생했습니다",
  "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": "변경이력 조회",
  "toolbar.search.placeholder": "통합 검색...",
  "toolbar.searching": "검색 중...",
  "toolbar.advanced.search": "고급 검색",
  "toolbar.advanced.search.title": "고급 검색 옵션",
  "toolbar.advanced.search.desc": "각 필드별로 개별 검색 조건을 설정할 수 있습니다",
  "toolbar.advanced.mode.warning":
    "고급 검색 모드가 활성화되어 있습니다. 통합 검색을 사용하려면 고급 검색 조건을 초기화하세요.",
  "toolbar.advanced.reset": "고급 검색 조건 초기화",
  "toolbar.total.count": "총",
  "toolbar.total.unit": "명",
  "toolbar.create.user": "사용자 등록",
  "toolbar.search.company": "회사명 검색",
  "toolbar.search.dept": "부서명 검색",
  "toolbar.search.position": "직책 검색",
  "toolbar.search.userId": "사용자 ID 검색",
  "toolbar.search.userName": "사용자명 검색",
  "toolbar.search.tel": "전화번호/휴대폰 검색",
  "toolbar.search.email": "이메일 검색",
};

/**
 * 사용자관리 페이지
 * URL: /admin/userMng
 *
 * shadcn/ui 스타일 가이드 적용
 * - 원본 Spring + JSP 코드 패턴 기반 REST API 연동
 * - 실제 데이터베이스와 연동되어 작동
 */
export default function UserMngPage() {
  const { t } = usePageMultiLang({
    keys: USER_MNG_KEYS,
    defaults: USER_MNG_DEFAULTS,
    menuCode: "user.management",
  });
  const {
    // 데이터
    users,
    searchFilter,
    isLoading,
    isSearching,
    error,
    paginationInfo,

    // 검색 기능
    updateSearchFilter,

    // 페이지네이션
    handlePageChange,
    handlePageSizeChange,

    // 액션 핸들러
    handleStatusToggle,

    // 유틸리티
    clearError,
    refreshData,
  } = useUserManagement();

  // 비밀번호 초기화 모달 상태
  const [passwordResetModal, setPasswordResetModal] = useState({
    isOpen: false,
    userId: null as string | null,
    userName: null as string | null,
  });

  // 사용자 등록/수정 모달 상태
  const [userFormModal, setUserFormModal] = useState({
    isOpen: false,
    editingUser: null as any | null,
  });

  // 사용자 등록 핸들러
  const handleCreateUser = () => {
    setUserFormModal({
      isOpen: true,
      editingUser: null,
    });
  };

  // 사용자 수정 핸들러
  const handleEditUser = (user: any) => {
    setUserFormModal({
      isOpen: true,
      editingUser: user,
    });
  };

  // 사용자 등록/수정 모달 닫기
  const handleUserFormClose = () => {
    setUserFormModal({
      isOpen: false,
      editingUser: null,
    });
  };

  // 사용자 등록/수정 성공 핸들러
  const handleUserFormSuccess = () => {
    refreshData();
    handleUserFormClose();
  };

  // 비밀번호 초기화 핸들러
  const handlePasswordReset = (userId: string, userName: string) => {
    setPasswordResetModal({
      isOpen: true,
      userId,
      userName,
    });
  };

  // 비밀번호 초기화 모달 닫기
  const handlePasswordResetClose = () => {
    setPasswordResetModal({
      isOpen: false,
      userId: null,
      userName: null,
    });
  };

  // 비밀번호 초기화 성공 핸들러
  const handlePasswordResetSuccess = () => {
    handlePasswordResetClose();
  };

  return (
    <div className="flex h-full flex-col bg-background">
      {/* 상단 고정: 헤더 + 툴바 */}
      <div className="shrink-0 space-y-6 p-6 pb-0">
        <div className="space-y-2 border-b pb-4">
          <h1 className="text-3xl font-bold tracking-tight">{t("user.mng.title")}</h1>
          <p className="text-sm text-muted-foreground">{t("user.mng.description")}</p>
        </div>

        <UserToolbar
          searchFilter={searchFilter}
          totalCount={paginationInfo.totalItems}
          isSearching={isSearching}
          onSearchChange={updateSearchFilter}
          onCreateClick={handleCreateUser}
          t={t}
        />

        {error && (
          <div className="border-destructive/50 bg-destructive/10 rounded-lg border p-4">
            <div className="flex items-center justify-between">
              <p className="text-destructive text-sm font-semibold">{t("error.occurred")}</p>
              <button
                onClick={clearError}
                className="text-destructive hover:text-destructive/80 transition-colors"
                aria-label="에러 메시지 닫기"
              >
                ✕
              </button>
            </div>
            <p className="text-destructive/80 mt-1.5 text-sm">{error}</p>
          </div>
        )}
      </div>

      {/* 중간: 테이블 (스크롤 영역) */}
      <div className="min-h-0 flex-1 overflow-auto px-6 py-6">
        <UserTable
          users={users}
          isLoading={isLoading}
          paginationInfo={paginationInfo}
          onStatusToggle={handleStatusToggle}
          onPasswordReset={handlePasswordReset}
          onEdit={handleEditUser}
          t={t}
        />
      </div>

      {/* 하단 고정: 페이지네이션 */}
      {!isLoading && users.length > 0 && (
        <div className="shrink-0 border-t px-6 py-3">
          <Pagination
            paginationInfo={paginationInfo}
            onPageChange={handlePageChange}
            onPageSizeChange={handlePageSizeChange}
            showPageSizeSelector={true}
            pageSizeOptions={[10, 20, 50, 100]}
          />
        </div>
      )}

      {/* 모달 */}
      <UserFormModal
        isOpen={userFormModal.isOpen}
        onClose={handleUserFormClose}
        onSuccess={handleUserFormSuccess}
        editingUser={userFormModal.editingUser}
      />
      <UserPasswordResetModal
        isOpen={passwordResetModal.isOpen}
        onClose={handlePasswordResetClose}
        userId={passwordResetModal.userId}
        userName={passwordResetModal.userName}
        onSuccess={handlePasswordResetSuccess}
      />
      <ScrollToTop />
    </div>
  );
}
