---
const { pathname = "" } = Astro.url;
export interface Props {
  blogPostTitle?: string;
}

const { blogPostTitle } = Astro.props;

// Константа для маппинга путей в названия
const BREADCRUMB_NAMES: Record<string, string> = {
  "": "Главная",
  services: "Услуги",
  criminal: "Уголовные дела",
  civil: "Гражданские дела",
  family: "Семейные дела",
  arbitration: "Арбитражные дела",
  tax: "Налоговые дела",
  "real-estate": "Недвижимость",
  cases: "Кейсы",
  blog: "Блог",
  archive: "Архив",
  search: "Поиск",
  category: "Категория",
  faq: "FAQ",
  about: "О бюро",
  contacts: "Контакты",
  reviews: "Отзывы",
  administrative: "Административные дела",
  svo: "СВО дела",
  "debt-protection": "Защита должников",
  auth: "Авторизация",
  login: "Вход",
  register: "Регистрация",
  "forgot-password": "Восстановление пароля",
  "reset-password": "Сброс пароля",
  admin: "Админ-панель",
  "privacy-policy": "Политика конфиденциальности",
  "legal-info": "Правовая информация",
  prices: "Цены",
};

// Функция для форматирования пути в читаемое название
const formatBreadcrumbName = (pathSegment: string, isBlogPost: boolean = false, blogTitle?: string): string => {
  if (isBlogPost && blogTitle) {
    // Если это статья блога и у нас есть заголовок, используем его
    return blogTitle;
  }
  
  if (isBlogPost) {
    // Для статей блога возвращаем транслитерированное имя без форматирования
    // или можно реализовать логику получения заголовка статьи
    return pathSegment
      .split("-")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(" ");
  }
  
  return (
    BREADCRUMB_NAMES[pathSegment] ||
    pathSegment
      .split("-")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(" ")
  );
};

// Генерируем массив хлебных крошек
const pathSegments = pathname.split("/").filter((segment) => segment !== "");
const breadcrumbs = [];

for (let i = 0; i < pathSegments.length; i++) {
  const segment = pathSegments[i];
  const path = "/" + pathSegments.slice(0, i + 1).join("/");
  
  // Проверяем, является ли это статьей блога (если это последний сегмент и предыдущий сегмент - "blog")
  const isBlogPost = (i === pathSegments.length - 1) && (i > 0) && (pathSegments[i - 1] === "blog");
  
  // Для статьи блога используем заголовок статьи, если он предоставлен
  const breadcrumbName = isBlogPost && blogPostTitle ? blogPostTitle : formatBreadcrumbName(segment, false);
  
  breadcrumbs.push({
    name: breadcrumbName,
    path: path,
  });
}

// Добавляем главную страницу в начало
if (breadcrumbs.length > 0) {
  breadcrumbs.unshift({ name: "Главная", path: "/" });
}
---

{
  breadcrumbs.length > 1 && (
    <>
      {/* Мобильная версия - только последняя крошка */}
      <div class="block md:hidden w-full bg-white py-2">
        <div class="container mx-auto px-4 md:px-8 lg:px-16">
          <nav aria-label="Breadcrumb">
            <ol class="flex items-center space-x-2 text-sm text-gray-500">
              <li>
                <a
                  href="/"
                  class="text-[var(--color-blue-primary)] hover:text-[var(--color-blue-primary)]/80 transition-colors duration-300"
                >
                  Главная
                </a>
              </li>
              <li class="flex items-center">
                <svg
                  class="w-4 h-4 mx-2"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                    clip-rule="evenodd"
                  />
                </svg>
                <span class="font-medium text-gray-700 truncate max-w-[200px]">
                  {breadcrumbs[breadcrumbs.length - 1]?.name}
                </span>
              </li>
            </ol>
          </nav>
        </div>
      </div>

      {/* Десктопная версия */}
      <div class="hidden md:block w-full bg-white py-2">
        <div class="container mx-auto px-4 md:px-8 lg:px-16">
          <nav aria-label="Breadcrumb">
            <ol class="flex items-center space-x-2 text-sm text-gray-500">
              {breadcrumbs.map((crumb, index) => (
                <li class="flex items-center" data-path={crumb.path}>
                  {index > 0 && (
                    <svg
                      class="w-4 h-4 mx-2"
                      fill="currentColor"
                      viewBox="0 0 20 20"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                        clip-rule="evenodd"
                      />
                    </svg>
                  )}
                  {index === breadcrumbs.length - 1 ? (
                    <span
                      aria-current="page"
                      class="font-medium text-gray-700 truncate max-w-[150px]"
                    >
                      {crumb.name}
                    </span>
                  ) : (
                    <a
                      href={crumb.path}
                      class="text-[var(--color-blue-primary)] hover:text-[var(--color-blue-primary)]/80 transition-colors duration-300 font-medium truncate max-w-[150px]"
                    >
                      {crumb.name}
                    </a>
                  )}
                </li>
              ))}
            </ol>
          </nav>
        </div>
      </div>
    </>
  )
}
