import { createContext, useContext } from 'react';
import { useColorScheme } from 'react-native';

export interface DubsTheme {
  background: string;
  surface: string;
  surfaceActive: string;
  border: string;
  text: string;
  textSecondary: string;
  textMuted: string;
  textDim: string;
  accent: string;
  success: string;
  live: string;
  errorText: string;
  errorBg: string;
  errorBorder: string;
}

const dark: DubsTheme = {
  background: '#08080D',
  surface: '#111118',
  surfaceActive: '#7C3AED',
  border: '#1A1A24',
  text: '#FFFFFF',
  textSecondary: '#E0E0EE',
  textMuted: '#666666',
  textDim: '#555555',
  accent: '#7C3AED',
  success: '#22C55E',
  live: '#EF4444',
  errorText: '#F87171',
  errorBg: '#1A0A0A',
  errorBorder: '#3A1515',
};

const light: DubsTheme = {
  background: '#FFFFFF',
  surface: '#F0F0F5',
  surfaceActive: '#7C3AED',
  border: '#E0E0E8',
  text: '#111118',
  textSecondary: '#333333',
  textMuted: '#888888',
  textDim: '#999999',
  accent: '#7C3AED',
  success: '#16A34A',
  live: '#DC2626',
  errorText: '#DC2626',
  errorBg: '#FEF2F2',
  errorBorder: '#FECACA',
};

/** Context for provider-level theme overrides (e.g. accent color from developer config). */
const ThemeOverrideContext = createContext<Partial<DubsTheme>>({});
export const ThemeOverrideProvider = ThemeOverrideContext.Provider;

export function useDubsTheme(): DubsTheme {
  const scheme = useColorScheme();
  const base = scheme === 'light' ? light : dark;
  const overrides = useContext(ThemeOverrideContext);
  if (Object.keys(overrides).length === 0) return base;
  return { ...base, ...overrides };
}

/** Merge overrides into a base theme (e.g. custom accent color from developer config) */
export function mergeTheme(base: DubsTheme, overrides: Partial<DubsTheme>): DubsTheme {
  return { ...base, ...overrides };
}