class DeviceAtlasInfoPst extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this._primarySoftwareType = null;
        this.softwareIcons = {
            'browser': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/><rect x="5" y="5" width="14" height="4" rx="1" fill="currentColor"/><line x1="5" y1="9" x2="19" y2="9" stroke="currentColor" stroke-width="1"/></svg>',
            'desktop': '<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M20 18V7H4v11H2v2h20v-2h-2zm-8-5v-2h-4v2H8l4 4 4-4h-2z"/></svg>',
            'app': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="5" width="14" height="14" rx="3" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>',
            'previewer': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="8" width="16" height="10" rx="2" stroke="currentColor" stroke-width="2"/><rect x="7" y="11" width="6" height="3" rx="1" fill="currentColor"/><line x1="15" y1="13" x2="17" y2="13" stroke="currentColor" stroke-width="2"/></svg>',
            'default': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 200 200"> <path fill="currentColor" stroke="currentColor" stroke-width="4" transform-origin="center" d="m148 84.7 13.8-8-10-17.3-13.8 8a50 50 0 0 0-27.4-15.9v-16h-20v16A50 50 0 0 0 63 67.4l-13.8-8-10 17.3 13.8 8a50 50 0 0 0 0 31.7l-13.8 8 10 17.3 13.8-8a50 50 0 0 0 27.5 15.9v16h20v-16a50 50 0 0 0 27.4-15.9l13.8 8 10-17.3-13.8-8a50 50 0 0 0 0-31.7Zm-47.5 50.8a35 35 0 1 1 0-70 35 35 0 0 1 0 70Z"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="1" values="0;120" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></path></svg>'
        };
    }

    async connectedCallback() {
        const apiKey = this.getAttribute('apikey');
        const LICENCE_KEY = this.getAttribute('apikey');
        const CLOUD_PATH   = '/v1/detect/properties';

        this.render();

        const SERVERS = [
            {'host': 'region0.deviceatlascloud.com', 'port': 443},
            {'host': 'region1.deviceatlascloud.com', 'port': 443},
            {'host': 'region2.deviceatlascloud.com', 'port': 443},
            {'host': 'region3.deviceatlascloud.com', 'port': 443}
        ];

        const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

        // List of high entropy hints to get
        const hints = [
            'architecture',
            'model',
            'platformVersion',
            'uaFullVersion',
            'fullVersionList',
            'wow64'
        ];

        if (!apiKey) {
            this.shadowRoot.innerHTML = '<p>Error: API key is missing. Please set the "apikey" attribute.</p>';
            return;
        }

        try {
            const hintHeaders = new Headers();
            if (navigator.userAgentData) {
                try {
                    // Request the high entropy values
                    const hintData = await navigator.userAgentData.getHighEntropyValues(hints);

                    // Construct headers with hints & serialize complex objects like fullVersionList
                    for (const [key, value] of Object.entries(hintData)) {
                        hintHeaders.append(`CH-${key}`, typeof value === 'object' ? JSON.stringify(value) : value);
                    }
                } catch (err) {
                    console.error("Failed to get client hints:", err);
                }
            } else {
                console.warn("User Agent Client Hints not supported in this browser.");
            }

            const i = getRandomInt(0, SERVERS.length-1);

            const url = 'https://' +
                SERVERS[i].host + ':' +
                SERVERS[i].port +
                CLOUD_PATH +
                '?licencekey=' + encodeURIComponent(apiKey) + 
                '&useragent=' + encodeURIComponent(navigator.userAgent);

            const data = await (await fetch(url, {
                method: "GET",
                //headers: hintHeaders
            })).json();


            this._primarySoftwareType = data.properties.primarySoftwareType;
            this.render();
            this.dispatchEvent(new CustomEvent('deviceatlasready', { detail: { primarySoftwareType: this._primarySoftwareType } }));
        } catch (error) {
            console.error('Error communicating with DeviceAtlas Cloud API:', error);
            this.shadowRoot.innerHTML = '<p>Error communicating with DeviceAtlas Cloud API.</p>';
        }
    }

    get primarySoftwareType() {
        return this._primarySoftwareType;
    }

    get softwareIcon() {
        const type = this._primarySoftwareType ? this._primarySoftwareType.toLowerCase() : '';
        return this.softwareIcons[type] || this.softwareIcons['default'];
    }

    render() {
        this.shadowRoot.innerHTML = `
        <style>
            :host {
                display: block;
                padding: 10px;
                border: 1px solid #ccc;
                display: flex;
                align-items: center;
                gap: 10px;
                background-color: #1A3198;
                color: #01C2A9;
                font-family: Arial, sans-serif;
                width: fit-content;
                border-radius: 5px;
                min-height: 20px;
            }
            .icon {
                display: inline-flex;
            }
            .info {
                font-weight: 300;
            }
        </style>
        <span class="icon">${this.softwareIcon }</span>
        <div >
            <span class="info">${this._primarySoftwareType || 'Detecting...'}</span>
        </div>
    `;
    }
}

customElements.define('primary-software-type', DeviceAtlasInfoPst);