<template>
  <div v-if="error" class="module-error">
    <div class="error-icon">
      <i class="pi pi-exclamation-triangle" style="font-size: 4rem; color: var(--color-danger);"></i>
    </div>
    <h3>{{ moduleName }} a întâmpinat o eroare</h3>
    <p class="error-message">{{ error.message }}</p>
    <div class="error-actions">
      <Button label="Reîncearcă" icon="pi pi-refresh" @click="retry" />
      <Button label="Mergi la Dashboard" icon="pi pi-home" severity="secondary" @click="goHome" />
    </div>
  </div>
  <slot v-else />
</template>

<script setup>
import { ref, onErrorCaptured } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  moduleName: { type: String, required: true }
})

const router = useRouter()
const error = ref(null)

onErrorCaptured((err, instance, info) => {
  error.value = err
  console.error(`[${props.moduleName}] Error caught:`, err, info)
  return false // Prevent error from propagating
})

const retry = () => {
  error.value = null
  window.location.reload()
}

const goHome = () => {
  error.value = null
  router.push('/reports/dashboard')
}
</script>

<style scoped>
.module-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
  text-align: center;
}

.error-icon {
  margin-bottom: 1.5rem;
}

.module-error h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary, #2c3e50);
}

.error-message {
  color: var(--color-text-secondary, #6c757d);
  margin-bottom: 2rem;
  max-width: 500px;
}

.error-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
</style>
