import { usePage } from '@inertiajs/react';
import { useEffect } from 'react';

import type { SharedData } from '@/types';

export interface PersonalizerSettings {
    branding: {
        primary_color: string;
        secondary_color: string;
        background_color: string;
        default_logo: string | null;
        default_icon: string | null;
        default_favicon: string | null;
    };
    login: {
        tenant_login_layout: 'layout1' | 'layout2' | 'layout3';
        login_banner: string | null;
        login_logo: string | null;
        login_icon: string | null;
        login_app_name: string;
        login_app_description: string;
        login_title: string;
        login_subtitle: string;
        social_login_enabled: boolean;
        terms_url: string;
        privacy_url: string;
        terms_content: string;
        privacy_content: string;
    };
    typography: {
        font_family: string;
        base_font_size: string;
        heading_font: string;
        mono_font: string;
    };
}

const DEFAULTS: PersonalizerSettings = {
    branding: {
        primary_color: '#4f46e5',
        secondary_color: '#7c3aed',
        background_color: '#ffffff',
        default_logo: null,
        default_icon: null,
        default_favicon: null,
    },
    login: {
        tenant_login_layout: 'layout1',
        login_banner: null,
        login_logo: null,
        login_icon: null,
        login_app_name: '',
        login_app_description: '',
        login_title: 'Welcome back',
        login_subtitle: 'Enter your email and password to sign in to your account',
        social_login_enabled: false,
        terms_url: '',
        privacy_url: '',
        terms_content: '',
        privacy_content: '',
    },
    typography: {
        font_family: 'Inter',
        base_font_size: '14px',
        heading_font: 'Inter',
        mono_font: 'JetBrains Mono',
    },
};

function applyCssVars(settings: PersonalizerSettings): void {
    const root = document.documentElement;
    root.style.setProperty('--primary', settings.branding.primary_color);
    root.style.setProperty('--color-primary', settings.branding.primary_color);
    root.style.setProperty('--secondary', settings.branding.secondary_color);
    root.style.setProperty('--color-secondary', settings.branding.secondary_color);
    root.style.setProperty('--color-background', settings.branding.background_color);
    root.style.setProperty('--font-family', settings.typography.font_family);
    root.style.setProperty('--font-size-base', settings.typography.base_font_size);
    root.style.setProperty('--font-heading', settings.typography.heading_font);
    root.style.setProperty('--font-mono', settings.typography.mono_font);

    if (settings.branding.default_favicon) {
        const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
        if (link && !link.dataset.tenantFavicon) {
            link.href = settings.branding.default_favicon;
        }
    }
}

function mergeWithDefaults(partial: Partial<PersonalizerSettings> | null): PersonalizerSettings {
    if (!partial) return DEFAULTS;
    return {
        branding: { ...DEFAULTS.branding, ...partial.branding },
        login: { ...DEFAULTS.login, ...partial.login },
        typography: { ...DEFAULTS.typography, ...partial.typography },
    };
}

export function usePersonalizer(): { settings: PersonalizerSettings } {
    const { personalizer } = usePage<SharedData>().props;
    const settings = mergeWithDefaults(personalizer as Partial<PersonalizerSettings> | null);

    useEffect(() => {
        applyCssVars(settings);
    }, [settings]);

    return { settings };
}