/**
 * Lager Module
 *
 * Main module for warehouse management.
 * Shows submodules: Inventur (stocktake)
 */

import StocktakeList from '/mobile/modules/lager/inventur/StocktakeList.js';
import Scanner from '/mobile/modules/lager/inventur/Scanner.js';
import MovementForm from '/mobile/modules/lager/movement/MovementForm.js';

export default {
    name: 'LagerModule',
    emits: ['navigate', 'toast'],
    props: {
        user: Object,
        submodule: String,
        simpleMode: Boolean
    },
    components: {
        StocktakeList,
        Scanner,
        MovementForm
    },

    setup(props, { emit }) {
        const { ref, computed, watch } = Vue;

        // Submodules available in Lager
        const submodules = [
            {
                id: 'Inventur',
                name: 'Inventur',
                icon: 'clipboard',
                color: 'bg-green-500'
            },
            {
                id: 'Movement',
                name: 'Lagerbewegung',
                icon: 'arrows',
                color: 'bg-blue-500'
            }
        ];

        // Scanner state
        const selectedStocktake = ref(null);
        const showScanner = ref(false);

        // Current view based on submodule
        const currentView = computed(() => {
            if (!props.submodule) return 'menu';
            if (props.submodule.toLowerCase() === 'inventur') {
                return showScanner.value ? 'scanner' : 'inventur';
            }
            if (props.submodule.toLowerCase() === 'movement') {
                return 'movement';
            }
            return 'menu';
        });

        // Watch for submodule changes
        watch(() => props.submodule, (newVal) => {
            if (!newVal) {
                showScanner.value = false;
                selectedStocktake.value = null;
            }
        });

        const openSubmodule = (submoduleId) => {
            emit('navigate', 'Lager', submoduleId);
        };

        const goBack = () => {
            if (showScanner.value) {
                showScanner.value = false;
                selectedStocktake.value = null;
            }
        };

        const openScanner = (stocktake) => {
            selectedStocktake.value = stocktake;
            showScanner.value = true;
        };

        const closeScanner = () => {
            showScanner.value = false;
            selectedStocktake.value = null;
        };

        const showToast = (message, type) => {
            emit('toast', message, type);
        };

        return {
            submodules,
            selectedStocktake,
            showScanner,
            currentView,
            openSubmodule,
            goBack,
            openScanner,
            closeScanner,
            showToast
        };
    },

    template: `
        <div class="h-full">
            <!-- Submodule Menu -->
            <template v-if="currentView === 'menu'">
                <div class="p-3">
                    <div class="bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm">
                        <button
                            v-for="(sub, index) in submodules"
                            :key="sub.id"
                            @click="openSubmodule(sub.id)"
                            :class="[
                                'w-full flex items-center px-4 py-3.5 hover:bg-slate-50 dark:hover:bg-slate-700/50 active:bg-slate-100 dark:active:bg-slate-700 transition text-left',
                                index !== submodules.length - 1 ? 'border-b border-slate-100 dark:border-slate-700' : ''
                            ]"
                        >
                            <div :class="[sub.color, 'w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0']">
                                <svg v-if="sub.icon === 'clipboard'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                                </svg>
                                <svg v-else-if="sub.icon === 'arrows'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
                                </svg>
                            </div>
                            <span class="ml-3 font-medium text-slate-800 dark:text-white flex-1">
                                {{ sub.name }}
                            </span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </button>
                    </div>
                </div>
            </template>

            <!-- Inventur: Stocktake List -->
            <StocktakeList
                v-else-if="currentView === 'inventur'"
                :user="user"
                @select="openScanner"
            />

            <!-- Inventur: Scanner -->
            <Scanner
                v-else-if="currentView === 'scanner'"
                :stocktake="selectedStocktake"
                :user="user"
                @close="closeScanner"
                @toast="showToast"
            />

            <!-- Movement: Movement Form -->
            <MovementForm
                v-else-if="currentView === 'movement'"
                :user="user"
                :simple-mode="simpleMode"
                @toast="showToast"
            />
        </div>
    `
};