<template>
  <div v-if="hasError" class="error-boundary" role="alert">
    <AppErrorState
      title="Something went wrong"
      :message="errorMessage"
      :retry="reset"
    />
  </div>
  <slot v-else />
</template>

<script setup>
import { ref, onErrorCaptured } from "vue";
import AppErrorState from "./AppErrorState.vue";

const hasError = ref(false);
const errorMessage = ref("");

onErrorCaptured((err, instance, info) => {
  const msg = err?.message || String(err);
  console.error("[AppErrorBoundary] Caught Vue error:", msg, "| info:", info, err);

  hasError.value = true;
  errorMessage.value = msg;

  // Do not propagate — we handled it by showing fallback UI.
  return false;
});

function reset() {
  hasError.value = false;
  errorMessage.value = "";
}
</script>

<style scoped>
.error-boundary {
  padding: 24px;
}
</style>