<script setup>
import { ref, onMounted } from "vue";
import { useAuthStore } from "@/stores/authStore";
import { useSettingStore } from "@/stores/settingStore";
import TranslationSuggestionModal from "@/components/TranslationSuggestionModal.vue";
import languageTemplateApi from "@/api/languageTemplateApi";

const authStore = useAuthStore();
const settingStore = useSettingStore();
const showTranslationSuggestions = ref(false);

const checkSuggestions = async () => {
  const user = authStore.user?.data;
  const setting = settingStore.setting;

  const lang =
    setting?.general_settings?.language_code || user?.franchisee?.language;
  const selected = setting?.general_settings?.translation_template_choice;
  const selectedLanguage =
    setting?.general_settings?.translation_template_choice_language;

  if (user?.role === "franchise_admin" || user?.role === "franchise_editor") {
    if (lang && lang !== "en" && !(selected && selectedLanguage === lang)) {
      try {
        const response = await languageTemplateApi.getPublishedTemplate(lang);
        if (
          response?.data?.status &&
          response?.data?.data?.has_published_template
        ) {
          showTranslationSuggestions.value = true;
        }
      } catch (err) {
        console.error("Failed to pre-check translation templates:", err);
      }
    }
  }
};

onMounted(async () => {
  // Ensure we have settings (this fixes the issue where suggestions only showed after visiting settings page)
  if (!settingStore.setting) {
    await settingStore.getSetting();
  }
  await checkSuggestions();
});
</script>

<template>
  <div class="dashboard-page-container">
    <div class="coming-soon-wrapper d-flex align-center justify-center">
      <VCard class="coming-soon-card pb-8">
        <div class="header-banner"></div>

        <VCardText class="d-flex flex-column align-center text-center mt-6">
          <div class="icon-avatar-wrapper mb-6">
            <VAvatar
              color="primary"
              variant="tonal"
              size="84"
              class="pulse-animation"
            >
              <VIcon icon="bx-rocket" size="42" />
            </VAvatar>
          </div>

          <h2
            class="welcome-title text-h4 font-weight-bold mb-2"
            :class="$vuetify.theme.current.dark ? 'text-white' : 'text-primary'"
          >
            Welcome to Young Engineers!
          </h2>

          <p
            class="subtitle text-body-1 mb-6"
            :class="
              $vuetify.theme.current.dark
                ? 'text-white'
                : 'text-medium-emphasis'
            "
          >
            We are currently preparing your analytics and dashboard experience.
            <br />
            Check back soon for exciting updates and detailed insights!
          </p>
        </VCardText>
      </VCard>
    </div>

    <!-- 👉 Mandatory Translation Choice Modal -->
    <TranslationSuggestionModal v-model="showTranslationSuggestions" />
  </div>
</template>

<style scoped>
.dashboard-page-container {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.coming-soon-wrapper {
  min-height: 80vh;
  width: 100%;
}

.coming-soon-card {
  max-width: 650px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
  background: rgb(var(--v-theme-surface));
  color: rgb(var(--v-theme-on-surface));
}

.header-banner {
  height: 120px;
  background: linear-gradient(135deg, #003b6f 0%, #0056a3 100%);
  position: relative;
  overflow: hidden;
}

.header-banner::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 60%
  );
  animation: rotate 20s linear infinite;
}

.icon-avatar-wrapper {
  margin-top: -60px;
  position: relative;
  z-index: 2;
  background: rgb(var(--v-theme-surface));
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.pulse-animation {
  animation: pulse 2s infinite;
}

.welcome-title {
  letter-spacing: -0.5px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 59, 111, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(0, 59, 111, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 59, 111, 0);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
