/**
 * Style Presets
 * Phase 7: CMS Styling System
 * Predefined style presets for quick theme application
 */

export interface StylePreset {
  id: string;
  name: string;
  description: string;
  colors: {
    primary: string;
    secondary: string;
    accent: string;
    background: string;
    text: string;
    border: string;
  };
  typography: {
    fontFamily: string;
    headingFont: string;
    fontSize: string;
    lineHeight: string;
  };
  spacing: {
    base: string;
    scale: string;
  };
}

export const STYLE_PRESETS: StylePreset[] = [
  {
    id: 'modern',
    name: 'Modern',
    description: 'Clean, contemporary design with vibrant colors',
    colors: {
      primary: '#3b82f6',
      secondary: '#8b5cf6',
      accent: '#10b981',
      background: '#ffffff',
      text: '#1f2937',
      border: '#e5e7eb',
    },
    typography: {
      fontFamily: 'Inter, system-ui, sans-serif',
      headingFont: 'Inter, system-ui, sans-serif',
      fontSize: '16px',
      lineHeight: '1.6',
    },
    spacing: {
      base: '8px',
      scale: '1.5',
    },
  },
  {
    id: 'classic',
    name: 'Classic',
    description: 'Traditional, professional design',
    colors: {
      primary: '#1e40af',
      secondary: '#6b7280',
      accent: '#059669',
      background: '#f9fafb',
      text: '#111827',
      border: '#d1d5db',
    },
    typography: {
      fontFamily: 'Georgia, serif',
      headingFont: 'Georgia, serif',
      fontSize: '18px',
      lineHeight: '1.7',
    },
    spacing: {
      base: '10px',
      scale: '1.618',
    },
  },
  {
    id: 'minimal',
    name: 'Minimal',
    description: 'Minimalist design with ample whitespace',
    colors: {
      primary: '#000000',
      secondary: '#4b5563',
      accent: '#6b7280',
      background: '#ffffff',
      text: '#111827',
      border: '#f3f4f6',
    },
    typography: {
      fontFamily: 'Helvetica, Arial, sans-serif',
      headingFont: 'Helvetica, Arial, sans-serif',
      fontSize: '16px',
      lineHeight: '1.8',
    },
    spacing: {
      base: '12px',
      scale: '2',
    },
  },
  {
    id: 'bold',
    name: 'Bold',
    description: 'High contrast, bold design',
    colors: {
      primary: '#dc2626',
      secondary: '#ea580c',
      accent: '#f59e0b',
      background: '#ffffff',
      text: '#000000',
      border: '#000000',
    },
    typography: {
      fontFamily: 'Arial Black, sans-serif',
      headingFont: 'Arial Black, sans-serif',
      fontSize: '16px',
      lineHeight: '1.5',
    },
    spacing: {
      base: '8px',
      scale: '1.25',
    },
  },
  {
    id: 'elegant',
    name: 'Elegant',
    description: 'Sophisticated, refined design',
    colors: {
      primary: '#7c3aed',
      secondary: '#a855f7',
      accent: '#ec4899',
      background: '#faf5ff',
      text: '#1e1b4b',
      border: '#e9d5ff',
    },
    typography: {
      fontFamily: 'Playfair Display, serif',
      headingFont: 'Playfair Display, serif',
      fontSize: '17px',
      lineHeight: '1.75',
    },
    spacing: {
      base: '10px',
      scale: '1.618',
    },
  },
  {
    id: 'tech',
    name: 'Tech',
    description: 'Modern tech startup aesthetic',
    colors: {
      primary: '#06b6d4',
      secondary: '#3b82f6',
      accent: '#8b5cf6',
      background: '#0f172a',
      text: '#f1f5f9',
      border: '#1e293b',
    },
    typography: {
      fontFamily: 'SF Pro Display, system-ui, sans-serif',
      headingFont: 'SF Pro Display, system-ui, sans-serif',
      fontSize: '16px',
      lineHeight: '1.6',
    },
    spacing: {
      base: '8px',
      scale: '1.5',
    },
  },
];

export function getPreset(presetId: string): StylePreset | undefined {
  return STYLE_PRESETS.find((preset) => preset.id === presetId);
}

export function applyPreset(presetId: string): StylePreset | null {
  const preset = getPreset(presetId);
  if (!preset) return null;
  return preset;
}

