import { Coffee } from "lucide-react";
import { useBrand } from "@/components/providers/BrandProvider";

type BrandLogoSize = "sm" | "md" | "lg" | "sidebar";

const sizeClasses: Record<
  BrandLogoSize,
  { box: string; icon: string; img: string; wrap: string; radius: string }
> = {
  sm: {
    box: "h-8 w-8",
    icon: "h-4 w-4",
    img: "h-8 w-auto max-w-[120px]",
    wrap: "px-0 py-0",
    radius: "rounded-md",
  },
  md: {
    box: "h-9 w-9",
    icon: "h-4 w-4",
    img: "h-9 w-auto max-w-[140px]",
    wrap: "px-0 py-0",
    radius: "rounded-lg",
  },
  lg: {
    box: "w-10 h-10",
    icon: "w-5 h-5",
    img: "h-10 w-auto max-w-[160px]",
    wrap: "px-0 py-0",
    radius: "rounded-xl",
  },
  sidebar: {
    box: "h-11 w-11",
    icon: "h-6 w-6",
    img: "w-full max-h-10 h-auto object-contain object-center",
    wrap: "flex w-full items-center justify-center",
    radius: "",
  },
};

interface BrandLogoProps {
  size?: BrandLogoSize;
  className?: string;
  /** Icon-only mark for collapsed sidebar. */
  compact?: boolean;
  /** Extra glow on the fallback mark (auth desktop panel). */
  glow?: boolean;
}

export default function BrandLogo({
  size = "sm",
  className = "",
  compact = false,
  glow = false,
}: BrandLogoProps) {
  const brand = useBrand();
  const s = sizeClasses[size];
  const showCompactMark = compact && size === "sidebar";
  const markUrl = brand.faviconUrl ?? brand.logoUrl;
  const imageUrl = showCompactMark ? markUrl : brand.logoUrl;

  if (imageUrl) {
    const isSidebar = size === "sidebar" && !showCompactMark;

    return (
      <span className={`${isSidebar ? s.wrap : "inline-flex items-center justify-center"} ${className}`}>
        {/* eslint-disable-next-line @next/next/no-img-element -- external white-label URLs */}
        <img
          src={imageUrl}
          alt={brand.name}
          className={`${showCompactMark ? "h-8 w-8 object-contain" : s.img} ${s.radius} object-contain`}
        />
      </span>
    );
  }

  return (
    <div
      className={`${showCompactMark ? "h-8 w-8" : s.box} ${s.radius} bg-[var(--accent)] flex items-center justify-center shrink-0 ${
        size === "sidebar" ? "mx-auto" : ""
      } ${
        glow ? "shadow-[0_0_30px_var(--accent-glow)]" : ""
      } ${className}`}
    >
      <Coffee className={`${s.icon} text-[var(--accent-fg)]`} strokeWidth={2.5} />
    </div>
  );
}