<template>
  <AppLayout title="Navigation Debug">
    <div class="p-6">
      <h1 class="text-2xl font-bold mb-6">Navigation Debug</h1>
      
      <div class="space-y-4">
        <div class="bg-white p-4 rounded-lg shadow">
          <h2 class="text-lg font-semibold mb-2">Route Generation Test</h2>
          <div class="space-y-2">
            <div v-for="routeName in testRoutes" :key="routeName" class="flex items-center justify-between p-2 border rounded">
              <span class="font-mono">{{ routeName }}</span>
              <div class="flex items-center gap-2">
                <span class="text-sm text-gray-600">{{ generateRoute(routeName) }}</span>
                <Link :href="generateRoute(routeName)" class="px-3 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600">
                  Test Link
                </Link>
              </div>
            </div>
          </div>
        </div>

        <div class="bg-white p-4 rounded-lg shadow">
          <h2 class="text-lg font-semibold mb-2">Current Page Info</h2>
          <div class="space-y-1 text-sm">
            <div><strong>Current URL:</strong> {{ currentUrl }}</div>
            <div><strong>Page Component:</strong> {{ pageName }}</div>
            <div><strong>Route Function Available:</strong> {{ routeFunctionAvailable }}</div>
          </div>
        </div>

        <div class="bg-white p-4 rounded-lg shadow">
          <h2 class="text-lg font-semibold mb-2">Sidebar Navigation Test</h2>
          <div class="space-y-2">
            <p class="text-sm text-gray-600">Click these buttons to test sidebar navigation:</p>
            <div class="flex flex-wrap gap-2">
              <button 
                v-for="routeName in testRoutes" 
                :key="routeName"
                @click="navigateToRoute(routeName)"
                class="px-3 py-2 bg-green-500 text-white rounded text-sm hover:bg-green-600"
              >
                Go to {{ routeName }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Link, usePage, router } from '@inertiajs/vue3'
import AppLayout from '@/layouts/AppLayout.vue'

const page = usePage()

const testRoutes = [
  'students.index',
  'teachers.index',
  'guardians.index',
  'academic-years.index',
  'subjects.index',
  'classrooms.index',
  'enrollment.index',
  'results.index',
  'configuration.index'
]

const currentUrl = computed(() => page.url)
const pageName = computed(() => page.component)
const routeFunctionAvailable = computed(() => typeof window.route === 'function')

const generateRoute = (routeName: string) => {
  try {
    return route(routeName)
  } catch (error) {
    return `Error: ${error.message}`
  }
}

const navigateToRoute = (routeName: string) => {
  try {
    const url = route(routeName)
    console.log(`Navigating to ${routeName}: ${url}`)
    router.visit(url)
  } catch (error) {
    console.error(`Error navigating to ${routeName}:`, error)
    alert(`Error navigating to ${routeName}: ${error.message}`)
  }
}
</script>
