// Theme System für InFocus Movie App
export interface Theme {
  id: string
  name: string
  description: string
  colors: {
    // Base colors
    background: string
    foreground: string
    muted: string
    mutedForeground: string
    popover: string
    popoverForeground: string
    card: string
    cardForeground: string
    border: string
    input: string
    
    // Primary colors
    primary: string
    primaryForeground: string
    secondary: string
    secondaryForeground: string
    accent: string
    accentForeground: string
    destructive: string
    destructiveForeground: string
    
    // Glass effect colors
    glassBackground: string
    glassBorder: string
    glassShadow: string
  }
  css: string
}

export const themes: Theme[] = [
  // 1. Apple Frosted Glass - Hell
  {
    id: 'apple-frosted-light',
    name: 'Apple Frosted Glass',
    description: 'Klassisches Apple Design mit Glas-Effekten (Hell)',
    colors: {
      background: '#f2f2f7',
      foreground: '#1c1c1e',
      muted: '#f2f2f7',
      mutedForeground: '#8e8e93',
      popover: '#ffffff',
      popoverForeground: '#1c1c1e',
      card: 'rgba(255, 255, 255, 0.72)',
      cardForeground: '#1c1c1e',
      border: 'rgba(0, 0, 0, 0.1)',
      input: 'rgba(255, 255, 255, 0.8)',
      primary: '#007aff',
      primaryForeground: '#ffffff',
      secondary: 'rgba(120, 120, 128, 0.12)',
      secondaryForeground: '#1c1c1e',
      accent: '#5856d6',
      accentForeground: '#ffffff',
      destructive: '#ff3b30',
      destructiveForeground: '#ffffff',
      glassBackground: 'rgba(255, 255, 255, 0.8)',
      glassBorder: 'rgba(255, 255, 255, 0.18)',
      glassShadow: '0 8px 32px rgba(0, 0, 0, 0.12)'
    },
    css: `
      :root {
        --background: 242 242 247;
        --foreground: 28 28 30;
        --muted: 242 242 247;
        --muted-foreground: 142 142 147;
        --popover: 255 255 255;
        --popover-foreground: 28 28 30;
        --card: 255 255 255;
        --card-foreground: 28 28 30;
        --border: 0 0 0 / 0.1;
        --input: 255 255 255;
        --primary: 0 122 255;
        --primary-foreground: 255 255 255;
        --secondary: 120 120 128 / 0.12;
        --secondary-foreground: 28 28 30;
        --accent: 88 86 214;
        --accent-foreground: 255 255 255;
        --destructive: 255 59 48;
        --destructive-foreground: 255 255 255;
        --glass-bg: rgba(255, 255, 255, 0.8);
        --glass-border: rgba(255, 255, 255, 0.18);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
      }
    `
  },

  // 2. Apple Frosted Glass - Dunkel
  {
    id: 'apple-frosted-dark',
    name: 'Apple Frosted Glass Dark',
    description: 'Klassisches Apple Design mit Glas-Effekten (Dunkel)',
    colors: {
      background: '#000000',
      foreground: '#ffffff',
      muted: '#1c1c1e',
      mutedForeground: '#98989f',
      popover: '#2c2c2e',
      popoverForeground: '#ffffff',
      card: 'rgba(44, 44, 46, 0.72)',
      cardForeground: '#ffffff',
      border: 'rgba(255, 255, 255, 0.1)',
      input: 'rgba(44, 44, 46, 0.8)',
      primary: '#0a84ff',
      primaryForeground: '#ffffff',
      secondary: 'rgba(120, 120, 128, 0.16)',
      secondaryForeground: '#ffffff',
      accent: '#5e5ce6',
      accentForeground: '#ffffff',
      destructive: '#ff453a',
      destructiveForeground: '#ffffff',
      glassBackground: 'rgba(44, 44, 46, 0.8)',
      glassBorder: 'rgba(255, 255, 255, 0.12)',
      glassShadow: '0 8px 32px rgba(0, 0, 0, 0.3)'
    },
    css: `
      :root {
        --background: 0 0 0;
        --foreground: 255 255 255;
        --muted: 28 28 30;
        --muted-foreground: 152 152 159;
        --popover: 44 44 46;
        --popover-foreground: 255 255 255;
        --card: 44 44 46;
        --card-foreground: 255 255 255;
        --border: 255 255 255 / 0.1;
        --input: 44 44 46;
        --primary: 10 132 255;
        --primary-foreground: 255 255 255;
        --secondary: 120 120 128 / 0.16;
        --secondary-foreground: 255 255 255;
        --accent: 94 92 230;
        --accent-foreground: 255 255 255;
        --destructive: 255 69 58;
        --destructive-foreground: 255 255 255;
        --glass-bg: rgba(44, 44, 46, 0.8);
        --glass-border: rgba(255, 255, 255, 0.12);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      }
    `
  },

  // 3. Cinema Noir - Dunkel
  {
    id: 'cinema-noir',
    name: 'Cinema Noir',
    description: 'Elegantes dunkles Kino-Theme mit tiefen Farben',
    colors: {
      background: '#0a0a0a',
      foreground: '#e8e8e8',
      muted: '#1a1a1a',
      mutedForeground: '#888888',
      popover: '#2a2a2a',
      popoverForeground: '#e8e8e8',
      card: 'rgba(42, 42, 42, 0.8)',
      cardForeground: '#e8e8e8',
      border: 'rgba(255, 215, 0, 0.2)',
      input: 'rgba(42, 42, 42, 0.9)',
      primary: '#ffd700',
      primaryForeground: '#0a0a0a',
      secondary: 'rgba(255, 215, 0, 0.1)',
      secondaryForeground: '#ffd700',
      accent: '#ff6b6b',
      accentForeground: '#0a0a0a',
      destructive: '#ff4444',
      destructiveForeground: '#ffffff',
      glassBackground: 'rgba(20, 20, 20, 0.85)',
      glassBorder: 'rgba(255, 215, 0, 0.15)',
      glassShadow: '0 8px 32px rgba(255, 215, 0, 0.1)'
    },
    css: `
      :root {
        --background: 10 10 10;
        --foreground: 232 232 232;
        --muted: 26 26 26;
        --muted-foreground: 136 136 136;
        --popover: 42 42 42;
        --popover-foreground: 232 232 232;
        --card: 42 42 42;
        --card-foreground: 232 232 232;
        --border: 255 215 0 / 0.2;
        --input: 42 42 42;
        --primary: 255 215 0;
        --primary-foreground: 10 10 10;
        --secondary: 255 215 0 / 0.1;
        --secondary-foreground: 255 215 0;
        --accent: 255 107 107;
        --accent-foreground: 10 10 10;
        --destructive: 255 68 68;
        --destructive-foreground: 255 255 255;
        --glass-bg: rgba(20, 20, 20, 0.85);
        --glass-border: rgba(255, 215, 0, 0.15);
        --glass-shadow: 0 8px 32px rgba(255, 215, 0, 0.1);
      }
    `
  },

  // 4. Ocean Blue - Hell
  {
    id: 'ocean-blue',
    name: 'Ocean Blue',
    description: 'Marines Hellblau-Theme mit sanften Übergängen',
    colors: {
      background: '#f0f9ff',
      foreground: '#0c4a6e',
      muted: '#e0f2fe',
      mutedForeground: '#64748b',
      popover: '#ffffff',
      popoverForeground: '#0c4a6e',
      card: '#ffffff',
      cardForeground: '#0c4a6e',
      border: 'rgba(59, 130, 246, 0.2)',
      input: '#f0f9ff',
      primary: '#0ea5e9',
      primaryForeground: '#ffffff',
      secondary: 'rgba(14, 165, 233, 0.1)',
      secondaryForeground: '#0c4a6e',
      accent: '#06b6d4',
      accentForeground: '#ffffff',
      destructive: '#f43f5e',
      destructiveForeground: '#ffffff',
      glassBackground: 'rgba(255, 255, 255, 0.85)',
      glassBorder: 'rgba(59, 130, 246, 0.15)',
      glassShadow: '0 8px 32px rgba(14, 165, 233, 0.15)'
    },
    css: `
      :root {
        --background: 240 249 255;
        --foreground: 12 74 110;
        --muted: 224 242 254;
        --muted-foreground: 100 116 139;
        --popover: 255 255 255;
        --popover-foreground: 12 74 110;
        --card: 255 255 255;
        --card-foreground: 12 74 110;
        --border: 59 130 246 / 0.2;
        --input: 240 249 255;
        --primary: 14 165 233;
        --primary-foreground: 255 255 255;
        --secondary: 14 165 233 / 0.1;
        --secondary-foreground: 12 74 110;
        --accent: 6 182 212;
        --accent-foreground: 255 255 255;
        --destructive: 244 63 94;
        --destructive-foreground: 255 255 255;
        --glass-bg: rgba(255, 255, 255, 0.85);
        --glass-border: rgba(59, 130, 246, 0.15);
        --glass-shadow: 0 8px 32px rgba(14, 165, 233, 0.15);
      }
    `
  },

  // 5. Sunset Purple - Dunkel
  {
    id: 'sunset-purple',
    name: 'Sunset Purple',
    description: 'Warmes lila Theme mit Sonnenuntergang-Farben',
    colors: {
      background: '#1a001a',
      foreground: '#f3e8ff',
      muted: '#2d1b2d',
      mutedForeground: '#a78bfa',
      popover: '#3d2d3d',
      popoverForeground: '#f3e8ff',
      card: 'rgba(61, 45, 61, 0.8)',
      cardForeground: '#f3e8ff',
      border: 'rgba(167, 139, 250, 0.3)',
      input: 'rgba(61, 45, 61, 0.9)',
      primary: '#a78bfa',
      primaryForeground: '#1a001a',
      secondary: 'rgba(167, 139, 250, 0.15)',
      secondaryForeground: '#f3e8ff',
      accent: '#f472b6',
      accentForeground: '#1a001a',
      destructive: '#f87171',
      destructiveForeground: '#ffffff',
      glassBackground: 'rgba(45, 27, 45, 0.85)',
      glassBorder: 'rgba(167, 139, 250, 0.2)',
      glassShadow: '0 8px 32px rgba(167, 139, 250, 0.2)'
    },
    css: `
      :root {
        --background: 26 0 26;
        --foreground: 243 232 255;
        --muted: 45 27 45;
        --muted-foreground: 167 139 250;
        --popover: 61 45 61;
        --popover-foreground: 243 232 255;
        --card: 61 45 61;
        --card-foreground: 243 232 255;
        --border: 167 139 250 / 0.3;
        --input: 61 45 61;
        --primary: 167 139 250;
        --primary-foreground: 26 0 26;
        --secondary: 167 139 250 / 0.15;
        --secondary-foreground: 243 232 255;
        --accent: 244 114 182;
        --accent-foreground: 26 0 26;
        --destructive: 248 113 113;
        --destructive-foreground: 255 255 255;
        --glass-bg: rgba(45, 27, 45, 0.85);
        --glass-border: rgba(167, 139, 250, 0.2);
        --glass-shadow: 0 8px 32px rgba(167, 139, 250, 0.2);
      }
    `
  },

  // 6. Forest Green - Hell
  {
    id: 'forest-green',
    name: 'Forest Green',
    description: 'Natürliches grün Theme mit Waldfarben',
    colors: {
      background: '#f0fdf4',
      foreground: '#14532d',
      muted: '#dcfce7',
      mutedForeground: '#64748b',
      popover: '#ffffff',
      popoverForeground: '#14532d',
      card: '#ffffff',
      cardForeground: '#14532d',
      border: 'rgba(34, 197, 94, 0.3)',
      input: '#f0fdf4',
      primary: '#22c55e',
      primaryForeground: '#ffffff',
      secondary: 'rgba(34, 197, 94, 0.1)',
      secondaryForeground: '#14532d',
      accent: '#84cc16',
      accentForeground: '#ffffff',
      destructive: '#ef4444',
      destructiveForeground: '#ffffff',
      glassBackground: 'rgba(255, 255, 255, 0.85)',
      glassBorder: 'rgba(34, 197, 94, 0.2)',
      glassShadow: '0 8px 32px rgba(34, 197, 94, 0.1)'
    },
    css: `
      :root {
        --background: 240 253 244;
        --foreground: 20 83 45;
        --muted: 220 252 231;
        --muted-foreground: 100 116 139;
        --popover: 255 255 255;
        --popover-foreground: 20 83 45;
        --card: 255 255 255;
        --card-foreground: 20 83 45;
        --border: 34 197 94 / 0.3;
        --input: 240 253 244;
        --primary: 34 197 94;
        --primary-foreground: 255 255 255;
        --secondary: 34 197 94 / 0.1;
        --secondary-foreground: 20 83 45;
        --accent: 132 204 22;
        --accent-foreground: 255 255 255;
        --destructive: 239 68 68;
        --destructive-foreground: 255 255 255;
        --glass-bg: rgba(255, 255, 255, 0.85);
        --glass-border: rgba(34 197, 94, 0.2);
        --glass-shadow: 0 8px 32px rgba(34 197, 94, 0.1);
      }
    `
  }
]

export function getTheme(id: string): Theme | undefined {
  return themes.find(theme => theme.id === id)
}

export function applyTheme(theme: Theme) {
  // Remove existing theme styles
  const existingStyle = document.getElementById('theme-styles')
  if (existingStyle) {
    existingStyle.remove()
  }
  
  // Add new theme styles with proper CSS custom properties
  const styleElement = document.createElement('style')
  styleElement.id = 'theme-styles'
  styleElement.textContent = theme.css + `
    /* Additional theme fixes */
    .glass-card {
      background: var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      box-shadow: var(--glass-shadow) !important;
    }
    
    .glass-header {
      background: var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    
    .glass-button {
      background: var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    
    .glass-avatar {
      background: var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    
    .glass-tag {
      background: var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    
    .glass-input {
      background: var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
  `
  document.head.appendChild(styleElement)
  
  // Update data attribute on body
  document.body.setAttribute('data-theme', theme.id)
}