'use client';

import { itemKey } from './album-utils.js';

export default function AlbumBreadcrumb({ breadcrumb, dragOverFolderId, setDragOverFolderId, navigateToFolder, albumItems, moveItem, rootFolderId }) {
  if (!breadcrumb.length) return null;

  const handleDrop = (event, folderId) => {
    event.preventDefault();
    setDragOverFolderId(null);
    const key = event.dataTransfer.getData('text/madarx-item-key');
    const dragged = albumItems.find((it) => itemKey(it) === key);
    if (dragged) moveItem(dragged, folderId);
  };

  const dropProps = (folderId) => ({
    onDragOver: (e) => { e.preventDefault(); setDragOverFolderId(folderId || '__root__'); },
    onDragLeave: () => setDragOverFolderId(null),
    onDrop: (e) => handleDrop(e, folderId || rootFolderId),
  });

  return (
    <nav className="project-album-breadcrumb" aria-label="Folder">
      <button
        type="button"
        className={`project-album-crumb${dragOverFolderId === '__root__' ? ' drop-target' : ''}`}
        onClick={() => navigateToFolder(null)}
        {...dropProps(null)}
      >
        <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M2 8l6-5 6 5v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8z" />
        </svg>
        <span>Library</span>
      </button>
      {breadcrumb.map((f, idx) => {
        const isLast = idx === breadcrumb.length - 1;
        return (
          <span key={f.id} className="project-album-crumb-row">
            <svg className="project-album-crumb-sep" width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M3 1l4 4-4 4" />
            </svg>
            {isLast ? (
              <span className="project-album-crumb current" aria-current="page">{f.name}</span>
            ) : (
              <button
                type="button"
                className={`project-album-crumb${dragOverFolderId === f.id ? ' drop-target' : ''}`}
                onClick={() => navigateToFolder(f.id)}
                {...dropProps(f.id)}
              >
                {f.name}
              </button>
            )}
          </span>
        );
      })}
    </nav>
  );
}
