<script setup lang="ts">
import { computed } from 'vue'
import { Link } from '@adonisjs/inertia/vue'
import { usePage } from '@inertiajs/vue3'

const page = usePage()

// Redirect to computers if user is authenticated
const isAuthenticated = computed(() => (page.props as any).auth?.user)
</script>

<template>
  <div v-if="isAuthenticated" class="container mx-auto px-6 py-8">
    <div class="bg-white rounded-lg shadow-lg p-8">
      <h1 class="text-3xl font-bold text-gray-800 mb-4">Welcome to PC Creator</h1>
      <p class="text-gray-600 mb-6">
        Manage your computer components and builds efficiently.
      </p>
      <div class="flex gap-4">
        <Link
          href="/computers"
          class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
        >
          View My Computers
        </Link>
        <Link
          href="/components"
          class="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300"
        >
          Manage Components
        </Link>
      </div>
    </div>
  </div>

  <div v-else class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-200">
    <div class="text-center">
      <h1 class="text-4xl font-bold text-gray-800 mb-4">PC Creator</h1>
      <p class="text-xl text-gray-600 mb-8">Build and manage your perfect computer setup</p>
      <div class="flex gap-4 justify-center">
        <Link
          href="/auth/login"
          class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
        >
          Login
        </Link>
        <Link
          href="/account/signup"
          class="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300"
        >
          Sign Up
        </Link>
      </div>
    </div>
  </div>
</template>
