'use client';

import { useState } from "react";
import AdminSidebar from "@/app/components/AdminSidebar";
import CourseRegistrationModal from "./CourseRegistrationModal";

export default function AdminCoursesPage() {
  const [totalCount, setTotalCount] = useState(0);
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div className="min-h-screen flex flex-col bg-white">
      {/* 메인 레이아웃 */}
      <div className="flex flex-1 min-h-0 justify-center">
        <div className="w-full max-w-[1120px] flex min-h-0">
          {/* 사이드바 */}
          <div className="px-8 flex">
            <AdminSidebar />
          </div>

          {/* 메인 콘텐츠 */}
          <main className="flex-1 min-w-0 bg-white">
            <div className="h-full flex flex-col">
              {/* 제목 영역 */}
              <div className="h-[100px] flex items-center">
                <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
                  교육과정 관리
                </h1>
              </div>

              {/* 헤더 영역 (제목과 콘텐츠 사이) */}
              <div className="pt-8 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={() => setIsModalOpen(true)}
                  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"
                >
                  등록하기
                </button>
              </div>

              {/* 콘텐츠 영역 */}
              <div className="flex-1 pt-2 pb-20 flex flex-col">
                <div className="rounded-[8px] border border-[#dee1e6] bg-[#fafbfc] min-h-[398px] flex items-center justify-center">
                  <p className="text-[15px] font-normal text-[#858fa3]">
                    <span className="block w-full text-center">
                      등록된 교육과정이 없습니다.
                      <br />
                      과목을 등록해주세요.
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
      <CourseRegistrationModal
        open={isModalOpen}
        onClose={() => setIsModalOpen(false)}
      />
    </div>
  );
}