"use client";

import Image from "next/image";
import Link from "next/link";
import { siteLogo } from "@/assets";
import { FOOTER } from "@/lib/strings/footer";
import { cn } from "@/lib/utils";

export type FrontendBrandLogoVariant = "header" | "footer" | "auth" | "compact";

export type FrontendBrandLogoRoleBadge = "hotel" | "agent" | "admin";

const roleBadgeLabel: Record<FrontendBrandLogoRoleBadge, string> = {
  hotel: "Hotel",
  agent: "Agent",
  admin: "Admin",
};

const roleBadgeClass: Record<FrontendBrandLogoRoleBadge, string> = {
  hotel:
    "text-[9px] font-bold uppercase tracking-widest bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 px-2 py-0.5 rounded-md border border-slate-200 dark:border-slate-700 w-fit",
  agent:
    "text-[9px] font-bold uppercase tracking-widest bg-gradient-to-r from-gray-800/20 to-gray-900/10 text-gray-700 dark:text-gray-300 px-2 py-0.5 rounded-md border border-gray-500/20 w-fit",
  admin:
    "text-[9px] font-bold uppercase tracking-widest bg-gradient-to-r from-primary/20 to-primary/10 text-primary px-2 py-0.5 rounded-md border border-primary/20 w-fit",
};

type FrontendBrandLogoProps = {
  variant: FrontendBrandLogoVariant;
  className?: string;
  /** Defaults to `/` for public header/footer; set for role dashboards. */
  href?: string;
  roleBadge?: FrontendBrandLogoRoleBadge;
  /** e.g. close mobile drawer after navigation */
  onNavigate?: () => void;
};

const variantImageClass: Record<FrontendBrandLogoVariant, string> = {
  header:
    "h-20 w-auto shrink-0 transition-transform group-hover:scale-[1.02] sm:h-25 sm:w-30",
  footer:
    "h-20 w-auto shrink-0 transition-transform group-hover:scale-[1.02] sm:h-25 sm:w-30",
  auth: "h-10 w-auto shrink-0 transition-transform group-hover:scale-[1.02] sm:h-12",
  compact: "h-10 w-20  transition-transform group-hover:scale-[1.02]",
};

const variantSizes: Record<FrontendBrandLogoVariant, string> = {
  header: "(max-width: 640px) 160px, 200px",
  footer: "(max-width: 640px) 200px, 240px",
  auth: "(max-width: 640px) 100px, 120px",
  compact: "(max-width: 640px) 80px, 100px",
};

export function FrontendBrandLogo({
  variant,
  className,
  href = "/",
  roleBadge,
  onNavigate,
}: FrontendBrandLogoProps) {
  const image = (
    <Image
      src={siteLogo}
      alt=""
      width={siteLogo.width}
      height={siteLogo.height}
      className={variantImageClass[variant]}
      sizes={variantSizes[variant]}
      priority={variant === "header"}
    />
  );

  const content =
    variant === "footer" ? (
      <span className="inline-flex items-center justify-center rounded-lg bg-white px-3 py-2 shadow-sm ring-1 ring-black/5">
        {image}
      </span>
    ) : variant === "auth" ? (
      <span className="inline-flex items-center justify-center rounded-xl bg-white/95 px-3 py-2 shadow-sm ring-1 ring-black/5 dark:bg-white/90">
        {image}
      </span>
    ) : variant === "compact" ? (
      <span className="inline-flex items-center justify-center text-lg font-bold tracking-tight">
        <span className="text-primary mr-1">Ameera</span>
        <span className="frontend-text-gradient">Holidays</span>
      </span>
    ) : (
      image
    );

  const inner = roleBadge ? (
    <span className="flex items-center gap-3">
      {content}
      <span className="flex flex-col justify-center">
        <span className={roleBadgeClass[roleBadge]}>
          {roleBadgeLabel[roleBadge]}
        </span>
      </span>
    </span>
  ) : (
    content
  );

  return (
    <Link
      href={href}
      className={cn("group inline-flex items-center", className)}
      aria-label={`${FOOTER.BRAND_NAME} home`}
      onClick={onNavigate}
    >
      {inner}
    </Link>
  );
}