<template>
    <div class="maintenance-schedule-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-tools class="text-muted mb-3" style="font-size: 3rem;"></b-icon-tools>
                <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: 'MaintenanceScheduleWorkflow',
    meta: {
        id: 'maintenance-schedule',
        name: 'Maintenance Schedule',
        category: 'Tool Maintenance',
        description: 'Create and execute maintenance schedules for tools and equipment.',
        icons: ['b-icon-tools', 'b-icon-calendar'],
        estimatedDuration: '30 minutes',
        stepDefinitions: [
            { step: '1', name: 'Identify Equipment', description: 'Select tools and equipment for maintenance' },
            { step: '2', name: 'Create Schedule', description: 'Define maintenance intervals and tasks' },
            { step: '3', name: 'Assign Responsibilities', description: 'Assign maintenance tasks to users' },
            { step: '4', name: 'Activate Schedule', description: 'Enable automatic maintenance reminders' }
        ],
        getInitialPayload() {
            return {
                schedule_config: {
                    frequency: 'monthly'
                }
            };
        }
    },
    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>
.maintenance-schedule-workflow {
    padding: 1rem;
}

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

