import { useCallback, useEffect, useState } from 'react';

export type FontFamily = 'Inter' | 'Roboto' | 'Open Sans' | 'Helvetica' | 'Arial' | 'Times New Roman' | 'Georgia' | 'Courier New';

// Font mapping to include fallbacks for better compatibility
const fontFamilyMap: Record<FontFamily, string> = {
    Inter: '"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    Roboto: '"Roboto", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    'Open Sans': '"Open Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    Helvetica:
        '"Helvetica Neue", "Helvetica", "Arial", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    Arial: '"Arial", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    'Times New Roman':
        '"Times New Roman", "Times", ui-serif, Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    Georgia: '"Georgia", ui-serif, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    'Courier New': '"Courier New", "Courier", ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Menlo", monospace',
};

const setCookie = (name: string, value: string, days = 365) => {
    if (typeof document === 'undefined') {
        return;
    }

    const maxAge = days * 24 * 60 * 60;
    document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
};

const applyFont = (fontFamily: FontFamily) => {
    if (typeof document === 'undefined') {
        return;
    }

    const fontString = fontFamilyMap[fontFamily];

    // Only apply if different from current
    const currentFont = document.documentElement.style.getPropertyValue('--font-sans');
    if (currentFont !== fontString) {
        // Apply font to document root
        document.documentElement.style.setProperty('--font-sans', fontString);
        // Also update the CSS custom property for immediate effect
        document.documentElement.style.fontFamily = fontString;
    }
};

export function initializeFont() {
    const savedFont = localStorage.getItem('font-family') as FontFamily | null;
    // Only apply font if one was previously saved
    if (savedFont && fontFamilyMap[savedFont]) {
        applyFont(savedFont);
    }
}

export function useFont() {
    const [fontFamily, setFontFamily] = useState<FontFamily | null>(null);

    const updateFont = useCallback((font: FontFamily) => {
        setFontFamily(font);

        // Store in localStorage for client-side persistence
        localStorage.setItem('font-family', font);

        // Store in cookie for SSR
        setCookie('font-family', font);

        // Apply the font immediately
        applyFont(font);
    }, []);

    useEffect(() => {
        const savedFont = localStorage.getItem('font-family') as FontFamily | null;
        if (savedFont && fontFamilyMap[savedFont]) {
            setFontFamily(savedFont);
            // Don't apply the font here since it should already be applied by initializeFont
        }
    }, []);

    return { fontFamily, updateFont } as const;
}