import { cn } from "@/lib/utils"

/** Menu déroulant / contextuel Gmail (portail Radix → tokens shadcn). */
export const MAIL_MENU_SURFACE_CLASS = cn(
  "min-w-[220px] rounded-lg border border-border bg-popover p-0 py-1 text-popover-foreground shadow-lg",
  "[&_[data-slot=dropdown-menu-item]]:gap-3 [&_[data-slot=dropdown-menu-item]]:rounded-none",
  "[&_[data-slot=dropdown-menu-item]]:px-3 [&_[data-slot=dropdown-menu-item]]:py-2 [&_[data-slot=dropdown-menu-item]]:text-sm",
  "[&_[data-slot=dropdown-menu-item]]:focus:bg-accent [&_[data-slot=dropdown-menu-item]]:focus:text-accent-foreground",
  "[&_[data-slot=dropdown-menu-sub-trigger]]:gap-3 [&_[data-slot=dropdown-menu-sub-trigger]]:rounded-none",
  "[&_[data-slot=dropdown-menu-sub-trigger]]:px-3 [&_[data-slot=dropdown-menu-sub-trigger]]:py-2",
  "[&_[data-slot=dropdown-menu-sub-trigger]]:text-sm",
  "[&_[data-slot=dropdown-menu-sub-trigger]]:focus:bg-accent",
  "[&_[data-slot=dropdown-menu-sub-trigger]]:data-[state=open]:bg-accent",
  "[&_[data-slot=dropdown-menu-sub-content]]:min-w-[200px]",
  "[&_[data-slot=dropdown-menu-sub-content]]:rounded-lg",
  "[&_[data-slot=dropdown-menu-sub-content]]:border [&_[data-slot=dropdown-menu-sub-content]]:border-border",
  "[&_[data-slot=dropdown-menu-sub-content]]:bg-popover",
  "[&_[data-slot=dropdown-menu-sub-content]]:p-0 [&_[data-slot=dropdown-menu-sub-content]]:py-1",
  "[&_[data-slot=dropdown-menu-sub-content]]:shadow-lg",
  "[&_[data-slot=dropdown-menu-separator]]:mx-0 [&_[data-slot=dropdown-menu-separator]]:my-1",
  "[&_[data-slot=dropdown-menu-separator]]:bg-border",
  "[&_[data-slot=context-menu-item]]:focus:bg-accent [&_[data-slot=context-menu-item]]:focus:text-accent-foreground",
  "[&_[data-slot=context-menu-sub-trigger]]:focus:bg-accent",
  "[&_[data-slot=context-menu-sub-content]]:border-border [&_[data-slot=context-menu-sub-content]]:bg-popover"
)

export const MAIL_MENU_SURFACE_WIDE_CLASS = cn(
  MAIL_MENU_SURFACE_CLASS,
  "min-w-[280px]"
)

export const MAIL_SIDEBAR_MENU_SURFACE_CLASS = cn(
  "min-w-[240px] border-border bg-popover p-0 py-1.5 text-popover-foreground shadow-md",
  "[&_[data-slot=dropdown-menu-label]]:text-muted-foreground",
  "[&_[data-slot=dropdown-menu-item]]:text-popover-foreground",
  "[&_[data-slot=dropdown-menu-item]]:focus:bg-accent [&_[data-slot=dropdown-menu-item]]:focus:text-accent-foreground",
  "[&_[data-slot=dropdown-menu-sub-trigger]]:text-popover-foreground",
  "[&_[data-slot=dropdown-menu-sub-trigger]]:focus:bg-accent",
  "[&_[data-slot=dropdown-menu-sub-trigger]]:data-[state=open]:bg-accent",
  "[&_[data-slot=context-menu-label]]:text-muted-foreground",
  "[&_[data-slot=context-menu-item]]:text-popover-foreground",
  "[&_[data-slot=context-menu-item]]:focus:bg-accent [&_[data-slot=context-menu-item]]:focus:text-accent-foreground",
  "[&_[data-slot=context-menu-sub-trigger]]:text-popover-foreground",
  "[&_[data-slot=context-menu-sub-trigger]]:focus:bg-accent",
  "[&_[data-slot=context-menu-sub-trigger]]:data-[state=open]:bg-accent"
)

export const MAIL_SIDEBAR_MENU_ITEM_CLASS = cn(
  "mx-1 flex cursor-pointer items-center justify-between gap-3 px-3 py-2 text-sm text-popover-foreground",
  "focus:bg-accent focus:text-accent-foreground"
)

export const MAIL_SIDEBAR_MENU_SUB_TRIGGER_CLASS = cn(
  "mx-1 cursor-pointer rounded-sm px-2 py-2 text-popover-foreground",
  "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent"
)

export const MAIL_SIDEBAR_MENU_PLAIN_ITEM_CLASS = cn(
  "mx-1 cursor-pointer px-3 py-2 text-sm text-popover-foreground focus:bg-accent focus:text-accent-foreground"
)

export const MAIL_SIDEBAR_MENU_SEPARATOR_CLASS = "my-1.5 bg-border"

export const MAIL_SIDEBAR_COLOR_SWATCH_RING_CLASS =
  "border-border bg-mail-surface ring-offset-background hover:ring-muted-foreground focus-visible:ring-ring"

export const MAIL_SIDEBAR_COLOR_PICKER_CLASS = cn(
  "min-w-[180px] border-border bg-popover p-2 text-popover-foreground shadow-md"
)

export const MAIL_ICON_BTN =
  "text-muted-foreground hover:bg-accent hover:text-accent-foreground"

/** Panneaux header (favoris, comptes) — gris mail, pas le noir `popover`. */
export const MAIL_HEADER_DROPDOWN_CLASS = cn(
  "border border-border bg-mail-surface-elevated text-foreground shadow-xl",
)

export const MAIL_TOOLBAR_ICON_BTN = cn(
  "h-9 w-9 shrink-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
)

/** Onglets catégorie boîte — libellés / icônes blancs en dark ; le soulignement garde la couleur d’accent. */
export const MAIL_INBOX_CATEGORY_TAB_CONTENT_DARK_CLASS = "dark:!text-white"

export const MAIL_PREVIEW_SCROLL_CLASS =
  "min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-y-contain outline-none " +
  "[scrollbar-color:color-mix(in_srgb,var(--muted-foreground)_55%,transparent)_transparent] [scrollbar-width:auto] " +
  "[&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/45"

export const MAIL_REPLY_BAR_CLASS =
  "bg-gradient-to-b from-transparent via-mail-surface/90 to-mail-surface pt-3"

export const MAIL_REPLY_BUTTON_CLASS = cn(
  "inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-full border border-border",
  "bg-mail-surface px-6 py-2.5 text-sm font-medium text-foreground shadow-sm",
  "transition-shadow hover:bg-accent hover:shadow-md"
)

export const MAIL_INVITATION_CARD_CLASS = cn(
  "mx-6 mb-4 rounded-xl border border-border bg-mail-invitation px-4 py-3 shadow-sm"
)

export const MAIL_MESSAGE_HOVER_CLASS = "hover:bg-accent/60"

export const MAIL_COMPOSE_TITLEBAR_CLASS = cn(
  "flex h-10 shrink-0 cursor-pointer items-center rounded-t-lg bg-muted px-3",
  "dark:bg-[#2d2e30]"
)

export const MAIL_COMPOSE_POPOVER_CLASS = cn(
  "border-border bg-popover p-3 text-popover-foreground shadow-lg"
)

export const MAIL_COMPOSE_MENU_SELECTED_CLASS = "bg-accent text-accent-foreground"

/** Bouton pilule xs (barres flottantes liste / lecture). */
export const XS_FLOATING_CONTROL_BTN = cn(
  "pointer-events-auto size-9 shrink-0 rounded-full border border-border",
  "bg-mail-surface/80 text-muted-foreground shadow-md backdrop-blur",
  "hover:bg-accent hover:text-accent-foreground"
)

/** Barre overlay xs : pas de fond opaque, contrôles flottants seulement. */
export const XS_FLOATING_CHROME_BAR =
  "pointer-events-none absolute inset-x-0 top-0 z-20 flex items-center gap-2 px-3 pt-2 sm:hidden"

export const MAIL_TOOLTIP_CONTENT_CLASS =
  "border border-border bg-popover text-popover-foreground shadow-md"

/** En-tête sujet : pas de fond propre (aligné sur le panneau). */
export const MAIL_PREVIEW_SUBJECT_HEADER_CLASS = ""

export const MAIL_TOAST_SURFACE_CLASS = cn(
  "relative box-border w-full max-w-full overflow-hidden rounded-xl border border-border",
  "bg-mail-surface text-foreground shadow-md ring-1 ring-primary/15"
)

export function mailNavRowClass(opts: {
  isSelected: boolean
  isOver?: boolean
  rowHoverHeld?: boolean
  hasUnread?: boolean
  extra?: string
}) {
  return cn(
    "transition-colors",
    opts.isSelected
      ? "bg-mail-nav-selected text-mail-nav-selected font-medium"
      : opts.isOver
        ? "bg-mail-nav-drop text-foreground"
        : opts.rowHoverHeld
          ? "bg-mail-nav-hover text-foreground"
          : opts.hasUnread
            ? "text-foreground hover:bg-mail-nav-hover"
            : "text-muted-foreground hover:bg-mail-nav-hover",
    opts.extra
  )
}