<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
        Content Management System
      </h1>
      <div class="w-24 h-1 bg-primary-600 mb-8" />

      <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
        <h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
          Willkommen im CMS, {{ user?.name }}!
        </h2>
        <p class="text-gray-600">
          Hier können Sie Inhalte der Website verwalten.
        </p>
      </div>

      <!-- CMS Modules -->
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
              <Calendar :size="24" class="text-primary-600" />
            </div>
            <h3 class="text-lg font-semibold text-gray-900">Termine verwalten</h3>
          </div>
          <p class="text-gray-600 text-sm mb-4">
            Termine hinzufügen, bearbeiten und löschen
          </p>
          <button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
            Öffnen →
          </button>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
              <Newspaper :size="24" class="text-primary-600" />
            </div>
            <h3 class="text-lg font-semibold text-gray-900">Interne News</h3>
          </div>
          <p class="text-gray-600 text-sm mb-4">
            News für Mitglieder erstellen und verwalten
          </p>
          <button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
            Öffnen →
          </button>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
              <FileText :size="24" class="text-primary-600" />
            </div>
            <h3 class="text-lg font-semibold text-gray-900">Spielpläne</h3>
          </div>
          <p class="text-gray-600 text-sm mb-4">
            Spielpläne hochladen und verwalten
          </p>
          <button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
            Öffnen →
          </button>
        </div>

        <NuxtLink
          to="/cms/benutzer"
          class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-shadow block"
        >
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
              <Users :size="24" class="text-primary-600" />
            </div>
            <h3 class="text-lg font-semibold text-gray-900">Benutzerverwaltung</h3>
          </div>
          <p class="text-gray-600 text-sm mb-4">
            Registrierungen freischalten und Rollen verwalten
          </p>
          <span class="text-sm text-primary-600 hover:text-primary-700 font-medium">
            Öffnen →
          </span>
        </NuxtLink>

        <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
          <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
              <Image :size="24" class="text-primary-600" />
            </div>
            <h3 class="text-lg font-semibold text-gray-900">Galerie</h3>
          </div>
          <p class="text-gray-600 text-sm mb-4">
            Bilder hochladen und verwalten
          </p>
          <button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
            Öffnen →
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Calendar, Newspaper, FileText, Users, Image } from 'lucide-vue-next'

const user = ref(null)

onMounted(async () => {
  try {
    const response = await $fetch('/api/auth/status')
    if (response.isLoggedIn) {
      user.value = response.user
    }
  } catch (error) {
    console.error('Fehler beim Laden der Benutzerdaten:', error)
  }
})

definePageMeta({
  middleware: 'auth'
})

useHead({
  title: 'CMS - Harheimer TC',
})
</script>

