<template>
  <nav class="mobile-nav fixed bottom-0 left-0 right-0 z-50 md:hidden pb-4 px-6">
    <div class="floating-glass-nav px-4 py-3 rounded-2xl">
      <div class="flex items-center justify-around">
        <button
          v-for="item in navItems"
          :key="item.name"
          @click="navigate(item.path)"
          class="flex flex-col items-center gap-1 nav-tab"
          :class="{ 'nav-tab-active': isActive(item.path) }"
        >
          <component :is="item.icon" class="w-6 h-6" />
          <span class="text-xs font-medium">{{ item.name }}</span>
        </button>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { h } from 'vue'

const router = useRouter()
const route = useRoute()

const navItems = [
  {
    name: 'Home',
    path: '/',
    icon: () => h('svg', { class: 'w-6 h-6', fill: 'currentColor', viewBox: '0 0 24 24' }, 
      h('path', { d: 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z' })
    )
  },
  {
    name: 'Search',
    path: '/search',
    icon: () => h('svg', { class: 'w-6 h-6', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' }, 
      h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' })
    )
  },
  {
    name: 'My List',
    path: '/mylist',
    icon: () => h('svg', { class: 'w-6 h-6', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' }, 
      h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z' })
    )
  },
  {
    name: 'Creators',
    path: '/creators',
    icon: () => h('svg', { class: 'w-6 h-6', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' }, 
      h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' })
    )
  },
  {
    name: 'Profile',
    path: '/profile',
    icon: () => h('svg', { class: 'w-6 h-6', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' }, 
      h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z' })
    )
  }
]

const navigate = (path: string) => {
  router.push(path)
}

const isActive = (path: string) => {
  return route.path === path
}
</script>

<style scoped>
.mobile-nav {
  /* Safe area for iPhone notch/home indicator */
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
}

.floating-glass-nav {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-tab {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-tab:active {
  background: rgba(255, 255, 255, 0.1);
}

.nav-tab-active {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  font-weight: 600;
}
</style>
