import { PencilSimple, User } from "@phosphor-icons/react";
import { useRef, type ChangeEvent, type ReactNode } from "react";
import { cn } from "../../lib/cn";

export type AvatarSize = "sm" | "md" | "lg";

export type AvatarEditError = {
  code: "file-too-large" | "invalid-file-type";
  file: File;
  message: string;
};

export type AvatarProps = {
  accept?: string;
  alt?: string;
  asset?: ReactNode;
  capture?: boolean | "user" | "environment";
  className?: string;
  disabled?: boolean;
  editable?: boolean;
  editLabel?: string;
  imageClassName?: string;
  initials?: string;
  inputName?: string;
  maxFileSize?: number;
  name?: string;
  onEdit?: (file: File) => void;
  onEditError?: (error: AvatarEditError) => void;
  size?: AvatarSize;
  src?: string;
};

const avatarSizeClasses: Record<AvatarSize, string> = {
  sm: "h-8 w-8 text-xs",
  md: "h-[var(--uhuru-control-height)] w-[var(--uhuru-control-height)] text-sm",
  lg: "h-14 w-14 text-base",
};

const editButtonSizes: Record<AvatarSize, { button: number; icon: number }> = {
  sm: { button: 16, icon: 9 },
  md: { button: 18, icon: 11 },
  lg: { button: 20, icon: 13 },
};

function initialsFromName(name?: string) {
  if (!name) {
    return "";
  }

  return name
    .trim()
    .split(/\s+/)
    .slice(0, 2)
    .map((part) => part.charAt(0))
    .join("")
    .toUpperCase();
}

function fileMatchesAccept(file: File, accept: string) {
  if (!accept.trim()) {
    return true;
  }

  return accept
    .split(",")
    .map((value) => value.trim().toLowerCase())
    .filter(Boolean)
    .some((value) => {
      if (value.startsWith(".")) {
        return file.name.toLowerCase().endsWith(value);
      }

      if (value.endsWith("/*")) {
        return file.type.toLowerCase().startsWith(value.slice(0, -1));
      }

      return file.type.toLowerCase() === value;
    });
}

export function Avatar({
  accept = "image/*",
  alt,
  asset,
  capture,
  className,
  disabled = false,
  editable = false,
  editLabel = "Change avatar",
  imageClassName,
  initials,
  inputName,
  maxFileSize,
  name,
  onEdit,
  onEditError,
  size = "md",
  src,
}: AvatarProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const fallbackInitials = initials?.trim() || initialsFromName(name);

  function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    event.target.value = "";

    if (!file) {
      return;
    }

    if (!fileMatchesAccept(file, accept)) {
      onEditError?.({
        code: "invalid-file-type",
        file,
        message: `The selected file does not match the accepted types: ${accept}.`,
      });
      return;
    }

    if (maxFileSize !== undefined && file.size > maxFileSize) {
      onEditError?.({
        code: "file-too-large",
        file,
        message: `The selected file exceeds the ${maxFileSize}-byte size limit.`,
      });
      return;
    }

    onEdit?.(file);
  }

  return (
    <span className={cn("relative inline-flex shrink-0 align-middle", className)}>
      <span
        className={cn(
          "inline-flex items-center justify-center overflow-hidden rounded-full border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)] font-medium text-[var(--uhuru-text-primary)]",
          avatarSizeClasses[size],
        )}
      >
        {asset ? (
          <span className="grid h-full w-full place-items-center [&_img]:h-full [&_img]:w-full [&_img]:object-cover">
            {asset}
          </span>
        ) : src ? (
          <img
            alt={(alt ?? name ?? fallbackInitials) || "Avatar"}
            className={cn("h-full w-full object-cover", imageClassName)}
            src={src}
          />
        ) : fallbackInitials ? (
          fallbackInitials
        ) : (
          <User aria-hidden="true" weight="regular" />
        )}
      </span>

      {editable ? (
        <>
          <input
            accept={accept}
            aria-hidden="true"
            capture={capture}
            className="sr-only"
            disabled={disabled}
            name={inputName}
            onChange={handleFileChange}
            ref={inputRef}
            tabIndex={-1}
            type="file"
          />
          <button
            aria-label={editLabel}
            className="absolute bottom-0 right-0 grid min-w-0 translate-x-1/4 translate-y-1/4 place-items-center rounded-full border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-0 text-[var(--uhuru-text-primary)] shadow-[var(--uhuru-shadow-sm)] transition hover:bg-[var(--uhuru-surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--uhuru-border-accent)]"
            disabled={disabled}
            onClick={() => inputRef.current?.click()}
            style={{ height: editButtonSizes[size].button, width: editButtonSizes[size].button }}
            type="button"
          >
            <PencilSimple aria-hidden="true" size={editButtonSizes[size].icon} weight="regular" />
          </button>
        </>
      ) : null}
    </span>
  );
}