<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { LogoutConfirmDialog } from '@/components/ui/LogoutConfirmDialog'
import { User, LogOut, Settings } from 'lucide-vue-next'
import { auth } from '@/composables/useAuthService'
import { toast } from 'vue-sonner'

const router = useRouter()
const userDisplay = computed(() => auth.userDisplay.value)
const showLogoutConfirm = ref(false)

function handleLogout() {
  auth.logout()
  toast.success('Logged out successfully')
  router.push('/login')
}
</script>

<template>
  <div v-if="userDisplay" class="space-y-4">
    <Card>
      <CardHeader>
        <CardTitle class="flex items-center gap-2">
          <User class="w-5 h-5" />
          User Profile
        </CardTitle>
        <CardDescription>
          Your account information
        </CardDescription>
      </CardHeader>
      <CardContent class="space-y-4">
        <div class="grid gap-4">
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium">Name:</span>
            <span class="text-sm">{{ userDisplay.name }}</span>
          </div>
          
          <div v-if="userDisplay.username" class="flex items-center justify-between">
            <span class="text-sm font-medium">Username:</span>
            <span class="text-sm">{{ userDisplay.username }}</span>
          </div>
          
          <div v-if="userDisplay.email" class="flex items-center justify-between">
            <span class="text-sm font-medium">Email:</span>
            <span class="text-sm">{{ userDisplay.email }}</span>
          </div>
          
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium">User ID:</span>
            <Badge variant="secondary" class="text-xs">{{ userDisplay.shortId }}</Badge>
          </div>
        </div>
        
        <div class="flex gap-2 pt-4">
          <Button variant="outline" size="sm" class="flex-1">
            <Settings class="w-4 h-4 mr-2" />
            Settings
          </Button>
                  <Button variant="ghost" size="sm" @click="showLogoutConfirm = true" class="flex-1 text-destructive hover:text-destructive/90 hover:bg-destructive/10">
          <LogOut class="w-4 h-4 mr-2" />
          Logout
        </Button>
        </div>
      </CardContent>
    </Card>
  </div>

  <!-- Logout Confirm Dialog -->
  <LogoutConfirmDialog v-model:is-open="showLogoutConfirm" variant="ghost" size="sm" class="flex-1 text-destructive hover:text-destructive/90 hover:bg-destructive/10" @confirm="handleLogout">
    <LogOut class="w-4 h-4 mr-2" />
    Logout
  </LogoutConfirmDialog>
</template> 