opsxsql/frontend/src/components/Breadcrumb.tsx

import { useLocation, useNavigate } from 'react-router-dom';
import { ChevronRight, Home } from 'lucide-react';
import { menuItems, menuSections } from '@/constants/menu';

interface BreadcrumbItem {
  label: string;
  path?: string;
}

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export default function Breadcrumb({ items }: BreadcrumbProps) {
  const navigate = useNavigate();

  if (items.length === 0) return null;

  return (
    <nav aria-label="breadcrumb" className="flex items-center text-xs">
      <ol className="flex items-center gap-1">
        {items.map((item, index) => {
          const isLast = index === items.length - 1;

          return (
            <li key={index} className="flex items-center gap-1">
              {index > 0 && (
                <ChevronRight className="w-3 h-3 text-[var(--dg-text-muted)] flex-shrink-0" />
              )}
              {isLast ? (
                <span className="text-[var(--dg-text-primary)] font-medium">
                  {item.label}
                </span>
              ) : item.path ? (
                <button
                  type="button"
                  onClick={() => navigate(item.path!)}
                  className="text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors inline-flex items-center gap-1 cursor-pointer"
                >
                  {index === 0 && <Home className="w-3 h-3" />}
                  {item.label}
                </button>
              ) : (
                <span className="text-[var(--dg-text-secondary)]">
                  {item.label}
                </span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

/**
 * Hook that builds breadcrumb items based on the current route.
 *
 * It matches the current pathname against menuItems, then constructs:
 *   Home > Section label > Page label
 *
 * For detail/sub pages (e.g. /instances/:id, /tickets/:id, /tickets/create),
 * it prepends the parent breadcrumb entries.
 */
export function useBreadcrumb(): { items: BreadcrumbItem[] } {
  const location = useLocation();
  const pathname = location.pathname;

  const items: BreadcrumbItem[] = [];

  // Find a direct menu item match by id (exact route)
  const directMatch = menuItems.find(
    (item) => item.id === pathname.replace(/^\//, '')
  );

  if (directMatch) {
    // Exact menu match: Home > Section > Page
    const section = menuSections.find((s) => s.id === directMatch.section);

    items.push({ label: '首页', path: '/dashboard' });
    if (section && section.id !== 'overview') {
      items.push({ label: section.label });
    }
    items.push({ label: directMatch.label });
    return { items };
  }

  // Parse the pathname for sub/detail pages
  const segments = pathname.split('/').filter(Boolean); // e.g. ['instances', '123'] or ['tickets', 'create']
  if (segments.length === 0) {
    return { items: [{ label: '首页', path: '/dashboard' }] };
  }

  const rootSegment = segments[0];
  const parentMenuItem = menuItems.find((item) => item.id === rootSegment);

  if (!parentMenuItem) {
    // Unknown route — just show Home
    return { items: [{ label: '首页', path: '/dashboard' }] };
  }

  const section = menuSections.find((s) => s.id === parentMenuItem.section);

  // Home
  items.push({ label: '首页', path: '/dashboard' });

  // Section (skip for overview section like dashboard)
  if (section && section.id !== 'overview') {
    items.push({ label: section.label });
  }

  // Parent page (clickable for detail pages)
  if (segments.length > 1) {
    items.push({ label: parentMenuItem.label, path: `/${rootSegment}` });
  }

  // Sub-page label
  if (segments.length > 1) {
    const subSegment = segments[1];
    const isDetailPage = !isNaN(Number(subSegment));

    if (isDetailPage) {
      // Numeric ID — use a generic "详情" label
      items.push({ label: '详情' });
    } else {
      // Named sub-pages like 'create'
      const subPageLabels: Record<string, string> = {
        create: '新建',
        edit: '编辑',
      };
      items.push({ label: subPageLabels[subSegment] || subSegment });
    }
  } else {
    // Single segment — this is the current page
    items.push({ label: parentMenuItem.label });
  }

  return { items };
}