"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "../lib/utils";
import { transitions } from "../lib/motion";

const SIZES = {
  xs: "size-5 text-[9px]",
  sm: "size-6 text-[10px]",
  md: "size-8 text-xs",
  lg: "size-10 text-sm",
} as const;

/** Stable, soft background per name, so the same person keeps one color. */
function hueFor(seed: string): number {
  let hash = 0;
  for (let index = 0; index < seed.length; index += 1) hash = (hash * 31 + seed.charCodeAt(index)) >>> 0;
  return hash % 360;
}

function initials(name: string): string {
  const parts = name.trim().split(/\s+/).filter(Boolean);
  if (parts.length === 0) return "?";
  return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? (parts.at(-1)?.[0] ?? "") : "")).toUpperCase();
}

export interface AvatarProps {
  name: string;
  src?: string | null;
  size?: keyof typeof SIZES;
  className?: string;
}

export function Avatar({ name, src, size = "md", className }: AvatarProps) {
  const [failed, setFailed] = React.useState(false);
  const hue = hueFor(name);
  return (
    <span
      data-slot="avatar"
      title={name}
      className={cn(
        "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full font-semibold ring-2 ring-background",
        SIZES[size],
        className,
      )}
      style={{
        background: `oklch(0.92 0.05 ${hue})`,
        color: `oklch(0.42 0.1 ${hue})`,
      }}
    >
      {src && !failed ? (
        // eslint-disable-next-line @next/next/no-img-element -- framework-free package
        <img src={src} alt="" className="size-full object-cover" onError={() => setFailed(true)} />
      ) : (
        initials(name)
      )}
    </span>
  );
}

/** Overlapping avatars that spread apart on hover. */
export function AvatarGroup({
  people,
  max = 4,
  size = "sm",
  className,
}: {
  people: Array<{ name: string; src?: string | null }>;
  max?: number;
  size?: keyof typeof SIZES;
  className?: string;
}) {
  const [hovered, setHovered] = React.useState(false);
  const visible = people.slice(0, max);
  const overflow = people.length - visible.length;
  return (
    <div
      className={cn("flex items-center", className)}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      aria-label={people.map((person) => person.name).join(", ")}
    >
      {visible.map((person, index) => (
        <motion.span
          key={`${person.name}-${index}`}
          animate={{ marginLeft: index === 0 ? 0 : hovered ? 2 : -8 }}
          transition={transitions.spring}
          style={{ zIndex: visible.length - index }}
        >
          <Avatar name={person.name} src={person.src ?? null} size={size} />
        </motion.span>
      ))}
      {overflow > 0 ? (
        <motion.span
          animate={{ marginLeft: hovered ? 2 : -8 }}
          transition={transitions.spring}
          className={cn(
            "relative inline-flex items-center justify-center rounded-full bg-muted font-semibold text-muted-foreground ring-2 ring-background",
            SIZES[size],
          )}
        >
          +{overflow}
        </motion.span>
      ) : null}
    </div>
  );
}