<template>
    <div class="inventory-audit-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-list-ul class="text-muted mb-3" style="font-size: 3rem;"></b-icon-list-ul>
                <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: 'InventoryAuditWorkflow',
    meta: {
        slug: 'inventory-audit',
        title: 'Inventory Audit',
        category: 'Inventory Management',
        description: 'Perform a complete audit of your inventory items, checking quantities, locations, and conditions.',
        icons: ['b-icon-list-ul'],
        estimatedDuration: '2-4 hours',
        stepDefinitions: [
            { step: '1', name: 'Initialize Audit', description: 'Set up audit parameters and scope' },
            { step: '2', name: 'Generate Item List', description: 'Create list of items to audit' },
            { step: '3', name: 'Location Verification', description: 'Verify item locations' },
            { step: '4', name: 'Quantity Count', description: 'Count physical quantities' },
            { step: '5', name: 'Condition Assessment', description: 'Assess item conditions' },
            { step: '6', name: 'Discrepancy Detection', description: 'Identify discrepancies' },
            { step: '7', name: 'Report Generation', description: 'Generate audit report' },
            { step: '8', name: 'Finalize Audit', description: 'Complete and archive audit' }
        ],
        getInitialPayload() {
            return {
                audit_parameters: {
                    scope: 'full',
                    include_all_categories: true
                }
            };
        }
    },
    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>
.inventory-audit-workflow {
    padding: 1rem;
}

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

