import { ThemeCustomizer } from '@/components/settings/ThemeCustomizer'

export default function ThemeSettingsPage() {
  return (
    <div className="container mx-auto py-8">
      <ThemeCustomizer />
    </div>
  )
}

import { useThemeCustomizer } from '@/hooks/use-theme-customizer'

function MyComponent() {
  const { theme, isModified, updateColor, loadPreset, saveTheme, exportJSON } = useThemeCustomizer()

  // Update a single color
  const handleColorChange = (color: string) => {
    updateColor('primaryColor', color)
  }

  // Load a preset
  const handlePresetLoad = () => {
    loadPreset('slack', 'dark')
  }

  // Save theme
  const handleSave = async () => {
    await saveTheme()
  }

  // Export as JSON
  const handleExport = () => {
    const json = exportJSON()
    console.log(json)
  }

  return (
    <div>
      {isModified && <p>You have unsaved changes</p>}
      <button onClick={handleSave}>Save Theme</button>
      <button onClick={handleExport}>Export</button>
    </div>
  )
}

import { applyCustomTheme, createThemeFromPreset } from '@/lib/theme/custom-theme'

// Create theme from preset
const theme = createThemeFromPreset('ocean', 'dark')

// Apply to document
applyCustomTheme(theme)

import { exportThemeJSON, importThemeJSON, generateThemeShareURL } from '@/lib/theme/custom-theme'

// Export
const json = exportThemeJSON(theme)
// Save to file or copy to clipboard

// Import
try {
  const imported = importThemeJSON(jsonString)
  applyCustomTheme(imported)
} catch (error) {
  console.error('Invalid theme JSON')
}

// Generate share URL
const url = generateThemeShareURL(theme)
// https://example.com/theme/eyJjb2xvcnMiOns...

const { updateColors, saveTheme } = useThemeCustomizer()

// Apply brand colors
updateColors({
  primaryColor: '#FF6B00', // Brand orange
  secondaryColor: '#00B4D8', // Brand blue
  accentColor: '#FFD60A', // Brand yellow
})

// Save to persist
await saveTheme()

import { CustomThemeConfig } from '@/lib/theme/custom-theme'

const myTheme: CustomThemeConfig = {
  colors: {
    primaryColor: '#FF6B00',
    secondaryColor: '#00B4D8',
    accentColor: '#FFD60A',
    backgroundColor: '#0F0F0F',
    surfaceColor: '#1A1A1A',
    textColor: '#FFFFFF',
    mutedColor: '#888888',
    borderColor: '#333333',
    buttonPrimaryBg: '#FF6B00',
    buttonPrimaryText: '#FFFFFF',
    buttonSecondaryBg: '#333333',
    buttonSecondaryText: '#FFFFFF',
    successColor: '#10B981',
    warningColor: '#F59E0B',
    errorColor: '#EF4444',
    infoColor: '#3B82F6',
  },
  fontFamily: 'Inter, system-ui, sans-serif',
  fontScale: 1.0,
  borderRadius: '8px',
  spacingScale: 1.0,
  colorScheme: 'dark',
  customCSS: `
    .my-custom-button {
      background: linear-gradient(to right, #FF6B00, #FFD60A);
    }
  `,
}

// Apply it
applyCustomTheme(myTheme)

const { exportJSON, generateShareURL } = useThemeCustomizer()

// Export as JSON file
const json = exportJSON()
// Send to team members

// Or generate share link
const url = generateShareURL()
// Share URL: https://example.com/theme/eyJjb2xvcnMi...

const { importJSON } = useThemeCustomizer()

// Receive JSON from team
const teamThemeJSON = '{"colors": {...}, ...}'

// Import it
try {
  importJSON(teamThemeJSON)
} catch (error) {
  alert('Invalid theme JSON')
}

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

const { config, updateConfig } = useAppConfig()

// Theme is stored in config.theme
console.log(config.theme.primaryColor)
console.log(config.theme.fontFamily)
console.log(config.theme.borderRadius)

// Updates automatically save to both localStorage and database

const { setCustomCSS } = useThemeCustomizer()

setCustomCSS(`
  /* Custom gradients */
  .gradient-primary {
    background: linear-gradient(
      to right,
      var(--color-primary),
      var(--color-secondary)
    );
  }

  /* Custom animations */
  @keyframes pulse-primary {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .pulse {
    animation: pulse-primary 2s infinite;
  }

  /* Custom button styles */
  .btn-custom {
    background: var(--color-accent);
    border-radius: calc(var(--border-radius) * 2);
    padding: calc(1rem * var(--spacing-scale));
  }
`)

import { isLightColor, getContrastingTextColor } from '@/lib/theme/custom-theme'

const bgColor = '#FF6B00'
const textColor = getContrastingTextColor(bgColor)
// Returns '#000000' or '#FFFFFF' based on luminance

const { downloadJSON } = useThemeCustomizer()
downloadJSON() // Downloads theme-custom-1706800000000.json

loadPreset('ocean', 'dark') // Start with ocean theme
updateColor('primaryColor', '#FF6B00') // Customize primary color

// Make changes...
updateColor('primaryColor', '#FF6B00')
// Preview looks good?
await saveTheme()

// Old system
const oldTheme = {
  primaryColor: '#FF6B00',
  // ... other colors
}

// Convert to new system
const { updateColors } = useThemeCustomizer()
updateColors(oldTheme)
await saveTheme()