<template>
  <v-row>
    <v-col cols="12">
      <v-card flat class="tw:bg-transparent tw:p-5">
        <v-card-title class="tw:text-3xl tw:font-bold tw:pb-2">
          🧀
          {{ $t("core.welcomeScreen.title") }}
          <span class="raclette">raclette</span>
        </v-card-title>
        <v-card-subtitle class="tw:text-lg tw:opacity-90">
          {{ $t("core.welcomeScreen.subtitle") }}
        </v-card-subtitle>
      </v-card>
    </v-col>
  </v-row>

  <!-- Main CTA Section -->
  <v-row class="tw:mt-6">
    <v-col cols="12">
      <v-alert type="info" variant="tonal" prominent class="tw:mb-6">
        <template v-slot:title>
          {{ $t("core.welcomeScreen.noLandingPage") }}
        </template>
        <div class="tw:mt-3">
          {{ $t("core.welcomeScreen.visitWorkbench") }}
        </div>
        <!--TODO get the workbench url and make this button work-->
        <!--v-btn
            color="primary"
            variant="elevated"
            class="tw:mt-4"
            prepend-icon="mdi-cog"
            @click="handleWorkbenchClick"
          >
            {{ $t("core.welcomeScreen.goToWorkbench") }}
          </!--v-btn-->
      </v-alert>
    </v-col>
  </v-row>

  <!-- Configuration Options -->
  <v-row>
    <v-col cols="12">
      <h2 class="tw:text-2xl tw:font-semibold tw:mb-4">
        {{ $t("core.welcomeScreen.configurationsTitle") }}
      </h2>
    </v-col>
  </v-row>

  <v-row>
    <v-col
      v-for="config in configurations"
      :key="config.key"
      cols="12"
      md="6"
      lg="4"
    >
      <v-card
        variant="outlined"
        class="tw:h-full tw:transition-all hover:tw:shadow-lg"
      >
        <v-card-item>
          <template v-slot:prepend>
            <v-avatar :color="config.color" variant="tonal">
              <v-icon :icon="config.icon"></v-icon>
            </v-avatar>
          </template>
          <v-card-title class="tw:text-lg">
            {{ $t(`core.welcomeScreen.${config.key}Title`) }}
          </v-card-title>
        </v-card-item>
        <v-card-text>
          {{ $t(`core.welcomeScreen.${config.key}`) }}
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
import { computed } from "vue"

// Configuration items
const configurations = computed(() => [
  {
    key: "compositionInfo",
    icon: "mdi-view-dashboard",
    color: "primary",
  },
  {
    key: "interactionLinkInfo",
    icon: "mdi-link-variant",
    color: "secondary",
  },
  {
    key: "userInfo",
    icon: "mdi-account-multiple",
    color: "success",
  },
  {
    key: "tagInfo",
    icon: "mdi-tag-multiple",
    color: "warning",
  },
  {
    key: "pluginInfo",
    icon: "mdi-puzzle",
    color: "info",
  },
])

// Methods
const handleWorkbenchClick = () => {
  // Navigate to workbench or emit event
  console.log("Navigate to racletteJS Workbench")
  // router.push('/workbench') // Uncomment when route is available
}
</script>
