<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { computed, onMounted, ref } from 'vue'
import { useAuthStore } from './stores/auth'
import Button from 'primevue/button'
import Avatar from 'primevue/avatar'

const auth = useAuthStore()
const isAuthenticated = computed(() => auth.isAuthenticated)
const mobileMenuOpen = ref(false)

onMounted(async () => {
  if (auth.isAuthenticated && !auth.rider) {
    await auth.fetchRider()
  }
})
</script>

<template>
  <div class="min-h-screen bg-surface-50 text-surface-900">
    <nav v-if="isAuthenticated" class="flex items-center justify-between px-4 md:px-8 h-14 bg-white border-b border-surface-200 shadow-sm">
      <RouterLink to="/" class="text-xl font-bold text-primary">VeloBrain</RouterLink>

      <!-- Desktop nav -->
      <div class="hidden md:flex items-center gap-6">
        <RouterLink to="/" class="text-surface-400 hover:text-primary text-sm font-medium transition-colors" active-class="!text-primary">Dashboard</RouterLink>
        <RouterLink to="/activities" class="text-surface-400 hover:text-primary text-sm font-medium transition-colors" active-class="!text-primary">Activities</RouterLink>
        <RouterLink to="/coach" class="text-surface-400 hover:text-primary text-sm font-medium transition-colors" active-class="!text-primary">Coach</RouterLink>
        <RouterLink to="/settings" class="text-surface-400 hover:text-primary text-sm font-medium transition-colors" active-class="!text-primary">Settings</RouterLink>
        <div class="flex items-center gap-3 ml-4">
          <span v-if="auth.rider" class="text-surface-600 text-sm">{{ auth.rider.name }}</span>
          <Avatar v-if="auth.rider?.avatar_url" :image="auth.rider.avatar_url" shape="circle" size="small" />
          <Avatar v-else :label="auth.rider?.name?.charAt(0) ?? '?'" shape="circle" size="small" />
          <Button icon="pi pi-sign-out" text rounded severity="secondary" size="small" @click="auth.logout()" />
        </div>
      </div>

      <!-- Mobile hamburger -->
      <Button icon="pi pi-bars" text rounded severity="secondary" size="small" class="md:hidden" @click="mobileMenuOpen = !mobileMenuOpen" />
    </nav>

    <!-- Mobile menu dropdown -->
    <div v-if="isAuthenticated && mobileMenuOpen" class="md:hidden bg-white border-b border-surface-200 shadow-sm px-4 py-3 flex flex-col gap-3">
      <RouterLink to="/" class="text-surface-600 hover:text-primary text-sm font-medium py-1" @click="mobileMenuOpen = false">Dashboard</RouterLink>
      <RouterLink to="/activities" class="text-surface-600 hover:text-primary text-sm font-medium py-1" @click="mobileMenuOpen = false">Activities</RouterLink>
      <RouterLink to="/coach" class="text-surface-600 hover:text-primary text-sm font-medium py-1" @click="mobileMenuOpen = false">Coach</RouterLink>
      <RouterLink to="/settings" class="text-surface-600 hover:text-primary text-sm font-medium py-1" @click="mobileMenuOpen = false">Settings</RouterLink>
      <div class="flex items-center justify-between pt-2 border-t border-surface-100">
        <div class="flex items-center gap-2">
          <Avatar v-if="auth.rider?.avatar_url" :image="auth.rider.avatar_url" shape="circle" size="small" />
          <Avatar v-else :label="auth.rider?.name?.charAt(0) ?? '?'" shape="circle" size="small" />
          <span v-if="auth.rider" class="text-surface-600 text-sm">{{ auth.rider.name }}</span>
        </div>
        <Button icon="pi pi-sign-out" text rounded severity="secondary" size="small" @click="auth.logout()" />
      </div>
    </div>

    <main class="max-w-[1200px] mx-auto p-4 md:p-8">
      <RouterView />
    </main>
  </div>
</template>
