<template>
    <div class="quick-order-page">
        <h1>Quick Order</h1>

        <div class="quick-order-search">
            <input
                type="text"
                v-model="searchTerm"
                @input="onSearchInput"
                placeholder="Search by product name or code"
                class="quick-order-search__input"
            />
        </div>

        <div v-if="loading" class="quick-order-loading">
            <loading-spinner></loading-spinner>
        </div>

        <div v-if="products.length > 0" class="quick-order-results">
            <div class="quick-order-results__header">
                <span></span>
                <span>Product</span>
                <span>Price</span>
                <span>Size</span>
                <span>Qty</span>
                <span></span>
            </div>
            <quick-order-row
                v-for="product in products"
                :key="product.id"
                :product="product"
                @show-assessment-modal="showAssessmentModal"
            ></quick-order-row>
        </div>

        <div v-if="!loading && searchTerm.length >= 2 && products.length === 0 && hasSearched" class="quick-order-empty">
            No products found.
        </div>

        <quick-order-modal
            :visible="modalVisible"
            :assessment-url="modalAssessmentUrl"
            @close="closeModal"
        ></quick-order-modal>
    </div>
</template>

<script>
import axios from 'axios';
import QuickOrderRow from './quick_order_row.vue';
import QuickOrderModal from './quick_order_modal.vue';

export default {
    name: 'QuickOrderPage',
    components: {
        QuickOrderRow,
        QuickOrderModal
    },
    data() {
        return {
            searchTerm: '',
            products: [],
            loading: false,
            hasSearched: false,
            searchTimeout: null,
            abortController: null,
            modalVisible: false,
            modalAssessmentUrl: ''
        }
    },
    methods: {
        onSearchInput() {
            if (this.searchTimeout) {
                clearTimeout(this.searchTimeout);
            }

            if (this.searchTerm.length < 2) {
                this.clearResults();
                return;
            }

            this.searchTimeout = setTimeout(() => {
                this.fetchResults();
            }, 300);
        },

        fetchResults() {
            if (this.abortController) {
                this.abortController.abort();
            }

            this.abortController = new AbortController();
            this.loading = true;

            axios.get('/quick-order/search', {
                params: { term: this.searchTerm },
                signal: this.abortController.signal
            })
                .then(response => {
                    this.products = response.data.products || [];
                    this.hasSearched = true;
                })
                .catch(err => {
                    if (!axios.isCancel(err)) {
                        this.products = [];
                    }
                })
                .finally(() => {
                    this.loading = false;
                });
        },

        clearResults() {
            if (this.abortController) {
                this.abortController.abort();
            }
            this.products = [];
            this.hasSearched = false;
        },

        showAssessmentModal(data) {
            this.modalVisible = true;
            this.modalAssessmentUrl = data.assessmentUrl;
        },

        closeModal() {
            this.modalVisible = false;
        }
    },
    beforeDestroy() {
        if (this.searchTimeout) {
            clearTimeout(this.searchTimeout);
        }
        if (this.abortController) {
            this.abortController.abort();
        }
    }
}
</script>
