import { cn } from "@/lib/utils";
import logoAsset from "@/assets/bvanny-connect-logo.png.asset.json";

/**
 * BrandLogo — canonical BVANNY CONNECT identity component.
 *
 * Single source of truth for the mascot + wordmark. All surfaces (captive
 * portal, admin, invoices, emails, PDFs) MUST consume this component so a
 * future rebrand touches one file.
 *
 * Variants:
 *   - "full"     : mascot + wordmark stacked (default hero use)
 *   - "inline"   : mascot beside wordmark (nav / header)
 *   - "mark"     : mascot only (favicon-scale, avatar, splash)
 *   - "wordmark" : text lockup only
 */
type BrandLogoVariant = "full" | "inline" | "mark" | "wordmark";

interface BrandLogoProps {
  variant?: BrandLogoVariant;
  className?: string;
  /** Mascot pixel size in px (applied to width/height). */
  size?: number;
  /** Hide the "CONNECT" descender in the wordmark (compact contexts). */
  compactWordmark?: boolean;
}

function Wordmark({ compact = false }: { compact?: boolean }) {
  return (
    <div className="flex flex-col items-center leading-none">
      <span className="font-display text-2xl font-bold tracking-tight sm:text-3xl">
        <span className="text-primary">B</span>
        <span className="text-accent">V</span>
        <span className="text-foreground">ANNY</span>
      </span>
      {!compact && (
        <span className="mt-1 flex items-center gap-1.5 text-[0.65rem] font-medium uppercase tracking-[0.35em] text-accent">
          <span aria-hidden className="h-px w-4 bg-accent/70" />
          Connect
          <span aria-hidden className="h-px w-4 bg-accent/70" />
        </span>
      )}
    </div>
  );
}

export function BrandLogo({
  variant = "full",
  className,
  size = 96,
  compactWordmark = false,
}: BrandLogoProps) {
  if (variant === "wordmark") {
    return (
      <div className={cn("inline-flex", className)}>
        <Wordmark compact={compactWordmark} />
      </div>
    );
  }

  if (variant === "mark") {
    return (
      <img
        src={logoAsset.url}
        alt="BVANNY CONNECT"
        width={size}
        height={size}
        className={cn("h-auto w-auto object-contain select-none", className)}
        style={{ width: size, height: size }}
        draggable={false}
      />
    );
  }

  if (variant === "inline") {
    return (
      <div className={cn("inline-flex items-center gap-3", className)}>
        <img
          src={logoAsset.url}
          alt=""
          aria-hidden
          width={size}
          height={size}
          className="object-contain select-none"
          style={{ width: size, height: size }}
          draggable={false}
        />
        <Wordmark compact={compactWordmark} />
      </div>
    );
  }

  // full
  return (
    <div className={cn("inline-flex flex-col items-center gap-3", className)}>
      <img
        src={logoAsset.url}
        alt="BVANNY CONNECT"
        width={size}
        height={size}
        className="object-contain select-none drop-shadow-[0_10px_30px_oklch(0.83_0.145_85/0.25)]"
        style={{ width: size, height: size }}
        draggable={false}
      />
      <Wordmark compact={compactWordmark} />
    </div>
  );
}