import { createContext, useContext, useState, useEffect, useCallback } from 'react';
import api from '../services/api';
import { useTheme } from './ThemeContext';

const BrandingContext = createContext();

export function BrandingProvider({ children }) {
  const { applyBrandingDefault } = useTheme();
  const [branding, setBranding] = useState({
    appName: 'Redlight',
    hasLogo: false,
    logoUrl: null,
    defaultTheme: null,
    imprintUrl: null,
    privacyUrl: null,
  });

  const fetchBranding = useCallback(async () => {
    try {
      const res = await api.get('/branding');
      setBranding(res.data);
      if (res.data.defaultTheme) {
        applyBrandingDefault(res.data.defaultTheme);
      }
    } catch {
      // keep defaults
    }
  }, [applyBrandingDefault]);

  useEffect(() => {
    fetchBranding();
  }, [fetchBranding]);

  return (
    <BrandingContext.Provider value={{ ...branding, refreshBranding: fetchBranding }}>
      {children}
    </BrandingContext.Provider>
  );
}

export function useBranding() {
  const ctx = useContext(BrandingContext);
  if (!ctx) throw new Error('useBranding must be used within BrandingProvider');
  return ctx;
}