xrlms/src/app/admin/courses/page.tsx

'use client';

import { useState, useMemo, useEffect } from "react";
import AdminSidebar from "@/app/components/AdminSidebar";
import CourseRegistrationModal from "./CourseRegistrationModal";
import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
import { getCourses, type Course } from "./mockData";

export default function AdminCoursesPage() {
  const [courses, setCourses] = useState<Course[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingCourse, setEditingCourse] = useState<Course | null>(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [showToast, setShowToast] = useState(false);

  // API에서 과목 리스트 가져오기
  useEffect(() => {
    async function fetchCourses() {
      try {
        setIsLoading(true);
        const data = await getCourses();
        console.log('📋 [AdminCoursesPage] 받은 데이터:', data);
        console.log('📋 [AdminCoursesPage] 데이터 개수:', data.length);
        setCourses(data);
      } catch (error) {
        console.error('과목 리스트 로드 오류:', error);
        setCourses([]);
      } finally {
        setIsLoading(false);
      }
    }
    
    fetchCourses();
  }, []);
  
  const totalCount = useMemo(() => courses.length, [courses]);
  
  const ITEMS_PER_PAGE = 10;
  const sortedCourses = useMemo(() => {
    return [...courses].sort((a, b) => {
      // 생성일 내림차순 정렬 (최신 날짜가 먼저)
      return b.createdAt.localeCompare(a.createdAt);
    });
  }, [courses]);
  
  const totalPages = Math.ceil(sortedCourses.length / ITEMS_PER_PAGE);
  const paginatedCourses = useMemo(() => {
    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
    const endIndex = startIndex + ITEMS_PER_PAGE;
    return sortedCourses.slice(startIndex, endIndex);
  }, [sortedCourses, currentPage]);

  const handleSaveCourse = async (courseName: string, instructorName: string) => {
    if (editingCourse) {
      // 수정 모드 - TODO: API 호출로 변경 필요
      setCourses(prev => prev.map(course => 
        course.id === editingCourse.id
          ? { ...course, courseName, instructorName }
          : course
      ));
    } else {
      // 등록 모드 - TODO: API 호출로 변경 필요
      const newCourse: Course = {
        id: String(Date.now()),
        courseName,
        instructorName,
        createdAt: new Date().toISOString().split('T')[0],
        createdBy: '', // API에서 받아오도록 변경 필요
        hasLessons: false, // 기본값: 미포함
      };
      setCourses(prev => [...prev, newCourse]);
    }
    setIsModalOpen(false);
    setEditingCourse(null);
    
    // 저장 후 리스트 새로고침
    try {
      const data = await getCourses();
      setCourses(data);
    } catch (error) {
      console.error('과목 리스트 새로고침 오류:', error);
    }
  };

  const handleRowClick = (course: Course) => {
    setEditingCourse(course);
    setIsModalOpen(true);
  };

  const handleModalClose = () => {
    setIsModalOpen(false);
    setEditingCourse(null);
  };

  const handleRegisterClick = () => {
    setEditingCourse(null);
    setIsModalOpen(true);
  };

  const handleDeleteCourse = async () => {
    if (editingCourse) {
      // TODO: API 호출로 삭제 처리 필요
      setCourses(prev => prev.filter(course => course.id !== editingCourse.id));
      setEditingCourse(null);
      setShowToast(true);
      setTimeout(() => {
        setShowToast(false);
      }, 3000);
      
      // 삭제 후 리스트 새로고침
      try {
        const data = await getCourses();
        setCourses(data);
      } catch (error) {
        console.error('과목 리스트 새로고침 오류:', error);
      }
    }
  };

  return (
    <div className="min-h-screen flex flex-col bg-white">
      {/* 메인 레이아웃 */}
      <div className="flex flex-1 min-h-0 justify-center">
        <div className="w-[1440px] flex min-h-0">
          {/* 사이드바 */}
          <div className="flex">
            <AdminSidebar />
          </div>
          {/* 메인 콘텐츠 */}
          <main className="w-[1120px] bg-white">
            <div className="h-full flex flex-col px-8">
              {/* 제목 영역 */}
              <div className="h-[100px] flex items-center">
                <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
                  교육과정 관리
                </h1>
              </div>

              {/* 헤더 영역 (제목과 콘텐츠 사이) */}
              <div className="pt-2 pb-4 flex items-center justify-between">
                <p className="text-[15px] font-medium leading-[1.5] text-[#333c47] whitespace-nowrap">
                  총 {totalCount}건
                </p>
                <button
                  type="button"
                  onClick={handleRegisterClick}
                  className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer"
                >
                  등록하기
                </button>
              </div>

              {/* 콘텐츠 영역 */}
              <div className="flex-1 pt-2 flex flex-col">
                {isLoading ? (
                  <div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
                    <p className="text-[16px] font-medium leading-[1.5] text-[#333c47] text-center">
                      로딩 중...
                    </p>
                  </div>
                ) : courses.length === 0 ? (
                  <div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
                    <p className="text-[16px] font-medium leading-[1.5] text-[#333c47] text-center">
                      등록된 교육과정이 없습니다.
                      <br />
                      과목을 등록해주세요.
                    </p>
                  </div>
                ) : (
                  <div className="rounded-[8px]">
                    <div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
                      <table className="min-w-full border-collapse">
                        <colgroup>
                          <col style={{ width: '40%' }} />
                          <col style={{ width: '25%' }} />
                          <col style={{ width: '20%' }} />
                          <col style={{ width: '15%' }} />
                        </colgroup>
                        <thead>
                          <tr className="h-12 bg-gray-50 text-left">
                            <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">교육과정명</th>
                            <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강사명</th>
                            <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">생성일</th>
                            <th className="px-4 text-center text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강좌포함여부</th>
                          </tr>
                        </thead>
                        <tbody>
                          {paginatedCourses.map((course) => (
                            <tr
                              key={course.id}
                              className="h-12 cursor-pointer hover:bg-[#F5F7FF] transition-colors"
                              onClick={() => handleRowClick(course)}
                            >
                              <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
                                {course.courseName}
                              </td>
                              <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
                                {course.instructorName}
                              </td>
                              <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
                                {course.createdAt}
                              </td>
                              <td className="border-t border-[#dee1e6] px-4 text-left text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
                                {course.hasLessons ? (
                                  <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#ecf0ff]">
                                    <span className="text-[13px] font-semibold leading-[1.4] text-[#384fbf] whitespace-nowrap">
                                      포함
                                    </span>
                                  </div>
                                ) : (
                                  <div className="inline-flex items-center justify-center h-[20px] px-[4px] rounded-[4px] bg-[#f1f3f5]">
                                    <span className="text-[13px] font-semibold leading-[1.4] text-[#4c5561] whitespace-nowrap">
                                      미포함
                                    </span>
                                  </div>
                                )}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>
                )}

                {/* 페이지네이션 - 10개 초과일 때만 표시 */}
                {courses.length > ITEMS_PER_PAGE && (() => {
                  // 페이지 번호를 10단위로 표시
                  const pageGroup = Math.floor((currentPage - 1) / 10);
                  const startPage = pageGroup * 10 + 1;
                  const endPage = Math.min(startPage + 9, totalPages);
                  const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);

                  return (
                    <div className="pt-8 pb-[32px] flex items-center justify-center">
                      <div className="flex items-center justify-center gap-[8px]">
                        {/* First (맨 앞으로) */}
                        <button
                          type="button"
                          onClick={() => setCurrentPage(1)}
                          aria-label="맨 앞 페이지"
                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                          disabled={currentPage === 1}
                        >
                          <div className="relative flex items-center justify-center w-full h-full">
                            <ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute left-[2px]" />
                            <ChevronDownSvg width={14.8} height={14.8} className="rotate-90 absolute right-[2px]" />
                          </div>
                        </button>

                        {/* Prev */}
                        <button
                          type="button"
                          onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                          aria-label="이전 페이지"
                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                          disabled={currentPage === 1}
                        >
                          <ChevronDownSvg width={14.8} height={14.8} className="rotate-90" />
                        </button>

                        {/* Numbers */}
                        {visiblePages.map((n) => {
                          const active = n === currentPage;
                          return (
                            <button
                              key={n}
                              type="button"
                              onClick={() => setCurrentPage(n)}
                              aria-current={active ? 'page' : undefined}
                              className={[
                                'flex items-center justify-center rounded-[1000px] size-[32px] cursor-pointer',
                                active ? 'bg-[#ecf0ff]' : 'bg-white',
                              ].join(' ')}
                            >
                              <span className="text-[16px] leading-[1.4] text-[#333c47]">{n}</span>
                            </button>
                          );
                        })}

                        {/* Next */}
                        <button
                          type="button"
                          onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                          aria-label="다음 페이지"
                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                          disabled={currentPage === totalPages}
                        >
                          <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90" />
                        </button>

                        {/* Last (맨 뒤로) */}
                        <button
                          type="button"
                          onClick={() => setCurrentPage(totalPages)}
                          aria-label="맨 뒤 페이지"
                          className="flex items-center justify-center rounded-[1000px] p-[8.615px] size-[32px] text-[#333c47] disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed"
                          disabled={currentPage === totalPages}
                        >
                          <div className="relative flex items-center justify-center w-full h-full">
                            <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute left-[2px]" />
                            <ChevronDownSvg width={14.8} height={14.8} className="-rotate-90 absolute right-[2px]" />
                          </div>
                        </button>
                      </div>
                    </div>
                  );
                })()}
              </div>
            </div>
          </main>
        </div>
      </div>
      <CourseRegistrationModal
        open={isModalOpen}
        onClose={handleModalClose}
        onSave={handleSaveCourse}
        onDelete={handleDeleteCourse}
        editingCourse={editingCourse}
      />

      {/* 삭제 완료 토스트 */}
      {showToast && (
        <div className="fixed right-[60px] bottom-[60px] z-50">
          <div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
            <div className="relative shrink-0 w-[16.667px] h-[16.667px]">
              <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
                <path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
              교육과정을 삭제했습니다.
            </p>
          </div>
        </div>
      )}
    </div>
  );
}