"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { isAdminLoggedIn } from '../../lib/auth';
import LoginPage from '../login/page';
import Logout from '../../public/svg/logout';

const imgArrowDisabled = "http://localhost:3845/assets/6edcb2defc36a2bf4a05a3abe53b8da3d42b2cb4.svg";
const imgArrowDefault = "http://localhost:3845/assets/ad0cb4418492f1b020bb38a2ff038a331294ce87.svg";
const imgArrowNext = "http://localhost:3845/assets/6328cf96ee1169c1425c2ce55e7a2dcca0374508.svg";

interface User {
    id: number;
    joinDate: string;
    name: string;
    email: string;
    role: string;
    accountStatus: string;
    accountManagement: string;
}

type PaginationMove = "Previous" | "Next";
type PaginationStatus = "Default" | "Disabled";

function PaginationBtnMove({ status = "Default", move = "Previous" }: { status?: PaginationStatus; move?: PaginationMove }) {
    const isDisabled = status === "Disabled";
    const isNext = move === "Next";

    if (isDisabled && isNext) {
        return (
            <div className="border border-[#eeeeee] border-solid relative rounded-[8px] shrink-0 size-[30px]">
                <div className="overflow-clip relative rounded-[inherit] size-[30px]">
                    <div className="absolute flex items-center justify-center left-[5px] size-[20px] top-[5px]">
                        <div className="flex-none rotate-[180deg]">
                            <div className="overflow-clip relative size-[20px]">
                                <div className="absolute flex inset-[15.63%_30.21%] items-center justify-center">
                                    <div className="flex-none h-[16.5px] rotate-[180deg] w-[9.5px]">
                                        <div className="relative size-full">
                                            <div className="absolute inset-0">
                                                <img alt="" className="block max-w-none size-full" style={{ filter: 'opacity(0.88) brightness(0) saturate(100%) invert(88%)', opacity: 1 }} src={imgArrowNext} />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    if (isDisabled && !isNext) {
        return (
            <div className="border border-[#eeeeee] border-solid relative rounded-[8px] shrink-0 size-[30px]">
                <div className="overflow-clip relative rounded-[inherit] size-[30px]">
                    <div className="absolute flex items-center justify-center left-[5px] size-[20px] top-[5px]">
                        <div className="flex-none rotate-[180deg]">
                            <div className="overflow-clip relative size-[20px]">
                                <div className="absolute inset-[15.63%_30.21%]">
                                    <div className="absolute inset-0">
                                        <img alt="" className="block max-w-none size-full" style={{ filter: 'opacity(0.88) brightness(0) saturate(100%) invert(88%)', opacity: 1 }} src={imgArrowDefault} />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    if (isNext) {
        return (
            <div className="border border-[#eeeeee] border-solid relative rounded-[8px] shrink-0 size-[30px] cursor-pointer hover:bg-gray-50 transition-colors">
                <div className="overflow-clip relative rounded-[inherit] size-[30px]">
                    <div className="absolute flex items-center justify-center left-[5px] size-[20px] top-[5px]">
                        <div className="flex-none rotate-[180deg]">
                            <div className="overflow-clip relative size-[20px]">
                                <div className="absolute flex inset-[15.63%_30.21%] items-center justify-center">
                                    <div className="flex-none h-[16.5px] rotate-[180deg] w-[9.5px]">
                                        <div className="relative size-full">
                                            <div className="absolute inset-0">
                                                <img alt="" className="block max-w-none size-full" src={imgArrowNext} />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="border border-[#eeeeee] border-solid relative rounded-[8px] shrink-0 size-[30px] cursor-pointer hover:bg-gray-50 transition-colors">
            <div className="overflow-clip relative rounded-[inherit] size-[30px]">
                <div className="absolute flex items-center justify-center left-[5px] size-[20px] top-[5px]">
                    <div className="flex-none rotate-[180deg]">
                        <div className="overflow-clip relative size-[20px]">
                            <div className="absolute inset-[15.63%_30.21%]">
                                <div className="absolute inset-0">
                                    <img alt="" className="block max-w-none size-full" src={imgArrowDefault} />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default function AdminHomePage() {
    const router = useRouter();
    const [isLoading, setIsLoading] = useState(true);
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [selectedTab, setSelectedTab] = useState<'전체' | '학습자' | '강사' | '운영자'>('전체');
    const [currentPage, setCurrentPage] = useState(1);

    // 샘플 사용자 데이터
    const [users, setUsers] = useState<User[]>([
        { id: 39, joinDate: '2026-01-15', name: '홍길동', email: 'hong@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 38, joinDate: '2026-01-14', name: '김철수', email: 'kim@example.com', role: '강사', accountStatus: '활성', accountManagement: '관리' },
        { id: 37, joinDate: '2026-01-13', name: '이영희', email: 'lee@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 36, joinDate: '2026-01-12', name: '박민수', email: 'park@example.com', role: '운영자', accountStatus: '활성', accountManagement: '관리' },
        { id: 35, joinDate: '2026-01-11', name: '최지영', email: 'choi@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 34, joinDate: '2026-01-10', name: '정대현', email: 'jung@example.com', role: '강사', accountStatus: '활성', accountManagement: '관리' },
        { id: 33, joinDate: '2026-01-09', name: '강미영', email: 'kang@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 32, joinDate: '2026-01-08', name: '윤성호', email: 'yoon@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 31, joinDate: '2026-01-07', name: '임수진', email: 'lim@example.com', role: '강사', accountStatus: '활성', accountManagement: '관리' },
        { id: 30, joinDate: '2026-01-06', name: '한지훈', email: 'han@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 29, joinDate: '2026-01-05', name: '송민경', email: 'song@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 28, joinDate: '2026-01-04', name: '오준혁', email: 'oh@example.com', role: '운영자', accountStatus: '활성', accountManagement: '관리' },
        { id: 27, joinDate: '2026-01-03', name: '류현우', email: 'ryu@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 26, joinDate: '2026-01-02', name: '신동욱', email: 'shin@example.com', role: '강사', accountStatus: '활성', accountManagement: '관리' },
        { id: 25, joinDate: '2026-01-01', name: '조은서', email: 'cho@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 24, joinDate: '2025-12-31', name: '배성민', email: 'bae@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 23, joinDate: '2025-12-30', name: '전혜진', email: 'jeon@example.com', role: '강사', accountStatus: '활성', accountManagement: '관리' },
        { id: 22, joinDate: '2025-12-29', name: '남궁준', email: 'namgung@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 21, joinDate: '2025-12-28', name: '서아름', email: 'seo@example.com', role: '학습자', accountStatus: '활성', accountManagement: '관리' },
        { id: 20, joinDate: '2025-12-27', name: '권태영', email: 'kwon@example.com', role: '운영자', accountStatus: '활성', accountManagement: '관리' },
    ]);

    useEffect(() => {
        // 관리자 인증 확인
        const checkAuth = () => {
            if (typeof window !== 'undefined') {
                const isAdmin = isAdminLoggedIn();
                setIsAuthenticated(isAdmin);
                setIsLoading(false);

                if (!isAdmin) {
                    // 인증되지 않은 경우 로그인 페이지로 리다이렉트
                    router.push('/login');
                }
            }
        };

        checkAuth();
    }, [router]);

    if (isLoading) {
        return null; // 로딩 중
    }

    if (!isAuthenticated) {
        return <LoginPage />;
    }

    const itemsPerPage = 13;
    const totalPages = Math.ceil(users.length / itemsPerPage);
    const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const currentUsers = users.slice(startIndex, endIndex);

    return (
        <div className="bg-white relative size-full min-h-screen">
            {/* 사이드바 */}
            <div className="absolute bg-white border-r border-[#eeeeee] border-solid box-border content-stretch flex flex-col gap-[45px] items-center left-0 min-h-[1080px] pb-8 pt-[30px] px-0 top-0 w-[250px]">
                {/* 로고 */}
                <button
                    onClick={() => router.push('/')}
                    className="h-[102px] relative shrink-0 w-[99px] cursor-pointer hover:opacity-80 transition-opacity"
                >
                    <div className="absolute inset-0 flex items-center justify-center overflow-hidden pointer-events-none">
                        <img alt="로고" className="h-full w-full object-contain" src="/logo.svg" />
                    </div>
                </button>
                {/* 메뉴 */}
                <div className="box-border content-stretch flex flex-col items-center pb-0 pt-4 px-0 relative shrink-0 w-[250px]">
                    <div className="box-border content-stretch flex flex-col gap-2 items-start p-3 relative shrink-0 w-full">
                        <button className="bg-[#f7f7f7] box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer">
                            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                                <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                    권한 설정
                                </p>
                            </div>
                        </button>
                        <button
                            onClick={() => router.push('/admin_lecture1')}
                            className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors"
                        >
                            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                                <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                    교육 과정 관리
                                </p>
                            </div>
                        </button>
                        <button
                            onClick={() => router.push('/admin_lecture2')}
                            className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors"
                        >
                            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                                <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                    강좌 관리
                                </p>
                            </div>
                        </button>
                        <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                                <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                    문제 은행 관리
                                </p>
                            </div>
                        </button>
                        <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                                <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                    수료증 발급
                                </p>
                            </div>
                        </button>
                        <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                                <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                    공지사항
                                </p>
                            </div>
                        </button>
                        <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                                <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                    학습 자료실
                                </p>
                            </div>
                        </button>
                        <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                                <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                    로그/접속 기록
                                </p>
                            </div>
                        </button>
                        <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                            <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                                <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                                    배너 관리
                                </p>
                            </div>
                        </button>
                    </div>
                </div>
                {/* 로그아웃 */}
                <button
                    onClick={() => {
                        localStorage.removeItem('isLoggedIn');
                        localStorage.removeItem('isAdminLoggedIn');
                        router.push('/login');
                    }}
                    className="content-stretch flex gap-[9px] h-[36px] items-center relative shrink-0 cursor-pointer hover:opacity-80 transition-opacity"
                >
                    <div className="flex items-center justify-center relative shrink-0">
                        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
                            <div className="h-[23.12px] relative w-[22px]">
                                <Logout />
                            </div>
                        </div>
                    </div>
                    <div className="box-border content-stretch flex gap-[10px] items-center justify-center px-[10px] py-[5px] relative shrink-0">
                        <p className="font-medium leading-[1.6] not-italic relative shrink-0 text-[16px] text-[#404040] text-nowrap whitespace-pre">
                            로그아웃
                        </p>
                    </div>
                </button>
            </div>

            {/* 메인 콘텐츠 */}
            <div className="absolute left-[250px] top-0 right-0 min-h-screen">
                {/* 페이지 타이틀 탭 */}
                <div className="absolute content-stretch flex gap-[24px] items-center left-[48px] top-[45px]">
                    <button
                        onClick={() => setSelectedTab('전체')}
                        className={`border-b-[2px] border-solid box-border content-stretch flex gap-[150px] items-center relative shrink-0 ${selectedTab === '전체' ? 'border-[#2b82e8]' : 'border-transparent'}`}
                    >
                        <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                            <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                전체
                            </p>
                        </div>
                    </button>
                    <button
                        onClick={() => setSelectedTab('학습자')}
                        className={`border-b-[2px] border-solid box-border content-stretch flex gap-[150px] items-center relative shrink-0 ${selectedTab === '학습자' ? 'border-[#2b82e8]' : 'border-transparent'}`}
                    >
                        <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                            <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                학습자
                            </p>
                        </div>
                    </button>
                    <button
                        onClick={() => setSelectedTab('강사')}
                        className={`border-b-[2px] border-solid box-border content-stretch flex gap-[150px] items-center relative shrink-0 ${selectedTab === '강사' ? 'border-[#2b82e8]' : 'border-transparent'}`}
                    >
                        <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                            <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                강사
                            </p>
                        </div>
                    </button>
                    <button
                        onClick={() => setSelectedTab('운영자')}
                        className={`border-b-[2px] border-solid box-border content-stretch flex gap-[150px] items-center relative shrink-0 ${selectedTab === '운영자' ? 'border-[#2b82e8]' : 'border-transparent'}`}
                    >
                        <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                            <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                운영자
                            </p>
                        </div>
                    </button>
                </div>

                {/* 사용자 목록 테이블 */}
                <div className="absolute content-stretch flex flex-col items-start left-[48px] right-[101px] top-[135px] h-[671px] overflow-hidden">
                    {/* 테이블 헤더 */}
                    <div className="bg-[rgba(235,247,255,0.5)] content-stretch flex h-[41px] items-center relative shrink-0 w-full">
                        <div className="content-stretch flex items-center relative shrink-0 w-full">
                            <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                    <p className="leading-[normal]">가입일</p>
                                </div>
                            </div>
                            <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                    <p className="leading-[normal]">사용자명</p>
                                </div>
                            </div>
                            <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                    <p className="leading-[normal]">아이디(이메일)</p>
                                </div>
                            </div>
                            <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                    <p className="leading-[normal]">권한</p>
                                </div>
                            </div>
                            <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                    <p className="leading-[normal]">계정 상태</p>
                                </div>
                            </div>
                            <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                    <p className="leading-[normal]">계정 관리</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* 테이블 바디 */}
                    {users.length === 0 ? (
                        <div className="relative w-full flex items-center justify-center" style={{ minHeight: '400px' }}>
                            <div className="content-stretch flex flex-col gap-[16px] items-center relative shrink-0">
                                <div className="content-stretch flex flex-col gap-[2px] items-center relative shrink-0">
                                    <p className="font-medium leading-[1.6] not-italic relative shrink-0 text-[16px] text-[#969696] text-nowrap whitespace-pre">
                                        존재하는 계정이 없어요.
                                    </p>
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className="content-stretch flex flex-col items-start relative shrink-0 w-full max-h-[630px] overflow-y-auto">
                            {currentUsers.map((user) => (
                                <div key={user.id} className="bg-white content-stretch flex items-center relative shrink-0 w-full">
                                    <div className="content-stretch flex items-center relative shrink-0 w-full">
                                        <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                            <div className="basis-0 flex flex-col font-medium grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                                <p className="leading-[normal]">{user.joinDate}</p>
                                            </div>
                                        </div>
                                        <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                            <div className="basis-0 flex flex-col font-medium grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                                <p className="leading-[normal]">{user.name}</p>
                                            </div>
                                        </div>
                                        <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                            <div className="basis-0 flex flex-col font-medium grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                                <p className="leading-[normal]">{user.email}</p>
                                            </div>
                                        </div>
                                        <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                            <div className="basis-0 flex flex-col font-medium grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                                <p className="leading-[normal]">{user.role}</p>
                                            </div>
                                        </div>
                                        <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                            <div className="basis-0 flex flex-col font-medium grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                                <p className="leading-[normal]">{user.accountStatus}</p>
                                            </div>
                                        </div>
                                        <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                            <div className="basis-0 flex flex-col font-medium grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                                <p className="leading-[normal]">{user.accountManagement}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>

                {/* 페이지네이션 */}
                {users.length > 0 && (
                    <div className="absolute content-stretch flex gap-2 items-center justify-center left-[48px] right-[101px] top-[909px]">
                        <button onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}>
                            <PaginationBtnMove status={currentPage === 1 ? "Disabled" : "Default"} move="Previous" />
                        </button>
                        <div className="content-stretch flex gap-2 items-center relative shrink-0">
                            {pageNumbers.map((pageNum) => (
                                <button
                                    key={pageNum}
                                    onClick={() => setCurrentPage(pageNum)}
                                    className={`relative rounded-[8px] shrink-0 size-[30px] cursor-pointer transition-colors ${currentPage === pageNum
                                        ? 'bg-[#1d1d1d]'
                                        : 'border border-[#eeeeee] border-solid hover:bg-gray-50'
                                        }`}
                                >
                                    <div className="overflow-clip relative rounded-[inherit] size-[30px]">
                                        <div className={`absolute flex flex-col font-medium justify-center leading-[0] left-[15.5px] not-italic text-[14px] text-center text-nowrap top-[15px] translate-x-[-50%] translate-y-[-50%] ${currentPage === pageNum ? 'text-white' : 'text-[#515151]'
                                            }`}>
                                            <p className="leading-[1.6] whitespace-pre">{pageNum}</p>
                                        </div>
                                    </div>
                                </button>
                            ))}
                        </div>
                        <button onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}>
                            <PaginationBtnMove status={currentPage === totalPages ? "Disabled" : "Default"} move="Next" />
                        </button>
                    </div>
                )}
            </div>
        </div>
    );
}