const RadiusRouterManager = {
    name: 'RadiusRouterManager',
    props: {
        show: Boolean,
        userItem: Object
    },
    template: `
      <div>
        <!-- Main Router Management Modal -->
        <tt-dialog
          :show="show"
          :title="'Router Management - ' + (userItem.username || '')"
          @close="$emit('close')"
          size="wide"
        >
          <div class="modal-body-scrollable">
            <div v-if="!routerDevice && !routerLoading" class="table-placeholder" style="min-height: 300px;">
              <i class="fa-duotone fa-router-slash" style="font-size: 48px; opacity: 0.3;"></i>
              <div style="margin-top: 16px;">Kein Router mit dieser IP gefunden</div>
            </div>
            <div v-else>
              <!-- Router Info Header -->
              <div class="router-info-header">
                <i class="fa-duotone fa-router"></i>
                <div class="router-header-text">
                  <div class="router-title">
                    <tt-skeleton v-if="routerLoading" width="200px" height="22px" />
                    <span v-else>{{ routerDevice.deviceInfo.hardwareVersion || 'Router' }}</span>
                  </div>
                  <div class="router-subtitle" :style="routerLoading ? 'margin-top: 2px' : ''">
                    <tt-skeleton v-if="routerLoading" width="140px" height="15px" />
                    <span v-else>{{ routerDevice.username || userItem.username }}</span>
                  </div>
                </div>
              </div>

              <!-- Router Information Grid -->
              <div class="router-info-grid">
                <tt-info-card icon="fa-microchip" label="Hardware Modell" :value="routerDevice?.deviceInfo?.hardwareVersion" :loading="routerLoading" />
                <tt-info-card icon="fa-code-branch" label="Software Version" :value="routerDevice?.deviceInfo?.softwareVersion" :loading="routerLoading" />
                <tt-info-card icon="fa-barcode" label="CWMP Account" :value="routerDevice?.deviceInfo?.serialNumber" :loading="routerLoading" />
                <tt-info-card icon="fa-fingerprint" label="ACS ID" :value="routerDevice?.deviceId" :loading="routerLoading" />
                <tt-info-card icon="fa-globe" label="Externe IP" :value="routerDevice?.ip" :loading="routerLoading" />
                <tt-info-card icon="fa-network-wired" label="Management IP" :value="routerDevice?.managementIp" :loading="routerLoading" />
              </div>

              <!-- Router Actions Section -->
              <div class="router-actions-section">
                <h4 class="router-actions-header">
                  <i class="fa-duotone fa-bolt"></i>
                  Router Aktionen
                </h4>
                <div class="router-actions-grid">
                  <button class="ghost-btn action-btn" @click="runRemoteAccess" :disabled="routerLoading || routerActionLoading || speedtestLoading">
                    <i class="fa-duotone fa-key"></i>
                    <span>Remote-Zugriff</span>
                  </button>
                  <button class="ghost-btn action-btn" @click="rebootRouter" :disabled="routerLoading || routerActionLoading || speedtestLoading">
                    <i class="fa-duotone fa-power-off"></i>
                    <span>Neustart</span>
                  </button>
                  <button class="ghost-btn action-btn" @click="pingRouter" :disabled="routerLoading || routerActionLoading || speedtestLoading">
                    <i class="fa-duotone fa-signal-bars"></i>
                    <span>Ping</span>
                  </button>
                  <button class="ghost-btn action-btn" @click="runSpeedtest" :disabled="routerLoading || routerActionLoading || speedtestLoading">
                    <i class="fa-duotone fa-gauge-high"></i>
                    <span>Speedtest</span>
                  </button>
                  <button class="ghost-btn action-btn" @click="openNetworkStructure" :disabled="routerLoading || routerActionLoading || speedtestLoading">
                    <i class="fa-duotone fa-sitemap"></i>
                    <span>Netzwerkstruktur</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </tt-dialog>

        <!-- SUB MODALS (Managed by this component) -->

        <!-- Ping Modal -->
        <tt-dialog :show="showPingModal" title="Ping Ergebnis" @close="showPingModal = false">
          <tt-loading-indicator v-if="routerActionLoading && !pingResult" text="Ping läuft..." style="height: 150px;" />
          <div v-else-if="pingResult">
            <div class="kv-redesign">
              <div class="kv-row"><span class="kv-label">Gesendet</span><code class="kv-value">{{ pingResult.packetsTransmitted }}</code></div>
              <div class="kv-row"><span class="kv-label">Empfangen</span><code class="kv-value">{{ pingResult.packetsReceived }}</code></div>
              <div class="kv-row"><span class="kv-label">Verlust</span><code class="kv-value">{{ pingResult.packetLoss }}%</code></div>
              <div class="kv-row"><span class="kv-label">Min / Avg / Max</span><code class="kv-value">{{ pingResult.min }} / {{ pingResult.avg }} / {{ pingResult.max }} ms</code></div>
            </div>
          </div>
          <div v-else class="table-placeholder" style="height: 150px;">Kein Ergebnis.</div>
        </tt-dialog>

        <!-- Speedtest Modal -->
        <tt-dialog :show="showSpeedtestModal" title="Speedtest Ergebnis" @close="showSpeedtestModal = false" size="wide">
          <tt-loading-indicator v-if="speedtestLoading && speedtestHistory.length === 0" text="Speedtest wird initialisiert..." style="height: 200px;" />
          <div v-else>
            <div class="table-wrap" style="max-height: 500px; overflow-y: auto;">
              <table class="tt-table compact">
                <thead>
                  <tr>
                    <th style="width: 60px;">#</th>
                    <th style="text-align: right">Bandbreite</th>
                    <th style="text-align: right">Übertragen</th>
                    <th style="text-align: right">Pakete</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(row, idx) in speedtestHistory" :key="idx">
                    <td class="mono small">{{ idx + 1 }}</td>
                    <td class="mono small" style="text-align: right">{{ row.bpsFormatted }}</td>
                    <td class="mono small" style="text-align: right">{{ row.bytesFormatted }}</td>
                    <td class="mono small" style="text-align: right">{{ row.packets }}</td>
                  </tr>
                </tbody>
              </table>
              <div ref="speedtestBottom"></div>
            </div>
            <div v-if="speedtestLoading" class="center mt-3 muted small">
              <i class="fa-duotone fa-spinner fa-spin"></i> Aktualisiere...
            </div>
            <div v-else class="center mt-3" style="color: var(--ok);">
              <i class="fa-duotone fa-check-circle"></i> Abgeschlossen
            </div>
          </div>
        </tt-dialog>

        <!-- Remote Access Modal -->
        <tt-dialog :show="showRemoteAccessModal" title="Remote Zugriff Konfiguration" @close="showRemoteAccessModal = false">
          <tt-loading-indicator v-if="remoteAccessLoading" :text="remoteAccessStep" style="height: 200px;" />
          <div v-else-if="remoteAccessResult">
            <div class="alert ok mb-4" style="background-color: #eaf7ef; border: 1px solid #c9e6d8; color: #206a42; padding: 12px; border-radius: 8px;">
              <i class="fa-duotone fa-check-circle"></i> Konfiguration erfolgreich abgeschlossen.
            </div>
            <div class="kv-redesign">
              <div class="kv-row">
                <span class="kv-label">Remote Link</span>
                <div class="kv-value inline-copy">
                  <a :href="remoteAccessResult.link" target="_blank" class="link">{{ remoteAccessResult.link }}</a>
                  <tt-copy-button :text="remoteAccessResult.link" />
                </div>
              </div>
              <div class="kv-row">
                <span class="kv-label">Username</span>
                <div class="kv-value inline-copy">
                  <code class="mono">{{ remoteAccessResult.username }}</code>
                  <tt-copy-button :text="remoteAccessResult.username" />
                </div>
              </div>
              <div class="kv-row">
                <span class="kv-label">Password</span>
                <div class="kv-value inline-copy">
                  <code class="mono">{{ remoteAccessResult.password }}</code>
                  <tt-copy-button :text="remoteAccessResult.password" />
                </div>
              </div>
            </div>
          </div>
          <div v-else class="table-placeholder" style="height: 200px;">Ein Fehler ist aufgetreten.</div>
        </tt-dialog>

        <!-- Network Structure Modal -->
        <tt-dialog :show="showNetworkStructureModal" title="Netzwerkstruktur" @close="showNetworkStructureModal = false" size="wide">
          <tt-loading-indicator v-if="networkStructureLoading" text="Lade Struktur..." style="min-height: 300px;" />
          <div v-else-if="rootDevice">
            <div class="network-tree-container">
              <!-- Uses the recursive component -->
              <radius-network-node :device="rootDevice" />
            </div>
          </div>
          <div v-else class="table-placeholder" style="min-height: 300px;">Keine Daten verfügbar.</div>
        </tt-dialog>

      </div>
    `,
    data: () => ({
        routerLoading: false,
        routerActionLoading: false,
        routerDevice: null,

        // Sub-Modal States
        showPingModal: false,
        pingResult: null,

        showSpeedtestModal: false,
        speedtestLoading: false,
        speedtestResult: null,
        speedtestHistory: [],
        speedtestHasStarted: false,

        showRemoteAccessModal: false,
        remoteAccessLoading: false,
        remoteAccessResult: null,
        remoteAccessStep: '',

        showNetworkStructureModal: false,
        networkStructureLoading: false,
        rootDevice: null
    }),
    watch: {
        show: {
            handler(val) {
                if (val && this.userItem) {
                    this.loadRouterData();
                }
            },
            immediate: true
        },
        userItem(val) {
            if (val && this.show) {
                this.loadRouterData();
            }
        }
    },
    methods: {
        async loadRouterData() {
            this.routerLoading = true;
            this.routerDevice = null;
            this.pingResult = null;
            this.speedtestResult = null;
            this.speedtestLoading = false;

            try {
                const { data: radacct } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius`, {
                    params: { action2: 'fetchRadacct', username: this.userItem.username }
                });

                if (radacct?.ip) {
                    const { data: deviceData } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetDeviceByIp`, {
                        params: { ip: radacct.ip }
                    });

                    if (deviceData?.success) {
                        this.routerDevice = deviceData;
                    }
                }
            } catch (error) {
                console.error('Error fetching router:', error);
                window.notify('error', 'Fehler beim Laden des Routers');
            }
            this.routerLoading = false;
        },
        async rebootRouter() {
            if (!this.routerDevice || !this.routerDevice.deviceId) return;
            if (!confirm('Möchten Sie den Router wirklich neu starten?')) return;

            this.routerActionLoading = true;
            try {
                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsRebootDevice`, {
                    deviceId: this.routerDevice.deviceId
                });

                if (data.success) {
                    window.notify('success', 'Router-Neustart gestartet');
                } else {
                    window.notify('error', data.message || 'Fehler beim Neustart');
                }
            } catch (error) {
                console.error('Error rebooting router:', error);
                window.notify('error', 'Fehler beim Neustarten des Routers');
            }
            this.routerActionLoading = false;
        },
        async pingRouter() {
            if (!this.routerDevice) return;
            const pingIp = this.routerDevice.managementIp || this.routerDevice.ip;
            if (!pingIp) return;

            this.showPingModal = true;
            this.routerActionLoading = true;
            this.pingResult = null;
            try {
                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsPing`, {
                    params: { ip: pingIp }
                });

                if (data.success && data.result) {
                    this.pingResult = data.result;
                    window.notify('success', 'Ping erfolgreich');
                } else {
                    window.notify('error', 'Ping fehlgeschlagen');
                }
            } catch (error) {
                console.error('Error pinging router:', error);
                window.notify('error', 'Fehler beim Pingen des Routers');
            }
            this.routerActionLoading = false;
        },
        async runSpeedtest() {
            if (!this.routerDevice || !this.routerDevice.deviceId) return;
            this.showSpeedtestModal = true;
            this.speedtestLoading = true;
            this.speedtestResult = null;
            this.speedtestHistory = [];
            this.speedtestHasStarted = false;

            try {
                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsRunSpeedtest`, {
                    deviceId: this.routerDevice.deviceId
                });

                if (data.success) {
                    this.pollSpeedtestResult();
                } else {
                    throw new Error(data.message || "Speedtest konnte nicht gestartet werden");
                }
            } catch (e) {
                window.notify('error', e.response?.data?.message || e.message || 'Fehler beim Starten des Speedtests');
                this.speedtestLoading = false;
            }
        },
        async pollSpeedtestResult() {
            let attempts = 0;
            const maxAttempts = 240;

            const poll = async () => {
                if (!this.showSpeedtestModal) return;
                if (attempts >= maxAttempts) {
                    this.speedtestLoading = false;
                    window.notify('error', 'Speedtest Zeitüberschreitung');
                    return;
                }
                attempts++;

                try {
                    const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetSpeedtestResult`, {
                        deviceId: this.routerDevice.deviceId
                    });

                    if (data.success && data.result) {
                        this.speedtestHistory.push(data.result);
                        this.$nextTick(() => {
                            if (this.$refs.speedtestBottom) {
                                this.$refs.speedtestBottom.scrollIntoView({ behavior: 'smooth' });
                            }
                        });

                        if (data.result.bps > 0) this.speedtestHasStarted = true;

                        if (this.speedtestHasStarted && data.result.bps === 0) {
                            this.speedtestLoading = false;
                            window.notify('success', 'Speedtest abgeschlossen');
                            return;
                        }
                    }
                } catch (e) {
                    console.error(e);
                }

                if (this.speedtestLoading) setTimeout(poll, 1000);
            };
            poll();
        },
        async runRemoteAccess() {
            if (!this.routerDevice || !this.routerDevice.deviceId) return;
            this.showRemoteAccessModal = true;
            this.remoteAccessLoading = true;
            this.remoteAccessStep = 'Konfiguriere Zugriff...';
            this.remoteAccessResult = null;

            try {
                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsRemoteAccess`, {
                    deviceId: this.routerDevice.deviceId
                });

                if (data.success) {
                    this.remoteAccessResult = data;
                } else {
                    throw new Error(data.message || "Unbekannter Fehler");
                }
            } catch (error) {
                window.notify('error', error.response?.data?.message || error.message || 'Fehler bei Remote Access');
            } finally {
                this.remoteAccessLoading = false;
            }
        },
        async openNetworkStructure() {
            if (!this.routerDevice || !this.routerDevice.deviceId) return;
            this.showNetworkStructureModal = true;
            this.networkStructureLoading = true;
            this.rootDevice = null;

            try {
                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsNetworkStructure`, {
                    deviceId: this.routerDevice.deviceId
                });

                if (data.root) {
                    this.rootDevice = data.root;
                }
            } catch (error) {
                console.error(error);
                window.notify('error', 'Fehler beim Laden der Netzwerkstruktur');
            } finally {
                this.networkStructureLoading = false;
            }
        }
    }
};

if (window.VueApp) {
    window.VueApp.component('radius-router-manager', RadiusRouterManager);
}