import { IconChevronRight, IconHome } from "@tabler/icons-react";
import type { ReactNode } from "react";
import { Link } from "@/i18n/navigation";

interface BreadcrumbItem {
  href?: string;
  name: string;
}

const BASE_URL = "https://www.elevaseo.com";

function renderHomeNode(item: BreadcrumbItem): ReactNode {
  if (item.href) {
    return (
      <Link
        className="text-neutral-500 transition-colors hover:text-neutral-300"
        href={item.href}
      >
        <IconHome aria-hidden="true" className="size-5 shrink-0" stroke={1.5} />
        <span className="sr-only">{item.name}</span>
      </Link>
    );
  }
  return (
    <span className="text-neutral-400">
      <IconHome aria-hidden="true" className="size-5 shrink-0" stroke={1.5} />
      <span className="sr-only">{item.name}</span>
    </span>
  );
}

function renderInnerNode(item: BreadcrumbItem): ReactNode {
  if (item.href) {
    return (
      <Link
        className="ml-1 font-medium text-neutral-500 text-sm transition-colors hover:text-neutral-300 sm:ml-2"
        href={item.href}
      >
        {item.name}
      </Link>
    );
  }
  return (
    <span
      aria-current="page"
      className="ml-1 truncate font-medium text-neutral-400 text-sm sm:ml-2"
    >
      {item.name}
    </span>
  );
}

export function BreadcrumbSchema({
  items,
  locale,
  visual = true,
}: {
  items: BreadcrumbItem[];
  locale: string;
  visual?: boolean;
}) {
  const prefix = locale === "fr" ? "" : `/${locale}`;

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: items.map((item, index) => {
      const entry: Record<string, unknown> = {
        "@type": "ListItem",
        position: index + 1,
        name: item.name,
      };
      if (item.href) {
        entry.item = `${BASE_URL}${prefix}${item.href}`;
      }
      return entry;
    }),
  };

  return (
    <>
      <script
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        type="application/ld+json"
      />
      {visual ? (
        <nav
          aria-label="Breadcrumb"
          className="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8"
        >
          <ol className="flex items-center gap-1 sm:gap-2">
            {items.map((item, index) => {
              const isLast = index === items.length - 1;
              return (
                <li
                  className={`flex items-center ${isLast ? "min-w-0" : "shrink-0"}`}
                  key={item.name}
                >
                  {index === 0 ? (
                    renderHomeNode(item)
                  ) : (
                    <>
                      <IconChevronRight
                        aria-hidden="true"
                        className="size-4 shrink-0 text-neutral-600 sm:size-5"
                        stroke={1.5}
                      />
                      {renderInnerNode(item)}
                    </>
                  )}
                </li>
              );
            })}
          </ol>
        </nav>
      ) : null}
    </>
  );
}