// Предустановленные дизайн-шаблоны
export interface DesignTemplate {
  id: string
  name: string
  description: string
  preview: string
  settings: {
    theme_color: string
    background_color: string
    font_family: string
    heading_font_family?: string
    body_font_family?: string
    header_text_color: string
    group_text_color: string
    link_text_color: string
    group_description_text_color: string
    dashboard_layout: 'sidebar' | 'grid' | 'list' | 'cards' | 'compact' | 'masonry' | 'timeline' | 'magazine'
    group_overlay_enabled?: boolean
    group_overlay_color?: string
    group_overlay_opacity?: number
    show_groups_title?: boolean
    custom_css?: string
  }
}

export const designTemplates: DesignTemplate[] = [
  {
    id: 'minimalist',
    name: 'Минимализм',
    description: 'Чистый современный дизайн с акцентом на контент',
    preview: '/templates/minimalist.jpg',
    settings: {
      theme_color: '#2563eb',
      background_color: '#ffffff',
      font_family: "'PT Sans', sans-serif",
      heading_font_family: "'PT Sans', sans-serif",
      body_font_family: "'PT Sans', sans-serif",
      header_text_color: '#1f2937',
      group_text_color: '#374151',
      link_text_color: '#6b7280',
      group_description_text_color: '#9ca3af',
      dashboard_layout: 'list',
      group_overlay_enabled: false,
      show_groups_title: true,
      custom_css: `
        .card {
          border: 1px solid #e5e7eb;
          border-radius: 12px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          transition: all 0.2s ease;
        }
        .card:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .btn {
          border-radius: 8px;
          font-weight: 500;
        }
      `
    }
  },
  {
    id: 'dark',
    name: 'Темная тема',
    description: 'Элегантный темный дизайн для современного вида',
    preview: '/templates/dark.jpg',
    settings: {
      theme_color: '#06d6a0',
      background_color: '#1a1a1a',
      font_family: "'Inter', sans-serif",
      heading_font_family: "'Inter', sans-serif", 
      body_font_family: "'Inter', sans-serif",
      header_text_color: '#ffffff',
      group_text_color: '#e5e7eb',
      link_text_color: '#d1d5db',
      group_description_text_color: '#9ca3af',
      dashboard_layout: 'cards',
      group_overlay_enabled: true,
      group_overlay_color: '#000000',
      group_overlay_opacity: 0.4,
      show_groups_title: true,
      custom_css: `
        body {
          background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        }
        .card {
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 16px;
          backdrop-filter: blur(10px);
        }
        .btn {
          background: linear-gradient(135deg, #06d6a0 0%, #118ab2 100%);
          border: none;
          color: white;
        }
      `
    }
  },
  {
    id: 'corporate',
    name: 'Корпоративный',
    description: 'Деловой профессиональный стиль',
    preview: '/templates/corporate.jpg',
    settings: {
      theme_color: '#1e40af',
      background_color: '#f8fafc',
      font_family: "'Roboto', sans-serif",
      heading_font_family: "'Roboto', sans-serif",
      body_font_family: "'Roboto', sans-serif", 
      header_text_color: '#1e293b',
      group_text_color: '#334155',
      link_text_color: '#475569',
      group_description_text_color: '#64748b',
      dashboard_layout: 'grid',
      group_overlay_enabled: false,
      show_groups_title: true,
      custom_css: `
        .card {
          border: 1px solid #cbd5e1;
          border-radius: 8px;
          background: #ffffff;
        }
        .card-header {
          background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
          color: white;
          border-radius: 8px 8px 0 0;
        }
        .btn {
          border-radius: 6px;
          font-weight: 500;
          text-transform: uppercase;
          font-size: 0.875rem;
        }
      `
    }
  },
  {
    id: 'creative',
    name: 'Творческий',
    description: 'Яркий креативный дизайн с градиентами',
    preview: '/templates/creative.jpg',
    settings: {
      theme_color: '#f59e0b',
      background_color: '#fef3c7',
      font_family: "'Comfortaa', cursive",
      heading_font_family: "'Comfortaa', cursive",
      body_font_family: "'Open Sans', sans-serif",
      header_text_color: '#7c2d12',
      group_text_color: '#ea580c',
      link_text_color: '#c2410c',
      group_description_text_color: '#f97316',
      dashboard_layout: 'masonry',
      group_overlay_enabled: true,
      group_overlay_color: '#f59e0b',
      group_overlay_opacity: 0.2,
      show_groups_title: true,
      custom_css: `
        body {
          background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 50%, #fecaca 100%);
        }
        .card {
          border: none;
          border-radius: 20px;
          background: linear-gradient(135deg, #ffffff 0%, #fef7ed 100%);
          box-shadow: 0 8px 32px rgba(251, 146, 60, 0.3);
        }
        .btn {
          border-radius: 25px;
          background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
          border: none;
          color: white;
          font-weight: 600;
        }
      `
    }
  },
  {
    id: 'nature',
    name: 'Природа', 
    description: 'Органический дизайн с натуральными цветами',
    preview: '/templates/nature.jpg',
    settings: {
      theme_color: '#059669',
      background_color: '#ecfdf5',
      font_family: "'Source Serif Pro', serif",
      heading_font_family: "'Source Serif Pro', serif",
      body_font_family: "'PT Sans', sans-serif",
      header_text_color: '#064e3b',
      group_text_color: '#065f46',
      link_text_color: '#047857',
      group_description_text_color: '#10b981',
      dashboard_layout: 'timeline',
      group_overlay_enabled: true,
      group_overlay_color: '#059669',
      group_overlay_opacity: 0.15,
      show_groups_title: true,
      custom_css: `
        body {
          background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        }
        .card {
          border: 2px solid #a7f3d0;
          border-radius: 16px;
          background: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(5px);
        }
        .timeline-content {
          position: relative;
        }
        .timeline-content::before {
          content: '';
          position: absolute;
          top: 0;
          left: -20px;
          width: 4px;
          height: 100%;
          background: linear-gradient(180deg, #059669 0%, #10b981 100%);
          border-radius: 2px;
        }
      `
    }
  },
  {
    id: 'retro',
    name: 'Ретро',
    description: 'Винтажный стиль с теплыми цветами',
    preview: '/templates/retro.jpg', 
    settings: {
      theme_color: '#dc2626',
      background_color: '#fef2f2',
      font_family: "'Merriweather', serif",
      heading_font_family: "'Merriweather', serif",
      body_font_family: "'Source Sans Pro', sans-serif",
      header_text_color: '#7f1d1d',
      group_text_color: '#991b1b',
      link_text_color: '#b91c1c',
      group_description_text_color: '#dc2626',
      dashboard_layout: 'magazine',
      group_overlay_enabled: true,
      group_overlay_color: '#7c2d12',
      group_overlay_opacity: 0.25,
      show_groups_title: true,
      custom_css: `
        body {
          background: radial-gradient(circle at center, #fef2f2 0%, #fee2e2 100%);
        }
        .card {
          border: 3px solid #fca5a5;
          border-radius: 12px;
          background: #fffbeb;
          box-shadow: 4px 4px 0px #f87171;
        }
        .card-header {
          background: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%);
          color: white;
          border-radius: 8px 8px 0 0;
          font-weight: bold;
        }
        .btn {
          border: 2px solid #dc2626;
          border-radius: 8px;
          font-weight: bold;
          text-transform: uppercase;
        }
      `
    }
  },
  {
    id: 'neon',
    name: 'Неон',
    description: 'Футуристический стиль с неоновыми акцентами',
    preview: '/templates/neon.jpg',
    settings: {
      theme_color: '#8b5cf6',
      background_color: '#0f0f23',
      font_family: "'Russo One', sans-serif",
      heading_font_family: "'Russo One', sans-serif",
      body_font_family: "'Fira Sans', sans-serif",
      header_text_color: '#a855f7',
      group_text_color: '#c084fc',
      link_text_color: '#ddd6fe',
      group_description_text_color: '#e9d5ff',
      dashboard_layout: 'grid',
      group_overlay_enabled: true,
      group_overlay_color: '#8b5cf6',
      group_overlay_opacity: 0.3,
      show_groups_title: true,
      custom_css: `
        body {
          background: radial-gradient(circle at 20% 50%, #1a1a2e 0%, #16213e 25%, #0f0f23 100%);
        }
        .card {
          border: 1px solid #8b5cf6;
          border-radius: 12px;
          background: rgba(139, 92, 246, 0.1);
          backdrop-filter: blur(10px);
          box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
        }
        .card:hover {
          box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
          border-color: #a855f7;
        }
        .btn {
          background: linear-gradient(135deg, #8b5cf6 0%, #06d6a0 100%);
          border: none;
          border-radius: 8px;
          box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
          text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }
      `
    }
  },
  {
    id: 'soft',
    name: 'Мягкий',
    description: 'Пастельный дизайн с деликатными оттенками',
    preview: '/templates/soft.jpg',
    settings: {
      theme_color: '#ec4899',
      background_color: '#fdf2f8',
      font_family: "'Ubuntu', sans-serif",
      heading_font_family: "'Ubuntu', sans-serif",
      body_font_family: "'Ubuntu', sans-serif",
      header_text_color: '#831843',
      group_text_color: '#be185d',
      link_text_color: '#db2777',
      group_description_text_color: '#f472b6',
      dashboard_layout: 'cards',
      group_overlay_enabled: true,
      group_overlay_color: '#ec4899',
      group_overlay_opacity: 0.1,
      show_groups_title: true,
      custom_css: `
        body {
          background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #fbcfe8 100%);
        }
        .card {
          border: none;
          border-radius: 24px;
          background: rgba(255, 255, 255, 0.7);
          backdrop-filter: blur(10px);
          box-shadow: 0 8px 32px rgba(236, 72, 153, 0.1);
        }
        .btn {
          border-radius: 20px;
          background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
          border: none;
          color: white;
          font-weight: 500;
          box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
        }
        .card-header {
          background: linear-gradient(135deg, #fce7f3 0%, #f3e8ff 100%);
          border-radius: 24px 24px 0 0;
          border-bottom: 1px solid rgba(236, 72, 153, 0.2);
        }
      `
    }
  },
  {
    id: 'test-list',
    name: 'Тестовый список',
    description: 'Полный несворачиваемый список всех групп и ссылок',
    preview: '/templates/test-list.jpg',
    settings: {
      theme_color: '#6366f1',
      background_color: '#f8fafc',
      font_family: "'Inter', sans-serif",
      heading_font_family: "'Inter', sans-serif",
      body_font_family: "'Inter', sans-serif",
      header_text_color: '#1e293b',
      group_text_color: '#334155',
      link_text_color: '#475569',
      group_description_text_color: '#64748b',
      dashboard_layout: 'list',
      group_overlay_enabled: false,
      show_groups_title: true,
      custom_css: `
        .test-list-layout .link-group {
          margin-bottom: 2rem;
          border: none;
          background: transparent;
        }
        .test-list-layout .group-header {
          background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
          color: white;
          padding: 1rem;
          border-radius: 8px;
          margin-bottom: 0.75rem;
          font-weight: 600;
          font-size: 1.125rem;
        }
        .test-list-layout .group-links {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          padding: 0;
          background: transparent;
        }
        .test-list-layout .link-item {
          background: white;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          padding: 0.75rem 1rem;
          transition: all 0.2s ease;
          display: flex;
          align-items: center;
          text-decoration: none;
          color: #475569;
        }
        .test-list-layout .link-item:hover {
          background: #f1f5f9;
          border-color: #6366f1;
          transform: translateX(4px);
        }
        .test-list-layout .link-icon {
          margin-right: 0.75rem;
          width: 20px;
          height: 20px;
          flex-shrink: 0;
        }
        .test-list-layout .link-title {
          font-weight: 500;
          color: #334155;
        }
        .test-list-layout .expandable-group {
          /* Принудительно отключаем сворачивание */
          .show-more-button { display: none !important; }
          .group-links { max-height: none !important; overflow: visible !important; }
        }
      `
    }
  }
]