"use client"

import Link from "next/link"
import {
  SUITE_APP_LOGO_LOCKUP_CLASS,
  SUITE_APP_LOGO_MARK_CLASS,
  SUITE_APP_LOGO_TEXT_CLASS,
} from "@/lib/suite/suite-chrome-classes"
import { cn } from "@/lib/utils"

type UltiMailLogoProps = {
  className?: string
  /** `horizontal` = picto + texte. `mark` = picto seul. `stacked` = wordmark empilé. */
  variant?: "horizontal" | "mark" | "stacked"
  /** Lien au clic ; `null` = pas de lien. Défaut : boîte de réception. */
  href?: string | null
}

/** Mark vectoriel plat 4 couleurs (style suite) — source des PNG via `pnpm run brand:ultimail`. */
const HEADER_ICON = "/ultimail-mark.svg"
const STACKED_WORDMARK = "/brand/ultimail-wordmark-stacked.png"
/** Fond transparent, texte clair pour fond sombre. */
const STACKED_WORDMARK_DARK = "/brand/ultimail-wordmark-stacked-dark.png"
const DEFAULT_INBOX_HREF = "/mail/inbox"

const STACKED_IMG_CLASS =
  "h-[11.25rem] w-auto max-w-none shrink-0 object-contain select-none sm:h-[12rem]"

export function UltiMailLogo({
  className,
  variant = "horizontal",
  href = DEFAULT_INBOX_HREF,
}: UltiMailLogoProps) {
  const mark = (
    <img
      src={HEADER_ICON}
      alt=""
      width={288}
      height={288}
      draggable={false}
      className={cn(
        SUITE_APP_LOGO_MARK_CLASS,
        variant === "mark" && "h-10 w-10",
      )}
      aria-hidden
    />
  )

  if (variant === "mark") {
    if (href === null) {
      return <div className={cn("shrink-0", className)}>{mark}</div>
    }
    return (
      <Link
        href={href}
        className={cn(
          "shrink-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
          className
        )}
        aria-label="Ultimail — Boîte de réception"
      >
        {mark}
      </Link>
    )
  }

  if (variant === "stacked") {
    const stacked = (
      <div className="flex h-[6.25rem] items-center justify-center overflow-hidden sm:h-[6.75rem]">
        <img
          src={STACKED_WORDMARK}
          alt="Ultimail"
          width={320}
          height={320}
          draggable={false}
          className={cn(STACKED_IMG_CLASS, "dark:hidden")}
        />
        <img
          src={STACKED_WORDMARK_DARK}
          alt="Ultimail"
          width={320}
          height={320}
          draggable={false}
          aria-hidden
          className={cn(STACKED_IMG_CLASS, "hidden dark:block")}
        />
      </div>
    )

    if (href === null) {
      return <div className={cn("flex justify-center", className)}>{stacked}</div>
    }

    return (
      <Link
        href={href}
        className={cn(
          "flex justify-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
          className
        )}
        aria-label="Ultimail — Boîte de réception"
      >
        {stacked}
      </Link>
    )
  }

  const body = (
    <div
      role="img"
      aria-label="Ultimail"
      className={cn(SUITE_APP_LOGO_LOCKUP_CLASS, "min-w-0 text-foreground")}
    >
      {mark}
      <span className={SUITE_APP_LOGO_TEXT_CLASS}>Ultimail</span>
    </div>
  )

  if (href === null) {
    return <div className={cn("min-w-0", className)}>{body}</div>
  }

  return (
    <Link
      href={href}
      className={cn(
        "flex min-w-0 items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
        className
      )}
      aria-label="Ultimail — Boîte de réception"
    >
      {body}
    </Link>
  )
}