import { colorConfig, type SemanticVariant } from '@admin/lib/colors';
import { useCallback } from 'react';
import { useAppearance, type Appearance } from './use-appearance';

/**
 * Extended theme configuration that builds upon the appearance system
 * Provides utilities for working with colors and theme variants
 */
export function useTheme() {
    const { appearance, updateAppearance } = useAppearance();

    /**
     * Get the current theme mode (resolving 'system' to actual preference)
     */
    const getResolvedTheme = useCallback((): 'light' | 'dark' => {
        if (appearance === 'system') {
            if (typeof window !== 'undefined') {
                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
            }
            return 'light';
        }
        return appearance;
    }, [appearance]);

    /**
     * Check if the current theme is dark
     */
    const isDark = useCallback((): boolean => {
        return getResolvedTheme() === 'dark';
    }, [getResolvedTheme]);

    /**
     * Get a CSS custom property value for the current theme
     */
    const getCSSVariable = useCallback((variable: string): string => {
        if (typeof window === 'undefined') return '';

        const computedStyle = getComputedStyle(document.documentElement);
        return computedStyle.getPropertyValue(variable).trim();
    }, []);

    /**
     * Get a color value from the color configuration
     */
    const getThemeColor = useCallback((category: keyof typeof colorConfig, color: string): string => {
        const categoryColors = colorConfig[category] as Record<string, string>;
        return categoryColors[color] || '';
    }, []);

    /**
     * Toggle between light and dark themes
     */
    const toggleTheme = useCallback(() => {
        const currentTheme = getResolvedTheme();
        updateAppearance(currentTheme === 'dark' ? 'light' : 'dark');
    }, [getResolvedTheme, updateAppearance]);

    /**
     * Set theme to a specific mode
     */
    const setTheme = useCallback(
        (mode: Appearance) => {
            updateAppearance(mode);
        },
        [updateAppearance],
    );

    /**
     * Get semantic variant classes based on current theme
     */
    const getVariantClasses = useCallback((variant: SemanticVariant) => {
        const variantMap = {
            default: 'bg-background text-foreground border-border',
            primary: 'bg-primary text-primary-foreground border-primary',
            secondary: 'bg-secondary text-secondary-foreground border-secondary',
            success: 'bg-success text-success-foreground border-success',
            warning: 'bg-warning text-warning-foreground border-warning',
            info: 'bg-info text-info-foreground border-info',
            destructive: 'bg-destructive text-destructive-foreground border-destructive',
        };

        return variantMap[variant] || variantMap.default;
    }, []);

    return {
        // Appearance control
        appearance,
        updateAppearance,
        setTheme,
        toggleTheme,

        // Theme state
        isDark: isDark(),
        resolvedTheme: getResolvedTheme(),

        // Color utilities
        getCSSVariable,
        getThemeColor,
        getVariantClasses,

        // Color configuration
        colors: colorConfig,
    } as const;
}

/**
 * Hook for getting theme-aware color values
 * Useful for components that need direct access to color values
 */
export function useThemeColors() {
    const { getThemeColor, colors } = useTheme();

    return {
        // Direct color access
        colors,
        getColor: getThemeColor,

        // Common color getters
        background: () => getThemeColor('semantic', 'background'),
        foreground: () => getThemeColor('semantic', 'foreground'),
        primary: () => getThemeColor('semantic', 'primary'),
        secondary: () => getThemeColor('semantic', 'secondary'),
        success: () => getThemeColor('semantic', 'success'),
        warning: () => getThemeColor('semantic', 'warning'),
        info: () => getThemeColor('semantic', 'info'),
        destructive: () => getThemeColor('semantic', 'destructive'),

        // Brand colors
        brand: (shade: number = 500) => getThemeColor('brand', shade.toString()),

        // Chart colors
        chart: (index: number) => getThemeColor('chart', index.toString()),
    } as const;
}