<!--
/**
 * App Header Component - Platform Neutral Navigation
 * 
 * Cross-platform header with navigation tabs
 * 
 * @author Matthew Raymer
 * @version 1.0.0
 */
-->

<template>
  <header class="app-header">
    <div class="header-content">
      <!-- App Title -->
      <div class="app-title">
        <h1 class="title-text">
          🔔 Daily Notification Test
        </h1>
        <div class="platform-badge" :class="platformClass">
          {{ platformName }}
        </div>
      </div>
      
      <!-- Status Indicator -->
      <div class="status-indicator" :class="statusClass">
        <div class="status-dot"></div>
        <span class="status-text">{{ statusText }}</span>
      </div>
    </div>
    
    <!-- Navigation Tabs -->
    <nav class="navigation-tabs">
      <router-link 
        v-for="item in navigationItems" 
        :key="item.name"
        :to="item.path"
        class="nav-tab"
        :class="{ active: true }"
      >
        <span class="nav-icon">{{ item.icon }}</span>
        <span class="nav-label">{{ item.label }}</span>
      </router-link>
    </nav>
  </header>
</template>

<script lang="ts">
import { Vue, Component, toNative } from 'vue-facing-decorator'

type NavItem = { name: string; path: string; label: string; icon: string }

@Component
class AppHeader extends Vue {
  get platformName() { return 'Daily Notification Test' }
  get platformClass() { return 'platform-generic' }
  get statusText() { return 'OK' }
  get statusClass() { return 'status-ok' }

  get navigationItems(): NavItem[] {
    return [
      { name: 'Home', path: '/', label: 'Home', icon: '🏠' },
      { name: 'Schedule', path: '/schedule', label: 'Schedule', icon: '📅' },
      { name: 'Notifications', path: '/notifications', label: 'Notifications', icon: '🔔' },
      { name: 'UserZero', path: '/user-zero', label: 'User Zero', icon: '⭐' },
      { name: 'Logs', path: '/logs', label: 'Logs', icon: '📋' },
    ]
  }
}

export default toNative(AppHeader)
</script>

<style scoped>
.app-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.app-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-text {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.platform-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.platform-android {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.platform-ios {
  background: rgba(0, 122, 255, 0.2);
  color: #007aff;
  border: 1px solid rgba(0, 122, 255, 0.3);
}

.platform-electron {
  background: rgba(138, 43, 226, 0.2);
  color: #8a2be2;
  border: 1px solid rgba(138, 43, 226, 0.3);
}

.platform-web {
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
  border: 1px solid rgba(255, 152, 0, 0.3);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
}

.status-indicator.ready {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.status-indicator.not-ready {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.status-indicator.unknown {
  background: rgba(158, 158, 158, 0.2);
  color: #9e9e9e;
  border: 1px solid rgba(158, 158, 158, 0.3);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.navigation-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
  min-width: 60px;
  white-space: nowrap;
}

.nav-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.nav-tab.active {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.nav-icon {
  font-size: 16px;
}

.nav-label {
  font-size: 11px;
  font-weight: 500;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .navigation-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }
  
  .nav-tab {
    min-width: auto;
    padding: 6px 4px;
  }
  
  .nav-label {
    font-size: 10px;
  }
  
  .nav-icon {
    font-size: 14px;
  }
}

/* Very small screens - 2 rows */
@media (max-width: 480px) {
  .navigation-tabs {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
</style>
