"use client";

/**
 * BrandLogo
 *
 * Renders an official brand logo from /public/brands/.
 *
 * ── For brands registered in BRAND_ASSETS ────────────────────────────────────
 *   • Shows the uploaded PNG / JPEG file via Next.js Image
 *   • Brand-tinted loading shimmer while the image is fetching
 *   • If the file fails to load: hides the image, keeps the white container
 *
 * ── For unregistered brands ───────────────────────────────────────────────────
 *   • Shows a neutral grey placeholder (no text, no icon, no letter avatar)
 *
 * NO Clearbit. NO generated SVGs. NO car silhouettes. NO letter avatars.
 *
 * Source of truth: lib/brandAssets.ts
 */

import Image from "next/image";
import { useState } from "react";
import { cn } from "@/lib/utils";
import { BRAND_ASSETS, getBrandColor } from "@/lib/brandAssets";

// ── Props ─────────────────────────────────────────────────────────────────────
interface BrandLogoProps {
  brand: string;
  /** Square size in px. Default 48. */
  size?: number;
  className?: string;
  /** Wrap in a white rounded card with border + shadow. Default true. */
  showWhiteBg?: boolean;
}

// ── Component ─────────────────────────────────────────────────────────────────
export default function BrandLogo({
  brand,
  size = 48,
  className = "",
  showWhiteBg = true,
}: BrandLogoProps) {
  const asset      = BRAND_ASSETS[brand];
  const brandColor = getBrandColor(brand);
  const padding    = Math.max(4, Math.round(size * 0.10));

  const [isLoaded, setIsLoaded] = useState(false);
  const [hasError, setHasError] = useState(false);

  // ── Unregistered brand → neutral grey square ──────────────────────────────
  if (!asset) {
    return (
      <div
        aria-label={brand}
        style={{ width: size, height: size }}
        className={cn(
          "shrink-0 rounded-2xl bg-gray-100",
          showWhiteBg && "border border-gray-200",
          className
        )}
      />
    );
  }

  // ── Registered brand → official uploaded logo ─────────────────────────────
  return (
    <div
      aria-label={`${brand} logo`}
      style={{ width: size, height: size }}
      className={cn(
        "relative shrink-0 overflow-hidden",
        showWhiteBg && "rounded-2xl bg-white border border-gray-100 shadow-sm",
        className
      )}
    >
      {/* Brand-tinted shimmer — visible while image is loading */}
      {!isLoaded && !hasError && (
        <div
          className="absolute inset-0 animate-pulse rounded-2xl"
          style={{ backgroundColor: brandColor, opacity: 0.08 }}
          aria-hidden="true"
        />
      )}

      {/* Official logo image */}
      {!hasError && (
        <Image
          src={asset.logo}
          alt={`${brand} logo`}
          fill
          style={{ padding }}
          className={cn(
            "object-contain transition-opacity duration-300",
            isLoaded ? "opacity-100" : "opacity-0"
          )}
          sizes={`${size}px`}
          loading="lazy"
          onLoad={() => setIsLoaded(true)}
          onError={() => {
            setHasError(true);
            setIsLoaded(false);
          }}
          unoptimized
        />
      )}
    </div>
  );
}