<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,
} from "lucide-vue-next";

const settingsCards = [
  {
    title: "Segments",
    description: "Manage segments used across the app.",
    route: "settings.segments",
    icon: Layers,
  },
  {
    title: "Payments",
    description: "Defaults for payments and auto-activity.",
    route: "settings.payment.edit",
    icon: CreditCard,
  },
  {
    title: "Workflow",
    description: "Configure actions and decisions relationships.",
    route: "settings.workflow",
    icon: GitBranch,
  },
  {
    title: "Field Job Settings",
    description: "Configure segment-based field job rules.",
    route: "settings.fieldjob.index",
    icon: Briefcase,
  },
  {
    title: "Contract Configs",
    description: "Auto-assign initial segments for contracts by type.",
    route: "settings.contractConfigs.index",
    icon: FileText,
  },
  {
    title: "Archive Settings",
    description: "Define rules for archiving or soft-deleting aged data.",
    route: "settings.archive.index",
    icon: Archive,
  },
  {
    title: "Reports",
    description: "Configure database-driven reports with dynamic queries.",
    route: "settings.reports.index",
    icon: BarChart3,
  },
];
</script>

<template>
  <AppLayout title="Settings">
    <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">Settings</h1>
          <p class="mt-2 text-sm text-muted-foreground">
            Manage your application configuration and preferences
          </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">
                  Open Settings
                  <ArrowRight
                    class="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1"
                  />
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
