const RadiusNetworkNode = {
    name: 'RadiusNetworkNode',
    props: {
        device: Object
    },
    template: `
        <div class="mesh-node">
            <div class="mesh-content" :class="nodeClass">
                <div class="mesh-icon">
                    <i :class="iconClass"></i>
                    <div v-if="connectionType === 'wlan'" class="conn-badge wlan"><i class="fa-duotone fa-wifi"></i></div>
                    <div v-if="connectionType === 'ethernet'" class="conn-badge eth"><i class="fa-duotone fa-ethernet"></i></div>
                </div>
                <div class="mesh-info">
                    <div class="mesh-name" :title="device.name">{{ device.name }}</div>
                    <div class="mesh-meta">
                        <span class="mesh-ip" v-if="device.ipv4 && device.ipv4.ip">{{ device.ipv4.ip }}</span>
                    </div>
                    <div class="mesh-meta" v-if="device.mac">
                        <span class="mesh-mac">{{ device.mac }}</span>
                    </div>
                    <div class="mesh-vendor" v-if="device.vendor">{{ device.vendor }}</div>
                    <div class="mesh-details" v-if="details">
                        <span class="mesh-speed">{{ details }}</span>
                    </div>
                </div>
            </div>
            <div class="mesh-children" v-if="device.children && device.children.length">
                 <div v-for="child in device.children" :key="child.UID" class="mesh-branch">
                     <radius-network-node :device="child" />
                 </div>
            </div>
        </div>
    `,
    computed: {
        iconClass() {
            if (this.device.model === 'fbox') return 'fa-duotone fa-router';
            if ((this.device.name || '').toLowerCase().includes('repeater')) return 'fa-duotone fa-wifi-exclamation';
            if (this.device.type === 'wlan') return 'fa-duotone fa-mobile-screen';
            return 'fa-duotone fa-desktop';
        },
        connectionType() {
            if (this.device.type === 'wlan') return 'wlan';
            if (this.device.type === 'ethernet') return 'ethernet';
            return null;
        },
        nodeClass() {
            return {
                'is-router': this.device.model === 'fbox',
                'is-repeater': (this.device.name || '').toLowerCase().includes('repeater'),
                'is-offline': this.device.state && this.device.state.class !== 'globe_online' && this.device.state.class !== 'led_green'
            }
        },
        details() {
            if (this.device.properties && this.device.properties.length > 0) {
                const props = this.device.properties.filter(p => p.txt && p.txt !== 'Mesh');
                if (props.length > 0) return props[0].txt;
            }
            if (this.device.port && this.device.port !== 'WLAN') return this.device.port;
            return null;
        }
    }
};

if (window.VueApp) {
    VueApp.component('radius-network-node', RadiusNetworkNode);
}