<template>
    <div class="expiry-check-workflow">
        <div class="step-header mb-4">
            <h4 class="mb-2">{{ getCurrentStepName() }}</h4>
            <p class="text-muted">{{ getCurrentStepDescription() }}</p>
        </div>

        <!-- Step Progress -->
        <div class="progress mb-4" style="height: 8px;">
            <div
                class="progress-bar"
                :style="{ width: (parseInt(step) / meta.stepDefinitions.length) * 100 + '%' }"
            ></div>
        </div>

        <!-- Generic Step Content -->
        <div class="card mb-4">
            <div class="card-body text-center py-5">
                <b-icon-clock-history class="text-muted mb-3" style="font-size: 3rem;"></b-icon-clock-history>
                <h5 class="text-muted">{{ getCurrentStepName() }}</h5>
                <p class="text-muted">Implementation coming soon...</p>
            </div>
        </div>

        <!-- Navigation -->
        <div class="step-navigation d-flex justify-content-between">
            <button
                v-if="parseInt(step) > 1"
                class="btn btn-outline-secondary"
                @click="$emit('prev')"
            >
                <b-icon-chevron-left class="me-1"></b-icon-chevron-left>
                Previous
            </button>
            <div v-else></div>

            <button
                v-if="parseInt(step) < meta.stepDefinitions.length"
                class="btn btn-primary"
                @click="$emit('next')"
            >
                Next
                <b-icon-chevron-right class="ms-1"></b-icon-chevron-right>
            </button>
            <button
                v-else
                class="btn btn-success"
                @click="$emit('complete')"
            >
                Complete
                <b-icon-check-circle class="ms-1"></b-icon-check-circle>
            </button>
        </div>
    </div>
</template>

<script>
import * as BIcons from 'bootstrap-icons-vue';

export default {
    name: 'ExpiryCheckWorkflow',
    meta: {
        slug: 'expiry-check',
        title: 'Expiry Date Check',
        category: 'Quality Control',
        description: 'Identify and handle items approaching or past their expiry dates.',
        icons: ['b-icon-clock-history', 'b-icon-exclamation-triangle'],
        estimatedDuration: '45 minutes',
        stepDefinitions: [
            { step: '1', name: 'Scan Expiry Dates', description: 'Check all items for expiry information' },
            { step: '2', name: 'Identify Critical Items', description: 'Find expired and soon-to-expire items' },
            { step: '3', name: 'Assess Item Condition', description: 'Evaluate condition of critical items' },
            { step: '4', name: 'Generate Action Plan', description: 'Create disposal or usage recommendations' },
            { step: '5', name: 'Execute Actions', description: 'Implement recommended actions' },
            { step: '6', name: 'Update Records', description: 'Update item statuses and records' }
        ],
        getInitialPayload() {
            return {
                check_parameters: {
                    warning_days: 30,
                    include_no_expiry: false,
                    categories: []
                }
            };
        }
    },
    components: {
        ...BIcons
    },
    props: {
        workflowInstance: {
            type: Object,
            required: true
        },
        step: {
            type: String,
            required: true
        },
        payload: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        getCurrentStepName() {
            const stepDef = this.meta.stepDefinitions.find(s => s.step === this.step);
            return stepDef ? stepDef.name : `Step ${this.step}`;
        },
        getCurrentStepDescription() {
            const stepDef = this.meta.stepDefinitions.find(s => s.step === this.step);
            return stepDef ? stepDef.description : '';
        }
    }
}
</script>

<style scoped>
.expiry-check-workflow {
    padding: 1rem;
}

.step-navigation {
    margin-top: 2rem;
}
</style>

