<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Link } from "@inertiajs/vue3";
import {
  Layers,
  CreditCard,
  GitBranch,
  Briefcase,
  FileText,
  Archive,
  ArrowRight,
  BarChart3,
  CalendarDays,
} from "lucide-vue-next";

const settingsCards = [
  {
    title: "Segmenti",
    description: "Upravljanje segmentov, ki se uporabljajo v aplikaciji.",
    route: "settings.segments",
    icon: Layers,
  },
  {
    title: "Plačila",
    description: "Privzete nastavitve za plačila in samodejne aktivnosti.",
    route: "settings.payment.edit",
    icon: CreditCard,
  },
  {
    title: "Obroki",
    description: "Privzete nastavitve za obroke in samodejne aktivnosti.",
    route: "settings.installment.edit",
    icon: CalendarDays,
  },
  {
    title: "Potek dela",
    description: "Konfiguracija akcij in odločitev.",
    route: "settings.workflow",
    icon: GitBranch,
  },
  {
    title: "Nastavitve terenskega dela",
    description: "Konfiguracija pravil terenskega dela po segmentih.",
    route: "settings.fieldjob.index",
    icon: Briefcase,
  },
  {
    title: "Konfiguracije pogodb",
    description: "Samodejna dodelitev začetnih segmentov pogodbam glede na vrsto.",
    route: "settings.contractConfigs.index",
    icon: FileText,
  },
  {
    title: "Nastavitve pogodb",
    description: "Sprožilci samodejnih aktivnosti ob spremembi stanja pogodbe.",
    route: "settings.contract.edit",
    icon: FileText,
  },
  {
    title: "Nastavitve arhiviranja",
    description: "Določite pravila za arhiviranje ali mehko brisanje starih podatkov.",
    route: "settings.archive.index",
    icon: Archive,
  },
  {
    title: "Poročila",
    description:
      "Konfiguracija poročil na podlagi podatkovne baze z dinamičnimi poizvedbami.",
    route: "settings.reports.index",
    icon: BarChart3,
  },
];
</script>

<template>
  <AppLayout title="Nastavitve">
    <template #header />
    <div class="pt-12">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-8">
          <h1 class="text-3xl font-bold text-gray-900">Nastavitve</h1>
          <p class="mt-2 text-sm text-muted-foreground">
            Upravljanje konfiguracije in nastavitev aplikacije
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Card
            v-for="card in settingsCards"
            :key="card.route"
            class="hover:shadow-lg transition-shadow"
          >
            <CardHeader>
              <div class="flex items-center gap-3 mb-2">
                <div
                  class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary"
                >
                  <component :is="card.icon" :size="20" />
                </div>
                <CardTitle class="text-lg">{{ card.title }}</CardTitle>
              </div>
              <CardDescription>{{ card.description }}</CardDescription>
            </CardHeader>
            <CardContent>
              <Link :href="route(card.route)">
                <Button class="w-full group">
                  Odpri nastavitve
                  <ArrowRight
                    class="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1"
                  />
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
