/**
 * Shared style utilities and consistent className patterns for dashboard components
 */

export const sharedStyles = {
  // Panel layouts
  panel: {
    container: "h-full flex flex-col overflow-hidden",
    header: "pb-2 sm:pb-3 flex-shrink-0",
    content: "p-1 sm:p-2 flex-1 overflow-y-auto min-h-0",
  },

  // Header components
  header: {
    titleContainer: "flex items-center justify-between",
    title: "text-lg sm:text-xl font-semibold flex items-center gap-2",
    titleWithIcon: "flex items-center gap-2",
    createButton: "h-10 sm:h-8 px-3 sm:px-4",
    createButtonCompact: "h-10 w-10 sm:h-8 sm:w-8 p-0",
  },

  // Search components
  search: {
    container: "relative mt-2",
    input: "pl-8 h-10 sm:h-9",
    icon: "absolute left-2 top-3 sm:top-2.5 h-4 w-4 text-gray-400",
    inputFullWidth: "w-full",
  },

  // Item components
  item: {
    container:
      "w-full text-left px-3 py-3 sm:py-2 rounded-lg transition-all duration-200 min-h-[44px] sm:min-h-0",
    containerHover: "hover:bg-gray-100 dark:hover:bg-white/5 hover:shadow-sm",
    containerCard: "cursor-pointer transition-all hover:shadow-md",
    selected:
      "bg-amber-50 dark:bg-gradient-to-r dark:from-primary/20 dark:to-primary/10 hover:bg-amber-100 dark:hover:from-primary/30 dark:hover:to-primary/20 shadow-sm dark:shadow-lg backdrop-blur-xl",
    selectedCard:
      "ring-2 ring-orange-500 bg-gradient-to-r from-orange-500/10 to-amber-500/10",
    iconContainer: "flex items-center gap-2 transition-all duration-200",
    icon: "h-4 w-4 transition-colors",
    iconSelected: "text-primary dark:text-primary",
    iconDefault: "text-gray-500 dark:text-gray-400",
    content: "flex-1 min-w-0",
    title: "font-medium text-sm",
    subtitle: "text-xs text-gray-500 dark:text-gray-400 truncate",
    cardContent: "p-3 sm:p-4",
    cardTitle: "font-medium text-sm",
    cardDescription: "text-xs text-muted-foreground mt-1",
    badgeContainer: "flex items-center gap-2 mt-2",
  },

  // Creation forms
  creation: {
    container: "border-2 border-blue-500",
    containerTeam: "border-2 border-orange-500",
    inputContainer: "flex items-center gap-2",
    input: "flex-1",
    content: "p-3",
  },

  // Empty states
  empty: {
    container: "text-center py-8 text-muted-foreground",
    icon: "h-12 w-12 mx-auto mb-3 opacity-20",
    title: "text-sm",
    subtitle: "text-xs mt-1",
  },

  // Lists and containers
  list: {
    container: "space-y-1",
    containerWithSpacing: "space-y-2",
  },

  // Badges
  badge: {
    secondary: "text-xs",
    outline: "text-xs",
    withIcon: "h-3 w-3 mr-1",
  },
} as const;

/**
 * Utility function to get consistent selection styles
 */
export function getSelectionStyles(
  isSelected: boolean,
  variant: "button" | "card" = "button",
) {
  if (variant === "card") {
    return isSelected ? sharedStyles.item.selectedCard : "";
  }
  return isSelected ? sharedStyles.item.selected : "";
}

/**
 * Utility function to get consistent icon styles
 */
export function getIconStyles(isSelected: boolean) {
  return isSelected
    ? `${sharedStyles.item.icon} ${sharedStyles.item.iconSelected}`
    : `${sharedStyles.item.icon} ${sharedStyles.item.iconDefault}`;
}
