/**
 * Tailwind CSS Class Presets for Task&Coffee
 * Material Design 3 + Neon Aesthetic
 * Using Mirage Color Palette
 */

// Card Styles - Material Design 3 Variants
export const cardStyles = {
  // Filled card - основной вариант для большинства карточек
  filled: "bg-card text-card-foreground p-6 rounded-lg shadow-sm",
  
  // Elevated card - карточки с эффектом поднятия
  elevated: "bg-card text-card-foreground p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300",
  
  // Outlined card - карточки с границей
  outlined: "bg-background border-2 border-border text-foreground p-6 rounded-lg",
  
  // Task card - компактные карточки для задач
  task: "bg-card text-card-foreground p-3 rounded-lg shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200",
  
  // Task card with neon accent
  taskNeon: "bg-card text-card-foreground p-3 rounded-lg shadow-sm hover:shadow-[0_0_15px_rgba(104,147,200,0.3)] hover:-translate-y-0.5 transition-all duration-200",
};

// Button Styles
export const buttonStyles = {
  // Primary button - основные действия
  primary: "bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-lg font-medium transition-all duration-200 shadow-sm hover:shadow-md",
  
  // Primary with neon glow
  primaryNeon: "bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:shadow-[0_0_20px_rgba(104,147,200,0.5)]",
  
  // Secondary button - вторичные действия
  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 px-4 py-2 rounded-lg font-medium transition-all duration-200",
  
  // Outline button - менее важные действия
  outline: "border-2 border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground px-4 py-2 rounded-lg font-medium transition-all duration-200",
  
  // Ghost button - минималистичные кнопки
  ghost: "text-foreground hover:bg-accent hover:text-accent-foreground px-4 py-2 rounded-lg font-medium transition-all duration-200",
  
  // Destructive button - опасные действия
  destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 px-4 py-2 rounded-lg font-medium transition-all duration-200 shadow-sm hover:shadow-md",
  
  // Icon button
  icon: "p-2 rounded-lg hover:bg-accent transition-all duration-200",
  
  // Icon button with neon effect
  iconNeon: "p-2 rounded-lg hover:bg-accent transition-all duration-200 hover:shadow-[0_0_15px_rgba(104,147,200,0.4)]",
};

// Layout Styles
export const layoutStyles = {
  // Main container
  container: "flex min-h-screen bg-background text-foreground",
  
  // Sidebar/Navigation rail
  sidebar: "w-20 bg-sidebar border-r border-sidebar-border flex flex-col items-center py-4 gap-4",
  
  // Main content area
  main: "flex-1 p-6 bg-background flex flex-col",
  
  // Content wrapper with max width
  content: "max-w-7xl mx-auto w-full flex flex-1 flex-col gap-6",
  
  // Grid layouts
  gridCards: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
  gridTasks: "grid grid-cols-1 gap-3",
};

// Input Styles
export const inputStyles = {
  // Standard input
  default: "w-full px-4 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-all duration-200",
  
  // Input with neon focus effect
  neon: "w-full px-4 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:shadow-[0_0_15px_rgba(104,147,200,0.3)] transition-all duration-200",
  
  // Search input
  search: "w-full px-4 py-2 pl-10 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-all duration-200",
};

// Text Styles
export const textStyles = {
  // Headings
  h1: "text-4xl font-bold text-foreground",
  h2: "text-3xl font-semibold text-foreground",
  h3: "text-2xl font-semibold text-foreground",
  h4: "text-xl font-semibold text-foreground",
  
  // Body text
  body: "text-base text-foreground",
  bodyMuted: "text-base text-muted-foreground",
  
  // Small text
  small: "text-sm text-foreground",
  smallMuted: "text-sm text-muted-foreground",
  
  // Neon text (to be combined with neon.css animations)
  neonBlue: "text-[#c6e2ff]",
  neonPink: "text-[#ffc5ec]",
};

// Badge/Chip Styles
export const badgeStyles = {
  // Default badge
  default: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary/20 text-primary border border-primary/30",
  
  // Priority badges
  low: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30",
  medium: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30",
  high: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-orange-500/20 text-orange-400 border border-orange-500/30",
  critical: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30",
  
  // Status badges
  success: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30",
  warning: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30",
  error: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30",
  info: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-blue-500/20 text-blue-400 border border-blue-500/30",
};

// Utility Styles
export const utilityStyles = {
  // Neon glow effects (for hover states)
  glowBlue: "hover:shadow-[0_0_20px_rgba(104,147,200,0.6)]",
  glowPink: "hover:shadow-[0_0_20px_rgba(255,20,147,0.6)]",
  glowSoft: "hover:shadow-[0_0_15px_rgba(104,147,200,0.3)]",
  
  // Glassmorphism effect
  glass: "bg-card/50 backdrop-blur-md border border-border/50",
  
  // Smooth transitions
  transition: "transition-all duration-200 ease-in-out",
  transitionSlow: "transition-all duration-300 ease-in-out",
  
  // Focus visible states
  focusRing: "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background",
};

// Complete component compositions
export const componentStyles = {
  // Day column in calendar
  dayColumn: "flex-1 min-w-[180px] flex flex-col bg-background rounded-lg p-4 transition-all duration-300",
  dayColumnToday: "flex-1 min-w-[180px] flex flex-col bg-primary/10 border-2 border-primary rounded-lg p-4 transition-all duration-300",
  
  // Avatar
  avatar: "w-14 h-14 rounded-lg overflow-hidden",
  avatarLarge: "w-20 h-20 rounded-xl overflow-hidden",
  
  // Divider
  divider: "h-px bg-border w-full",
  dividerVertical: "w-px bg-border h-full",
};

// Export all styles as a single object for convenience
export const styles = {
  card: cardStyles,
  button: buttonStyles,
  layout: layoutStyles,
  input: inputStyles,
  text: textStyles,
  badge: badgeStyles,
  utility: utilityStyles,
  component: componentStyles,
};

export default styles;