/**
 * UI THEME - RUSTIC/POST-APOCALYPTIC
 * Color palette and style guide for NovaFarma
 */

const UITheme = {
    // RUSTIC COLOR PALETTE
    colors: {
        // Primary colors (browns, earthy tones)
        primary: {
            darkBrown: '#3d2817',      // Dark wood
            mediumBrown: '#6b4423',    // Medium wood
            lightBrown: '#a67c52',     // Light wood/leather
            tan: '#d4a574'             // Tan/sand
        },

        // Secondary colors (greys, metals)
        secondary: {
            charcoal: '#2a2a2a',       // Dark metal
            steel: '#4a4a4a',          // Steel grey
            silver: '#8a8a8a',         // Light metal
            rustyRed: '#8b4513'        // Rusty iron
        },

        // Accent colors (nature)
        accent: {
            forestGreen: '#2d5016',    // Dark green
            moss: '#4a7023',           // Moss green
            wheat: '#d4a373',          // Wheat/grain
            dirt: '#6b4423'            // Dirt brown
        },

        // UI States
        states: {
            success: '#4a7023',        // Green (moss)
            warning: '#d4a373',        // Yellow (wheat)
            danger: '#8b2500',         // Red (rust)
            info: '#4a7a8a'            // Blue (water)
        },

        // Text colors
        text: {
            primary: '#f5e6d3',        // Parchment white
            secondary: '#d4a574',      // Tan
            disabled: '#6b6b6b',       // Grey
            highlight: '#ffd700'       // Gold
        },

        // Backgrounds
        backgrounds: {
            dark: '#1a1410',           // Dark wood/stone
            medium: '#3d2817',         // Medium brown
            light: '#6b4423',          // Light brown
            overlay: 'rgba(26, 20, 16, 0.9)' // Dark overlay
        }
    },

    // TYPOGRAPHY
    fonts: {
        primary: '"Courier New", monospace',
        handwritten: '"Comic Sans MS", cursive', // Backup, replace with custom
        display: 'Georgia, serif'
    },

    fontSizes: {
        tiny: '10px',
        small: '12px',
        normal: '14px',
        medium: '16px',
        large: '20px',
        xlarge: '24px',
        huge: '32px'
    },

    // BORDERS & SHADOWS
    borders: {
        thin: '1px solid',
        medium: '2px solid',
        thick: '3px solid',

        // Rustic border style (weathered wood)
        rustic: {
            color: '#6b4423',
            width: 3,
            style: 'solid'
        },

        // Metal border style
        metal: {
            color: '#4a4a4a',
            width: 2,
            style: 'solid'
        }
    },

    shadows: {
        small: '2px 2px 4px rgba(0, 0, 0, 0.3)',
        medium: '4px 4px 8px rgba(0, 0, 0, 0.4)',
        large: '8px 8px 16px rgba(0, 0, 0, 0.5)',
        inner: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3)'
    },

    // SPACING
    spacing: {
        xs: 4,
        sm: 8,
        md: 16,
        lg: 24,
        xl: 32,
        xxl: 48
    },

    // BUTTON STYLES
    buttons: {
        primary: {
            background: '#6b4423',
            backgroundHover: '#8b5a2b',
            text: '#f5e6d3',
            border: '#3d2817'
        },
        secondary: {
            background: '#4a4a4a',
            backgroundHover: '#5a5a5a',
            text: '#f5e6d3',
            border: '#2a2a2a'
        },
        danger: {
            background: '#8b2500',
            backgroundHover: '#a52a00',
            text: '#f5e6d3',
            border: '#5a1800'
        }
    },

    // PANEL STYLES
    panels: {
        wooden: {
            background: '#3d2817',
            border: '#6b4423',
            borderWidth: 3,
            shadow: '4px 4px 8px rgba(0, 0, 0, 0.4)'
        },
        metal: {
            background: '#2a2a2a',
            border: '#4a4a4a',
            borderWidth: 2,
            shadow: '2px 2px 6px rgba(0, 0, 0, 0.5)'
        },
        parchment: {
            background: '#f5e6d3',
            border: '#d4a574',
            borderWidth: 2,
            shadow: '3px 3px 6px rgba(0, 0, 0, 0.2)'
        }
    },

    /**
     * Apply theme to Phaser text object
     */
    applyTextStyle: function (textObject, style = 'normal') {
        const styles = {
            normal: {
                fontFamily: this.fonts.primary,
                fontSize: this.fontSizes.normal,
                color: this.colors.text.primary,
                stroke: this.colors.backgrounds.dark,
                strokeThickness: 2
            },
            header: {
                fontFamily: this.fonts.display,
                fontSize: this.fontSizes.large,
                color: this.colors.text.highlight,
                stroke: this.colors.backgrounds.dark,
                strokeThickness: 3,
                fontStyle: 'bold'
            },
            small: {
                fontFamily: this.fonts.primary,
                fontSize: this.fontSizes.small,
                color: this.colors.text.secondary,
                stroke: this.colors.backgrounds.dark,
                strokeThickness: 1
            }
        };

        if (textObject && textObject.setStyle) {
            textObject.setStyle(styles[style] || styles.normal);
        }

        return styles[style] || styles.normal;
    },

    /**
     * Create rustic panel (Phaser)
     */
    createPanel: function (scene, x, y, width, height, panelType = 'wooden') {
        const panel = this.panels[panelType] || this.panels.wooden;

        // Background
        const bg = scene.add.rectangle(x, y, width, height,
            parseInt(panel.background.replace('#', '0x')), 0.95);

        // Border
        bg.setStrokeStyle(panel.borderWidth,
            parseInt(panel.border.replace('#', '0x')));

        return bg;
    },

    /**
     * Get color as hex number for Phaser
     */
    getColor: function (colorPath) {
        // e.g., 'primary.darkBrown' or 'text.primary'
        const parts = colorPath.split('.');
        let color = this.colors;

        for (const part of parts) {
            color = color[part];
            if (!color) return 0xffffff;
        }

        return parseInt(color.replace('#', '0x'));
    }
};

// Make globally available
window.UITheme = UITheme;

console.log('🎨 UI Theme loaded (Rustic/Post-Apo style)');