<script setup>
/**
 * MobileHeader - Cabecera optimizada para móviles
 * Con soporte para notch y safe areas
 */
import { ref } from 'vue';
import { Link, router } from '@inertiajs/vue3';

const props = defineProps({
    title: {
        type: String,
        default: '',
    },
    showBack: {
        type: Boolean,
        default: false,
    },
    backRoute: {
        type: String,
        default: null,
    },
    transparent: {
        type: Boolean,
        default: false,
    },
    sticky: {
        type: Boolean,
        default: true,
    },
});

const emit = defineEmits(['menu-click', 'action-click']);

const goBack = () => {
    if (props.backRoute) {
        router.visit(route(props.backRoute));
    } else {
        window.history.back();
    }
};
</script>

<template>
    <header 
        class="w-full z-30 safe-area-top"
        :class="[
            sticky ? 'sticky top-0' : '',
            transparent 
                ? 'bg-transparent' 
                : 'bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700'
        ]"
    >
        <div class="flex items-center justify-between h-14 px-4">
            <!-- Lado izquierdo -->
            <div class="flex items-center min-w-0 flex-1">
                <!-- Botón atrás -->
                <button 
                    v-if="showBack"
                    @click="goBack"
                    class="mr-2 -ml-2 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 transition-colors touch-manipulation"
                    aria-label="Volver"
                >
                    <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </button>
                
                <!-- Botón menú (slot) -->
                <slot name="menu-button">
                    <button 
                        v-if="!showBack"
                        @click="emit('menu-click')"
                        class="-ml-2 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 transition-colors touch-manipulation md:hidden"
                        aria-label="Menú"
                    >
                        <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                    </button>
                </slot>
                
                <!-- Título -->
                <h1 
                    v-if="title"
                    class="text-lg font-semibold text-gray-900 dark:text-white truncate"
                >
                    {{ title }}
                </h1>
                
                <!-- Slot para título personalizado -->
                <slot name="title" />
            </div>
            
            <!-- Acciones lado derecho -->
            <div class="flex items-center gap-1 ml-2">
                <slot name="actions" />
            </div>
        </div>
        
        <!-- Slot para contenido adicional (tabs, búsqueda, etc.) -->
        <slot name="extra" />
    </header>
</template>

<style scoped>
header {
    -webkit-user-select: none;
    user-select: none;
}
</style>
