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

/** 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-transparent bg-muted px-3",
  "transition-[background-color,border-color,box-shadow]",
  "focus-within:border-ring focus-within:bg-mail-surface focus-within:ring-1 focus-within:ring-ring 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 gap-2 border-b border-border py-2 text-xs font-medium text-muted-foreground"

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_COMPACT_CLASS =
  "flex h-12 shrink-0 items-center justify-between border-b border-border px-2"

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 = "rounded-xl border border-border p-5"

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

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 =
  "mb-6 flex items-start gap-4 rounded-xl bg-muted p-5"

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"