import { Link, useLocation } from "react-router-dom";

/** 경로 → breadcrumb 레이블 매핑 */
const pathLabels: Record<string, string> = {
  "/": "Home",
  "/dashboard": "대시보드",
  "/services": "서비스 관리",
  "/services/register": "서비스 등록",
  "/messages": "메시지 관리",
  "/messages/register": "메시지 등록",
  "/statistics": "발송 통계",
  "/statistics/history": "발송 이력",
  "/devices": "기기 관리",
  "/tags": "태그 관리",
  "/settings": "마이 페이지",
  "/settings/profile": "프로필 수정",
  "/settings/notifications": "알림",
};

export default function AppHeader() {
  const location = useLocation();
  const isHome = location.pathname === "/";
  const currentLabel = pathLabels[location.pathname] ?? "페이지";

  return (
    <header className="fixed left-64 right-0 top-0 z-40 flex h-16 items-center justify-between border-b border-gray-200 bg-white px-10 shadow-sm">
      {/* 브레드크럼 */}
      <nav className="flex items-center text-sm">
        {isHome ? (
          <span className="font-medium text-foreground">Home</span>
        ) : (
          <>
            <Link to="/" className="text-gray-500 transition-colors hover:text-primary">Home</Link>
            <span className="material-symbols-outlined mx-2 text-base text-gray-300">chevron_right</span>
            <span className="font-medium text-foreground">{currentLabel}</span>
          </>
        )}
      </nav>

      {/* 우측 아이콘 */}
      <div className="ml-auto flex flex-shrink-0 items-center gap-5 text-gray-400">
        {/* 알림 */}
        <button className="group relative transition-colors hover:text-primary">
          <span className="material-symbols-outlined text-2xl group-hover:animate-pulse">
            notifications
          </span>
          <span className="absolute right-0.5 top-0.5 size-2 rounded-full border-2 border-white bg-red-500" />
        </button>

        {/* 구분선 */}
        <div className="h-6 w-px bg-gray-200" />

        {/* 프로필 */}
        <Link
          to="/settings"
          className="flex items-center gap-2 transition-colors hover:text-primary"
        >
          <span className="material-symbols-outlined text-2xl">account_circle</span>
        </Link>
      </div>
    </header>
  );
}