interface AppConfig {
  setup: {
    completed: boolean
    completedSteps: string[]
    currentStep: number
  }
  owner: {
    name: string
    email: string
    company: string
    role: string
  }
  branding: {
    appName: string
    logo: string | null
    favicon: string | null
    tagline: string
    companyName: string
  }
  landing: {
    mode: 'landing' | 'redirect' | 'chat'
    heroTitle: string
    heroSubtitle: string
    showFeatures: boolean
    showTestimonials: boolean
  }
  auth: {
    methods: {
      email: boolean
      google: boolean
      github: boolean
      apple: boolean
      idme: boolean
    }
    permissions: 'allow-all' | 'verified-only' | 'admin-only'
    requireEmailVerification: boolean
    allowRegistration: boolean
  }
  features: {
    channels: boolean
    directMessages: boolean
    threads: boolean
    reactions: boolean
    fileUploads: boolean
    voiceMessages: boolean
    videoCall: boolean
    screenShare: boolean
    polls: boolean
    reminders: boolean
    search: boolean
    notifications: boolean
    bots: boolean
    webhooks: boolean
  }
  theme: {
    mode: 'light' | 'dark' | 'system'
    preset: string
    colors: {
      primary: string
      secondary: string
      accent: string
      background: string
      foreground: string
    }
  }
  integrations: {
    slack: { enabled: boolean; webhookUrl?: string }
    github: { enabled: boolean; token?: string }
    jira: { enabled: boolean; domain?: string }
    googleDrive: { enabled: boolean }
  }
}

import { useAppConfig } from '@/contexts/app-config-context'

function MyComponent() {
  const { config, updateConfig, isLoading } = useAppConfig()

  if (isLoading) return <Loading />

  return (
    <div>
      <h1>{config.branding.appName}</h1>
      <p>{config.branding.tagline}</p>
    </div>
  )
}

const { updateConfig } = useAppConfig()

// Update branding
await updateConfig({
  branding: {
    appName: 'New Name',
    tagline: 'New tagline',
  },
})

// Update features
await updateConfig({
  features: {
    polls: true,
    voiceMessages: true,
  },
})

const channelConfig = {
  maxChannels: 100,
  maxMembersPerChannel: 1000,
  allowPrivateChannels: true,
  allowChannelCreation: 'all' | 'admin' | 'none',
  defaultChannels: ['general', 'random'],
  archiveInactiveAfterDays: 90,
}

const messageConfig = {
  maxLength: 10000,
  editTimeWindow: 3600, // seconds
  deleteTimeWindow: 86400, // seconds
  allowedMimeTypes: ['image/*', 'video/*', 'application/pdf'],
  maxFileSize: 50 * 1024 * 1024, // 50MB
  maxFilesPerMessage: 10,
}

const notificationConfig = {
  enablePush: true,
  enableEmail: true,
  enableDesktop: true,
  quietHours: {
    enabled: true,
    start: '22:00',
    end: '08:00',
    timezone: 'America/New_York',
  },
  grouping: {
    enabled: true,
    windowSeconds: 60,
  },
}

const customTheme = {
  mode: 'dark',
  preset: 'custom',
  colors: {
    primary: '#6366f1',
    secondary: '#8b5cf6',
    accent: '#ec4899',
    background: '#0f172a',
    foreground: '#f8fafc',
    muted: '#64748b',
    border: '#334155',
    error: '#ef4444',
    success: '#22c55e',
    warning: '#f59e0b',
  },
  fonts: {
    sans: 'Inter, sans-serif',
    mono: 'JetBrains Mono, monospace',
  },
  radius: {
    sm: '0.25rem',
    md: '0.5rem',
    lg: '0.75rem',
  },
}

import { useTheme } from '@/contexts/theme-context'

function ThemeSwitcher() {
  const { theme, setTheme, presets } = useTheme()

  return (
    <select
      value={theme.preset}
      onChange={(e) => setTheme({ preset: e.target.value })}
    >
      {presets.map((preset) => (
        <option key={preset.id} value={preset.id}>
          {preset.name}
        </option>
      ))}
    </select>
  )
}

const authSecurity = {
  password: {
    minLength: 8,
    requireUppercase: true,
    requireLowercase: true,
    requireNumbers: true,
    requireSpecialChars: false,
  },
  session: {
    maxAge: 30 * 24 * 60 * 60, // 30 days
    updateAge: 24 * 60 * 60, // 24 hours
  },
  rateLimit: {
    login: {
      window: 15 * 60, // 15 minutes
      max: 5,
    },
    register: {
      window: 60 * 60, // 1 hour
      max: 3,
    },
  },
}

const contentSecurity = {
  sanitize: {
    html: true,
    markdown: true,
    links: true,
  },
  allowedHtml: ['b', 'i', 'u', 'a', 'code', 'pre'],
  linkPreview: {
    enabled: true,
    timeout: 5000,
  },
  profanityFilter: {
    enabled: false,
    action: 'blur' | 'replace' | 'block',
  },
}