import { useEffect, useRef, useState } from "react";
import { Camera } from "lucide-react";
import { toast } from "sonner";
import { setUserAvatar } from "@/lib/server/api-academy";
import { cn } from "@/lib/utils";

function keyFor(email: string) {
  return `cfl-avatar:${email.toLowerCase()}`;
}

function readAvatar(email: string) {
  try {
    return sessionStorage.getItem(keyFor(email)) || localStorage.getItem(keyFor(email));
  } catch {
    return null;
  }
}

export function AvatarChip({
  email,
  initials,
  name,
  size = "md",
  showName = false,
}: {
  email: string;
  initials: string;
  name?: string;
  size?: "sm" | "md";
  showName?: boolean;
}) {
  const [src, setSrc] = useState<string | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const dim = size === "sm" ? "size-7 text-[11px]" : "size-8 text-xs";

  useEffect(() => {
    setSrc(readAvatar(email));
    function onChange() {
      setSrc(readAvatar(email));
    }
    window.addEventListener("cfl-avatar", onChange);
    return () => window.removeEventListener("cfl-avatar", onChange);
  }, [email]);

  function onFile(file: File | undefined) {
    if (!file) return;
    if (!file.type.startsWith("image/")) {
      toast.error("Use a photo file — jpg or png.");
      return;
    }
    if (file.size > 400_000) {
      toast.error("Keep the photo under 400 KB.");
      return;
    }
    const reader = new FileReader();
    reader.onload = () => {
      const data = String(reader.result ?? "");
      try {
        localStorage.setItem(keyFor(email), data);
        sessionStorage.setItem(keyFor(email), data);
      } catch {
        /* private mode */
      }
      setSrc(data);
      window.dispatchEvent(new Event("cfl-avatar"));
      void setUserAvatar({ data: { email, src: data } }).catch(() => undefined);
      toast.success("Photo saved. It shows next to your name.");
    };
    reader.readAsDataURL(file);
  }

  return (
    <button
      type="button"
      className={cn("flex items-center gap-2 rounded-full text-left", showName && "border border-border bg-card py-1 pr-3 pl-1")}
      onClick={() => inputRef.current?.click()}
      title="Upload a photo"
      aria-label="Upload a profile photo"
    >
      <span
        className={cn(
          "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary font-display font-semibold text-primary-foreground",
          dim,
        )}
      >
        {src ? <img src={src} alt="" className="size-full object-cover" /> : initials}
        <span className="absolute inset-x-0 bottom-0 flex justify-center bg-navy/70 py-px">
          <Camera className="size-2.5 text-gold-foreground" />
        </span>
      </span>
      {showName && name ? <span className="hidden text-sm font-medium sm:inline">{name}</span> : null}
      <input
        ref={inputRef}
        type="file"
        accept="image/*"
        className="sr-only"
        onChange={(e) => onFile(e.target.files?.[0])}
      />
    </button>
  );
}