"use client";

import { ChevronRight, Home } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

const Breadcrumb = () => {
  const pathname = usePathname();
  const labelMap: Record<string, string> = {
    dashboard: "主界面",
    knowledge: "知识库",
    document: "文档知识库",
    code: "代码知识库",
    chat: "对话",
    "doc-processing": "文档处理",
    extract: "需求提取",
    "test-case-gen": "测试用例生成",
    "consistency-analysis": "一致性分析",
    new: "新建",
    "api-keys": "API 密钥",
    "test-retrieval": "检索测试",
    upload: "上传",
    login: "登录",
    register: "注册",
  };

  const generateBreadcrumbs = () => {
    const paths = pathname.split("/").filter(Boolean);
    return paths.map((path, index) => {
      const href = "/" + paths.slice(0, index + 1).join("/");
      const label = labelMap[path] || path.replace(/-/g, " ");
      const isLast = index === paths.length - 1;
      const displayLabel = /^\d+$/.test(path) ? "详情" : label;

      return {
        href,
        label: displayLabel,
        isLast,
      };
    });
  };

  const breadcrumbs = generateBreadcrumbs();

  if (pathname === "/") return null;

  return (
    <nav className="mb-6 flex items-center space-x-2 text-base text-muted-foreground">
      <Link
        href="/dashboard"
        className="flex items-center transition-colors hover:text-foreground"
      >
        <Home className="h-4 w-4" />
      </Link>

      {breadcrumbs.map((breadcrumb) => (
        <div key={breadcrumb.href} className="flex items-center">
          <ChevronRight className="mx-2 h-4 w-4 text-muted-foreground/50" />
          {breadcrumb.isLast ? (
            <span className="font-medium text-foreground">
              {breadcrumb.label}
            </span>
          ) : (
            <Link
              href={breadcrumb.href}
              className="transition-colors hover:text-foreground"
            >
              {breadcrumb.label}
            </Link>
          )}
        </div>
      ))}
    </nav>
  );
};

export default Breadcrumb;
