import { createModuleApi } from '/mobile/shared/api.js';
import ShippingNoteForm from '/mobile/modules/lager/shippingnote/ShippingNoteForm.js';
import ShippingNoteList from '/mobile/modules/lager/shippingnote/ShippingNoteList.js';
import SignaturePad from '/mobile/modules/lager/shippingnote/SignaturePad.js';

const shippingNoteApi = createModuleApi('Lager/ShippingNote');

export { shippingNoteApi };

export default {
    name: 'ShippingNoteModule',
    emits: ['navigate', 'toast'],
    props: {
        user: Object,
        submodule: String
    },
    components: {
        ShippingNoteForm,
        ShippingNoteList,
        SignaturePad
    },

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

        // Current view: 'create' | 'list' | 'sign'
        const currentTab = ref('create');

        // Signature modal state
        const showSignatureModal = ref(false);
        const signatureShippingNoteId = ref(null);
        const signatureShippingNote = ref(null);

        // Last created shipping note (for immediate signing)
        const lastCreatedId = ref(null);

        // Open signature modal for a shipping note
        const openSignature = (shippingNote) => {
            signatureShippingNoteId.value = shippingNote.id;
            signatureShippingNote.value = shippingNote;
            showSignatureModal.value = true;
        };

        // Close signature modal
        const closeSignature = () => {
            showSignatureModal.value = false;
            signatureShippingNoteId.value = null;
            signatureShippingNote.value = null;
        };

        // Handle successful signature
        const handleSignatureComplete = () => {
            closeSignature();
            emit('toast', 'Unterschrift gespeichert', 'success');
            // Haptic feedback
            navigator.vibrate?.([100, 50, 100]);
        };

        // Handle shipping note created
        const handleCreated = (shippingNote) => {
            lastCreatedId.value = shippingNote.id;
            emit('toast', 'Lieferschein erstellt', 'success');
            // Haptic feedback
            navigator.vibrate?.([100]);
        };

        // Handle immediate sign after create
        const handleCreateAndSign = (shippingNote) => {
            handleCreated(shippingNote);
            // Open signature modal immediately
            openSignature(shippingNote);
        };

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

        // Switch tab
        const switchTab = (tab) => {
            currentTab.value = tab;
        };

        return {
            currentTab,
            showSignatureModal,
            signatureShippingNoteId,
            signatureShippingNote,
            lastCreatedId,
            openSignature,
            closeSignature,
            handleSignatureComplete,
            handleCreated,
            handleCreateAndSign,
            showToast,
            switchTab
        };
    },

    template: `
        <div class="flex flex-col h-full">
            <!-- Tabs -->
            <div class="flex bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700 px-3 py-2">
                <button
                    @click="switchTab('create')"
                    :class="[
                        'flex-1 py-2.5 text-sm font-medium rounded-lg transition flex items-center justify-center gap-2',
                        currentTab === 'create' ? 'bg-white dark:bg-slate-800 shadow-sm text-primary' : 'text-slate-500 dark:text-slate-400'
                    ]"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Neu erstellen
                </button>
                <button
                    @click="switchTab('list')"
                    :class="[
                        'flex-1 py-2.5 text-sm font-medium rounded-lg transition flex items-center justify-center gap-2 ml-1',
                        currentTab === 'list' ? 'bg-white dark:bg-slate-800 shadow-sm text-primary' : 'text-slate-500 dark:text-slate-400'
                    ]"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    Unterschreiben
                </button>
            </div>

            <!-- Content -->
            <main class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-900">
                <!-- Create Form -->
                <ShippingNoteForm
                    v-if="currentTab === 'create'"
                    :user="user"
                    @created="handleCreated"
                    @createAndSign="handleCreateAndSign"
                    @toast="showToast"
                />

                <!-- List of unsigned notes -->
                <ShippingNoteList
                    v-else-if="currentTab === 'list'"
                    :user="user"
                    @sign="openSignature"
                    @toast="showToast"
                />
            </main>

            <!-- Signature Modal -->
            <transition name="slide-up">
                <div v-if="showSignatureModal" class="fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900">
                    <SignaturePad
                        :shipping-note-id="signatureShippingNoteId"
                        :shipping-note="signatureShippingNote"
                        @close="closeSignature"
                        @signed="handleSignatureComplete"
                        @toast="showToast"
                    />
                </div>
            </transition>
        </div>
    `
};