// Function to calculate similarity percentage between two strings
function calculateSimilarity(str1, str2) {
    // Normalize strings by converting them to lowercase
    str1 = str1.toLowerCase();
    str2 = str2.toLowerCase();

    let matchCount = 0;

    // Check how many characters in str1 exist in str2
    for (let char of str1) {
        if (str2.includes(char)) {
            matchCount++;
        }
    }

    // Calculate similarity percentage
    return (matchCount / str1.length) * 100;
}

function validateData(strasse, plz, stadt, info) {
    const thresholds = 90; // Similarity threshold in percentage

    // Validate each field against the info string
    return !(calculateSimilarity(strasse, info) < thresholds ||
        calculateSimilarity(plz, info) < thresholds ||
        calculateSimilarity(stadt, info) < thresholds);
}


Vue.component('radius-ont-parser', {
    template: `
        <div class="container mt-4">
            <!-- Step 1: File Upload -->
            <div v-if="step === 1" class="card">
                <div class="card-body">
                    <h4 class="card-title">Schritt 1: Excel (XLSX) Upload</h4>
                    <input type="file" class="form-control" @change="handleFileUpload" accept=".xlsx">
                </div>
            </div>

            <!-- Step 2: Column Mapping -->
            <div v-if="step === 2" class="card mt-4">
                <div class="card-body">
                    <h4 class="card-title">Schritt 2: Spaltenzuordnung</h4>
                    <div class="row">
                        <div class="col-md-6" v-for="(field, index) in requiredFields" :key="index">
                            <div class="form-group">
                                <label>{{ field.label }}</label>
                                <select class="form-control" v-model="selectedColumns[field.key]">
                                    <option v-for="header in headers" :value="header">{{ header }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary mt-3" @click="startProcessing">Start Processing</button>
                </div>
            </div>
          
          
          <!-- Step 3: Result Download -->
            <div v-if="step === 3" class="card mt-4">
                <div class="card-body">
                    <h4 class="card-title">Schritt 3: Ergebnisse</h4>
                    <tt-button icon="fas fa-download" text="Neue Excel herunterladen" additional-class="btn-primary" @click="downloadResults"/>
                  
                    <table class="table mt-4">
                        <thead>
                            <tr>
                              <template v-for="header in requiredFields">
                                <th>{{ header.label }}</th>
                              </template>
                                <th>ONT SN</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(row, index) in processedData" :key="index">
                                <td>{{ row[selectedColumns.kundennummer] }}</td>
                                <td>{{ row[selectedColumns.anschlussstrasse] }}</td>
                                <td>{{ row[selectedColumns.anschlussplz] }}</td>
                                <td>{{ row[selectedColumns.anschlusscity] }}</td>
                                <td>{{ row.ont_sn }}</td>
                            </tr>
                        </tbody>
                    </table>
                  
                  
                </div>
            </div>

            <!-- Loading Screen -->
            <div v-if="loading" class="loading-overlay mt-4">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" 
                         :style="{ width: progress + '%' }">
                        {{ Math.round(progress) }}%
                    </div>
                </div>
                <div class="text-center mt-2">Processing {{ currentRow + 1 }} of {{ totalRows }}</div>
            </div>
        </div>
    `,

    data() {
        return {
            step: 1,
            headers: [],
            parsedData: [],
            processedData: [],
            selectedColumns: {
                kundennummer: 'crmPartner',
                anschlussstrasse: 'AnlStrasse',
                anschlussplz: 'AnlPlz',
                anschlusscity: 'AnlOrt'
            },
            requiredFields: [
                { key: 'kundennummer', label: 'Kundennummer' },
                { key: 'anschlussstrasse', label: 'Anschlussstraße' },
                { key: 'anschlussplz', label: 'Anschluss PLZ' },
                { key: 'anschlusscity', label: 'Anschluss City' }
            ],
            loading: false,
            progress: 0,
            currentRow: 0,
            totalRows: 0
        };
    },

    methods: {
        async handleFileUpload(event) {
            const file = event.target.files[0];
            if (!file) return;

            // Load XLSX library dynamically
            await this.loadXLSX();

            const reader = new FileReader();
            reader.onload = (e) => {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, { type: "array" });
                const worksheet = workbook.Sheets[workbook.SheetNames[0]];

                // Read entire sheet as rows of arrays (no header detection yet)
                const allRows = XLSX.utils.sheet_to_json(worksheet, {
                    header: 1, // Return rows as arrays
                    blankrows: false // Skip blank rows
                });

                // If there's only one row or something unexpected, do a basic parse
                if (allRows.length < 2) {
                    const fallbackData = XLSX.utils.sheet_to_json(worksheet);
                    this.parsedData = fallbackData;
                    this.headers = Object.keys(fallbackData[0] || {});
                    this.step = 2;
                    return;
                }

                const firstRow = allRows[0] || [];
                const secondRow = allRows[1] || [];

                // Count how many cells in each row are empty
                const firstRowEmptyCount = firstRow.length - firstRow.filter(Boolean).length;
                const secondRowEmptyCount = secondRow.length - secondRow.filter(Boolean).length;

                // If the difference in empty cells is more than 25% of the number of columns in the second row,
                // assume the first row is mostly empty and use the second row as the header
                const useSecondRowAsHeader = (firstRowEmptyCount - secondRowEmptyCount) > 0.25 * secondRow.length;

                // Now parse again with the correct header row
                if (useSecondRowAsHeader) {
                    this.parsedData = XLSX.utils.sheet_to_json(worksheet, {
                        range: 1, // Start reading data after the first row
                        header: secondRow, // Use the second row as the header
                        defval: "" // Optional: fill empty cells with empty string
                    }).slice(1); // Skip the first row
                    this.headers = secondRow;
                } else {
                    this.parsedData = XLSX.utils.sheet_to_json(worksheet, {
                        range: 0, // Start at the first row
                        header: firstRow, // Use the first row as the header
                        defval: ""
                    });
                    this.headers = firstRow;
                }

                this.step = 2;
            };
            reader.readAsArrayBuffer(file);
        },



        async loadXLSX() {
            if (!window.XLSX) {
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }
        },

        async startProcessing() {
            this.loading = true;
            this.totalRows = this.parsedData.length;
            const processedRows = [];

            mainLoop:
            for (let i = 0; i < this.parsedData.length; i++) {
                this.currentRow = i;
                this.progress = ((i + 1) / this.parsedData.length) * 100;

                // Simulate processing
                await this.sleep(100);

                // Process row here
                const row = this.parsedData[i];

                const findUserResponse = await fetch(window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?custnume=' + row[this.selectedColumns.kundennummer]);
                const findUserData = await findUserResponse.json();

                if (findUserData.length === 0) {
                    row.ont_sn = 'N/A - Kein Benutzer mit dieser Kundennummer gefunden';
                    processedRows.push(row);
                } else if (findUserData.length === 1) {
                    const username = findUserData[0].username;
                    const radacctResponse = await fetch(window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?skipAdditional=true&action2=fetchRadacct&username=' + username);
                    const radacctData = await radacctResponse.json();

                    row.ont_sn = radacctData.ont_sn || 'N/A - Keine ONT SN gefunden';
                    processedRows.push(row);

                } else if (findUserData.length > 1) {
                    // check string simulairty of strasse, plz, stadt and atleast of 90% of each should be inside findUserData[].info
                    // if not, ont_sn = N/A - Anschluss konnte nicht zugeordnet werden

                    const strasse = row[this.selectedColumns.anschlussstrasse];
                    const plz = row[this.selectedColumns.anschlussplz];
                    const stadt = row[this.selectedColumns.anschlusscity];
                    const info = findUserData[0].info;

                    for (let user of findUserData) {
                        if (validateData(strasse, plz, stadt, info)) {
                            const username = user.username;
                            const radacctResponse = await fetch(window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?skipAdditional=true&action2=fetchRadacct&username=' + username);
                            const radacctData = await radacctResponse.json();

                            row.ont_sn = radacctData.ont_sn || 'N/A - Keine ONT SN gefunden';
                            processedRows.push(row);
                            continue mainLoop;
                        }
                    }

                    row.ont_sn = 'N/A - Anschluss konnte nicht zugeordnet werden';
                    processedRows.push(row);
                }
            }

            this.loading = false;
            this.processedData = processedRows;
            this.step = 3;
        },
        downloadResults() {
            const ws = XLSX.utils.json_to_sheet(this.processedData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Results");
            XLSX.writeFile(wb, "results.xlsx");
        },
        sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }
    }
});

Vue.component('radius-online-state', {
    props: ['username'],
    template: `
      <div ref="container">
        <template v-if="data === null && observed">
          <div class="d-flex justify-content-center align-items-center">
            <div class="spinner-border spinner-border-sm text-primary" role="status">
              <span class="sr-only">Loading...</span>
            </div>
          </div>
        </template>
        <template v-else-if="data !== null">
          <div :style="'border-radius: 10px;width: 110px;text-align: center;height:22px;background-color: ' + (data.online ? 'rgba(161,253,96,0.7)' : 'rgba(253,96,96,0.7)')">
            <span>{{ data.ip }}</span>
          </div>
        </template>
      </div>
    `,
    data: () => ({
        data: null,
        observer: null,
        observed: false
    }),
    mounted() {
        this.observer = new IntersectionObserver(entries => {
            if (entries[0].isIntersecting && !this.observed) {
                this.observed = true;
                this.fetchOnlineState();
            }
        }, { threshold: 0.1 });

        this.observer.observe(this.$refs.container);
    },
    beforeDestroy() {
        this.observer?.disconnect();
    },
    methods: {
        async fetchOnlineState() {
            const response = await fetch(`${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?action2=fetchRadacct&username=${this.username}`);
            if (response.ok) this.data = await response.json();
        }
    }
})



Vue.component('radius', {
    template: `
                <tt-card>
                  <template v-slot:header>
                    <h3>Radius</h3>
                  </template>

                  <div class="radius-view-selector">
                    <tt-button icon="fas fa-user" additional-class="btn-primary" text="Radius Benutzer" @click="view = 'radius'"/>
                    <tt-button icon="fas fa-user-plus" additional-class="btn-primary" text="Freie Radius Benutzer" @click="view = 'free'"/>
                    <tt-button text="Radius ONT Parser" icon="fas fa-cogs" additional-class="btn-primary" @click="view = 'ont'" v-show="window['TT_CONFIG']['CAN_BILLING'] === '1'"/>
                    <tt-button text="Radius ONT Reverse Parser" icon="fas fa-cogs" additional-class="btn-primary" @click="view = 'ontReverse'" v-show="window['TT_CONFIG']['CAN_BILLING'] === '1'"/>
                  </div>

                  <div v-if="view === 'radius'">
                    <div class="filters" @keyup.enter="loadRadiusUsers">
                      <tt-autocomplete sm :api-url="billAddrAutoCompleteUrl" label="Rechnungsadresse" v-model="custnum" ref="billAddr"/>
                      <tt-input sm label="Username" name="username" v-model="username"/>
                      <tt-input sm label="Info" name="info" v-model="info"/>
                      <tt-checkbox v-model="checkOnlineState" label="Online-Status abfragen" sm/>
                      <tt-button sm icon="fas fa-search" text="Suchen" additional-class="btn-primary" style="justify-self:center" @click="loadRadiusUsers"
                      :disabled="isLoading"/>
                    </div>

                    <table class="table">
                      <thead>
                      <tr>
                        <th>Kundennummer</th>
                        <th>Username</th>
                        <th>Info</th>
                        <th>Status</th>
                        <th>Aktionen</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="user in radiusUsers" :key="user.id">
                        <td>
                          <a target="_blank" :href="window['TT_CONFIG']['BASE_PATH'] + '/Address?filter%5Bcustomer_number%5D=' + user.customerNumber">
                            {{ user.customerNumber }}
                          </a>
                        </td>
                        <td>
                          <a target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + user.username">
                            {{ user.username }}
                          </a>
                        </td>
                        <td>{{ user.info }}</td>
                        <td>
                          <template v-if="checkOnlineState === 1">
                            <radius-online-state :username="user.username" :key="user.username + '_online_state_' + this.searchCount"/>
                          </template>
                        </td>
                        <td>
                          <tt-button sm icon="fas fa-sync" text="Details" @click="fetchRadacctData(user.username)" additional-class="btn-primary"/>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>

                  <div v-if="view === 'free'" class="free-users-container">
                    <div class="free-users-column">
                      <h4>Freie NAT Benutzer ({{ freeNatUsers.length }})</h4>
                      <table class="table">
                        <thead>
                        <tr>
                          <th>Username</th>
                          <th>Info</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="user in freeNatUsers" :key="user.id">
                          <td><a target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + user.username">{{ user.username }}</a></td>
                          <td>{{ user.info }}</td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="free-users-column">
                      <h4>Freie STF Benutzer ({{ freeStfUsers.length }})</h4>
                      <table class="table">
                        <thead>
                        <tr>
                          <th>Username</th>
                          <th>Info</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="user in freeStfUsers" :key="user.id">
                          <td><a target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + user.username">{{ user.username }}</a></td>
                          <td>{{ user.info }}</td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  
                  <div v-if="view === 'ont'">
                    <radius-ont-parser/>
                  </div>
                  
                    <div v-if="view === 'ontReverse'">
                    <radius-ont-finder/>
                    </div>


                  <tt-modal :show.sync="showRadacctModal" title="Radacct Data" :save="false" :delete="false">
                    <div v-if="radacctData">
                      <table class="table">
                        <tr>
                          <th>Status:</th>
                          <td><span :class="['status-dot', radacctData.online ? 'online' : 'offline']"></span> {{ radacctData.online ? 'Online' : 'Offline' }}</td>
                        </tr>
                        <tr>
                          <th>IP:</th>
                          <td>{{ radacctData.ip }}</td>
                        </tr>
                        <tr>
                          <th>Username:</th>
                          <td><a target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + radacctData.username">{{ radacctData.username }}</a></td>
                        </tr>
                        <tr>
                          <th>Customer Number:</th>
                          <td>{{ radacctData.customerNumber }}</td>
                        </tr>
                        <tr>
                          <th>Customer Name:</th>
                          <td>{{ radacctData.customerName }}</td>
                        </tr>
                        <tr>
                          <th>Info:</th>
                          <td>{{ radacctData.info }}</td>
                        </tr>
                        <tr>
                          <th>WLAN Password:</th>
                          <td>{{ radacctData.wlanPassword }}</td>
                        </tr>
                        <tr>
                          <th>Bandbreite:</th>
                          <td>{{ radacctData.actualBandwidth }}</td>
                        </tr>
                      </table>
                    </div>
                  </tt-modal>
                </tt-card>
              `,
    data() {
        return {
            view: 'radius',
            billAddrAutoCompleteUrl: window.TT_CONFIG['BASE_PATH'] + '/Address/Api?do=findAddress&fibu_primary_account=1',
            radiusUsers: [],
            freeNatUsers: [],
            freeStfUsers: [],
            username: '',
            info: '',
            custnum: '',
            window: window,
            showRadacctModal: false,
            checkOnlineState: 0,
            radacctData: null,
            isLoading: false,
            searchCount: 0,
        }
    },
    async mounted() {
        console.log("hallo");
        await this.loadFreeUsers();
    },
    methods: {
        hideRadacctModal() {
            this.showRadacctModal = false;
        },
        async loadRadiusUsers() {
            this.isLoading = true;
            this.radiusUsers = [];
            let custnum = '';
            if (this.$refs.billAddr.displayValue.length > 5) {
                custnum = this.$refs.billAddr.displayValue.match(/\[(\d+)]/)[1];
            }

            const params = new URLSearchParams({
                username: this.username,
                info: this.info,
                custnum: custnum,
            });
            const response = await fetch(`${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?${params.toString()}`);
            if (response.ok) {
                const users = await response.json()
                if (users.length < 6) {
                    this.checkOnlineState = 1;
                }
                this.radiusUsers = users;
            } else {
                console.error('Failed to load radius users');
            }
            this.isLoading = false;
            this.searchCount = this.searchCount + 1;
        },
        async fetchRadacctData(username) {
            const params = new URLSearchParams({
                action2: 'fetchRadacct',
                username: username,
            });
            const response = await fetch(`${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?${params.toString()}`);
            if (response.ok) {
                this.radacctData = await response.json();
                this.showRadacctModal = true;
            } else {
                console.error('Failed to fetch radacct data');
            }
        },
        async loadFreeUsers() {
            try {
                const natResponse = await fetch(window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?action2=free_user&filter=nat');
                const stfResponse = await fetch(window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?action2=free_user&filter=stf');

                if (natResponse.ok && stfResponse.ok) {
                    const natData = await natResponse.json();
                    const stfData = await stfResponse.json();

                    this.freeNatUsers = natData.users;
                    this.freeStfUsers = stfData.users;
                } else {
                    console.error('Failed to load free users');
                }
            } catch (error) {
                console.error('Error loading free users:', error);
            }

        },
    },
});

Vue.component('radius-ont-finder', {
    template: `
      <div class="container mt-4">
        <div v-if="step === 1" class="card">
          <div class="card-body">
            <h4 class="card-title">Schritt 1: Excel (XLSX) Upload</h4>
            <p>Bitte laden Sie eine XLSX-Datei hoch, die mindestens eine Spalte mit dem Header 'Serial' für die ONT-Seriennummern enthält. Optional kann eine 'MAC' Spalte für eine alternative Suche verwendet werden.</p>
            <input type="file" class="form-control" @change="handleFileUpload" accept=".xlsx">
            <div v-if="uploadError" class="alert alert-danger mt-3">{{ uploadError }}</div>
          </div>
        </div>

        <div v-if="step === 2" class="card mt-4">
          <div class="card-body">
            <h4 class="card-title">Schritt 2: Ergebnisse</h4>
            <button class="btn btn-primary mb-3" @click="downloadResults">
              <i class="fas fa-download mr-2"></i>Ergebnisse herunterladen
            </button>
            <button class="btn btn-secondary mb-3 ml-2" @click="resetComponent">
              <i class="fas fa-redo mr-2"></i>Neue Datei hochladen
            </button>
            <div class="table-responsive">
              <table class="table table-striped table-bordered table-sm">
                <thead class="thead-light">
                <tr>
                  <th v-for="header in originalHeaders" :key="'orig-' + header">{{ header }}</th>
                  <th>Username</th>
                  <th>Kundennummer</th>
                  <th>Kundenname</th>
                  <th>Info</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(row, index) in processedData" :key="index">
                  <td v-for="header in originalHeaders" :key="'data-' + header + '-' + index">{{ row[header] }}</td>
                  <td>{{ row.fetched_username }}</td>
                  <td>{{ row.fetched_customerNumber }}</td>
                  <td>{{ row.fetched_customerName }}</td>
                  <td>{{ row.fetched_info }}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div v-if="loading" class="loading-overlay mt-4">
          <div class="d-flex justify-content-center align-items-center flex-column">
            <div class="spinner-border text-primary mb-3" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="progress w-75">
              <div class="progress-bar progress-bar-striped progress-bar-animated"
                   role="progressbar" :style="{ width: progress + '%' }"
                   :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
                {{ Math.round(progress) }}%
              </div>
            </div>
            <div class="text-center mt-2">Verarbeite Zeile {{ currentRow + 1 }} von {{ totalRows }}</div>
            <div v-if="currentSerial" class="text-center text-muted small mt-1">Aktuelle Suche: {{ currentSerial }}</div>
          </div>
        </div>
      </div>
    `,

    data() {
        return {
            step: 1,
            parsedData: [],
            processedData: [],
            originalHeaders: [],
            loading: false,
            progress: 0,
            currentRow: 0,
            totalRows: 0,
            currentSerial: '',
            uploadError: null,
            serialColumnName: 'Serial',
            macColumnName: 'MAC',
            fetchedKeys: {
                username: 'fetched_username',
                customerNumber: 'fetched_customerNumber',
                customerName: 'fetched_customerName',
                info: 'fetched_info'
            },
            apiBasePath: window.TT_CONFIG?.BASE_PATH
        };
    },

    methods: {
        resetComponent() {
            Object.assign(this.$data, this.$options.data.call(this));
            const input = this.$el.querySelector('input[type="file"]');
            if (input) input.value = '';
        },

        async handleFileUpload(event) {
            const file = event.target.files[0];
            this.uploadError = null;
            if (!file) return;

            this.loading = true;

            try {
                await this.loadXLSX();
                const data = await new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = e => resolve(new Uint8Array(e.target.result));
                    reader.onerror = () => reject(new Error("Fehler beim Lesen der Datei."));
                    reader.readAsArrayBuffer(file);
                });

                const workbook = XLSX.read(data, { type: 'array' });
                const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                this.parsedData = XLSX.utils.sheet_to_json(worksheet, { defval: "" });

                if (!this.parsedData.length) {
                    throw new Error("Die hochgeladene Datei ist leer oder konnte nicht gelesen werden.");
                }

                this.originalHeaders = Object.keys(this.parsedData[0]);
                if (!this.originalHeaders.includes(this.serialColumnName)) {
                    throw new Error(`Erforderliche Spalte '${this.serialColumnName}' nicht gefunden.`);
                }
                this.startProcessing();
            } catch (error) {
                console.error("File processing error:", error);
                this.uploadError = error.message;
                this.loading = false;
                this.step = 1;
            }
        },

        async loadXLSX() {
            if (window.XLSX) return;
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js';
                script.async = true;
                script.onload = resolve;
                script.onerror = () => reject(new Error("Could not load XLSX library."));
                document.head.appendChild(script);
            });
        },

        async startProcessing() {
            this.loading = true;
            this.totalRows = this.parsedData.length;
            this.processedData = [];
            this.progress = 0;
            this.currentRow = 0;

            const snApiUrlBase = `${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?ont_sn=`;
            const macApiUrlBase = `${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?username=`;
            const sesApiUrlBase = `${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?action2=find_by_current_session&mac=`;

            const setRowStatus = (row, msg, data = {}) => {
                const defaultData = { username: `N/A - ${msg}`, customerNumber: 'N/A', customerName: 'N/A', info: 'N/A' };
                Object.keys(this.fetchedKeys).forEach(key => row[this.fetchedKeys[key]] = data[key] || defaultData[key]);
            };

            for (const [i, row] of this.parsedData.entries()) {
                this.currentRow = i;
                const newRow = { ...row };
                const serialNumber = row[this.serialColumnName]?.trim();
                this.currentSerial = `SN: ${serialNumber || 'Leer'}`;

                if (!serialNumber) {
                    setRowStatus(newRow, 'Leere Seriennummer');
                    this.processedData.push(newRow);
                    this.progress = ((i + 1) / this.totalRows) * 100;
                    continue;
                }

                let found = false;

                try {
                    const snResponse = await fetch(snApiUrlBase + encodeURIComponent(serialNumber));
                    if (snResponse.ok) {
                        const snData = await snResponse.json();
                        if (snData?.length > 0) {
                            setRowStatus(newRow, '', snData[0]);
                            found = true;
                        }
                    }
                } catch (error) {
                    console.error(`Fetch error for SN ${serialNumber}:`, error);
                }

                if (!found && this.originalHeaders.includes(this.macColumnName)) {
                    const macAddress = row[this.macColumnName]?.trim();
                    this.currentSerial = `MAC: ${macAddress || 'Leer'}`;
                    if (macAddress && macAddress.length === 12) {
                        const formattedMac = macAddress.toUpperCase().match(/.{1,2}/g).join(':');
                        try {
                            const sesResponse = await fetch(`${sesApiUrlBase}${encodeURIComponent(formattedMac)}`);
                            if (sesResponse.ok) {
                                const sesData = await sesResponse.json();
                                if (sesData?.length === 0) continue;

                                const username = sesData[0];

                                const macResponse = await fetch(`${macApiUrlBase}${encodeURIComponent(username)}&info=&custnum=`);
                                if (macResponse.ok) {
                                    const macData = await macResponse.json();
                                    if (macData?.length > 0) {
                                        setRowStatus(newRow, '', macData[0]);
                                        console.log("found via MAC:", formattedMac, macData[0]);
                                        found = true;
                                    }
                                }
                            }



                        } catch (error) {
                            console.error(`Fetch error for MAC ${formattedMac}:`, error);
                        }
                    }
                }

                if (!found) {
                    setRowStatus(newRow, 'Keinen Benutzer gefunden');
                }

                this.processedData.push(newRow);
                this.progress = ((i + 1) / this.totalRows) * 100;
                if ((i + 1) % 20 === 0) await this.sleep(20);
            }

            this.loading = false;
            this.step = 2;
            this.currentSerial = '';
        },

        downloadResults() {
            if (!this.processedData.length) return;
            try {
                const dataToExport = this.processedData.map(row => {
                    const exportRow = {};
                    this.originalHeaders.forEach(header => { exportRow[header] = row[header]; });
                    exportRow['Username'] = row[this.fetchedKeys.username];
                    exportRow['Kundennummer'] = row[this.fetchedKeys.customerNumber];
                    exportRow['Kundenname'] = row[this.fetchedKeys.customerName];
                    exportRow['Info'] = row[this.fetchedKeys.info];
                    return exportRow;
                });

                const ws = XLSX.utils.json_to_sheet(dataToExport);
                const wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, "ONT_Finder_Results");
                const timestamp = new Date().toISOString().replace(/[-:.]/g, "").slice(0, 14);
                XLSX.writeFile(wb, `ont_finder_results_${timestamp}.xlsx`);
            } catch (error) {
                console.error("Error generating results file:", error);
                alert("Fehler beim Erstellen der Excel-Datei für den Download.");
            }
        },

        sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        },
    },

    mounted() {
        if (!window.TT_CONFIG?.BASE_PATH) {
            console.warn(`Global TT_CONFIG.BASE_PATH not found. API calls will use fallback path: ${this.apiBasePath}`);
        }
    }
});