wace_rps/frontend/components/common/PageHeader.tsx

"use client";

/**
 * PageHeader — 페이지 상단 메뉴명 + 설명 + 액션 슬롯.
 *
 * customer-cs/cs 페이지 패턴 1:1 추출. 모든 RPS 메뉴 페이지의 상단에 의무 배치.
 *
 * 자동 매칭:
 *   - usePathname() 으로 현재 경로를 잡고 MenuContext 의 userMenus/adminMenus 에서
 *     menu_url 이 일치하는 항목을 찾아 menu_name_kor / menu_desc 를 표시.
 *
 * 명시 지정:
 *   <PageHeader title="M-BOM 관리" description="생산용 BOM 트리 + 본 편집" />
 *
 * 액션 슬롯:
 *   <PageHeader actions={<><Button>새로고침</Button><Button>등록</Button></>} />
 *
 * 원칙:
 *   - 모든 page.tsx 의 최상위 자식으로 <PageHeader /> 를 배치한다.
 *   - 메뉴명이 menu_info 에 있다면 props 없이도 자동 매칭되므로 그냥 <PageHeader /> 면 충분.
 *   - 액션 버튼이 있으면 actions 슬롯에만 넣는다 (검색 영역에 두지 말 것).
 */

import React, { useMemo } from "react";
import { usePathname } from "next/navigation";
import { useMenu } from "@/contexts/MenuContext";
import type { MenuItem } from "@/lib/api/menu";
import { cn } from "@/lib/utils";

interface PageHeaderProps {
  /** 명시 메뉴명. 없으면 usePathname() + MenuContext 자동 매칭. */
  title?: string;
  /** 명시 설명. 없으면 자동 매칭 결과의 menu_desc. */
  description?: string;
  /** 우측 액션 슬롯 (새로고침/등록/엑셀 다운로드 등) */
  actions?: React.ReactNode;
  className?: string;
}

function findByUrl(menus: MenuItem[], pathname: string): MenuItem | null {
  // MenuContext 는 flat 리스트. 정확 매칭 우선, 없으면 prefix(파라미터 라우트 대응).
  for (const m of menus) {
    if (m.menu_url && m.menu_url === pathname) return m;
  }
  // 동적 라우트 fallback: /COMPANY_16/foo/123 → /COMPANY_16/foo 매칭
  let best: MenuItem | null = null;
  let bestLen = 0;
  for (const m of menus) {
    if (m.menu_url && pathname.startsWith(m.menu_url) && m.menu_url.length > bestLen) {
      best = m;
      bestLen = m.menu_url.length;
    }
  }
  return best;
}

export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
  const pathname = usePathname() ?? "";
  // useMenu() 가 Provider 밖에서 호출되면 throw — 안전하게 try
  let menu: MenuItem | null = null;
  try {
    const { userMenus, adminMenus } = useMenu();
    menu = findByUrl(userMenus, pathname) ?? findByUrl(adminMenus, pathname);
  } catch {
    /* MenuProvider 밖 (스토리북/테스트 등) — 자동 매칭 생략 */
  }

  const resolvedTitle = title ?? menu?.menu_name_kor ?? "";
  const resolvedDesc  = description ?? menu?.menu_desc ?? "";

  if (!resolvedTitle && !resolvedDesc && !actions) return null;

  return (
    <div className={cn("flex flex-shrink-0 items-end justify-between gap-3 border-b pb-3", className)}>
      <div>
        {resolvedTitle && (
          <h1 className="text-xl font-bold tracking-tight">{resolvedTitle}</h1>
        )}
        {resolvedDesc && (
          <p className="text-xs text-muted-foreground">{resolvedDesc}</p>
        )}
      </div>
      {actions && <div className="flex items-center gap-1.5">{actions}</div>}
    </div>
  );
}