<script setup lang="ts">
import { useForm } from '@inertiajs/vue3'
import { useAuth } from '@/composables/useAuth'

defineProps<{
  appName: string
}>()

const { user, isAuthenticated, config } = useAuth()

const logoutForm = useForm({})

function logout() {
  logoutForm.post('/logout')
}
</script>

<template>
  <UApp>
    <div class="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
      <header class="flex items-center justify-end gap-4 p-4">
        <template v-if="isAuthenticated">
          <UButton to="/dashboard" variant="ghost">
            Dashboard
          </UButton>
          <span class="text-sm text-gray-600 dark:text-gray-400">
            {{ user?.full_name }}
          </span>
          <UButton variant="outline" :loading="logoutForm.processing" @click="logout">
            Logout
          </UButton>
        </template>
        <template v-else>
          <UButton to="/login" variant="ghost">
            Login
          </UButton>
          <UButton v-if="config.features.registration" to="/register">
            Register
          </UButton>
        </template>
      </header>

      <div class="flex-1 flex items-center justify-center">
        <div class="text-center">
          <h1 class="text-4xl font-bold text-gray-900 dark:text-white">
            Welcome to {{ appName }}
          </h1>
          <p class="mt-4 text-gray-600 dark:text-gray-400">
            Inertia.js with Vue and Nuxt UI is ready to go!
          </p>
          <div v-if="!isAuthenticated" class="mt-8 flex gap-4 justify-center">
            <UButton to="/register">
              Get Started
            </UButton>
            <UButton variant="outline">
              Learn More
            </UButton>
          </div>
        </div>
      </div>
    </div>
  </UApp>
</template>
