"use client";

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

const imgLogo = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
const imgArrowDisabled = "http://localhost:3845/assets/6edcb2defc36a2bf4a05a3abe53b8da3d42b2cb4.svg";
const imgArrowDefault = "http://localhost:3845/assets/ad0cb4418492f1b020bb38a2ff038a331294ce87.svg";
const imgArrowNext = "http://localhost:3845/assets/6328cf96ee1169c1425c2ce55e7a2dcca0374508.svg";
const imgLogout = "http://localhost:3845/assets/2277a58aa2f582fd42132439745c5bb051f322c2.svg";
const imgClose = "http://localhost:3845/assets/51206896b81ebe68b2d80b5b603e576227587007.svg";
const imgCloseX = "http://localhost:3845/assets/91a45a4f2e47cd854574f32ee6ac1b84e12807cf.svg";
const imgMingcuteDownLine = "http://localhost:3845/assets/a50ea05576e2bcccf052b5be6750edaf476ad4d4.svg";

interface Course {
    id: number;
    courseName: string;
    instructorName: string;
    isIncluded: string;
    createdAt: string;
    registrar: 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) {
        // Disabled Next 버튼
        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) {
        // Disabled Previous 버튼
        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) {
        // Default Next 버튼
        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>
        );
    }

    // Default Previous 버튼
    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 AdminLecture1Page() {
    const router = useRouter();
    const [isLoading, setIsLoading] = useState(true);
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [currentPage, setCurrentPage] = useState(1);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [courseName, setCourseName] = useState('');
    const [instructorName, setInstructorName] = useState('');
    const [showInstructorDropdown, setShowInstructorDropdown] = useState(false);
    const [nextId, setNextId] = useState(14);

    // 샘플 강좌 데이터
    const [courses, setCourses] = useState<Course[]>([
        { id: 39, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 38, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 37, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 36, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 35, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 34, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 33, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 32, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 31, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 30, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 29, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 28, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 27, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 26, courseName: '방사선 원리', instructorName: '김강사', isIncluded: '포함', createdAt: '2025-12-11', registrar: '김등록' },
        { id: 25, courseName: '방사선 원리', instructorName: '김강사', isIncluded: '포함', createdAt: '2025-12-11', registrar: '김등록' },
        { id: 24, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 23, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 22, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 21, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 20, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 19, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 18, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 17, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 16, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 15, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 14, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 13, courseName: '방사선 원리', instructorName: '김강사', isIncluded: '포함', createdAt: '2025-12-11', registrar: '김등록' },
        { id: 12, courseName: '방사선 원리', instructorName: '김강사', isIncluded: '포함', createdAt: '2025-12-11', registrar: '김등록' },
        { id: 11, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 10, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 9, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 8, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 7, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 6, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 5, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 4, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 3, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 2, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
        { id: 1, courseName: '방사선 적용', instructorName: '김강사', isIncluded: '포함', createdAt: '2026-01-15', registrar: '이철수' },
    ]);

    const instructors = ['김강사', '이강사', '박강사', '최강사'];

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

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

        checkAuth();
    }, [router]);

    const handleOpenModal = () => {
        setIsModalOpen(true);
        setCourseName('');
        setInstructorName('');
    };

    const handleCloseModal = () => {
        setIsModalOpen(false);
        setCourseName('');
        setInstructorName('');
        setShowInstructorDropdown(false);
    };

    const handleSave = () => {
        if (!courseName.trim() || !instructorName.trim()) {
            alert('교육 과정명과 강사를 입력해 주세요.');
            return;
        }

        const today = new Date();
        const formattedDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;

        const newCourse: Course = {
            id: nextId,
            courseName: courseName.trim(),
            instructorName: instructorName.trim(),
            isIncluded: '미포함',
            createdAt: formattedDate,
            registrar: '관리자',
        };

        const updatedCourses = [...courses, newCourse];
        setCourses(updatedCourses);
        setNextId(nextId + 1);

        // 13개를 넘어가면 해당 페이지로 이동
        const newTotalPages = Math.ceil(updatedCourses.length / 13);
        if (newTotalPages > 1 && updatedCourses.length > 13) {
            setCurrentPage(newTotalPages);
        }

        handleCloseModal();
    };

    const handleSelectInstructor = (instructor: string) => {
        setInstructorName(instructor);
        setShowInstructorDropdown(false);
    };

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

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

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

    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
                            onClick={() => router.push('/admin_home')}
                            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="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_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]">
                    <div className="border-[#2b82e8] border-b-[2px] border-solid box-border content-stretch flex gap-[150px] items-center relative shrink-0">
                        <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>
                    </div>
                </div>

                {/* 교육 과정 등록 버튼 */}
                <button
                    onClick={handleOpenModal}
                    className="absolute bg-[#160e0e] box-border content-stretch flex gap-[10px] items-center justify-center right-[101px] p-[10px] rounded-[10px] top-[72px] w-[167px] cursor-pointer hover:bg-[#2a1f1f] transition-colors"
                >
                    <p className="font-bold leading-[1.6] not-italic relative shrink-0 text-[18px] text-nowrap text-white whitespace-pre">
                        교육 과정 등록
                    </p>
                </button>

                {/* 테이블 */}
                <div className="absolute content-stretch flex flex-col items-start left-[48px] right-[101px] top-[186px] h-[671px] overflow-hidden">
                    {/* 테이블 헤더 */}
                    <div className="bg-[#f5fbff] 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_0.5px_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_0.5px_0.5px_0px] 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_0.5px_0.5px_0px] 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_0.5px_0.5px_0px] 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_0.5px_0.5px_0px] 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>

                    {/* 테이블 바디 */}
                    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full max-h-[630px] overflow-y-auto">
                        {currentCourses.map((course) => (
                            <div key={course.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_0.5px_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]">{course.courseName}</p>
                                        </div>
                                    </div>
                                    <div className="basis-0 border-[0.5px_0.5px_0.5px_0px] 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]">{course.instructorName}</p>
                                        </div>
                                    </div>
                                    <div className="basis-0 border-[0.5px_0.5px_0.5px_0px] 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]">{course.isIncluded}</p>
                                        </div>
                                    </div>
                                    <div className="basis-0 border-[0.5px_0.5px_0.5px_0px] 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]">{course.createdAt}</p>
                                        </div>
                                    </div>
                                    <div className="basis-0 border-[0.5px_0.5px_0.5px_0px] 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]">{course.registrar}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* 페이지네이션 */}
                <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>

            {/* 모달 팝업 */}
            {isModalOpen && (
                <div className="fixed inset-0 z-50 flex items-center justify-center">
                    {/* 배경 오버레이 */}
                    <div
                        className="absolute inset-0 bg-[rgba(0,0,0,0.6)]"
                        onClick={handleCloseModal}
                    />
                    {/* 모달 컨텐츠 */}
                    <div
                        className="relative bg-[#f7f7f7] h-[504px] overflow-clip shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] w-[683px]"
                        onClick={(e) => e.stopPropagation()}
                    >
                        {/* 닫기 버튼 */}
                        <button
                            onClick={handleCloseModal}
                            className="absolute left-[622px] overflow-clip size-[30px] top-[41px] cursor-pointer hover:opacity-80 transition-opacity z-10"
                        >
                            <div className="absolute inset-0 pointer-events-none flex items-center justify-center">
                                <Close />
                            </div>
                        </button>

                        {/* 저장 버튼 */}
                        <button
                            onClick={handleSave}
                            className="absolute bg-[#599ded] box-border content-stretch flex gap-[10px] h-[50px] items-center justify-center left-[358px] p-[10px] rounded-[10px] top-[414px] w-[264px] cursor-pointer hover:bg-[#4a8ddc] transition-colors"
                        >
                            <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[18px] text-nowrap text-white whitespace-pre">
                                저장
                            </p>
                        </button>

                        {/* 취소 버튼 */}
                        <button
                            onClick={handleCloseModal}
                            className="absolute bg-[#eeeeee] box-border content-stretch flex gap-[10px] h-[50px] items-center justify-center left-[62px] p-[10px] rounded-[10px] top-[414px] w-[264px] cursor-pointer hover:bg-[#e0e0e0] transition-colors"
                        >
                            <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                취소
                            </p>
                        </button>

                        {/* 폼 컨텐츠 */}
                        <div className="absolute content-stretch flex flex-col gap-[20px] items-start left-[31px] top-[41px] w-[621px]">
                            <div className="content-stretch flex flex-col gap-[20px] items-start relative shrink-0 w-[621px]">
                                {/* 제목 */}
                                <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-full">
                                    <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[20px] text-[#404040] text-nowrap">
                                        <p className="leading-[1.6] whitespace-pre">교육 과정 등록</p>
                                    </div>
                                </div>

                                {/* 교육 과정명 */}
                                <div className="content-stretch flex flex-col gap-[20px] items-start relative shrink-0 w-full">
                                    <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full">
                                        <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[177px]">
                                            <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                                교육 과정명<span className="text-[#e61a1a]"> *</span>
                                            </p>
                                        </div>
                                        <input
                                            type="text"
                                            value={courseName}
                                            onChange={(e) => setCourseName(e.target.value)}
                                            placeholder="교육 과정명을 입력해 주세요."
                                            className="basis-0 border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center justify-center min-h-px min-w-px p-[10px] relative rounded-[8px] shrink-0 bg-white text-[16px] text-[#515151] focus:outline-none focus:border-[#2b82e8]"
                                        />
                                    </div>
                                </div>

                                {/* 강사 */}
                                <div className="content-stretch flex flex-col gap-[20px] items-start relative shrink-0 w-full">
                                    <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full">
                                        <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[177px]">
                                            <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                                강사<span className="text-[#e61a1a]"> *</span>
                                            </p>
                                        </div>
                                        <div className="basis-0 relative grow min-h-px min-w-px shrink-0">
                                            <button
                                                type="button"
                                                onClick={() => setShowInstructorDropdown(!showInstructorDropdown)}
                                                className="basis-0 border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center justify-between min-h-px min-w-px p-[10px] relative rounded-[8px] shrink-0 w-full bg-white cursor-pointer hover:border-[#2b82e8] transition-colors"
                                            >
                                                <p className={`basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic relative shrink-0 text-left text-[16px] ${instructorName ? 'text-[#515151]' : 'text-[#b9b9b9]'}`}>
                                                    {instructorName || '강사를 선택해 주세요.'}
                                                </p>
                                                <div className="overflow-clip relative shrink-0 size-[24px]">
                                                    <img alt="" className="block max-w-none size-full" src={imgMingcuteDownLine} />
                                                </div>
                                            </button>
                                            {showInstructorDropdown && (
                                                <div className="absolute top-full left-0 right-0 mt-1 bg-white box-border content-stretch flex flex-col gap-[4px] items-start p-[8px] rounded-[8px] shadow-[0px_8px_16px_-2px_rgba(27,33,44,0.12)] z-10">
                                                    {instructors.map((instructor) => (
                                                        <button
                                                            key={instructor}
                                                            type="button"
                                                            onClick={() => handleSelectInstructor(instructor)}
                                                            className={`box-border content-stretch flex gap-[10px] h-[38px] items-center overflow-clip p-[8px] relative rounded-[8px] shrink-0 w-full transition-colors ${instructorName === instructor ? 'bg-[#e3effc]' : 'bg-white hover:bg-[#f7f7f7]'}`}
                                                        >
                                                            <div className="basis-0 flex flex-col font-normal grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[14px] text-[#515151]">
                                                                <p className="leading-[1.6]">{instructor}</p>
                                                            </div>
                                                        </button>
                                                    ))}
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                </div>

                                {/* 교육 과정 이미지 */}
                                <div className="content-stretch flex flex-col gap-[20px] items-start relative shrink-0 w-full">
                                    <div className="content-stretch flex gap-[20px] items-center relative shrink-0 w-full">
                                        <div className="basis-0 content-stretch flex gap-[16px] grow items-center min-h-px min-w-px relative shrink-0">
                                            <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[177px]">
                                                <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                                    교육 과정 이미지
                                                </p>
                                            </div>
                                        </div>
                                        <div className="content-stretch flex gap-[16px] items-center relative shrink-0">
                                            <button className="bg-[#2b82e8] box-border content-stretch flex gap-2 h-[36px] items-center justify-center overflow-clip px-5 py-[13px] relative rounded-[8px] shrink-0 w-[114px] cursor-pointer hover:bg-[#1f6fc4] transition-colors">
                                                <p className="font-medium leading-[1.6] not-italic relative shrink-0 text-[14px] text-white text-center text-nowrap whitespace-pre">
                                                    첨부
                                                </p>
                                            </button>
                                        </div>
                                    </div>
                                    <div className="bg-[#f7f7f7] border border-[#eeeeee] border-solid box-border content-stretch flex flex-col gap-4 items-center px-[10px] py-[20px] relative rounded-[10px] shrink-0 w-full">
                                        <div className="content-stretch flex flex-col gap-[2px] items-center relative shrink-0">
                                            <div className="font-medium leading-[1.6] not-italic relative shrink-0 text-[#b9b9b9] text-[16px] text-center text-nowrap whitespace-pre">
                                                <p className="mb-0">30MB 미만의 교육 과정 이미지를 첨부해 주세요.</p>
                                                <p>첨부하지 않을 경우 기본 이미지가 노출돼요.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}