<template>
  <AdminLayout title="Predloga">
    <div class="flex flex-col lg:flex-row gap-6 items-start">
      <div class="flex-1 min-w-[320px] space-y-6">
        <Card>
          <CardHeader>
            <div class="flex items-start justify-between gap-4">
              <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"
                >
                  <FileTextIcon class="h-5 w-5" />
                </div>
                <div>
                  <CardTitle>{{ template.name }}</CardTitle>
                  <CardDescription class="flex flex-wrap gap-3 mt-1">
                    <span class="inline-flex items-center gap-1">
                      <span>Slug:</span>
                      <Badge variant="secondary" class="text-xs">{{
                        template.slug
                      }}</Badge>
                    </span>
                    <span class="inline-flex items-center gap-1">
                      <span>Verzija:</span>
                      <Badge variant="secondary" class="text-xs"
                        >v{{ template.version }}</Badge
                      >
                    </span>
                    <Badge
                      :variant="template.active ? 'default' : 'outline'"
                      class="text-xs"
                    >
                      {{ template.active ? "Aktivna" : "Neaktivna" }}
                    </Badge>
                  </CardDescription>
                </div>
              </div>
              <div class="flex items-center gap-2">
                <form @submit.prevent="toggleActive">
                  <Button
                    type="submit"
                    :variant="template.active ? 'destructive' : 'default'"
                    size="sm"
                    :disabled="toggleForm.processing"
                  >
                    <PowerOffIcon v-if="template.active" class="h-4 w-4 mr-2" />
                    <Power v-else class="h-4 w-4 mr-2" />
                    {{ template.active ? "Deaktiviraj" : "Aktiviraj" }}
                  </Button>
                </form>
                <Button size="sm" as-child>
                  <Link :href="route('admin.document-templates.edit', template.id)">
                    <PencilIcon class="h-4 w-4 mr-2" />
                    Uredi
                  </Link>
                </Button>
                <Button size="sm" variant="outline" as-child>
                  <Link :href="route('admin.document-templates.index')">
                    <ArrowLeftIcon class="h-4 w-4 mr-2" />
                    Nazaj
                  </Link>
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div class="grid md:grid-cols-3 gap-6 text-sm">
              <div class="space-y-3">
                <h3 class="font-semibold flex items-center gap-2">
                  <FileTextIcon class="h-4 w-4" />
                  Datoteka
                </h3>
                <div class="space-y-2 text-sm">
                  <div class="flex justify-between">
                    <span class="text-muted-foreground">Velikost:</span>
                    <Badge variant="secondary"
                      >{{ (template.file_size / 1024).toFixed(1) }} KB</Badge
                    >
                  </div>
                  <div class="flex justify-between">
                    <span class="text-muted-foreground">Hash:</span>
                    <code class="text-xs"
                      >{{ template.file_hash?.substring(0, 12) }}…</code
                    >
                  </div>
                  <div class="flex justify-between">
                    <span class="text-muted-foreground">Engine:</span>
                    <Badge variant="outline">{{ template.engine }}</Badge>
                  </div>
                </div>
                <Button size="sm" variant="outline" class="w-full" as-child>
                  <a :href="'/storage/' + template.file_path" target="_blank">
                    <DownloadIcon class="h-4 w-4 mr-2" />
                    Prenesi DOCX
                  </a>
                </Button>
              </div>
              <div class="space-y-3">
                <h3 class="font-semibold flex items-center gap-2">
                  <HashIcon class="h-4 w-4" />
                  Formatiranje
                </h3>
                <div class="space-y-2 text-sm">
                  <div class="flex justify-between">
                    <span class="text-muted-foreground">Datum:</span>
                    <code class="text-xs">{{
                      template.settings?.date_format || "d.m.Y"
                    }}</code>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-muted-foreground">Decimalna mesta:</span>
                    <span>{{ template.settings?.number_decimals ?? "-" }}</span>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-muted-foreground">Separators:</span>
                    <code class="text-xs">
                      {{ template.settings?.decimal_separator || "." }} /
                      {{ template.settings?.thousands_separator || " " }}
                    </code>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-muted-foreground">Valuta:</span>
                    <span class="text-xs">
                      {{ template.settings?.currency_symbol || "€" }} ({{
                        template.settings?.currency_position || "before"
                      }})
                    </span>
                  </div>
                </div>
              </div>
              <div class="space-y-3">
                <h3 class="font-semibold">Aktivnost</h3>
                <div class="space-y-2 text-sm">
                  <div class="flex justify-between">
                    <span class="text-muted-foreground">Akcija:</span>
                    <Badge variant="outline">{{ template.action?.name || "-" }}</Badge>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-muted-foreground">Odločitev:</span>
                    <Badge variant="outline">{{ template.decision?.name || "-" }}</Badge>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-muted-foreground">Fail unresolved:</span>
                    <Badge
                      :variant="
                        template.settings?.fail_on_unresolved
                          ? 'destructive'
                          : 'secondary'
                      "
                    >
                      {{ template.settings?.fail_on_unresolved ? "DA" : "NE" }}
                    </Badge>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card v-if="template.settings?.activity_note_template">
          <CardHeader>
            <CardTitle class="text-base">Predloga opombe aktivnosti</CardTitle>
          </CardHeader>
          <CardContent>
            <pre
              class="bg-muted p-3 rounded border text-xs leading-relaxed whitespace-pre-wrap font-mono"
              >{{ template.settings.activity_note_template }}</pre
            >
          </CardContent>
        </Card>

        <Card v-if="template.tokens?.length">
          <CardHeader>
            <div class="flex items-center justify-between">
              <div>
                <CardTitle class="text-base">Tokens</CardTitle>
                <CardDescription>{{ template.tokens.length }} tokenov</CardDescription>
              </div>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                @click="expandedTokens = !expandedTokens"
              >
                {{ expandedTokens ? "Skrij" : "Prikaži vse" }}
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div
              class="flex flex-wrap gap-1.5 overflow-auto"
              :class="!expandedTokens && 'max-h-32'"
            >
              <Badge
                v-for="t in template.tokens"
                :key="t"
                variant="secondary"
                class="font-mono text-xs"
              >
                {{ t }}
              </Badge>
            </div>
          </CardContent>
        </Card>
      </div>

      <aside class="w-full lg:w-72 space-y-6">
        <Card>
          <CardHeader>
            <CardTitle class="text-sm">Hitra dejanja</CardTitle>
          </CardHeader>
          <CardContent class="flex flex-col gap-2">
            <Button size="sm" as-child>
              <Link :href="route('admin.document-templates.edit', template.id)">
                <PencilIcon class="h-4 w-4 mr-2" />
                Uredi nastavitve
              </Link>
            </Button>
            <form @submit.prevent="toggleActive">
              <Button
                type="submit"
                size="sm"
                :variant="template.active ? 'destructive' : 'default'"
                :disabled="toggleForm.processing"
                class="w-full"
              >
                <PowerOffIcon v-if="template.active" class="h-4 w-4 mr-2" />
                <Power v-else class="h-4 w-4 mr-2" />
                {{ template.active ? "Deaktiviraj" : "Aktiviraj" }}
              </Button>
            </form>
            <form @submit.prevent="rescan">
              <Button
                type="submit"
                size="sm"
                variant="outline"
                :disabled="rescanForm.processing"
                class="w-full"
              >
                <RefreshCwIcon class="h-4 w-4 mr-2" />
                {{ rescanForm.processing ? "Pregledujem…" : "Ponovno preglej tokene" }}
              </Button>
            </form>
            <Button size="sm" variant="outline" as-child>
              <Link :href="route('admin.document-templates.index')">
                <ArrowLeftIcon class="h-4 w-4 mr-2" />
                Vse predloge
              </Link>
            </Button>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle class="text-sm">Opombe</CardTitle>
          </CardHeader>
          <CardContent class="text-sm text-muted-foreground">
            <p>
              Uporabi to stran za hiter pregled meta podatkov predloge ter njenih tokenov.
            </p>
          </CardContent>
        </Card>
      </aside>
    </div>
  </AdminLayout>
</template>

<script setup>
import { ref } from "vue";
import { Link, useForm } from "@inertiajs/vue3";
import AdminLayout from "@/Layouts/AdminLayout.vue";
import {
  FileTextIcon,
  Power,
  PowerOffIcon,
  PencilIcon,
  ArrowLeftIcon,
  RefreshCwIcon,
  DownloadIcon,
  HashIcon,
} from "lucide-vue-next";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import { Separator } from "@/Components/ui/separator";

const expandedTokens = ref(false);

const props = defineProps({
  template: Object,
});

const toggleForm = useForm({});
const rescanForm = useForm({});

function toggleActive() {
  toggleForm.post(route("admin.document-templates.toggle", props.template.id), {
    preserveScroll: true,
  });
}

function rescan() {
  rescanForm.post(route("admin.document-templates.rescan", props.template.id), {
    preserveScroll: true,
    only: ["template"],
  });
}
</script>
