import { cn } from "@/lib/utils"
import { MAIL_SIDEBAR_MENU_SURFACE_CLASS } from "@/lib/mail-chrome-classes"

/** Menus portés Radix — gris mail en dark (cf. `data-contacts-menu-surface` dans globals.css). */
export const CONTACTS_MENU_SURFACE_CLASS = cn(
  MAIL_SIDEBAR_MENU_SURFACE_CLASS,
  "bg-mail-surface-elevated text-foreground",
)

/** Fond page contacts : canvas mail (#fafbfc / #202124), pas le noir `background`. */
export const CONTACTS_SHELL_CLASS = "bg-app-canvas text-foreground"

export const CONTACTS_SIDEBAR_CLASS = cn(
  "flex h-full w-60 shrink-0 flex-col border-r border-border bg-mail-surface",
  "transition-transform duration-200 ease-out"
)

export const CONTACTS_CREATE_BTN_CLASS = cn(
  "flex h-14 w-full items-center gap-3 rounded-2xl bg-mail-surface px-4",
  "shadow-md ring-1 ring-border transition-shadow hover:bg-accent hover:shadow-lg"
)

export const CONTACTS_NAV_ACTIVE_CLASS =
  "bg-mail-nav-selected font-medium text-mail-nav-selected"

export const CONTACTS_NAV_ITEM_CLASS =
  "text-foreground hover:bg-mail-nav-hover"

export const CONTACTS_NAV_ICON_MUTED = "text-muted-foreground"

export const CONTACTS_MUTED_TEXT = "text-muted-foreground"

export const CONTACTS_HEADING_TEXT = "text-foreground"

export const CONTACTS_SEARCH_BAR_CLASS = cn(
  "flex h-10 w-full max-w-[720px] items-center gap-2 rounded-full border border-mail-border-subtle bg-mail-surface-muted px-3",
  "shadow-sm transition-[border-color,box-shadow]",
  "focus-within:border-mail-border focus-within:shadow-md sm:h-12 sm:gap-3 sm:px-4",
)

export const CONTACTS_SEARCH_INPUT_CLASS =
  "flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"

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

export const CONTACTS_TABLE_HEADER_CLASS =
  "grid items-center gap-2 border-b border-border py-1.5 text-sm font-medium text-muted-foreground"

export const CONTACTS_TABLE_HEADER_CHECKBOX_HIT_CLASS =
  "flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-muted/60 -m-0.5"

export const CONTACTS_TABLE_TOOLBAR_CLASS =
  "mb-2 flex h-10 items-center justify-between gap-2"

/** Toolbar + en-têtes colonnes — sticky ensemble au scroll. */
export const CONTACTS_TABLE_STICKY_HEAD_CLASS = cn(
  "sticky top-0 z-10 -mx-3 bg-app-canvas px-3 sm:-mx-6 sm:px-6",
)

export const CONTACTS_TABLE_ROW_CLASS = cn(
  "grid w-full cursor-pointer items-center gap-2 border-b border-border py-2.5 text-left text-sm",
  "text-foreground transition-colors hover:bg-accent/50"
)

export const CONTACTS_FIELD_CLASS = cn(
  "rounded border border-mail-border bg-mail-surface px-2 py-1 text-sm text-foreground outline-none",
  "focus:border-ring focus:ring-1 focus:ring-ring"
)

export const CONTACTS_PRIMARY_BTN_CLASS = cn(
  "rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
)

export const CONTACTS_OUTLINE_BTN_CLASS = cn(
  "inline-flex h-9 items-center gap-2 rounded-full border border-border bg-mail-surface px-5",
  "text-sm font-medium text-foreground transition-colors hover:bg-accent"
)

/** Volet contacts (Sheet latéral dans la messagerie) */
export const CONTACTS_PANEL_SHELL_CLASS =
  "flex h-full flex-col bg-mail-surface text-foreground"

export const CONTACTS_PANEL_HEADER_CLASS =
  "flex h-12 shrink-0 items-center justify-between border-b border-border px-4"

export const CONTACTS_PANEL_HEADER_SEARCH_CLASS =
  "flex h-12 shrink-0 items-center gap-2 border-b border-border px-4"

export const CONTACTS_PANEL_TITLE_CLASS = "text-lg font-medium text-foreground"

export const CONTACTS_PANEL_ICON_BTN_CLASS =
  "h-8 w-8 rounded-full text-muted-foreground"

export const CONTACTS_PANEL_SECTION_LABEL_CLASS =
  "px-4 py-2 text-xs font-medium text-muted-foreground"

export const CONTACTS_PANEL_LETTER_CLASS =
  "px-4 py-1 text-xs font-medium uppercase text-muted-foreground"

export const CONTACTS_PANEL_ROW_CLASS =
  "hover:bg-accent cursor-pointer"

export const CONTACTS_PANEL_CREATE_ROW_CLASS = cn(
  "flex w-full items-center gap-3 px-4 h-12",
  CONTACTS_PANEL_ROW_CLASS
)

export const CONTACTS_PANEL_LINK_TEXT_CLASS = "text-sm font-medium text-primary"

export const CONTACTS_PANEL_SEARCH_INPUT_CLASS = cn(
  "flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
)

export const CONTACTS_PANEL_SAVE_BTN_CLASS = cn(
  "rounded-full bg-muted px-5 h-9 text-sm font-medium text-foreground",
  "hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
)

export const CONTACTS_PANEL_TAG_CLASS = cn(
  "inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2.5 py-0.5 text-xs text-foreground"
)

export const CONTACTS_PANEL_ADD_TAG_BTN_CLASS = cn(
  "inline-flex items-center gap-1 rounded-full border border-border px-2.5 py-0.5 text-xs text-muted-foreground hover:bg-accent"
)

export const CONTACTS_PANEL_AVATAR_PLACEHOLDER_CLASS =
  "flex h-20 w-20 items-center justify-center rounded-full bg-muted text-muted-foreground"

export const CONTACTS_PANEL_CARD_CLASS = "space-y-2 rounded-lg border border-mail-border p-3"

export const CONTACTS_PANEL_DIVIDER_CLASS = "border-t border-border"

export const CONTACTS_PANEL_MUTED_ICON_CLASS = "text-muted-foreground"

export const CONTACTS_PANEL_PRIMARY_ACTION_CLASS = cn(
  "inline-flex h-9 items-center gap-2 rounded-full bg-primary/15 px-5 text-sm font-medium text-primary",
  "transition-colors hover:bg-primary/25"
)

export const CONTACTS_PANEL_SECONDARY_ICON_BTN_CLASS = cn(
  "flex h-9 w-9 items-center justify-center rounded-full border border-border text-muted-foreground hover:bg-accent"
)

export const CONTACTS_PANEL_FLOATING_INPUT_CLASS = cn(
  "peer h-[42px] w-full rounded border border-mail-border bg-mail-surface px-3 pt-4 pb-1 text-sm text-foreground outline-none transition-colors",
  "focus:border-ring focus:ring-1 focus:ring-ring"
)

export const CONTACTS_PANEL_FLOATING_TEXTAREA_CLASS = cn(
  "peer w-full rounded border border-mail-border bg-mail-surface px-3 pt-5 pb-2 text-sm text-foreground outline-none transition-colors resize-none",
  "focus:border-ring focus:ring-1 focus:ring-ring"
)

export const CONTACTS_PANEL_FLOATING_LABEL_CLASS =
  "pointer-events-none absolute left-3 bg-mail-surface transition-all duration-150"

export const CONTACTS_PANEL_SELECT_TRIGGER_CLASS = cn(
  "!h-[42px] !min-h-[42px] w-full rounded border border-mail-border bg-mail-surface px-3 py-0 text-sm text-foreground shadow-none",
  "data-[size=default]:!h-[42px] focus:border-ring focus:ring-1 focus:ring-ring"
)

export const CONTACTS_PANEL_POPOVER_ITEM_CLASS =
  "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent"

/** Page /contacts (plein écran) */
export const CONTACTS_PAGE_ICON_BTN_CLASS =
  "h-10 w-10 rounded-full text-muted-foreground"

export const CONTACTS_PAGE_SAVE_BTN_CLASS = cn(
  CONTACTS_PANEL_SAVE_BTN_CLASS,
  "px-6 py-2.5",
)

export const CONTACTS_PAGE_TITLE_CLASS = "text-2xl font-normal text-foreground"

export const CONTACTS_PAGE_SECTION_TITLE_CLASS = "text-lg font-normal text-foreground"

export const CONTACTS_PAGE_HEADING_CLASS = cn("font-normal", CONTACTS_HEADING_TEXT)

export const CONTACTS_PAGE_CARD_CLASS = cn(
  "min-w-0 rounded-xl border border-mail-border bg-mail-surface p-5 shadow-sm",
  "dark:bg-mail-surface-elevated dark:shadow-[0_1px_4px_rgba(0,0,0,0.35)]",
)

/** Conteneur masonry discovery (2 colonnes flex en lg+) */
export const CONTACTS_DISCOVERY_CARD_MASONRY_ROOT_CLASS = "flex flex-col gap-5"

export const CONTACTS_DISCOVERY_CARD_MASONRY_COLUMN_CLASS =
  "flex min-w-0 flex-1 flex-col gap-5"

export const CONTACTS_DISCOVERY_CARD_MASONRY_ITEM_ENTER_CLASS = cn(
  "animate-in fade-in-0 slide-in-from-bottom-4 duration-300 ease-out",
  "motion-reduce:animate-none",
)

/** Sentinel chargement progressif — pleine largeur sous les colonnes */
export const CONTACTS_DISCOVERY_CARD_MASONRY_SENTINEL_CLASS = cn(
  "flex w-full flex-col items-center justify-center py-6",
)

/** @deprecated */
export const CONTACTS_DISCOVERY_CARD_MASONRY_CLASS = CONTACTS_DISCOVERY_CARD_MASONRY_ROOT_CLASS

/** @deprecated */
export const CONTACTS_DISCOVERY_CARD_MASONRY_ITEM_CLASS = "min-w-0"

/** @deprecated Utiliser DiscoveryCardsMasonry */
export const CONTACTS_DISCOVERY_CARD_GRID_CLASS = CONTACTS_DISCOVERY_CARD_MASONRY_ROOT_CLASS

export const CONTACTS_PAGE_CARD_INNER_DIVIDER_CLASS =
  "mt-3 border-t border-mail-border pt-3"

/** Chips discovery (signatures, champs suggérés) — lisibles sur carte en dark mode */
export const CONTACTS_DISCOVERY_CHIP_CLASS = cn(
  "inline-flex max-w-full items-center gap-0.5 rounded-full border px-2 py-0.5 text-xs",
  "border-mail-list-chip-border bg-mail-list-chip-muted text-mail-list-chip-text",
)

/** Panneau secondaire dans une carte discovery (signature, détail champ) */
export const CONTACTS_DISCOVERY_INNER_PANEL_CLASS = cn(
  "rounded-md border border-mail-border bg-mail-surface-muted/70 p-2",
  "dark:border-mail-border dark:bg-mail-surface-muted",
)

/** Ligne champ par champ (Ajouter des coordonnées) */
export const CONTACTS_DISCOVERY_FIELD_ROW_CLASS = cn(
  "flex items-center justify-between gap-2 rounded-md border border-mail-border bg-mail-surface-muted/50 px-2 py-1.5",
  "dark:bg-mail-surface-muted",
)

/** Cellule de groupe dans la grille dense des cartes discovery */
export const CONTACTS_DISCOVERY_GRID_CELL_CLASS = cn(
  "min-w-0 rounded-lg border border-mail-border-subtle bg-mail-surface-muted/40 p-2",
  "dark:border-mail-border-subtle dark:bg-mail-surface-muted/70",
)

export const CONTACTS_PAGE_LINK_BTN_CLASS =
  "text-sm font-medium text-primary hover:text-primary/80"

export const CONTACTS_PAGE_AVATAR_PLACEHOLDER_LARGE_CLASS =
  "flex h-28 w-28 items-center justify-center rounded-full bg-muted text-muted-foreground"

export const CONTACTS_PAGE_AVATAR_ADD_BADGE_CLASS =
  "absolute -bottom-1 -right-1 flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground shadow"

export const CONTACTS_PAGE_TAG_CLASS = cn(
  "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-xs text-foreground",
)

export const CONTACTS_PAGE_BANNER_CLASS =
  "mb-4 flex items-center justify-between rounded-lg bg-muted px-4 py-3"

export const CONTACTS_PAGE_INFO_BANNER_CLASS = cn(
  "mb-6 flex items-start gap-4 rounded-xl border border-mail-border bg-mail-surface-muted p-5",
  "dark:bg-mail-surface dark:border-mail-border",
)

export const CONTACTS_PAGE_INFO_BANNER_ICON_CLASS =
  "flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary/15"

export const CONTACTS_PAGE_TAB_ACTIVE_CLASS =
  "rounded-full bg-primary/20 px-4 py-2 text-sm font-medium text-foreground"

export const CONTACTS_PAGE_TAB_INACTIVE_CLASS = cn(
  "rounded-full bg-muted px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent",
)

export const CONTACTS_PAGE_TEXTAREA_CLASS = cn(
  CONTACTS_FIELD_CLASS,
  "h-24 w-full rounded-lg px-3 py-2",
)

export const CONTACTS_CREATE_BTN_LABEL_CLASS =
  "flex-1 text-left text-sm font-medium text-foreground"