'use client';

import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
import { APP_CONFIG } from '@/config/app';
import { normalizeAssetUrl, apiUrl } from '@/lib/utils/asset';

export interface BrandingData {
  appName: string;
  logoUrl: string | null;
  faviconUrl: string | null;
  updatedAt?: string;
  updatedBy?: string;
}

interface BrandingContextValue {
  branding: BrandingData;
  isLoading: boolean;
  refreshBranding: () => Promise<void>;
  setBrandingState: React.Dispatch<React.SetStateAction<BrandingData>>;
}

const DEFAULT_BRANDING: BrandingData = {
  appName: APP_CONFIG.name || 'DigiPixora — Meta Pixel & Ads',
  logoUrl: normalizeAssetUrl('/images/logo.png'),
  faviconUrl: normalizeAssetUrl('/favicon.ico'),
};

const BrandingContext = createContext<BrandingContextValue>({
  branding: DEFAULT_BRANDING,
  isLoading: false,
  refreshBranding: async () => {},
  setBrandingState: () => {},
});

export function BrandingProvider({ children }: { children: React.ReactNode }) {
  const [branding, setBrandingState] = useState<BrandingData>(DEFAULT_BRANDING);
  const [isLoading, setIsLoading] = useState(true);

  const refreshBranding = useCallback(async () => {
    try {
      const res = await fetch(apiUrl('/api/branding?_t=' + Date.now()));
      if (res.ok) {
        const data = await res.json();
        if (data.success && data.branding) {
          setBrandingState({
            appName: data.branding.appName || DEFAULT_BRANDING.appName,
            logoUrl: normalizeAssetUrl(data.branding.logoUrl || '/images/logo.png'),
            faviconUrl: normalizeAssetUrl(data.branding.faviconUrl || '/favicon.ico'),
            updatedAt: data.branding.updatedAt,
          });
        }
      }
    } catch (err) {
      console.warn('Could not load dynamic branding, using default branding:', err);
    } finally {
      setIsLoading(false);
    }
  }, []);

  useEffect(() => {
    refreshBranding();

    // Listen for custom branding update events dispatched by admin settings
    const handleBrandingUpdate = (e: Event) => {
      const customEvent = e as CustomEvent<BrandingData>;
      if (customEvent.detail) {
        setBrandingState((prev) => ({
          ...prev,
          ...customEvent.detail,
        }));
      } else {
        refreshBranding();
      }
    };

    window.addEventListener('app:branding_updated', handleBrandingUpdate);
    return () => window.removeEventListener('app:branding_updated', handleBrandingUpdate);
  }, [refreshBranding]);

  // Synchronize dynamic browser title and favicon
  useEffect(() => {
    if (typeof document !== 'undefined') {
      // 1. Update favicon if custom favicon is configured
      const iconUrl = normalizeAssetUrl(branding.faviconUrl || '/favicon.ico');
      let link: HTMLLinkElement | null = document.querySelector("link[rel*='icon']");
      if (!link) {
        link = document.createElement('link');
        link.rel = 'shortcut icon';
        document.getElementsByTagName('head')[0]?.appendChild(link);
      }
      link.href = iconUrl;

      // 2. Update page title if it still reflects an older or default app name
      if (branding.appName) {
        const title = document.title;
        if (!title || title.includes('Meta Commerce') || title.includes('DigiPixora') || title.includes('Meta Connector')) {
          // Keep specific page section if present, e.g. "Pricing & Plans - DigiPixora"
          if (title.includes(' - ')) {
            const parts = title.split(' - ');
            document.title = `${parts[0]} - ${branding.appName}`;
          } else {
            document.title = `${branding.appName}`;
          }
        }
      }
    }
  }, [branding.appName, branding.faviconUrl]);

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

export function useBranding() {
  const context = useContext(BrandingContext);
  return context;
}