/*
 * 브레드크럼 (소유자 지시 4.4) — 인증 셸 콘텐츠 영역 상단의 탐색 경로.
 * `홈 > 섹션 > 현재` 를 표시하고 각 조각(홈·부모 목록/대시보드)은 클릭 이동한다.
 * 셸 구조는 변경하지 않고 AppShell 의 MdiTabBar 와 content 사이(콘텐츠 상단)에 삽입된다.
 * 홈/루트에서는 렌더하지 않는다(중복 회피). 라벨은 4개 로케일 i18n.
 */
import { useLocation, NavLink } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { IconChevronRight } from '../ui/icons';
import { crumbTrail, type Crumb } from './breadcrumbConfig';
import './breadcrumb.css';

export function Breadcrumb() {
  const { pathname } = useLocation();
  const { t } = useTranslation();

  // 홈/루트는 브레드크럼 불필요.
  if (pathname === '/home' || pathname === '/') return null;

  const trail = crumbTrail(pathname);
  const crumbs: Crumb[] = [{ labelKey: 'shell.menu.home', to: '/home' }, ...trail];

  const label = (c: Crumb) =>
    c.labelKey ? t(c.labelKey, { defaultValue: c.label ?? '' }) : c.label ?? '';

  return (
    <nav className="kx-breadcrumb" aria-label={t('breadcrumb.aria')}>
      <ol className="kx-breadcrumb__list">
        {crumbs.map((c, i) => {
          const last = i === crumbs.length - 1;
          return (
            <li key={`${c.labelKey ?? c.label ?? i}-${i}`} className="kx-breadcrumb__item">
              {i > 0 && (
                <IconChevronRight size={14} className="kx-breadcrumb__sep" aria-hidden="true" />
              )}
              {c.to && !last ? (
                <NavLink to={c.to} className="kx-breadcrumb__link">
                  {label(c)}
                </NavLink>
              ) : (
                <span
                  className={`kx-breadcrumb__cur ${last ? 'is-current' : ''}`}
                  aria-current={last ? 'page' : undefined}
                >
                  {label(c)}
                </span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}
