<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { Link } from '@inertiajs/vue3'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserGroup, faKey, faGears, faFileWord, faEnvelopeOpenText, faInbox, faAt, faAddressBook, faFileLines } from '@fortawesome/free-solid-svg-icons'

const cards = [
  {
    category: 'Uporabniki & Dovoljenja',
    items: [
      {
        title: 'Uporabniki',
        description: 'Upravljanje uporabnikov in njihovih vlog',
        route: 'admin.users.index',
        icon: faUserGroup,
      },
      {
        title: 'Novo dovoljenje',
        description: 'Dodaj in konfiguriraj novo dovoljenje',
        route: 'admin.permissions.create',
        icon: faKey,
      },
    ],
  },
  {
    category: 'Dokumenti',
    items: [
      {
        title: 'Nastavitve dokumentov',
        description: 'Privzete sistemske nastavitve za dokumente',
        route: 'admin.document-settings.index',
        icon: faGears,
      },
      {
        title: 'Predloge dokumentov',
        description: 'Upravljanje in verzioniranje DOCX predlog',
        route: 'admin.document-templates.index',
        icon: faFileWord,
      },
    ],
  },
  {
    category: 'Email',
    items: [
      {
        title: 'Email predloge',
        description: 'Upravljanje HTML / tekst email predlog',
        route: 'admin.email-templates.index',
        icon: faEnvelopeOpenText,
      },
      {
        title: 'Email dnevniki',
        description: 'Pregled poslanih emailov in statusov',
        route: 'admin.email-logs.index',
        icon: faInbox,
      },
      {
        title: 'Mail profili',
        description: 'SMTP profili, nastavitve in testiranje povezave',
        route: 'admin.mail-profiles.index',
        icon: faAt,
      },
    ],
  },
  {
    category: 'Komunikacije',
    items: [
      {
        title: 'SMS profili',
        description: 'Nastavitve SMS profilov, testno pošiljanje in stanje kreditov',
        route: 'admin.sms-profiles.index',
        icon: faGears,
      },
      {
        title: 'SMS pošiljatelji',
        description: 'Upravljanje nazivov pošiljateljev (Sender ID) za SMS profile',
        route: 'admin.sms-senders.index',
        icon: faAddressBook,
      },
      {
        title: 'SMS predloge',
        description: 'Tekstovne predloge za SMS obvestila in opomnike',
        route: 'admin.sms-templates.index',
        icon: faFileLines,
      },
      {
        title: 'SMS dnevniki',
        description: 'Pregled poslanih SMSov in statusov',
        route: 'admin.sms-logs.index',
        icon: faInbox,
      },
    ],
  },
]
</script>

<template>
  <AdminLayout title="Administrator">
    <div class="space-y-14">
      <section v-for="(group, i) in cards" :key="group.category" :class="[ i>0 ? 'pt-6 border-t border-gray-200/70' : '' ]">
        <h2 class="text-xs font-semibold tracking-wider uppercase text-gray-500 mb-4">
          {{ group.category }}
        </h2>
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          <Link
            v-for="item in group.items"
            :key="item.title"
            :href="route(item.route)"
            class="group relative overflow-hidden p-5 rounded-lg border bg-white hover:border-indigo-300 hover:shadow transition focus:outline-none focus:ring-2 focus:ring-indigo-500"
          >
            <div class="flex items-start gap-4">
              <span class="inline-flex items-center justify-center w-10 h-10 rounded-md bg-indigo-50 text-indigo-600 group-hover:bg-indigo-100">
                <FontAwesomeIcon :icon="item.icon" class="w-5 h-5" />
              </span>
              <div class="flex-1 min-w-0">
                <h3 class="font-semibold text-sm mb-1 flex items-center gap-2">
                  {{ item.title }}
                  <span class="opacity-0 group-hover:opacity-100 transition text-indigo-500 text-[10px] font-medium">→</span>
                </h3>
                <p class="text-xs text-gray-500 leading-relaxed line-clamp-3">{{ item.description }}</p>
              </div>
            </div>
          </Link>
        </div>
      </section>
    </div>
  </AdminLayout>
</template>
