import { clsx } from "clsx";
import Image from "next/image";

type Props = {
  /**
   * If provided, the real photo is rendered. If the file does not exist in
   * /public the page will fail to load the image (but the layout still holds).
   * If omitted, a branded monogram fallback is used.
   */
  photo?: string;
  name: string;
  initials: string;
  /** Brand accent for the monogram gradient. */
  tone?: "blue" | "ink";
  className?: string;
  /** When used inside a square card, set sizes for next/image. */
  sizes?: string;
};

/**
 * Portrait block for leadership pages. Renders an uploaded photo when
 * available; otherwise a large, elegant monogram on a brand gradient —
 * intentionally NOT a tiny avatar, this is designed to fill a square card.
 */
export function FounderAvatar({
  photo,
  name,
  initials,
  tone = "blue",
  className,
  sizes = "(min-width: 1024px) 320px, (min-width: 768px) 40vw, 100vw",
}: Props) {
  if (photo) {
    return (
      <div
        className={clsx(
          "relative aspect-square overflow-hidden rounded-2xl border border-[var(--color-line)] bg-[var(--color-mist)]",
          className,
        )}
      >
        <Image
          src={photo}
          alt={name}
          fill
          sizes={sizes}
          className="object-cover"
        />
      </div>
    );
  }

  const gradient =
    tone === "ink"
      ? "from-[#0a0f2e] via-[#151b4a] to-[var(--color-blue)]"
      : "from-[var(--color-blue)] via-[#3951ff] to-[#1530c4]";

  return (
    <div
      className={clsx(
        "relative aspect-square overflow-hidden rounded-2xl border border-[var(--color-line)] bg-gradient-to-br",
        gradient,
        className,
      )}
      aria-label={name}
    >
      {/* Decorative soft glow */}
      <div
        aria-hidden
        className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(255,255,255,0.25),transparent_55%),radial-gradient(ellipse_at_bottom_left,rgba(255,255,255,0.12),transparent_50%)]"
      />
      {/* Fine grid pattern for texture */}
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.07]"
        style={{
          backgroundImage:
            "linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
          backgroundSize: "32px 32px",
        }}
      />
      <div className="absolute inset-0 flex items-center justify-center">
        <span
          className="font-display font-extrabold tracking-[-0.04em] text-white/95 drop-shadow-[0_2px_20px_rgba(0,0,0,0.25)]"
          style={{ fontSize: "clamp(5rem, 16cqi, 9rem)", lineHeight: 1 }}
        >
          {initials}
        </span>
      </div>
      {/* Subtle bottom veil for badge overlay readability */}
      <div
        aria-hidden
        className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/35 to-transparent"
      />
      <div className="absolute inset-x-0 bottom-0 flex items-center justify-between px-4 py-3 text-[11px] font-bold uppercase tracking-[0.15em] text-white/85">
        <span>OrthoGlobe</span>
        <span>Leadership</span>
      </div>
    </div>
  );
}
