/**
 * Breadcrumb - 路径导航组件（本地支持 Windows / UNC，远程保持 POSIX）
 */

import { ChevronRight, Home } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { splitPathSegments } from '../../utils/localPath'

interface BreadcrumbProps {
  path: string
  isLocal?: boolean
  onNavigate: (p: string) => void
  onHome: () => void
}

export function Breadcrumb({ path, isLocal = false, onNavigate, onHome }: BreadcrumbProps) {
  const { t } = useTranslation('sftp')
  const { root, parts, join } = splitPathSegments(path || (isLocal ? '' : '/'), isLocal)
  const rootLabel = isLocal && root !== '/' ? root.replace(/\\$/, '') || root : '/'

  return (
    <div className="flex min-w-0 items-center gap-1 text-sm">
      <button
        type="button"
        onClick={onHome}
        className="flex-shrink-0 rounded p-1.5 transition-colors hover:bg-dark-700"
        title={t('nav.home')}
      >
        <Home className="h-4 w-4 text-txt-muted" />
      </button>
      <button
        type="button"
        onClick={() => onNavigate(root || '/')}
        className="rounded px-1.5 py-0.5 text-txt-muted transition-colors hover:bg-dark-700 hover:text-dark-200"
      >
        {rootLabel}
      </button>
      {parts.map((part, index) => (
        <span key={`${part}-${index}`} className="flex min-w-0 items-center">
          <ChevronRight className="mx-0.5 h-3 w-3 flex-shrink-0 text-dark-600" />
          <button
            type="button"
            onClick={() => onNavigate(join(parts.slice(0, index + 1)))}
            className="max-w-[120px] truncate rounded px-1.5 py-0.5 text-content-primary transition-colors hover:bg-dark-700"
          >
            {part}
          </button>
        </span>
      ))}
    </div>
  )
}