<template>
    <div class="storage-optimization-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-boxes class="text-muted mb-3" style="font-size: 3rem;"></b-icon-boxes>
                <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: 'StorageOptimizationWorkflow',
    meta: {
        slug: 'storage-optimization',
        title: 'Storage Optimization',
        category: 'Storage Management',
        description: 'Analyze and reorganize storage locations for maximum efficiency and accessibility.',
        icons: ['b-icon-boxes', 'b-icon-diagram-3', 'b-icon-archive'],
        estimatedDuration: '1-2 hours',
        stepDefinitions: [
            { step: '1', name: 'Analyze Current Layout', description: 'Assess current storage efficiency' },
            { step: '2', name: 'Identify Optimization Opportunities', description: 'Find areas for improvement' },
            { step: '3', name: 'Plan Reorganization', description: 'Create optimization plan' },
            { step: '4', name: 'Execute Changes', description: 'Implement storage changes' },
            { step: '5', name: 'Validate Results', description: 'Verify optimization results' }
        ],
        getInitialPayload() {
            return {
                optimization_params: {
                    strategy: 'efficiency'
                }
            };
        }
    },
    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>
.storage-optimization-workflow {
    padding: 1rem;
}

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

