<template>
  <div class="deep-link-error">
    <h1>Invalid Deep Link</h1>
    <div class="error-details">
      <p>{{ errorMessage }}</p>
      <div v-if="originalPath" class="original-link">
        <strong>Link attempted:</strong> timesafari://{{ originalPath }}
      </div>
    </div>
    <div class="actions">
      <button class="primary-button" @click="goHome">Go to Home</button>
      <button class="secondary-button" @click="reportIssue">
        Report Issue
      </button>
    </div>
    <div class="supported-links">
      <h2>Supported Deep Links</h2>
      <ul>
        <li v-for="route in validRoutes" :key="route">
          timesafari://{{ route }}/:id
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { VALID_DEEP_LINK_ROUTES } from "../types/deepLinks";
import { logConsoleAndDb } from "../db";

const route = useRoute();
const router = useRouter();

// Extract error information from query params
const errorCode = computed(
  () => (route.query.errorCode as string) || "UNKNOWN_ERROR",
);
const errorMessage = computed(
  () =>
    (route.query.message as string) ||
    "The deep link you followed is invalid or not supported.",
);
const originalPath = computed(() => route.query.originalPath as string);
const validRoutes = VALID_DEEP_LINK_ROUTES;

// Navigation methods
const goHome = () => router.replace({ name: "home" });
const reportIssue = () => {
  // Open a support form or email
  window.open(
    "mailto:support@timesafari.app?subject=Invalid Deep Link&body=" +
      encodeURIComponent(
        `I encountered an error with a deep link: timesafari://${originalPath.value}\nError: ${errorMessage.value}`,
      ),
  );
};

// Log the error for analytics
onMounted(() => {
  logConsoleAndDb(
    `[DeepLink] Error page displayed for path: ${originalPath.value}, code: ${errorCode.value}`,
    true,
  );
});
</script>
