'use client';

import React, { ComponentProps } from 'react';

import { cn } from '@/lib/utils';

import { Link } from '@/i18n/navigation';

type HideBelow = 'sm' | 'md' | 'lg';

export type BreadcrumbItem = {
  label?: string;
  href?: ComponentProps<typeof Link>['href'];
  icon?: React.ReactNode;
  ariaLabel?: string;
  hideBelow?: HideBelow;
};

type BreadcrumbsProps = {
  items: BreadcrumbItem[];
  className?: string;
  sticky?: boolean;
  separator?: string;
  rightSlot?: React.ReactNode;
};

const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
  items,
  className,
  sticky = true,
  separator = '/',
  rightSlot,
}) => {
  if (!items || items.length === 0) return null;

  const homeItem = items[0];
  const firstItem = items[1];
  const lastItem = items[items.length - 1];
  const showLast = Boolean(lastItem && lastItem !== firstItem);
  const hideBelowItemClasses: Record<HideBelow, string> = {
    sm: 'hidden sm:inline-flex',
    md: 'hidden md:inline-flex',
    lg: 'hidden lg:inline-flex',
  };
  const hideBelowSeparatorClasses: Record<HideBelow, string> = {
    sm: 'hidden sm:inline',
    md: 'hidden md:inline',
    lg: 'hidden lg:inline',
  };

  return (
    <>
      <nav aria-label="Breadcrumb (mobile)" className={cn('w-full sm:hidden', className)}>
        <div className="flex items-center gap-3">
          <ol className="flex h-11 min-w-0 flex-1 items-center gap-2 overflow-x-hidden whitespace-nowrap text-[11px] font-semibold uppercase tracking-[0.3em] text-[#151720]/70">
            {homeItem?.href ? (
              <>
                <Link
                  href={homeItem.href}
                  className="inline-flex items-center justify-center"
                  aria-label={homeItem.ariaLabel}
                >
                  <span className="text-sm leading-none">{homeItem.icon ?? null}</span>
                </Link>
                <span aria-hidden="true" className="text-[#151720]/30">
                  {separator}
                </span>
              </>
            ) : null}

            {firstItem ? (
              <>
                {firstItem.href ? (
                  <Link
                    href={firstItem.href}
                    className="inline-flex items-center gap-1 text-[#151720]/70"
                  >
                    {firstItem.label}
                  </Link>
                ) : (
                  <span className="inline-flex items-center gap-1 text-[#151720]/70">
                    {firstItem.label}
                  </span>
                )}
              </>
            ) : null}

            {showLast ? (
              <>
                <span aria-hidden="true" className="text-[#151720]/30">
                  {separator}
                </span>
                <span className="min-w-0 max-w-[55vw] overflow-hidden text-ellipsis text-[#151720]">
                  {lastItem?.label}
                </span>
              </>
            ) : null}
          </ol>
          {rightSlot ? <div className="h-11 shrink-0 [&>*]:h-full">{rightSlot}</div> : null}
        </div>
      </nav>

      <nav
        aria-label="Breadcrumb"
        className={cn(
          'w-full hidden sm:block',
          sticky ? 'lg:sticky lg:top-[calc(var(--header-h))] z-40' : '',
          className
        )}
      >
        <div className="flex items-center gap-3">
          <ol className="flex h-11 min-w-0 flex-1 items-center gap-3 overflow-x-auto whitespace-nowrap bg-white/90 text-[11px] sm:text-[12px] font-semibold uppercase tracking-[0.3em] text-[#151720]/70 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
            {items.map((item, index) => {
              const isLast = index === items.length - 1;
              const visibilityClass = item.hideBelow
                ? hideBelowItemClasses[item.hideBelow]
                : 'inline-flex';
              const separatorVisibility = item.hideBelow
                ? hideBelowSeparatorClasses[item.hideBelow]
                : 'inline';
              const itemBaseClass = cn(
                'items-center gap-2 transition-colors min-w-0',
                visibilityClass,
                item.href
                  ? 'hover:text-[#151720]'
                  : isLast
                    ? 'text-[#151720]'
                    : 'text-[#151720]/70',
                isLast ? 'text-[#151720]' : ''
              );

              const content = (
                <>
                  {item.icon ? <span className="text-sm leading-none">{item.icon}</span> : null}
                  {item.label ? (
                    <span className="min-w-0 max-w-[40vw] sm:max-w-[28rem] overflow-hidden text-ellipsis">
                      {item.label}
                    </span>
                  ) : null}
                </>
              );

              return (
                <React.Fragment key={`${item.label ?? 'crumb'}-${index}`}>
                  {index > 0 && (
                    <span
                      aria-hidden="true"
                      className={cn('text-[#151720]/30', separatorVisibility)}
                    >
                      {separator}
                    </span>
                  )}
                  {item.href ? (
                    <Link
                      href={item.href}
                      className={itemBaseClass}
                      aria-label={item.ariaLabel}
                      aria-current={isLast ? 'page' : undefined}
                    >
                      {content}
                    </Link>
                  ) : (
                    <span
                      className={itemBaseClass}
                      aria-label={item.ariaLabel}
                      aria-current={isLast ? 'page' : undefined}
                    >
                      {content}
                    </span>
                  )}
                </React.Fragment>
              );
            })}
          </ol>
          {rightSlot ? <div className="h-11 shrink-0 [&>*]:h-full">{rightSlot}</div> : null}
        </div>
      </nav>
    </>
  );
};

export default Breadcrumbs;