<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { AuthRequestError, fetchCurrentUser, type CurrentUser } from '@/services/authSession'

const router = useRouter()
const isLoading = ref(true)
const errorMessage = ref('')
const user = ref<CurrentUser | null>(null)

const prettyUser = computed(() => {
  if (!user.value) {
    return ''
  }

  return JSON.stringify(user.value, null, 2)
})

async function loadCurrentUser() {
  isLoading.value = true
  errorMessage.value = ''

  try {
    const currentUser = await fetchCurrentUser({ force: true })
    if (!currentUser) {
      await router.replace({ name: 'Login', query: { redirect: '/' } })
      return
    }

    user.value = currentUser
  } catch (error) {
    if (error instanceof AuthRequestError) {
      errorMessage.value = error.message
    } else {
      errorMessage.value = 'Benutzerdaten konnten nicht geladen werden.'
    }
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  void loadCurrentUser()
})
</script>

<template>
  <v-container fluid class="dashboard-page hoard-page">
    <section class="dashboard-shell hoard-panel">
      <header class="dashboard-head">
        <p class="hoard-kicker">Geschützter Bereich</p>
        <h1>Dashboard</h1>
        <p>Hier siehst du aktuell direkt die Antwort von <code>/auth/me</code>.</p>
      </header>

      <v-alert
        v-if="errorMessage"
        type="error"
        variant="tonal"
        density="comfortable"
        border="start"
      >
        {{ errorMessage }}
      </v-alert>

      <article v-else class="dashboard-user hoard-panel">
        <template v-if="isLoading">
          <p class="dashboard-loading">Benutzerdaten werden geladen...</p>
        </template>
        <template v-else>
          <p class="dashboard-label">Antwort von <code>GET /auth/me</code>:</p>
          <pre class="dashboard-json">{{ prettyUser }}</pre>
        </template>
      </article>

      <div class="dashboard-actions">
        <v-btn
          variant="outlined"
          prepend-icon="mdi-refresh"
          :loading="isLoading"
          :disabled="isLoading"
          @click="loadCurrentUser"
        >
          Neu laden
        </v-btn>
      </div>
    </section>
  </v-container>
</template>

<style scoped>
.dashboard-page {
  --hoard-page-width: 980px;
}

.dashboard-shell {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
}

.dashboard-head h1,
.dashboard-head p,
.dashboard-label,
.dashboard-loading {
  margin: 0;
}

.dashboard-head h1 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.dashboard-head p {
  color: var(--color-text-secondary);
}

.dashboard-user {
  padding: var(--space-4);
}

.dashboard-label {
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.dashboard-loading {
  color: var(--color-text-secondary);
}

.dashboard-json {
  margin: 0;
  overflow: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text);
  background-color: var(--color-surface-alt);
  font-size: 0.88rem;
  line-height: 1.5;
}

.dashboard-actions {
  display: flex;
  justify-content: flex-end;
}

@media (width <= 600px) {
  .dashboard-shell {
    padding: var(--space-4);
  }

  .dashboard-actions {
    justify-content: stretch;
  }

  :deep(.dashboard-actions .v-btn) {
    width: 100%;
    min-height: 44px;
  }
}
</style>
