<script setup lang="ts">
import { ref, onErrorCaptured } from 'vue'
import { AlertTriangle } from 'lucide-vue-next'

const hasError = ref(false)
const errorMessage = ref('')

onErrorCaptured((err) => {
  hasError.value = true
  errorMessage.value = err.message || 'An unexpected error occurred'
  console.error('ErrorBoundary caught:', err)
  return false
})

function retry() {
  hasError.value = false
  errorMessage.value = ''
  window.location.reload()
}
</script>

<template>
  <div v-if="hasError" class="min-h-screen bg-neutral-950 flex items-center justify-center p-6">
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-8 max-w-md w-full text-center">
      <AlertTriangle class="w-12 h-12 text-red-500 mx-auto mb-4" />
      <h1 class="text-xl font-bold text-neutral-100 mb-2">Something went wrong</h1>
      <p class="text-sm text-neutral-400 mb-6">{{ errorMessage }}</p>
      <button
        @click="retry"
        class="px-4 py-2 bg-oxide-500 hover:bg-oxide-600 text-white font-medium rounded-lg transition-colors"
      >
        Retry
      </button>
    </div>
  </div>
  <slot v-else />
</template>
