"use client"

import * as React from "react"

import { cn } from "../../lib/utils"
import { AvatarInitials } from "../ui/avatar"

export interface PersonIdentityCellProps {
  name: string
  email?: string | null
  initials: string
  avatarClassName?: string
  /** When set, email renders as a mailto link (row click should stopPropagation on the anchor). */
  emailHref?: string
  /**
   * Wrap the name when the person column leads somewhere, e.g. a record route.
   * A render prop rather than an `href` so the caller supplies its own router
   * link and the cell stays router-agnostic; a plain anchor would full-reload
   * a single-page app.
   *
   * Keyboard parity depends on this: `onRowClick` alone leaves the row
   * unreachable without a mouse.
   */
  renderName?: (name: React.ReactNode) => React.ReactNode
  className?: string
}

/**
 * Table / list person column — avatar + name + optional email.
 * Email uses `text-sm` (same scale as table body) with muted color so secondary
 * lines never render below the 12px `--text-xs` floor.
 */
export function PersonIdentityCell({
  name,
  email,
  initials,
  avatarClassName,
  emailHref,
  renderName,
  className,
}: PersonIdentityCellProps) {
  const resolvedEmail = email?.trim()
  // Two stacked links in one cell are each ~20px tall with no gap between them,
  // which fails WCAG 2.5.8 target size on both counts (size and spacing). When
  // the name already leads somewhere, that link wins and the email drops to
  // text; pass `emailHref` explicitly to override.
  const href =
    emailHref ??
    (resolvedEmail && !renderName ? `mailto:${resolvedEmail}` : undefined)

  const nameNode = (
    <span className="truncate text-sm font-medium text-foreground" title={name}>
      {name}
    </span>
  )

  return (
    <div className={cn("flex min-w-0 items-center gap-2.5", className)}>
      <AvatarInitials
        initials={initials}
        className={cn("size-8 shrink-0 text-xs", avatarClassName)}
      />
      <div className="flex min-w-0 flex-col gap-0.5">
        {renderName ? renderName(nameNode) : nameNode}
        {resolvedEmail ? (
          href ? (
            <a
              href={href}
              title={resolvedEmail}
              className="truncate rounded-sm text-sm font-normal text-muted-foreground outline-none transition-colors hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
              onClick={(e) => e.stopPropagation()}
            >
              {resolvedEmail}
            </a>
          ) : (
            <span
              className="truncate text-sm font-normal text-muted-foreground"
              title={resolvedEmail}
            >
              {resolvedEmail}
            </span>
          )
        ) : null}
      </div>
    </div>
  )
}