import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';

export interface SiteDesign {
  // Basic
  primaryColor: string;
  secondaryColor: string;
  accentColor: string;
  headingFont: string;
  bodyFont: string;
  linkColor: string;

  // Advanced
  successColor: string;
  warningColor: string;
  errorColor: string;
  backgroundColor: string;
  textColor: string;
  mutedTextColor: string;
  borderColor: string;
  borderRadius: string;
  buttonFont: string;
  buttonRadius: string;
  navStyle: 'light' | 'dark';

  // Site-wide custom code
  headCode: string;
}

export interface SiteDesignContextValue {
  design: SiteDesign;
  updateDesign: (updates: Partial<SiteDesign>) => void;
  resetToDefaults: () => void;
}

export const DEFAULT_SITE_DESIGN: SiteDesign = {
  primaryColor: '#3b82f6',
  secondaryColor: '#8b5cf6',
  accentColor: '#10b981',
  headingFont: 'Inter, sans-serif',
  bodyFont: 'Inter, sans-serif',
  linkColor: '#3b82f6',

  successColor: '#10b981',
  warningColor: '#f59e0b',
  errorColor: '#ef4444',
  backgroundColor: '#ffffff',
  textColor: '#1f2937',
  mutedTextColor: '#6b7280',
  borderColor: '#e5e7eb',
  borderRadius: '8px',
  buttonFont: 'Inter, sans-serif',
  buttonRadius: '8px',
  navStyle: 'light',
  headCode: '',
};

const SiteDesignContext = createContext<SiteDesignContextValue>({
  design: DEFAULT_SITE_DESIGN,
  updateDesign: () => {},
  resetToDefaults: () => {},
});

export const useSiteDesign = () => useContext(SiteDesignContext);

export const SiteDesignProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [design, setDesign] = useState<SiteDesign>(DEFAULT_SITE_DESIGN);

  const updateDesign = useCallback((updates: Partial<SiteDesign>) => {
    setDesign((prev) => ({ ...prev, ...updates }));
  }, []);

  const resetToDefaults = useCallback(() => {
    setDesign(DEFAULT_SITE_DESIGN);
  }, []);

  return (
    <SiteDesignContext.Provider value={{ design, updateDesign, resetToDefaults }}>
      {children}
    </SiteDesignContext.Provider>
  );
};