<template>
    <div class="quick-order-row" :class="{'quick-order-row--out-of-stock': isOutOfStock, 'quick-order-row--assessment': requiresAssessment}">
        <div class="quick-order-row__image">
            <a :href="product.url">
                <img :src="product.image" :alt="product.name" loading="lazy" />
            </a>
        </div>

        <div class="quick-order-row__info">
            <a :href="product.url" class="quick-order-row__name">{{ product.name }}</a>
            <span v-if="isPharmacyType" class="quick-order-row__badge">{{ badgeLabel }}</span>
        </div>

        <div class="quick-order-row__price">
            <span v-if="originalPrice" class="quick-order-row__price--original"><span v-html="currencySymbol"></span>{{ originalPrice }}</span>
            <span class="quick-order-row__price--current"><span v-html="currencySymbol"></span>{{ displayPrice }}</span>
        </div>

        <div class="quick-order-row__size" v-if="hasSizes">
            <product-size-select
                :sizes="visibleSizes"
                :single-select="true"
                @change="onSizeChange"
            ></product-size-select>
        </div>

        <div class="quick-order-row__quantity" v-if="!isOutOfStock && !requiresAssessment">
            <mtc-number-input
                :value="quantity"
                :min="1"
                :max="99"
                @input="onQuantityChange"
            ></mtc-number-input>
        </div>

        <div class="quick-order-row__action">
            <button
                v-if="!isOutOfStock"
                type="button"
                class="button quick-order-row__btn"
                :class="{'is-loading': adding}"
                :disabled="!canAdd && !requiresAssessment"
                @click="addToBasket"
            >
                {{ actionLabel }}
            </button>
            <span v-else class="quick-order-row__out-of-stock">Out of Stock</span>

            <div v-if="message" class="quick-order-row__message" :class="'quick-order-row__message--' + messageType">
                {{ message }}
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { EventBus, vueEventHub } from '@site/js/event-bus.js';
import productSizeSelect from '@components/shop/item/partials/product_size_select.vue';
import mtcNumberInput from '@components/mtc_number_input.vue';

export default {
    name: 'QuickOrderRow',
    components: {
        productSizeSelect,
        mtcNumberInput
    },
    props: {
        product: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            selectedSizeId: null,
            quantity: 1,
            adding: false,
            message: '',
            messageType: '',
            messageTimer: null,
            activeCurrency: window.active_currency || 'GBP'
        }
    },
    mounted() {
        this.onCurrencyChange = () => {
            this.activeCurrency = window.active_currency;
        };
        vueEventHub.$on('currency-change', this.onCurrencyChange);
    },
    computed: {
        currencySymbol() {
            const currencies = window.active_currencies || [];
            const list = Array.isArray(currencies) ? currencies : Object.values(currencies);
            const currency = list.find(c => c.currency === this.activeCurrency);
            return currency ? currency.symbol : '&pound;';
        },
        visibleSizes() {
            if (!this.product.sizes || this.product.sizes.length === 0) return [];
            return this.product.sizes.filter(s => s.stock > 0);
        },
        hasSizes() {
            return this.visibleSizes.length > 0;
        },
        selectedSize() {
            if (!this.selectedSizeId || !this.hasSizes) return null;
            return this.visibleSizes.find(s => s.id === this.selectedSizeId);
        },
        displayPrice() {
            if (this.selectedSize) {
                const sale = parseFloat(this.selectedSize.sale_price);
                const price = parseFloat(this.selectedSize.price);
                return (sale > 0 && sale < price) ? sale.toFixed(2) : price.toFixed(2);
            }
            return parseFloat(this.product.from_price).toFixed(2);
        },
        originalPrice() {
            if (this.selectedSize) {
                const sale = parseFloat(this.selectedSize.sale_price);
                const price = parseFloat(this.selectedSize.price);
                if (sale > 0 && sale < price) {
                    return price.toFixed(2);
                }
            }
            return null;
        },
        requiresAssessment() {
            return this.product.requires_assessment;
        },
        isOutOfStock() {
            if (!this.product.in_stock) return true;
            if (this.product.sizes && this.product.sizes.length > 0 && this.visibleSizes.length === 0) return true;
            return false;
        },
        isPharmacyType() {
            return ['pharmacy', 'doctor'].includes(this.product.product_type);
        },
        badgeLabel() {
            if (this.product.product_type === 'doctor') return 'Prescription';
            if (this.product.product_type === 'pharmacy') return 'Pharmacy';
            return '';
        },
        canAdd() {
            return !this.isOutOfStock && !this.requiresAssessment && (!this.hasSizes || this.selectedSizeId !== null);
        },
        actionLabel() {
            if (this.requiresAssessment) return 'Complete consultation';
            return 'Add to basket';
        }
    },
    methods: {
        onSizeChange(sizeId) {
            this.selectedSizeId = sizeId;
            this.clearMessage();
        },
        onQuantityChange(value) {
            this.quantity = Number(value);
        },
        clearMessage() {
            this.message = '';
            this.messageType = '';
            if (this.messageTimer) {
                clearTimeout(this.messageTimer);
                this.messageTimer = null;
            }
        },
        showMessage(text, isSuccess) {
            this.message = text;
            this.messageType = isSuccess ? 'success' : 'error';
            this.messageTimer = setTimeout(() => {
                this.clearMessage();
            }, 4000);
        },
        addToBasket() {
            if (this.requiresAssessment) {
                this.$emit('show-assessment-modal', {
                    assessmentUrl: this.product.assessment_url,
                    productName: this.product.name
                });
                return;
            }

            if (!this.canAdd) {
                if (this.hasSizes && !this.selectedSizeId) {
                    this.showMessage('Please select a size', false);
                }
                return;
            }

            this.adding = true;

            const formData = new FormData();
            formData.append('id', this.product.id);
            formData.append('quantity', this.quantity);
            formData.append('ajax', 'true');

            if (this.selectedSizeId) {
                formData.append('size', this.selectedSizeId);
            }

            axios.post('/shop/addtobasket.php', formData)
            .then(response => {
                const data = response.data;
                if (data.status === 'ok') {
                    EventBus.$emit('receiveBasketUpdate');
                    this.showMessage('Added to basket', true);
                } else if (data.error === 'size') {
                    this.showMessage('Please select a size', false);
                } else if (data.error === 'assessment_required') {
                    this.$emit('show-assessment-modal', {
                        assessmentUrl: data.url,
                        productName: this.product.name
                    });
                } else {
                    this.showMessage(data.message || 'Unable to add to basket', false);
                }
            })
            .catch(() => {
                this.showMessage('Unable to add to basket', false);
            })
            .finally(() => {
                this.adding = false;
            });
        }
    },
    beforeDestroy() {
        vueEventHub.$off('currency-change', this.onCurrencyChange);
        if (this.messageTimer) {
            clearTimeout(this.messageTimer);
        }
    }
}
</script>
