<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { Link } from '@inertiajs/vue3'
import { Settings2Icon, FileTextIcon, CalendarIcon, AlertTriangleIcon, ListIcon, PencilIcon } from 'lucide-vue-next'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'
import { Badge } from '@/Components/ui/badge'
import { Button } from '@/Components/ui/button'
import { Separator } from '@/Components/ui/separator'

const props = defineProps({
  config: Object,
})
</script>

<template>
  <AdminLayout title="Nastavitve dokumentov">
    <div class="max-w-4xl mx-auto space-y-6">
      <Card>
        <CardHeader>
          <div class="flex items-start justify-between">
            <div class="flex items-start gap-3">
              <div class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary">
                <Settings2Icon class="h-5 w-5" />
              </div>
              <div>
                <CardTitle>Nastavitve dokumentov</CardTitle>
                <CardDescription>
                  Sistemska konfiguracija za generiranje in upravljanje dokumentov
                </CardDescription>
              </div>
            </div>
            <Button size="sm" as-child>
              <Link :href="route('admin.document-settings.edit')">
                <PencilIcon class="h-4 w-4 mr-2" />
                Uredi
              </Link>
            </Button>
          </div>
        </CardHeader>
        <CardContent class="space-y-6">
          <!-- Basic Configuration -->
          <div class="space-y-4">
            <h3 class="text-sm font-semibold flex items-center gap-2">
              <FileTextIcon class="h-4 w-4" />
              Privzeti vzorci
            </h3>
            <div class="grid gap-3">
              <div class="flex items-start justify-between p-3 rounded-lg border bg-muted/50">
                <div>
                  <p class="text-sm font-medium">Ime datoteke</p>
                  <p class="text-xs text-muted-foreground mt-0.5">Vzorec za generiranje imen</p>
                </div>
                <Badge variant="secondary" class="font-mono text-xs">
                  {{ config.file_name_pattern }}
                </Badge>
              </div>
              <div class="flex items-start justify-between p-3 rounded-lg border bg-muted/50">
                <div>
                  <p class="text-sm font-medium">Format datuma</p>
                  <p class="text-xs text-muted-foreground mt-0.5">Privzeto formatiranje datumov</p>
                </div>
                <Badge variant="secondary" class="font-mono text-xs">
                  {{ config.date_format }}
                </Badge>
              </div>
              <div class="flex items-start justify-between p-3 rounded-lg border bg-muted/50">
                <div>
                  <p class="text-sm font-medium">Politika nerešenih</p>
                  <p class="text-xs text-muted-foreground mt-0.5">Vedenje pri nerešenih spremenljivkah</p>
                </div>
                <Badge variant="secondary" class="font-mono text-xs">
                  {{ config.unresolved_policy }}
                </Badge>
              </div>
            </div>
          </div>

          <Separator />

          <!-- Whitelist Configuration -->
          <div class="space-y-4">
            <h3 class="text-sm font-semibold flex items-center gap-2">
              <ListIcon class="h-4 w-4" />
              Dovoljeni tokeni (whitelist)
            </h3>
            <div class="grid gap-3">
              <Card v-for="(cols, entity) in config.whitelist" :key="entity" class="border-muted">
                <CardHeader class="pb-3">
                  <CardTitle class="text-sm font-mono">{{ entity }}</CardTitle>
                </CardHeader>
                <CardContent>
                  <div v-if="cols.length" class="flex flex-wrap gap-1.5">
                    <Badge v-for="col in cols" :key="col" variant="outline" class="text-xs font-mono">
                      {{ col }}
                    </Badge>
                  </div>
                  <p v-else class="text-xs text-muted-foreground italic">
                    (brez specifičnih stolpcev)
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  </AdminLayout>
</template>
