"use client";

import { useRouter } from 'next/navigation';
import Image from 'next/image';
import logo from '../logo.svg';

type ActivePage = 'home' | 'lecturelist' | 'studydata' | 'announcement' | null;

interface HeaderProps {
  activePage?: ActivePage;
}

export default function Header({ activePage = null }: HeaderProps) {
  const router = useRouter();

  const handleNoticeClick = () => {
    router.push('/announcement');
  };

  const handleLogout = () => {
    localStorage.removeItem('isLoggedIn');
    router.push('/');
  };

  const getMenuTextColor = (page: 'lecturelist' | 'studydata' | 'notice') => {
    if (page === 'lecturelist' && activePage === 'lecturelist') {
      return 'text-[#1669ca]';
    }
    if (page === 'studydata' && activePage === 'studydata') {
      return 'text-[#1669ca]';
    }
    if (page === 'notice' && activePage === 'announcement') {
      return 'text-[#1669ca]';
    }
    return 'text-[#515151] group-hover:text-blue-500';
  };

  return (
    <header className="absolute content-stretch flex items-center justify-between left-[332px] top-[43px] w-[1332px]">
      <div className="content-stretch flex gap-[99px] items-center relative shrink-0">
        {/* 로고 */}
        <button
          onClick={() => router.push('/')}
          className="h-[74px] relative shrink-0 w-[72px] cursor-pointer"
        >
          <Image
            src={logo}
            alt="로고"
            className="w-full h-full object-contain"
            width={72}
            height={74}
          />
        </button>
        {/* 메뉴 */}
        <div className="content-stretch flex gap-[24px] items-center relative shrink-0">
          <button
            onClick={() => router.push('/lecturelist')}
            className="content-stretch flex gap-[150px] items-center relative shrink-0 cursor-pointer group transition-colors"
          >
            <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-[24px] text-nowrap whitespace-pre transition-colors ${getMenuTextColor('lecturelist')}`}>
                교육 과정 목록
              </p>
            </div>
          </button>
          <button
            onClick={() => router.push('/studydata')}
            className="content-stretch flex gap-[150px] items-center relative shrink-0 cursor-pointer group transition-colors"
          >
            <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-[24px] text-nowrap whitespace-pre transition-colors ${getMenuTextColor('studydata')}`}>
                학습 자료실
              </p>
            </div>
          </button>
          <button
            onClick={handleNoticeClick}
            className="content-stretch flex gap-[150px] items-center relative shrink-0 cursor-pointer group transition-colors"
          >
            <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-[24px] text-nowrap whitespace-pre transition-colors ${getMenuTextColor('notice')}`}>
                공지사항
              </p>
            </div>
          </button>
        </div>
      </div>
      {/* 사용자 메뉴 */}
      <div className="content-stretch flex gap-[20px] items-center relative shrink-0">
        <button
          onClick={() => router.push('/myinfo')}
          className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0 cursor-pointer group transition-colors"
        >
          <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
            내 강좌실
          </p>
        </button>
        <button
          onClick={handleLogout}
          className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0 cursor-pointer group transition-colors"
        >
          <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
            로그아웃
          </p>
        </button>
      </div>
    </header>
  );
}