<template>
  <nav class="mobile-bottom-nav">
    <template v-for="(item, index) in items" :key="index">
      <!-- Router link for navigation items -->
      <router-link
        v-if="item.to"
        :to="item.to"
        class="bottom-nav-item"
        :class="{ 'active': item.active }"
      >
        <i :class="item.icon"></i>
        <span>{{ item.label }}</span>
      </router-link>

      <!-- Button for action items (no navigation) -->
      <button
        v-else
        type="button"
        class="bottom-nav-item"
        :class="{ 'active': item.active }"
        @click="$emit('item-click', item)"
      >
        <i :class="item.icon"></i>
        <span>{{ item.label }}</span>
      </button>
    </template>
  </nav>
</template>

<script setup>
/**
 * MobileBottomNav - Material Design 3 inspired bottom navigation bar for mobile views
 *
 * Props:
 * - items: Array of navigation items with { to?, icon, label, active? }
 *   - to: Optional route path (uses router-link when provided)
 *   - icon: PrimeIcons class (e.g., 'pi pi-receipt')
 *   - label: Display text for the nav item
 *   - active: Optional boolean to force active state
 *
 * Events:
 * - item-click: Emitted when a button item (without `to`) is clicked
 *
 * Default items (4 links):
 * - Bonuri (/data-entry)
 * - Upload (action button)
 * - Rapoarte (/reports/dashboard)
 * - Setări (/data-entry/ocr-metrics)
 */

defineProps({
  /**
   * Array of navigation items
   * Each item should have: { to?: string, icon: string, label: string, active?: boolean }
   */
  items: {
    type: Array,
    default: () => [
      { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' },
      { icon: 'pi pi-cloud-upload', label: 'Upload' },
      { to: '/reports/dashboard', icon: 'pi pi-chart-bar', label: 'Rapoarte' },
      { to: '/data-entry/ocr-metrics', icon: 'pi pi-cog', label: 'Setări' }
    ],
    validator: (items) => {
      return Array.isArray(items) && items.every(
        item => typeof item.icon === 'string' && typeof item.label === 'string'
      )
    }
  }
})

defineEmits(['item-click'])
</script>

<style scoped>
/* ================================================
   MobileBottomNav Component Styles
   Material Design 3 inspired bottom navigation
   ================================================ */

.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--surface-card);
  border-top: 1px solid var(--surface-border);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* Navigation item styles */
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: var(--text-color-secondary);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
  padding: var(--space-xs);
  min-width: 48px;
}

.bottom-nav-item i {
  font-size: var(--text-xl);
}

/* Touch feedback */
.bottom-nav-item:active {
  background: var(--surface-hover);
}

/* Active state (manual or router-link-active) */
.bottom-nav-item.active,
.bottom-nav-item.router-link-active {
  color: var(--color-primary);
}

.bottom-nav-item.active i,
.bottom-nav-item.router-link-active i {
  color: var(--color-primary);
}

/* ================================================
   Dark Mode Support
   ================================================ */

/* Manual dark mode via data-theme attribute */
[data-theme="dark"] .mobile-bottom-nav {
  background: var(--surface-card);
  border-top-color: var(--surface-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .bottom-nav-item {
  color: var(--text-color-secondary);
}

[data-theme="dark"] .bottom-nav-item:active {
  background: var(--surface-hover);
}

[data-theme="dark"] .bottom-nav-item.active,
[data-theme="dark"] .bottom-nav-item.router-link-active {
  color: var(--blue-400);
}

/* Auto dark mode (when no manual theme is set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mobile-bottom-nav {
    background: var(--surface-card);
    border-top-color: var(--surface-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
  }

  :root:not([data-theme]) .bottom-nav-item {
    color: var(--text-color-secondary);
  }

  :root:not([data-theme]) .bottom-nav-item:active {
    background: var(--surface-hover);
  }

  :root:not([data-theme]) .bottom-nav-item.active,
  :root:not([data-theme]) .bottom-nav-item.router-link-active {
    color: var(--blue-400);
  }
}
</style>
