// IpNetwork.js
Vue.component('IpNetwork', {
    template: `
      <tt-card>
        <div class="d-flex align-items-center mb-3">
          <div>
            <tt-button
                v-if="currentNetworkData"
                @click="navigateBack"
                icon="fas fa-arrow-left"
                text="Zurück"
                additional-class="btn-secondary mr-2"
            />
            <tt-button
                @click="openModal(null)"
                icon="fas fa-plus"
                text="Netzwerk hinzufügen"
                additional-class="btn-primary"
            />
          </div>
          <div style="max-width: 400px;min-width:300px; margin-left: 1rem;">
            <tt-autocomplete
                v-model="globalSearchTerm"
                @input="handleGlobalSearchSelect"
                :api-url="apiUrl + '/globalSearch'"
                placeholder="Suche nach IP, Name, Beschreibung..."
                sm
                no-form-group
            />
          </div>
        </div>

        <tt-table
            :fetch-url="apiUrl + '/get'"
            :config="IpNetworkTableConfig"
            @row-click="row => row.cidr < 31 && switchCurrentNetwork(row.id)"
            @reset-table="resetFiltersAndSwitch"
            small
            ssr
            ref="table"
        >
          <template v-slot:expandedRow="{ row }">
            <div class="p-2 bg-light">
              <strong>Beschreibung:</strong>
              <span style="white-space: pre-wrap;" v-if="row.description" v-text="row.description"></span>
              <em v-else class="text-muted">Keine Beschreibung vorhanden.</em>
            </div>
          </template>

          <template v-slot:actions="{ row }">
            <div class="text-center">
              <tt-button
                  icon="far fa-edit"
                  title="Bearbeiten"
                  @click.stop="openModal(row)"
                  additional-class="btn-link text-primary p-0"
                  sm
              />
            </div>
          </template>
        </tt-table>

        <tt-modal
            v-if="modalData"
            :show="true"
            @update:show="closeModal"
            @submit="submitModal"
            @delete="deleteNetwork"
            :delete="!!modalData.id"
            :title="modalData.id ? 'Netzwerk bearbeiten' : 'Netzwerk hinzufügen'"
            save-text="Speichern"
            delete-text="Löschen"
        >
          <div class="form-row">
            <div class="form-group col-md-8">
              <label for="network_address">Netzwerkadresse / CIDR</label>
              <div class="input-group input-group-sm">
                <input type="text" class="form-control" id="network_address" v-model="modalData.network_address" :disabled="!!modalData.id" required placeholder="z.B. 192.168.1.0">
                <div class="input-group-append">
                  <span class="input-group-text">/</span>
                </div>
                <input type="number" class="form-control" style="max-width: 80px;" v-model="modalData.cidr" :disabled="!!modalData.id" required placeholder="24">
              </div>
            </div>
            <div class="form-group col-md-4">
              <label for="status">Status</label>
              <select id="status" class="form-control form-control-sm" v-model="modalData.status" required>
                <option v-for="option in statusOptions" :value="option.value">{{ option.text }}</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="name">Name</label>
              <input type="text" class="form-control form-control-sm" id="name" v-model="modalData.name" required>
            </div>
            <div class="form-group col-md-6">
              <label for="location">Standort</label>
              <input type="text" class="form-control form-control-sm" id="location" v-model="modalData.location">
            </div>
          </div>
          <div class="form-group">
            <label for="description">Beschreibung</label>
            <textarea class="form-control form-control-sm" id="description" v-model="modalData.description" rows="3"></textarea>
          </div>
        </tt-modal>
      </tt-card>
    `,
    data() {
        return {
            window: window,
            apiUrl: window.TT_CONFIG.API_BASE_URL,
            currentNetworkData: null,
            modalData: null,
            globalSearchTerm: '',
            isNavigating: false,
            searchDebounce: null,
            statusOptions: [
                {value: 'active', text: 'Aktiv'},
                {value: 'inactive', text: 'Inaktiv'},
                {value: 'reserved', text: 'Reserviert'}
            ],
            IpNetworkTableConfig: {
                defaultPageSize: 50,
                customRowClass: row => (row.cidr < 31 ? 'tt-pointer' : ''),
                expandCondition: row => !!row.description,
                headers: [
                    {text: 'Netzwerkadresse', key: 'network_address_str', sortable: true},
                    {text: 'Name', key: 'name', sortable: true},
                    {text: 'Status', key: 'status', filter: 'iconSelect', sortable: true,
                        filterOptions: [
                            {value: 'active', text: 'Aktiv', icon: 'fas fa-check text-success'},
                            {value: 'inactive', text: 'Inaktiv', icon: 'fas fa-times text-danger'},
                            {value: 'reserved', text: 'Reserviert', icon: 'fas fa-lock text-warning'}
                        ]
                    },
                    {text: 'Subnetze', key: 'children', filter: 'numberRange', sortable: true},
                    {text: 'Standort', key: 'location', sortable: true},
                    {text: 'Aktionen', key: 'actions', sortable: false, class: 'text-center'},
                ],
                tableHeader: 'IPAM - Stamm',
                key: 'IpNetwork'
            }
        }
    },
    watch: {
        globalSearchTerm(newValue) {
            if (this.isNavigating) {
                this.isNavigating = false;
                return;
            }
            clearTimeout(this.searchDebounce);
            this.searchDebounce = setTimeout(() => {
                this.$refs.table.filters.globalSearch = this.globalSearchTerm;
            }, 300);
        }
    },
    mounted() {
        window.addEventListener('popstate', this.handlePopState);
        this.handlePopState(); // Initial load based on URL
    },
    beforeDestroy() {
        window.removeEventListener('popstate', this.handlePopState);
    },
    methods: {
        async handleGlobalSearchSelect(selectedNetworkString) {
            if (!selectedNetworkString || typeof selectedNetworkString !== 'string') {
                this.globalSearchTerm = selectedNetworkString;
                return;
            }
            this.globalSearchTerm = selectedNetworkString;

            try {
                const response = await axios.get(`${this.apiUrl}/findNetworkByString`, { params: { network_string: selectedNetworkString } });
                if (response.data.success) {
                    this.switchCurrentNetwork(response.data.navigateToId);
                    this.isNavigating = true;
                    this.globalSearchTerm = '';
                } else {
                    window.notify('error', response.data.message || 'Netzwerk konnte nicht gefunden werden.');
                }
            } catch (e) {
                window.notify('error', e.response?.data?.message || 'Fehler bei der Netzwerksuche.');
            }
        },
        handlePopState() {
            const params = new URLSearchParams(window.location.search);
            const parentId = params.get('parent_network_id') || null;
            this.switchCurrentNetwork(parentId, false); // false to not push state
        },
        openModal(row = null) {
            if (row) {
                this.modalData = {
                    id: row.id,
                    network_address: row.network_address_str.split('/')[0],
                    cidr: row.cidr,
                    status: row.status,
                    name: row.name,
                    description: row.description,
                    location: row.location,
                };
            } else {
                this.modalData = {
                    network_address: '',
                    cidr: '',
                    status: 'active',
                    name: '',
                    description: '',
                    location: '',
                };
            }
        },
        closeModal() {
            this.modalData = null;
        },
        async switchCurrentNetwork(networkId = null, pushState = true) {
            this.$refs.table.filters = { ...this.$refs.table.filters, parent_network_id: networkId || undefined };

            if (pushState) {
                const url = new URL(window.location);
                if (networkId) {
                    url.searchParams.set('parent_network_id', networkId);
                } else {
                    url.searchParams.delete('parent_network_id');
                }
                window.history.pushState({path: url.href}, '', url.href);
            }

            if (networkId) {
                try {
                    const response = await axios.get(`${this.apiUrl}/getById?id=${networkId}`);
                    this.currentNetworkData = response.data.network;
                    this.IpNetworkTableConfig.tableHeader = `IPAM - ${this.currentNetworkData.network_address_str} ${this.currentNetworkData.name ? '- ' + this.currentNetworkData.name : ''}`;
                } catch (e) {
                    window.notify('error', 'Details des übergeordneten Netzwerks konnten nicht geladen werden.');
                    this.currentNetworkData = null;
                    this.IpNetworkTableConfig.tableHeader = 'IPAM - Stamm';
                }
            } else {
                this.currentNetworkData = null;
                this.IpNetworkTableConfig.tableHeader = 'IPAM - Stamm';
            }
        },
        resetFiltersAndSwitch() {
            this.globalSearchTerm = '';
            this.switchCurrentNetwork(null);
        },
        navigateBack() {
            window.history.back();
        },
        async submitModal() {
            const isUpdate = !!this.modalData.id;
            const url = isUpdate ? `${this.apiUrl}/update` : `${this.apiUrl}/create`;
            const payload = { ...this.modalData, parent_network_id: this.currentNetworkData?.id || null };

            try {
                const response = await axios.post(url, payload);
                if (response.data.success) {
                    window.notify('success', response.data.message);
                    this.closeModal();
                    this.$refs.table.refreshTable();
                } else {
                    window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
                }
            } catch (e) {
                window.notify('error', e.response?.data?.message || 'Ein Netzwerkfehler ist aufgetreten.');
            }
        },
        async deleteNetwork() {
            if (!confirm('Sind Sie sicher, dass Sie dieses Netzwerk und alle untergeordneten Netzwerke löschen möchten?')) return;
            try {
                const response = await axios.post(`${this.apiUrl}/delete`, { id: this.modalData.id });
                if (response.data.success) {
                    window.notify('success', response.data.message);
                    this.closeModal();
                    this.$refs.table.refreshTable();
                } else {
                    window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
                }
            } catch (e) {
                window.notify('error', e.response?.data?.message || 'Ein Netzwerkfehler ist aufgetreten.');
            }
        }
    }
})