/** @format */

/**
 * @class StatusBar
 * @extends Component
 * @description A component that displays the status bar at the top of the phone interface.
 * Shows current time, signal strength, network status, and battery indicator.
 */
class StatusBar extends Component {
    /**
     * Cache for loaded icons
     * @static
     * @private
     */
    static iconCache = new Map();

    /**
     * Time update interval in milliseconds
     * @static
     * @private
     */
    static TIME_UPDATE_INTERVAL = 1000;

    /**
     * @constructor
     * @param {Object} props - Component properties
     */
    constructor(props) {
        super(props);
        this.state = {
            currentTime: this.getCurrentTime(),
            batteryIcon: null
        };
        this.timerInterval = null;
    }

    /**
     * Start the timer when component mounts
     * @lifecycle
     */
    componentDidMount() {
        if (!this.timerInterval) {
            this.timerInterval = setInterval(() => {
                this.setState({ currentTime: this.getCurrentTime() });
            }, StatusBar.TIME_UPDATE_INTERVAL);
        }
        this.loadBatteryIcon();
    }

    /**
     * Clean up timer when component unmounts
     * @lifecycle
     */
    componentWillUnmount() {
        if (this.timerInterval) {
            clearInterval(this.timerInterval);
            this.timerInterval = null;
        }
    }

    /**
     * Load the battery icon using A3API.RequestTexture
     * @private
     */
    loadBatteryIcon() {
        const batteryIconPath = 'forge_phone\\data\\Battery_ca.paa';

        // Check cache first
        if (StatusBar.iconCache.has(batteryIconPath)) {
            this.setState({ batteryIcon: StatusBar.iconCache.get(batteryIconPath) });
        } else {
            // Load the file if not in cache
            A3API.RequestTexture(batteryIconPath, 4096).then(imageContent => {
                StatusBar.iconCache.set(batteryIconPath, imageContent);
                this.setState({ batteryIcon: imageContent });
            }).catch(error => {
                console.error('Failed to load battery icon:', error);
            });
        }
    }

    /**
     * Get the current time in 24-hour format
     * @returns {string} Formatted time string (HH:mm)
     * @private
     */
    getCurrentTime() {
        return new Date().toLocaleTimeString('en-US', {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false,
        });
    }

    /**
     * Render signal strength indicator
     * @returns {HTMLElement} Signal bars element
     * @private
     */
    renderSignalBars() {
        return this.createElement(
            'div',
            {
                className: 'signal-bars',
                'aria-label': 'Signal strength indicator',
                role: 'meter',
                'aria-valuenow': '4',
                'aria-valuemin': '0',
                'aria-valuemax': '4',
            },
            Array(4)
                .fill(null)
                .map(() =>
                    this.createElement('div', {
                        className: 'bar',
                        'aria-hidden': 'true',
                    })
                )
        );
    }

    /**
     * Render battery icon
     * @returns {HTMLElement} Battery icon element
     * @private
     */
    renderBatteryIcon() {
        const { batteryIcon } = this.state;
        if (!batteryIcon) return null;

        return this.createElement('img', {
            src: batteryIcon,
            alt: 'Battery status',
            className: 'battery-icon',
            style: { width: '32px', height: '32px', transform: 'rotate(90deg)' }
        });
    }

    /**
     * Render status indicators (network and battery)
     * @returns {HTMLElement} Status indicators element
     * @private
     */
    renderStatusIndicators() {
        return this.createElement(
            'div',
            { className: 'status-indicators' },
            this.renderSignalBars(),
            this.createElement(
                'span',
                {
                    className: 'network-battery',
                    'aria-label': 'Network: 5G, Battery: Full',
                },
                '5G',
                this.renderBatteryIcon()
            )
        );
    }

    /**
     * Render the status bar
     * @returns {HTMLElement} The rendered status bar element
     */
    render() {
        const { currentTime } = this.state;

        return this.createElement(
            'div',
            {
                className: 'status-bar',
                role: 'banner',
                'aria-label': 'Status bar',
            },
            this.createElement(
                'div',
                {
                    className: 'status-left',
                    role: 'timer',
                    'aria-label': 'Current time',
                },
                currentTime
            ),
            this.createElement('div', {
                className: 'status-center',
                'aria-hidden': 'true',
            }),
            this.createElement('div', { className: 'status-right' }, this.renderStatusIndicators())
        );
    }
}
