"use client"

import { Fragment, useMemo } from "react"
import type { FolderTreeNode } from "@/lib/sidebar-nav-maps"
import { breadcrumbSegmentsForVisitKey } from "@/lib/mail-folder-display"
import { resolveMailNavIcon } from "@/lib/mail-nav-icons"
import { cn } from "@/lib/utils"

type MailFolderStackIndicatorProps = {
  currentKey: string
  folderTree: FolderTreeNode[]
  folderIdToLabel: Record<string, string>
  className?: string
}

function MailNavIconGlyph({
  visitKey,
  folderTree,
}: {
  visitKey: string
  folderTree: FolderTreeNode[]
}) {
  const resolved = useMemo(
    () => resolveMailNavIcon(visitKey, folderTree),
    [visitKey, folderTree]
  )

  if (resolved.kind === "folder-dot") {
    return (
      <span
        className={cn(
          "inline-block size-4 shrink-0 rounded-sm",
          resolved.colorClass
        )}
        aria-hidden
      />
    )
  }

  const { Icon } = resolved
  return (
    <Icon
      className="size-4 shrink-0 text-[#5f6368]"
      strokeWidth={1.5}
      aria-hidden
    />
  )
}

export function MailFolderStackIndicator({
  currentKey,
  folderTree,
  folderIdToLabel,
  className,
}: MailFolderStackIndicatorProps) {
  const segments = useMemo(
    () => breadcrumbSegmentsForVisitKey(currentKey, folderTree, folderIdToLabel),
    [currentKey, folderTree, folderIdToLabel]
  )

  const ariaLabel = segments.join(" · ")

  return (
    <div
      role="status"
      aria-live="polite"
      aria-label={`Boîte actuelle : ${ariaLabel}`}
      className={cn(
        "flex max-w-[min(360px,calc(100vw-1rem))] items-center gap-2.5",
        "border-t border-r border-[#dadce0]/90",
        "bg-white/78 px-3.5 py-2.5 text-sm font-medium leading-snug text-[#3c4043]",
        "rounded-tr-2xl shadow-sm backdrop-blur-md",
        className
      )}
    >
      <MailNavIconGlyph visitKey={currentKey} folderTree={folderTree} />
      <span className="flex min-w-0 items-center gap-1.5">
        {segments.map((seg, i) => (
          <Fragment key={`${seg}-${i}`}>
            {i > 0 ? (
              <span
                className="shrink-0 text-xs leading-none text-[#9aa0a6]"
                aria-hidden
              >
                ·
              </span>
            ) : null}
            <span className="truncate">{seg}</span>
          </Fragment>
        ))}
      </span>
    </div>
  )
}