<template>
  <div>
    <h1 class="text-3xl font-bold text-gray-900 mb-6">Settings</h1>
    
    <div class="grid gap-6 md:grid-cols-2">
      <UCard>
        <template #header>
          <h3 class="text-lg font-semibold">Account</h3>
        </template>
        
        <div class="space-y-4">
          <div v-if="user">
            <label class="text-sm font-medium text-gray-700">Email</label>
            <p class="text-gray-900">{{ user.email }}</p>
          </div>
          
          <UButton 
            v-if="!user"
            to="/auth/login"
            color="primary"
          >
            Sign In
          </UButton>
        </div>
      </UCard>

      <UCard>
        <template #header>
          <h3 class="text-lg font-semibold">Tags</h3>
        </template>
        
        <p class="text-gray-600">
          Manage your custom tags here (coming in Week 2).
        </p>
      </UCard>

      <UCard>
        <template #header>
          <h3 class="text-lg font-semibold">Units</h3>
        </template>
        
        <p class="text-gray-600">
          Manage your custom units here (coming in Week 2).
        </p>
      </UCard>

      <UCard>
        <template #header>
          <h3 class="text-lg font-semibold">About</h3>
        </template>
        
        <div class="space-y-2 text-sm text-gray-600">
          <p><strong>Pantry</strong> v0.1.0-alpha</p>
          <p>Self-hosted inventory management</p>
          <a 
            href="https://github.com/pantry-app/pantry" 
            target="_blank"
            class="text-primary hover:underline"
          >
            View on GitHub →
          </a>
        </div>
      </UCard>
    </div>
  </div>
</template>

<script setup lang="ts">
const { user } = useSupabaseAuth()

definePageMeta({
  layout: 'default'
})
</script>
