"use client"

import {
  Children,
  isValidElement,
  useMemo,
  type ReactNode,
  type RefObject,
} from "react"
import { useAutoAnimate } from "@formkit/auto-animate/react"
import {
  CONTACTS_DISCOVERY_CARD_MASONRY_ITEM_ENTER_CLASS,
  CONTACTS_DISCOVERY_CARD_MASONRY_ROOT_CLASS,
  CONTACTS_DISCOVERY_CARD_MASONRY_SENTINEL_CLASS,
} from "@/lib/contacts-chrome-classes"
import { useEnteringItemKeys } from "@/components/gmail/contacts-page/use-entering-item-keys"
import { cn } from "@/lib/utils"

interface DiscoveryCardsMasonryProps {
  children: ReactNode
  className?: string
  footer?: ReactNode
  animateEnter?: boolean
}

function childKey(child: ReactNode, index: number): string {
  if (isValidElement(child) && child.key != null) {
    return String(child.key)
  }
  return String(index)
}

/** Une seule liste DOM — grille responsive 1 col / 2 cols lg+. */
export function DiscoveryCardsMasonry({
  children,
  className,
  footer,
  animateEnter = true,
}: DiscoveryCardsMasonryProps) {
  const items = Children.toArray(children)
  const enteringKeys = useEnteringItemKeys(items)
  const [gridRef] = useAutoAnimate({ duration: 140, easing: "ease-out" })

  const renderedItems = useMemo(
    () =>
      items.map((child, index) => {
        const key = childKey(child, index)
        return (
          <div
            key={key}
            className={cn(
              "min-w-0",
              animateEnter && enteringKeys.has(key) && CONTACTS_DISCOVERY_CARD_MASONRY_ITEM_ENTER_CLASS,
            )}
          >
            {child}
          </div>
        )
      }),
    [items, enteringKeys, animateEnter],
  )

  return (
    <div className={cn(CONTACTS_DISCOVERY_CARD_MASONRY_ROOT_CLASS, className)}>
      <div
        ref={gridRef}
        className="grid grid-cols-1 items-start gap-5 lg:grid-cols-2"
      >
        {renderedItems}
      </div>
      {footer}
    </div>
  )
}

export function DiscoveryCardsMasonryItem({
  children,
  className,
}: {
  children: ReactNode
  className?: string
}) {
  return <div className={cn("min-w-0", className)}>{children}</div>
}

export function DiscoveryCardsMasonrySentinel({
  children,
  className,
  sentinelRef,
}: {
  children?: ReactNode
  className?: string
  sentinelRef?: RefObject<HTMLDivElement | null>
}) {
  return (
    <div
      ref={sentinelRef}
      className={cn(CONTACTS_DISCOVERY_CARD_MASONRY_SENTINEL_CLASS, className)}
    >
      {children}
    </div>
  )
}