window.TT_CONFIG["CRUD_CONFIG"]["additionalActions"] = [
    {
        "key": "status_to_progress",
        "title": "In Bearbeitung",
        "class": "fas fa-cog text-warning",
        "condition": (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && ['new', 'on_hold'].includes(row.status),
    },
    {
        "key": "status_to_accepted",
        "title": "Akzeptieren",
        "class": "fas fa-check text-success",
        "condition": (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && ['new', 'in_progress', 'on_hold'].includes(row.status),
    },
    {
        "key": "status_to_invoiced",
        "title": "Verrechnet",
        "class": "fas fa-file-invoice text-info",
        "condition": (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && ['in_progress', 'accepted', 'on_hold'].includes(row.status),
    },
    {
        "key": "status_to_on_hold",
        "title": "On Hold",
        "class": "fas fa-pause text-warning",
        "condition": (row) => window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && ['accepted', 'new', 'in_progress'].includes(row.status),
    },
    {
        "key": "status_to_cancelled",
        "title": "Storniert",
        "class": "fas fa-ban text-danger",
        "condition": (row) => (window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && ['new', 'in_progress', 'accepted'].includes(row.status)) || (row.status === 'new' && row.signature === null),
    },
    {
        "key": "status_to_new",
        "title": "Lieferschein wiedereröffnen",
        "class": "fas fa-redo-alt text-success",
        "condition": (row) => (window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1' && row.status === 'cancelled'),
    },
    {
        "key": "add_log",
        "title": "Log Eintrag hinzufügen",
        "class": "fas fa-plus text-primary",
    },
    {
        "key": "print",
        "title": "Drucken",
        "class": "fas fa-print text-primary",
    }
]

// normal regie 50% 100%

window.TT_CONFIG["CRUD_CONFIG"]["editCondition"] = (row) => row.status === 'new' && row.signature === null || window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1';

Vue.component('warehouse-shipping-note-positions', {
    //language=Vue
    props: {
        positions: Array,
        hoursEntries: Array
    }, data() {
        return {
            articleData: {}, loading: false, articlePacketData: {}, userData: {}
        }
    }, template: `
    <div>
      <div v-if="loading" class="text-center">
        <i class="fa fa-spinner fa-spin"></i>
      </div>


      <ul v-if="!loading">
        <li v-for="position in positions">
                         <span>{{ position.amount }}x
                           {{ position.article ? articleData[position.article]?.text : position.articlePacket ? articlePacketData[position.articlePacket]?.text : position.articleText ? position.articleText : position.article_text }}</span>
        </li>
        <template v-for="entry in hoursEntries">
          <li><span>{{ entry.hourCount }}h Arbeitszeit</span></li>
          <li v-if="entry.carId">{{ entry.kilometerCount }}km Anfahrt</li>
        </template>
      </ul>
    </div>
    `, async mounted() {
        this.loading = true;
        for (const position of this.positions) {
            if (position.article) {
                const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseArticle/autoComplete?searchedID=' + position.article);
                this.$set(this.articleData, position.article, response.data[0]);
            } else if (position.articlePacket) {
                const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseArticlePacket/autoComplete?searchedID=' + position.articlePacket);
                this.$set(this.articlePacketData, position.articlePacket, response.data[0]);
            }
        }
        for (const entry of this.hoursEntries) {
            if (entry.userId) {
                const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/userAutoComplete?searchedID=' + entry.userId);
                this.$set(this.userData, entry.userId, response.data[0]);
            }
        }
        this.loading = false;
    }
})

Vue.component('add-log-modal-sn', {
    props: {
        shippingNoteId: {type: Number, required: true},
    },
    data() {
        return {
            window: window,
            note: '',
            file: null,
            uploadedFiles: [],
            submitLoading: false
        };
    },
    methods: {
        async handleFileUpload(event) {
            const files = event.target.files;
            if (!files.length) return;

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const formData = new FormData();
                formData.append('file', file);

                try {
                    const response = await axios.post(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseShippingNote/uploadFile`, formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    });

                    if (response.data.success) {
                        this.uploadedFiles.push({
                            id: response.data.fileId,
                            name: file.name
                        });
                        window.notify('success', `File "${file.name}" uploaded successfully`);
                    } else {
                        window.notify('error', `File "${file.name}" upload failed: ${response.data.error || 'Unknown error'}`);
                    }
                } catch (error) {
                    window.notify('error', `Error uploading file "${file.name}"`);
                }
            }

            // Clear the file input
            event.target.value = '';
        },
        removeFile: index => this.uploadedFiles.splice(index, 1),
        async submit() {
            this.submitLoading = true;

            const fileIds = this.uploadedFiles.map(file => file.id);
            const response = await axios.post(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseShippingNote/createNewLogAction`, {
                shippingNoteId: this.shippingNoteId,
                note: this.note,
                fileIds: JSON.stringify(fileIds),
            });

            if (response.data.success) {
                this.$emit('close');
                window.notify('success', response.data.message ?? 'Log Eintrag erfolgreich erstellt');
            } else {
                window.notify('error',
                    response.data.errors ? Object.values(response.data.errors).join('<br>') : response.data.message || 'Ein Fehler ist aufgetreten');
            }
            this.submitLoading = false;
        },
    },
    template: `
      <tt-modal :show="true" @submit="submit" :delete="false" @update:show="$emit('close')"
                title="Logeintrag hinzufügen" :save-loading="submitLoading">
        <template>

          <div class="form-group" style="margin: 10px 0">
            <label>Dateiupload (Mehrere)</label>
            <input type="file" class="form-control" @change="handleFileUpload" multiple/>
          </div>

          <div v-if="uploadedFiles.length" class="upload-success-alert">
            <div class="alert-header">
              <i class="fa fa-check-circle" aria-hidden="true"></i>
              <span v-if="uploadedFiles.length === 1">Datei erfolgreich hochgeladen</span>
              <span v-else>Dateien erfolgreich hochgeladen</span>
            </div>
            <ul class="file-list">
              <li v-for="(file, index) in uploadedFiles" :key="file.id" class="file-item">
                <i class="fa fa-file" aria-hidden="true"></i>
                <span class="file-name">{{ file.name }}</span>
                <button type="button" class="remove-btn" @click="removeFile(index)">
                  <i class="fa fa-times" aria-hidden="true"></i>
                </button>
              </li>
            </ul>
          </div>


          <tt-textarea label="Bemerkung" v-model="note" sm/>
        </template>
      </tt-modal>
    `
})

Vue.component('tt-file', {
    props: ['id'],
    data: () => ({file: null}),
    async mounted() {
        const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/File/getById`, {params: {id: this.id}});
        this.file = response.data;
    },
    template: `
      <div>
        <a :href="'/File/download?id=' + id" target="_blank" v-if="file">{{ file.filename }}</a>
        <template v-else>
          <div class="spinner-border spinner-border-sm text-primary" role="status"><span
              class="sr-only">Loading...</span></div>
        </template>
      </div>
    `
})


Vue.component('warehouse-shipping-note-logs', {
    props: {
        shippingNoteId: {type: Number, required: true},
    },
    data() {
        return {
            logs: [], loading: false,
        };
    },
    //language=Vue
    template: `
      <div>
        <div v-if="loading" class="text-center">
          <i class="fa fa-spinner fa-spin"></i>
        </div>

        <div v-if="!loading">
          <div v-for="log in logs">
            {{ formatDate(log.create) }} ({{ getUserName(log.createBy) }}) | {{ log.message }}
            <template v-if="log.fileIds">
              <div v-for="file in JSON.parse(log.fileIds)">
                <tt-file :id="file"/>
              </div>
            </template>
          </div>
        </div>
      </div>
    `,
    async mounted() {
        this.loading = true;
        const response = await axios.get(window.TT_CONFIG.BASE_PATH + '/WarehouseShippingNote/getLog', {params: {shippingNoteId: this.shippingNoteId}});
        this.logs = response.data;
        this.loading = false;
    },
    methods: {
        formatDate: date => window.moment(date * 1000).format('DD.MM.YYYY HH:mm'),
        getUserName: id => window.TT_CONFIG.CRUD_CONFIG.columns.find(col => col.key === 'createBy')?.modal.items.find(u => u.value === id)?.text
    }
})

Vue.component('warehouse-shipping-note-see-through', {
    props: ['wantedState'],
    //language=Vue
    template: `
      <div class="modal"
           style="position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center;">
        <div class="modal-content"
             style="background-color: #fff; border-radius: 8px; width: 95%; height: 95%; max-width: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column;">
          <div class="modal-top-bar"
               style="background: linear-gradient(135deg, #f7c423, #005384); color: white; padding: 15px 20px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
            <h2 style="margin: 0; font-family: Arial, sans-serif; font-size: 20px; flex: 1;">Lieferschein Durchschau
              Modus</h2>

            <div style="display: flex; gap: 10px; align-items: center;">
              <button @click="previousNote"
                      style="background: none; border: none; color: white; font-family: Arial, sans-serif; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 5px;">
                <i class="fas fa-chevron-left" style="font-size: 12px;"></i> Vorheriger
              </button>
              <button @click="nextNote"
                      style="background: none; border: none; color: white; font-family: Arial, sans-serif; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 5px;">
                Nächster <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
              </button>
            </div>
            <i @click="$emit('close')" class="fas fa-times"
               style="font-size: 20px; cursor: pointer; margin-left: 15px;"></i>
          </div>
          <div class="modal-body" style="padding: 20px; display: flex; flex: 1; overflow: hidden;">
            <template>
              <div style="width: 50%; height: 100%; overflow: auto;">
                <iframe ref="iframe" v-if="currentRow" :src="'/WarehouseShippingNote/createPDF?id=' + currentRow.id"
                        style="width: 100%; height: 100%; border: none;"></iframe>
              </div>
              <div style="width: 50%; height: 100%; padding-left: 20px; display: flex; flex-direction: column;">
                <div style="margin-bottom: 20px;">
                  <button @click="activeTab = 'Editieren'" :style="tabStyle('Editieren')">Editieren</button>
                  <button @click="activeTab = 'Logs'" :style="tabStyle('Logs')">Logs</button>

                  <div style="margin-top: 20px;" v-if="currentRow">
                    <template v-for="action in window.TT_CONFIG.CRUD_CONFIG.additionalActions">
                      <template
                          v-if="typeof action.condition === 'function' ? action.condition(currentRow) : true && action.key !== 'add_log' && action.key !== 'print'">
                        <i @click="changeStatus(action.key, currentRow)" :class="action.class"
                           style="font-size: 20px; cursor: pointer; margin-right: 10px;"></i>
                      </template>
                    </template>
                  </div>

                </div>
                <div v-if="activeTab === 'Editieren'" style="flex: 1; overflow: auto;" class="see-through-test-modal">
                  <warehouse-shipping-note-modal v-if="currentRow" :id="currentRow.id" @close="fetchData" ref="modal">
                    <template v-slot:footer-prepend v-if="wantedState === 'new'">
                      <button class="btn btn-warning" @click="saveAndSetToProgress">Speichern und in Bearbeitung
                        setzen
                      </button>
                    </template>
                  </warehouse-shipping-note-modal>
                </div>
                <div v-if="activeTab === 'Logs'" style="flex: 1; overflow: auto;" class="see-through-test-modal">
                  <warehouse-shipping-note-logs :shipping-note-id="currentRow.id" :key="'logs' + logModalKey"/>
                  <add-log-modal-sn v-if="currentRow" :shipping-note-id="currentRow.id" @close="logModalKey++"
                                    :key="'modal'+logModalKey"/>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    `,
    data() {
        return {
            logModalKey: 0,
            currentPage: 1,
            perPage: 1,
            rows: [],
            activeTab: 'Editieren',
            window: window
        }
    },
    computed: {
        currentRow() {
            return this.rows[0];
        }
    },
    methods: {
        tabStyle(tab) {
            return {
                padding: '10px 20px',
                cursor: 'pointer',
                backgroundColor: this.activeTab === tab ? '#005384' : '#f7c423',
                color: 'white',
                border: 'none',
                borderRadius: '5px',
                marginRight: '10px'
            };
        },
        previousNote() {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.fetchData();
            }
        },
        nextNote() {
            if (this.currentPage) {
                this.currentPage++;
                this.fetchData();
            }
        },
        async changeStatus(action, row) {
            this.$emit(action, row);
            await new Promise(resolve => setTimeout(resolve, 50));
            await this.fetchData();
        },
        async fetchData() {
            this.loading = true;
            this.rows = [];
            const response = await axios.post(window.TT_CONFIG.BASE_PATH + '/WarehouseShippingNote/get', {
                pagination: {page: this.currentPage, per_page: this.perPage},
                filters: {status: this.wantedState},
            })

            this.rows = response.data.rows;
            if (this.rows.length === 0) {
                this.$emit('close');
                this.window.notify('info', 'Keine Lieferscheine mit diesem Status gefunden');
            }

            this.loading = false;
        },
        async saveAndSetToProgress() {
            await this.$refs.modal.submit('in_progress');
            await new Promise(resolve => setTimeout(resolve, 50));
            await this.fetchData();
        }
    },
    mounted() {
        this.fetchData();
    }
});



Vue.component('warehouse-shipping-note', {
    //language=Vue
    template: `
      <tt-card>
        <tt-fullscreen-viewer
            v-if="viewerItem"
            :item="viewerItem"
            :url="viewerUrl"
            @close="viewerItem = null; viewerUrl = null"
        />

        <warehouse-shipping-note-see-through
            @close="shippingNoteSeeThrough = false;$refs.table.$refs.table.refreshTable()"
            v-if="shippingNoteSeeThrough !== false"
            :wanted-state="shippingNoteSeeThrough"
            @status_to_progress="changeStatus($event.id, 'in_progress')"
            @status_to_new="changeStatus($event.id, 'new')"
            @status_to_on_hold="changeStatus($event.id, 'on_hold')"
            @status_to_cancelled="changeStatus($event.id, 'cancelled')"
            @status_to_invoiced="changeStatus($event.id, 'invoiced')"
            @status_to_accepted="changeStatus($event.id, 'accepted')"/>
        <warehouse-shipping-note-modal v-if="shippingNoteModalId" :id="shippingNoteModalId"
                                       ref="modal"
                                       @close="shippingNoteModalId = null;$refs.table.$refs.table.refreshTable()"
                                       @open-article-modal="articleModalId = true;window.console.log($event)"
                                       @open-signing-modal="signingShippingNoteId = $event"/>

        <warehouse-article-modal
            v-if="articleModalId"
            :id="articleModalId"
            @close="articleModalId = null"
            @article-selected="$refs.modal.$refs.positionsManager.updateField('article', $event.id);"/>

        <warehouse-history-modal :show.sync="historyModal" :id="historyModalId"/>
        <warehouse-shipping-note-signature-pad v-if="signingShippingNoteId" :shipping-note-id="signingShippingNoteId"
                                               @close="signingShippingNoteId = null;shippingNoteModalId = null;$refs.table.$refs.table.refreshTable()"/>
        <add-log-modal-sn v-if="addLogModalId" :shipping-note-id="addLogModalId" @close="addLogModalId = null"/>

        <div class="mb-3">
          <button @click="shippingNoteModalId = 'create'" class="btn btn-primary">Lieferschein erstellen</button>

          <div class="dropdown" style="display: inline-block; margin-left: 10px;">
            <button class="btn btn-info dropdown-toggle" type="button" @click.stop="showCalendarDropdown = !showCalendarDropdown">
              Aus Kalendereintrag erstellen
            </button>
            <div class="dropdown-menu" :class="{'show': showCalendarDropdown}" style="cursor: pointer; max-height: 500px; overflow-y: auto;">
              <a v-if="!calendarEvents.length" class="dropdown-item disabled">Lade Termine...</a>
              <a v-for="event in calendarEvents" class="dropdown-item" @click="createFromEvent(event)">
                <div style="white-space: normal;">
                  <strong>{{ event.category }}</strong><br>
                  <small>{{ event.location }}</small><br>
                  <small class="text-muted">{{ formatEventDate(event.date) }}</small>
                </div>
              </a>
            </div>
          </div>

          <div class="dropdown" style="display: inline-block; margin-left: 10px;"
               v-if="window.TT_CONFIG['WAREHOUSE_ADMIN'] === '1'">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
              Durchschau-Modus
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="cursor: pointer;">
              <a class="dropdown-item" @click="shippingNoteSeeThrough = 'new'">Neue</a>
              <a class="dropdown-item" @click="shippingNoteSeeThrough = 'in_progress'">In Bearbeitung</a>
              <a class="dropdown-item" @click="shippingNoteSeeThrough = 'accepted'">Akzeptierte</a>
              <a class="dropdown-item" @click="shippingNoteSeeThrough = 'on_hold'">On Hold</a>
            </div>
          </div>
        </div>


        <tt-table-crud emit-edit
                       @openHistory="historyModal = true; historyModalId = $event.id"
                       @print="showPrintPreview($event)"
                       @status_to_progress="changeStatus($event.id, 'in_progress')"
                       @status_to_accepted="changeStatus($event.id, 'accepted')"
                       @status_to_invoiced="changeStatus($event.id, 'invoiced')"
                       @status_to_on_hold="changeStatus($event.id, 'on_hold')"
                       @status_to_cancelled="changeStatus($event.id, 'cancelled')"
                       @status_to_new="changeStatus($event.id, 'new')"
                       @add_log="addLogModalId = $event.id"
                       @edit="shippingNoteModalId = $event.id"
                       ref="table">

          <template v-slot:expandedRow="{ row }">
            <warehouse-shipping-note-positions :positions="JSON.parse(row.positions)"
                                               :hours-entries="JSON.parse(row.hoursEntries)"/>
            <warehouse-shipping-note-logs :shipping-note-id="row.id"/>
          </template>

        </tt-table-crud>
      </tt-card>
    `,
    data() {
        return {
            window: window,
            historyModal: false,
            historyModalId: null,
            shippingNoteModalId: null,
            signingShippingNoteId: null,
            addLogModalId: null,
            viewerItem: null,
            viewerUrl: null,
            shippingNoteSeeThrough: false,
            articleModalId: null,
            calendarEvents: [],
            showCalendarDropdown: false,
        }
    },
    mounted() {
        if (window.location.search.includes('doAction=createNew')) {
            this.shippingNoteModalId = 'create';
        }
        this.fetchCalendarEvents();
        document.addEventListener('click', this.closeDropdown);
    },
    beforeDestroy() {
        document.removeEventListener('click', this.closeDropdown);
    },
    methods: {
        async fetchCalendarEvents() {
            try {
                const response = await axios.get(window.TT_CONFIG.BASE_PATH + '/WarehouseShippingNote/getRecentCalendarEvents');
                this.calendarEvents = response.data;
            } catch (error) {
                console.error("Could not fetch calendar events", error);
                window.notify('error', 'Kalendereinträge konnten nicht geladen werden.');
            }
        },
        showPrintPreview(row) {
            this.viewerUrl = `${window.TT_CONFIG['BASE_PATH']}/WarehouseShippingNote/createPDF?id=${row.id}`;
            this.viewerItem = { mimetype: 'application/pdf' };
        },
        formatEventDate(dateString) {
            return window.moment(dateString).format('DD.MM.YYYY HH:mm');
        },
        async createFromEvent(event) {
            this.showCalendarDropdown = false;
            this.shippingNoteModalId = 'create';

            await this.$nextTick(); // Wait for the modal component to be created

            if (this.$refs.modal) {
                // Parse address string
                const locationParts = event.location.split(',');
                const line = locationParts.slice(0, -1).join(',').trim();
                const plzCityRaw = locationParts.slice(-1)[0].trim();

                const plzMatch = plzCityRaw.match(/^(\d+)/);
                const plz = plzMatch ? plzMatch[1] : '';
                const city = plzCityRaw.replace(/^\d+\s*/, '').trim();

                // Directly set the data in the modal's `shippingNote` object
                const modalData = this.$refs.modal.shippingNote;
                this.$set(modalData, 'deliveryAddressName', event.category);
                this.$set(modalData, 'deliveryAddressLine', line);
                this.$set(modalData, 'deliveryAddressPLZ', plz);
                this.$set(modalData, 'deliveryAddressCity', city);
            }
        },
        closeDropdown(event) {
            if (!event.target.closest('.dropdown')) {
                this.showCalendarDropdown = false;
            }
        },
        async changeStatus(id, status) {
            const response = await axios.post(window.TT_CONFIG.BASE_PATH + '/WarehouseShippingNote/changeStatus', {
                id,
                status
            });
            if (response.data.success) {
                this.window.notify('success', response.data.message || 'Erfolgreich aktualisiert');
                this.$refs.table.$refs.table.refreshTable();
            } else {
                this.window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten');
            }
        },
    }
})

let hiddenTime = null;
const RELOAD_AFTER_SECONDS = 300;
document.addEventListener('visibilitychange', () => {
    if (!window.matchMedia('(display-mode: standalone)').matches) return;
    if (document.visibilityState === 'hidden') {
        hiddenTime = new Date();
    } else if (document.visibilityState === 'visible' && hiddenTime) {
        const secondsElapsed = (new Date() - hiddenTime) / 1000;
        if (secondsElapsed > RELOAD_AFTER_SECONDS) {
            window.location.reload();
        }
    }
});


document.addEventListener('DOMContentLoaded', () => {
    if (!window.matchMedia('(display-mode: standalone)').matches) return;

    const logoutButton = document.createElement('button');
    logoutButton.innerHTML = '<i class="fas fa-sign-out-alt"></i> Logout';

    Object.assign(logoutButton.style, {
        position: 'fixed',
        top: '10px',
        left: '50%',
        transform: 'translateX(-50%)',
        zIndex: '98',
        padding: '8px 16px',
        backgroundColor: '#f44336',
        color: 'white',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer',
        fontSize: '14px',
        boxShadow: '0 2px 5px rgba(0,0,0,0.2)'
    });

    const handleLogout = async () => {
        logoutButton.disabled = true;
        try {
            const { data } = await axios.get('/WarehouseShippingNote/warehouseLogoutAction');
            const type = data.success ? 'success' : 'error';
            const message = data.message || (data.success ? 'Erfolgreich ausgeloggt' : 'Logout fehlgeschlagen');
            window.notify(type, message);
        } catch (error) {
            console.error('Logout request failed:', error);
            window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
        } finally {
            setTimeout(() => window.location.reload(), 400);
        }
    };

    logoutButton.addEventListener('click', handleLogout);
    document.body.appendChild(logoutButton);
});