import React, { createContext, useContext, useState, useEffect } from 'react';
import { settingsApi } from '../api/settingsApi';
import { BACKEND_URL } from '../api/axiosInstance';

interface Settings {
    logo?: string;
    favicon?: string;
    businessName?: string;
    phone?: string;
    email?: string;
    website?: string;
    address?: string;
    pincode?: string;
    gst?: string;
    pan?: string;
    bankName?: string;
    branchName?: string;
    accountHolder?: string;
    accountNumber?: string;
    ifsc?: string;
    facebook?: string;
    instagram?: string;
    twitter?: string;
    linkedin?: string;
    youtube?: string;
    github?: string;
    [key: string]: any;
}

interface SettingsContextType {
    settings: Settings | null;
    fetchSettings: () => Promise<void>;
    logoUrl: string | null;
    faviconUrl: string | null;
}

const SettingsContext = createContext<SettingsContextType | undefined>(undefined);

export const SettingsProvider = ({ children }: { children: React.ReactNode }) => {
    const [settings, setSettings] = useState<Settings | null>(() => {
        const saved = localStorage.getItem('settings');
        try {
            return saved ? JSON.parse(saved) : null;
        } catch {
            return null;
        }
    });

    const fetchSettings = async () => {
        try {
            const res = await settingsApi.getSettings();
            if (res.success && res.data) {
                setSettings(res.data);
                localStorage.setItem('settings', JSON.stringify(res.data));
                
                // Update favicon and apple-touch-icon in DOM
                if (res.data.favicon) {
                    const faviconUrl = res.data.favicon.startsWith('http') || res.data.favicon.startsWith('data:')
                        ? res.data.favicon
                        : `${BACKEND_URL}${res.data.favicon}`;
                    
                    const updateFavicon = (rel: string) => {
                        let link = document.querySelector(`link[rel~='${rel}']`) as HTMLLinkElement;
                        if (!link) {
                            link = document.createElement('link');
                            link.rel = rel;
                            document.getElementsByTagName('head')[0].appendChild(link);
                        }
                        link.href = faviconUrl;
                    };
                    updateFavicon('icon');
                    updateFavicon('apple-touch-icon');
                }
            }
        } catch (err) {
            console.error('Failed to fetch settings:', err);
        }
    };

    useEffect(() => {
        fetchSettings();
        
        // Listen for updates from Settings page
        window.addEventListener('settings-updated', fetchSettings);
        return () => {
            window.removeEventListener('settings-updated', fetchSettings);
        };
    }, []);

    const logoUrl = settings?.logo 
        ? (settings.logo.startsWith('blob:') || settings.logo.startsWith('data:') || settings.logo.startsWith('http')
            ? settings.logo
            : `${BACKEND_URL}${settings.logo}`)
        : null;

    const faviconUrl = settings?.favicon 
        ? (settings.favicon.startsWith('blob:') || settings.favicon.startsWith('data:') || settings.favicon.startsWith('http')
            ? settings.favicon
            : `${BACKEND_URL}${settings.favicon}`)
        : null;

    return (
        <SettingsContext.Provider value={{ settings, fetchSettings, logoUrl, faviconUrl }}>
            {children}
        </SettingsContext.Provider>
    );
};

export const useSettings = () => {
    const context = useContext(SettingsContext);
    if (!context) {
        throw new Error('useSettings must be used within a SettingsProvider');
    }
    return context;
};