/**
 * FileBreadcrumb — ファイルブラウザのパンくず（ルート / seg / seg …）。
 * スペースのファイルタブとタスクのファイルタブで共有する。
 */
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { DND_FILES_MIME, readDragSources } from '../../lib/fileDnd';

interface FileBreadcrumbProps {
  /** 現在パスのセグメント配列（空配列 = ルート）。 */
  pathSegments: string[];
  /** セグメントをクリックしたときに移動するパス（'' = ルート）。 */
  onNavigate: (path: string) => void;
  /** ルートラベル左に出す任意のプレフィックス（例: '/files'）。 */
  testid?: string;
  /**
   * Phase 2: パンくずの祖先セグメント（やルート）へドラッグ＆ドロップしたときの移動。
   * 指定すると祖先がドロップ先になり、上の階層へファイルを移せる。
   */
  onMoveDrop?: (sourcePaths: string[], destDir: string) => void;
}

export function FileBreadcrumb({ pathSegments, onNavigate, testid, onMoveDrop }: FileBreadcrumbProps) {
  const { t } = useTranslation('files');
  const [dropPath, setDropPath] = useState<string | null>(null);
  // ドロップ先になれるのは「現在地ではない」祖先のみ（現在地＝最後のセグメント）。
  const dropProps = (path: string, isCurrent: boolean) =>
    onMoveDrop && !isCurrent
      ? {
          onDragOver: (e: React.DragEvent) => {
            if (!e.dataTransfer.types.includes(DND_FILES_MIME)) return;
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move' as const;
            if (dropPath !== path) setDropPath(path);
          },
          onDragLeave: () => setDropPath(p => (p === path ? null : p)),
          onDrop: (e: React.DragEvent) => {
            e.preventDefault();
            setDropPath(null);
            const sources = readDragSources(e.dataTransfer);
            if (sources.length) onMoveDrop(sources, path);
          },
          'data-drop-target': 'true' as const,
        }
      : {};
  const dropRing = (path: string) =>
    dropPath === path ? ' ring-2 ring-[var(--brand-primary)] text-slate-900' : '';
  return (
    <nav
      data-testid={testid}
      aria-label={t('breadcrumb.nav')}
      className="flex flex-wrap items-center gap-0.5 text-2xs text-slate-500"
    >
      <button
        type="button"
        onClick={() => onNavigate('')}
        {...dropProps('', pathSegments.length === 0)}
        className={`rounded px-1 py-0.5 transition-colors hover:bg-surface hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:text-slate-700${dropRing('')}`}
        disabled={pathSegments.length === 0}
        aria-current={pathSegments.length === 0 ? 'location' : undefined}
      >
        {t('breadcrumb.root')}
      </button>
      {pathSegments.map((seg, i) => {
        const prefix = pathSegments.slice(0, i + 1).join('/');
        const isLast = i === pathSegments.length - 1;
        return (
          <span key={prefix} className="flex items-center gap-0.5">
            <span className="text-slate-300" aria-hidden>/</span>
            <button
              type="button"
              onClick={() => onNavigate(prefix)}
              {...dropProps(prefix, isLast)}
              className={`max-w-[14ch] truncate rounded px-1 py-0.5 transition-colors hover:bg-surface hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:text-slate-700${dropRing(prefix)}`}
              disabled={isLast}
              aria-current={isLast ? 'location' : undefined}
              title={seg}
            >
              {seg}
            </button>
          </span>
        );
      })}
    </nav>
  );
}