<script setup>
import { useRoute, useRouter } from "vue-router";
import { onMounted } from "vue";
import AppSidebar from "./components/AppSidebar.vue";
import AppNotification from "./components/AppNotification.vue";
import { useSportsStore } from "./stores/sports";
import { useAuthStore } from "./stores/auth";
import { User, LogOut } from "lucide-vue-next";

const store = useSportsStore();
const auth = useAuthStore();
const route = useRoute();
const router = useRouter();

onMounted(() => {
  if (auth.isAuthenticated) store.loadData();
});

function logout() {
  auth.logout();
  router.push("/login");
}

const titles = {
  dashboard: "Tableau de Bord",
  students: "Annuaire Étudiants",
  activity: "Suivi Personnel",
  results: "Résultats Académiques",
  history: "Historique Global",
  users: "Gestion Utilisateurs",
};
</script>

<template>
  <!-- Public pages (login) render without chrome -->
  <RouterView v-if="route.meta.public" />

  <!-- Authenticated shell -->
  <div v-else class="min-h-screen flex flex-col lg:flex-row">
    <AppSidebar />

    <main class="flex-1 p-6 lg:p-10 overflow-y-auto">
      <AppNotification :message="store.notification" />

      <header class="mb-8 flex justify-between items-center">
        <h2 class="text-3xl font-bold text-blue-900">
          {{ titles[route.name] ?? "SB Sports" }}
        </h2>
        <div class="flex items-center gap-3">
          <div
            class="flex items-center gap-3 text-blue-900 bg-blue-100 px-4 py-2 rounded-full border border-blue-200 shadow-sm"
          >
            <User class="w-4 h-4" />
            <span class="font-medium capitalize">{{
              auth.user?.username ?? "Coach"
            }}</span>
          </div>
          <button
            @click="logout"
            class="flex items-center gap-2 text-sm text-red-600 hover:text-red-800 bg-red-50 hover:bg-red-100 px-3 py-2 rounded-full border border-red-200 transition-colors"
            title="Déconnexion"
          >
            <LogOut class="w-4 h-4" />
          </button>
        </div>
      </header>

      <RouterView />
    </main>
  </div>
</template>
