<template>
  <q-layout view="lHh Lpr lFf">
    <q-header class="portal-header" elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" @click="drawer = !drawer" class="lt-md" />
        <q-toolbar-title class="text-weight-bold">
          Gigafibre
        </q-toolbar-title>
        <q-space />
        <span v-if="store.customerName" class="text-body2 q-mr-md gt-sm">
          {{ store.customerName }}
        </span>
        <q-btn flat round icon="shopping_cart" @click="$router.push('/panier')" title="Panier" class="q-mr-xs">
          <q-badge v-if="cartStore.itemCount > 0" floating color="orange" :label="cartStore.itemCount" />
        </q-btn>
        <q-btn flat round icon="logout" @click="doLogout" title="Déconnexion" />
      </q-toolbar>
    </q-header>

    <q-drawer v-model="drawer" :width="240" :breakpoint="1024" bordered>
      <q-list padding>
        <q-item-label header class="text-weight-bold q-pb-sm">
          Mon portail
        </q-item-label>

        <q-item v-for="link in navLinks" :key="link.to"
          clickable v-ripple :to="link.to" active-class="text-primary bg-blue-1">
          <q-item-section avatar>
            <q-icon :name="link.icon" />
          </q-item-section>
          <q-item-section>{{ link.label }}</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <!-- Loading state (only block if we expect auth to succeed) -->
      <div v-if="store.loading && !guestMode" class="flex flex-center" style="min-height: 60vh">
        <q-spinner-dots size="48px" color="primary" />
      </div>

      <!-- Error state — only block for auth-required pages, let catalog/cart through -->
      <div v-else-if="store.error && requiresAuth" class="flex flex-center" style="min-height: 60vh">
        <div class="text-center">
          <q-icon name="error_outline" size="64px" color="negative" />
          <div class="text-h6 q-mt-md">{{ store.error }}</div>
          <q-btn class="q-mt-lg" color="primary" label="Réessayer" @click="store.init()" />
        </div>
      </div>

      <!-- Content -->
      <router-view v-else />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useCustomerStore } from 'src/stores/customer'
import { useCartStore } from 'src/stores/cart'
import { logout } from 'src/api/auth'

const route = useRoute()
const store = useCustomerStore()
const cartStore = useCartStore()
const drawer = ref(true)

// Pages that work without authentication
const publicRoutes = ['catalog', 'cart', 'order-success', 'payment-success', 'payment-cancel', 'payment-card-added']
const guestMode = computed(() => store.error && !store.customerId)
const requiresAuth = computed(() => !publicRoutes.includes(route.name))

const navLinks = [
  { to: '/', icon: 'dashboard', label: 'Tableau de bord' },
  { to: '/invoices', icon: 'receipt_long', label: 'Factures' },
  { to: '/tickets', icon: 'support_agent', label: 'Support' },
  { to: '/messages', icon: 'chat', label: 'Messages' },
  { to: '/me', icon: 'person', label: 'Mon compte' },
  { to: '/catalogue', icon: 'storefront', label: 'Catalogue' },
]

function doLogout () {
  logout()
}
</script>
