pn-new-crm/src/components/documents/folder-breadcrumb.tsx

'use client';

import { ChevronRight, Home } from 'lucide-react';

import { useDocumentFolders, type FolderNode } from '@/hooks/use-document-folders';

interface FolderBreadcrumbProps {
  selectedFolderId: string | null | undefined;
  onSelect: (folderId: string | null | undefined) => void;
}

function findPath(tree: FolderNode[], id: string): FolderNode[] | null {
  for (const node of tree) {
    if (node.id === id) return [node];
    const inChild = findPath(node.children, id);
    if (inChild) return [node, ...inChild];
  }
  return null;
}

export function FolderBreadcrumb({ selectedFolderId, onSelect }: FolderBreadcrumbProps) {
  const { data: tree = [] } = useDocumentFolders();

  let label: string;
  let path: FolderNode[] = [];
  if (selectedFolderId === undefined) {
    label = 'All documents';
  } else if (selectedFolderId === null) {
    label = 'Root';
  } else {
    path = findPath(tree, selectedFolderId) ?? [];
    label = path.at(-1)?.name ?? 'Folder';
  }

  return (
    <nav
      aria-label="Folder breadcrumb"
      className="flex items-center gap-1 text-sm text-muted-foreground"
    >
      <button
        type="button"
        onClick={() => onSelect(undefined)}
        className="flex items-center gap-1 hover:text-foreground"
      >
        <Home className="h-3.5 w-3.5" />
        <span>All</span>
      </button>
      {path.length === 0 && selectedFolderId === null ? (
        <>
          <ChevronRight className="h-3.5 w-3.5" aria-hidden="true" />
          <span className="text-foreground" aria-current="page">
            Root
          </span>
        </>
      ) : null}
      {path.map((node, i) => (
        <span key={node.id} className="flex items-center gap-1">
          <ChevronRight className="h-3.5 w-3.5" aria-hidden="true" />
          {i === path.length - 1 ? (
            <span className="text-foreground" aria-current="page">
              {node.name}
            </span>
          ) : (
            <button
              type="button"
              onClick={() => onSelect(node.id)}
              className="hover:text-foreground"
            >
              {node.name}
            </button>
          )}
        </span>
      ))}
      <span className="sr-only">Current location: {label}</span>
    </nav>
  );
}