// Stocktake Progress Modal Component - Fullscreen
Vue.component('stocktake-progress-modal', {
    props: {
        show: { type: Boolean, default: false },
        id: { type: Number, default: null }
    },
    //language=Vue
    template: `
        <div v-if="show" class="stocktake-progress-fullscreen">
            <div class="stocktake-progress-header">
                <div class="d-flex align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-clipboard-check me-2"></i>
                        Inventur Fortschritt
                        <span v-if="stocktake" class="badge bg-light text-dark">{{ stocktake.stocktakeNumber }}</span>
                    </h4>
                </div>
                <button class="btn btn-sm btn-outline-light" @click="close">
                    <i class="fas fa-times me-1"></i> Schließen
                </button>
            </div>

            <div class="stocktake-progress-body">
                <div v-if="loading" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status" style="width: 2.5rem; height: 2.5rem;">
                        <span class="visually-hidden">Laden...</span>
                    </div>
                    <p class="mt-2 text-muted mb-0">Lade Inventurdaten...</p>
                </div>

                <div v-else-if="stocktake" class="h-100 d-flex flex-column">
                    <!-- Stats Cards -->
                    <div class="row g-2 mb-3">
                        <div class="col-md-2">
                            <div class="card stat-card card-primary h-100">
                                <div class="card-body py-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-subtitle small">Inventur</h6>
                                            <h5 class="card-title mb-0">{{ stocktake.title }}</h5>
                                        </div>
                                        <i class="fas fa-clipboard-list fa-lg"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card stat-card card-success h-100">
                                <div class="card-body py-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-subtitle small">Gescannte Artikel</h6>
                                            <h5 class="card-title mb-0">{{ stocktake.totalScannedItems }}</h5>
                                        </div>
                                        <i class="fas fa-barcode fa-lg"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card stat-card card-info h-100">
                                <div class="card-body py-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-subtitle small">Lagerort</h6>
                                            <h5 class="card-title mb-0">{{ stocktake.locationName }}</h5>
                                        </div>
                                        <i class="fas fa-warehouse fa-lg"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card stat-card card-warning h-100">
                                <div class="card-body py-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-subtitle small">Gesamtwert (Einkauf)</h6>
                                            <h5 class="card-title mb-0">{{ formatCurrency(summary.totalValue) }}</h5>
                                        </div>
                                        <i class="fas fa-euro-sign fa-lg"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card stat-card h-100" :class="statusCardClass">
                                <div class="card-body py-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="card-subtitle small">Status</h6>
                                            <h5 class="card-title mb-0">{{ statusText }}</h5>
                                        </div>
                                        <i class="fas fa-info-circle fa-lg"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Started At Info Bar -->
                    <div v-if="stocktake.startedAt" class="info-bar d-flex align-items-center mb-3">
                        <i class="fas fa-clock me-2 text-primary"></i>
                        <span>Gestartet am: <strong>{{ stocktake.startedAt }}</strong></span>
                        <span class="ms-auto refresh-info">
                            <i class="fas fa-sync-alt me-2" :class="{ 'fa-spin': refreshing }"></i>
                            <span v-if="refreshing">Aktualisiere...</span>
                            <span v-else>Nächste Aktualisierung in {{ countdown }}s</span>
                        </span>
                    </div>

                    <!-- Scanned Items Table -->
                    <div class="card flex-grow-1">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="fas fa-list me-2"></i>
                                Gescannte Artikel
                            </h5>
                            <span class="badge bg-secondary">{{ items.length }} Einträge</span>
                        </div>
                        <div class="card-body" style="overflow-y: auto; max-height: calc(100vh - 320px);">
                            <table class="table table-striped table-hover">
                                <thead class="sticky-top bg-light">
                                    <tr>
                                        <th style="width: 120px;">Artikel-Nr.</th>
                                        <th>Artikel</th>
                                        <th class="text-end" style="width: 100px;">Einzelpreis</th>
                                        <th class="text-end" style="width: 80px;">Menge</th>
                                        <th class="text-end" style="width: 110px;">Gesamtpreis</th>
                                        <th style="width: 80px;">Regal</th>
                                        <th style="width: 80px;">Fach</th>
                                        <th style="width: 140px;">Gescannt am</th>
                                        <th style="width: 130px;">Gescannt von</th>
                                        <th style="width: 80px;">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in items" :key="item.id" :class="{ 'table-secondary text-decoration-line-through': item.isOverwritten }">
                                        <td><code class="text-primary">{{ item.articleNumber }}</code></td>
                                        <td>{{ item.articleTitle }}</td>
                                        <td class="text-end">{{ formatCurrency(item.unitPrice) }}</td>
                                        <td class="text-end"><strong class="text-success">{{ item.countedQuantity }}</strong></td>
                                        <td class="text-end"><strong>{{ formatCurrency(item.lineTotal) }}</strong></td>
                                        <td>{{ item.rack || '-' }}</td>
                                        <td>{{ item.shelf || '-' }}</td>
                                        <td class="text-nowrap">{{ item.scannedAt || '-' }}</td>
                                        <td>{{ item.scannedBy || '-' }}</td>
                                        <td>
                                            <span v-if="item.isOverwritten" class="badge bg-warning text-dark">Überschrieben</span>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <th colspan="4" class="text-end">Summe:</th>
                                        <th class="text-end text-primary">{{ formatCurrency(summary.totalValue) }}</th>
                                        <th colspan="5"></th>
                                    </tr>
                                </tfoot>
                            </table>

                            <!-- Empty State -->
                            <div v-if="items.length === 0" class="text-center py-4">
                                <i class="fas fa-inbox fa-3x text-muted mb-2"></i>
                                <h6 class="text-muted">Noch keine Artikel gescannt</h6>
                                <p class="text-muted small mb-0">
                                    Scannen Sie Artikel mit der PWA-App, um sie hier zu sehen.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            loading: false,
            refreshing: false,
            stocktake: null,
            items: [],
            summary: { totalValue: 0, totalQuantity: 0 },
            refreshInterval: null,
            countdownInterval: null,
            countdown: 5,
        };
    },
    computed: {
        statusText() {
            if (!this.stocktake) return '';
            const statusMap = {
                'planned': 'Geplant',
                'in_progress': 'In Bearbeitung',
                'completed': 'Abgeschlossen',
                'cancelled': 'Abgebrochen'
            };
            return statusMap[this.stocktake.status] || this.stocktake.status;
        },
        statusCardClass() {
            if (!this.stocktake) return 'card-secondary';
            const classMap = {
                'planned': 'card-secondary',
                'in_progress': 'card-warning',
                'completed': 'card-success',
                'cancelled': 'card-danger'
            };
            return classMap[this.stocktake.status] || 'card-secondary';
        }
    },
    watch: {
        show(newVal) {
            if (newVal && this.id) {
                document.body.style.overflow = 'hidden';
                this.loadProgress();
                this.startAutoRefresh();
            } else {
                document.body.style.overflow = '';
                this.stopAutoRefresh();
            }
        },
        id(newVal) {
            if (this.show && newVal) {
                this.loadProgress();
            }
        }
    },
    methods: {
        close() {
            this.$emit('update:show', false);
        },
        async loadProgress() {
            if (!this.id) return;

            if (!this.stocktake) {
                this.loading = true;
            } else {
                this.refreshing = true;
            }

            try {
                const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/WarehouseStocktake/getProgress`, {
                    params: { id: this.id }
                });

                if (response.data.success) {
                    this.stocktake = response.data.stocktake;
                    this.items = response.data.items;
                    this.summary = response.data.summary || { totalValue: 0, totalQuantity: 0 };
                }
            } catch (error) {
                console.error('Failed to load progress:', error);
            } finally {
                this.loading = false;
                this.refreshing = false;
                this.countdown = 5;
            }
        },
        startAutoRefresh() {
            this.stopAutoRefresh();
            this.countdown = 5;

            // Countdown timer
            this.countdownInterval = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                }
            }, 1000);

            // Refresh data
            this.refreshInterval = setInterval(() => {
                if (this.show && this.id) {
                    this.loadProgress();
                }
            }, 5000);
        },
        stopAutoRefresh() {
            if (this.refreshInterval) {
                clearInterval(this.refreshInterval);
                this.refreshInterval = null;
            }
            if (this.countdownInterval) {
                clearInterval(this.countdownInterval);
                this.countdownInterval = null;
            }
        },
        formatCurrency(value) {
            return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(value || 0);
        }
    },
    beforeDestroy() {
        document.body.style.overflow = '';
        this.stopAutoRefresh();
    }
});

// Main Stocktake Component
Vue.component('warehouse-stocktake', {
    //language=Vue
    template: `
        <tt-card>
            <tt-table-crud
                @openHistory="historyModal = true; historyModalId = $event.id"
                @startStocktake="startStocktake($event)"
                @viewProgress="viewProgress($event)"
                @completeStocktake="completeStocktake($event)"
                @applyToStock="applyToStock($event)"
                @exportReport="exportReport($event)"
            >
                <template v-slot:actions="{ row, actions }">
                    <template v-for="action in actions">
                        <!-- Hide start button if not planned -->
                        <span v-if="action.key === 'startStocktake' && row.rawStatus !== 'planned'" :key="action.key"></span>
                        <!-- Hide complete button if not in_progress -->
                        <span v-else-if="action.key === 'completeStocktake' && row.rawStatus !== 'in_progress'" :key="action.key"></span>
                        <!-- Hide apply button if not completed -->
                        <span v-else-if="action.key === 'applyToStock' && row.rawStatus !== 'completed'" :key="action.key"></span>
                        <!-- Show other actions normally -->
                        <button v-else
                            :key="action.key"
                            class="btn btn-sm btn-link p-1"
                            :title="action.title"
                            @click="$emit(action.key, row)">
                            <i :class="action.class"></i>
                        </button>
                    </template>
                </template>
            </tt-table-crud>

            <warehouse-history-modal :show.sync="historyModal" :id="historyModalId"/>
            <stocktake-progress-modal :show.sync="progressModal" :id="progressModalId"/>
        </tt-card>
    `,
    data() {
        return {
            historyModal: false,
            historyModalId: null,
            progressModal: false,
            progressModalId: null,
        };
    },
    methods: {
        async startStocktake(event) {
            const row = event;
            if (row.rawStatus !== 'planned') {
                window.notify('warning', 'Inventur kann nur im Status "Geplant" gestartet werden');
                return;
            }

            if (!confirm('Möchten Sie diese Inventur wirklich starten?')) {
                return;
            }

            try {
                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WarehouseStocktake/startStocktake`, {
                    id: row.id
                });

                if (response.data.success) {
                    window.notify('success', response.data.message);
                    window.dispatchEvent(new Event('refreshTable'));
                } else {
                    window.notify('error', response.data.message);
                }
            } catch (error) {
                window.notify('error', 'Fehler beim Starten der Inventur');
            }
        },
        viewProgress(event) {
            this.progressModalId = event.id;
            this.progressModal = true;
        },
        async completeStocktake(event) {
            const row = event;

            if (!confirm('Möchten Sie diese Inventur wirklich abschließen?')) {
                return;
            }

            try {
                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WarehouseStocktake/completeStocktake`, {
                    id: row.id
                });

                if (response.data.success) {
                    window.notify('success', response.data.message);
                    window.dispatchEvent(new Event('refreshTable'));
                } else {
                    window.notify('error', response.data.message);
                }
            } catch (error) {
                window.notify('error', 'Fehler beim Abschließen der Inventur');
            }
        },
        applyToStock(event) {
            window.notify('warning', 'Aktuell noch nicht möglich');
        },
        exportReport(event) {
            window.open(`${window.TT_CONFIG.BASE_PATH}/WarehouseStocktake/exportReport?id=${event.id}`, '_blank');
        }
    }
});