"use client";

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

interface Lecture {
    id: number;
    courseName: string;
    lectureName: string;
    attachedFile: string;
    questionCount: number;
    registrar: string;
    createdAt: string;
}

export default function AdminLecture2Page() {
    const router = useRouter();
    const [isLoading, setIsLoading] = useState(true);
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [lectures, setLectures] = useState<Lecture[]>([]);

    // 관리자 인증 확인
    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 />;
    }

    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="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_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 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 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>
                {/* 로그아웃 */}
                <div className="content-stretch flex gap-[9px] items-center relative shrink-0">
                    <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>
                    <button
                        onClick={() => {
                            localStorage.removeItem('isLoggedIn');
                            localStorage.removeItem('isAdminLoggedIn');
                            router.push('/');
                        }}
                        className="content-stretch flex h-[36px] items-center justify-between relative shrink-0 w-[76px] cursor-pointer hover:opacity-80 transition-opacity"
                    >
                        <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>

            {/* 메인 콘텐츠 */}
            <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
                    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]">
                    {/* 테이블 헤더 */}
                    <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-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]">등록자</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]">등록일</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* 빈 상태 또는 테이블 바디 */}
                    {lectures.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-[#404040] text-nowrap whitespace-pre">
                                        교육 과정을 추가해 주세요.
                                    </p>
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className="content-stretch flex flex-col items-start relative shrink-0 w-full">
                            {lectures.map((lecture) => (
                                <div key={lecture.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]">{lecture.courseName}</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]">{lecture.lectureName}</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]">{lecture.attachedFile}</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]">{lecture.questionCount}</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]">{lecture.registrar}</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]">{lecture.createdAt}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}

