<template>
  <AdminLayout title="Uredi predlogo">
    <div class="mb-6 flex flex-col lg:flex-row lg:items-start gap-6">
      <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" variant="outline" as-child>
                  <Link :href="route('admin.document-templates.show', template.id)">
                    <EyeIcon class="h-4 w-4 mr-2" />
                    Ogled
                  </Link>
                </Button>
              </div>
            </div>
          </CardHeader>
        </Card>

        <form @submit.prevent="submit" class="space-y-6">
          <!-- Osnovno -->
          <Card>
            <CardHeader>
              <div class="flex items-center gap-2">
                <Settings2Icon class="h-4 w-4" />
                <CardTitle class="text-base">Osnovne nastavitve</CardTitle>
              </div>
            </CardHeader>
            <CardContent class="space-y-4">
              <div class="grid md:grid-cols-2 gap-4">
                <div class="space-y-2">
                  <Label for="output_filename_pattern">Izlazna datoteka (pattern)</Label>
                  <Input
                    id="output_filename_pattern"
                    v-model="form.output_filename_pattern"
                    placeholder="POVRACILO_{contract.reference}"
                    class="font-mono text-sm"
                  />
                  <p class="text-xs text-muted-foreground">
                    Tokens npr. {contract.reference}
                  </p>
                </div>
                <div class="space-y-2">
                  <Label for="date_format">Privzeti format datuma</Label>
                  <Input
                    id="date_format"
                    v-model="form.date_format"
                    placeholder="d.m.Y"
                    class="font-mono text-sm"
                  />
                </div>
              </div>
              <div class="flex items-center gap-2">
                <Checkbox
                  id="fail_on_unresolved"
                  :default-value="form.fail_on_unresolved"
                  @update:model-value="(val) => (form.fail_on_unresolved = val)"
                />
                <Label for="fail_on_unresolved" class="cursor-pointer font-normal">
                  Prekini če token ni rešen (fail on unresolved)
                </Label>
              </div>
            </CardContent>
          </Card>

          <!-- Formatiranje -->
          <Card>
            <CardHeader>
              <div class="flex items-center gap-2">
                <FileTextIcon class="h-4 w-4" />
                <CardTitle class="text-base">Formatiranje</CardTitle>
              </div>
            </CardHeader>
            <CardContent>
              <div class="grid md:grid-cols-3 gap-4">
                <div class="space-y-2">
                  <Label for="number_decimals">Decimalna mesta</Label>
                  <Input
                    id="number_decimals"
                    v-model.number="form.number_decimals"
                    type="number"
                    min="0"
                    max="6"
                  />
                </div>
                <div class="space-y-2">
                  <Label for="decimal_separator">Decimalni separator</Label>
                  <Input
                    id="decimal_separator"
                    v-model="form.decimal_separator"
                    maxlength="2"
                  />
                </div>
                <div class="space-y-2">
                  <Label for="thousands_separator">Tisočice separator</Label>
                  <Input
                    id="thousands_separator"
                    v-model="form.thousands_separator"
                    maxlength="2"
                  />
                </div>
                <div class="space-y-2">
                  <Label for="currency_symbol">Znak valute</Label>
                  <Input
                    id="currency_symbol"
                    v-model="form.currency_symbol"
                    maxlength="8"
                  />
                </div>
                <div class="space-y-2">
                  <Label for="currency_position">Pozicija valute</Label>
                  <Select v-model="form.currency_position">
                    <SelectTrigger id="currency_position">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem :value="null">(privzeto)</SelectItem>
                      <SelectItem value="before">Pred</SelectItem>
                      <SelectItem value="after">Za</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div class="flex items-center gap-2 pt-8">
                  <Checkbox
                    id="currency_space"
                    :default-value="form.currency_space"
                    @update:model-value="(val) => (form.currency_space = val)"
                  />
                  <Label for="currency_space" class="cursor-pointer font-normal">
                    Presledek pred/za valuto
                  </Label>
                </div>
              </div>
            </CardContent>
          </Card>

          <!-- Aktivnost -->
          <Card>
            <CardHeader>
              <div class="flex items-center gap-2">
                <ActivityIcon class="h-4 w-4" />
                <CardTitle class="text-base">Aktivnost</CardTitle>
              </div>
            </CardHeader>
            <CardContent class="space-y-4">
              <div class="grid md:grid-cols-2 gap-4">
                <div class="space-y-2">
                  <Label for="action_id">Akcija</Label>
                  <Select v-model="form.action_id" @update:model-value="handleActionChange">
                    <SelectTrigger id="action_id">
                      <SelectValue placeholder="(brez)" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem :value="null">(brez)</SelectItem>
                      <SelectItem v-for="a in actions" :key="a.id" :value="a.id">
                        {{ a.name }}
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div class="space-y-2">
                  <Label for="decision_id">Odločitev</Label>
                  <Select v-model="form.decision_id" :disabled="!currentActionDecisions.length">
                    <SelectTrigger id="decision_id">
                      <SelectValue placeholder="(brez)" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem :value="null">(brez)</SelectItem>
                      <SelectItem v-for="d in currentActionDecisions" :key="d.id" :value="d.id">
                        {{ d.name }}
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div class="space-y-2 md:col-span-2">
                  <Label for="activity_note_template">Predloga opombe aktivnosti</Label>
                  <Textarea
                    id="activity_note_template"
                    v-model="form.activity_note_template"
                    rows="3"
                    placeholder="Besedilo aktivnosti..."
                  />
                  <p class="text-xs text-muted-foreground">
                    Tokeni npr. {contract.reference}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          <!-- Custom tokens defaults -->
          <Card>
            <CardHeader>
              <div class="flex items-center gap-2">
                <CodeIcon class="h-4 w-4" />
                <CardTitle class="text-base">Custom tokens (privzete vrednosti)</CardTitle>
              </div>
            </CardHeader>
            <CardContent class="space-y-4">
              <Button type="button" variant="outline" size="sm" @click="addCustomDefault">
                Dodaj vrstico
              </Button>
              <div class="grid grid-cols-1 gap-3">
                <div
                  v-for="(row, idx) in customRows"
                  :key="idx"
                  class="grid grid-cols-12 items-start gap-2"
                >
                  <div class="col-span-4 space-y-1">
                    <Input
                      v-model="row.key"
                      placeholder="custom ključ (npr. order_id)"
                      class="font-mono text-sm"
                    />
                  </div>
                  <div class="col-span-5 space-y-1">
                    <Textarea
                      v-if="row.type === 'text'"
                      v-model="row.value"
                      rows="3"
                      placeholder="privzeta vrednost"
                    />
                    <Input
                      v-else
                      v-model="row.value"
                      placeholder="privzeta vrednost"
                    />
                  </div>
                  <div class="col-span-2 space-y-1">
                    <Select v-model="row.type">
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="string">string</SelectItem>
                        <SelectItem value="number">number</SelectItem>
                        <SelectItem value="date">date</SelectItem>
                        <SelectItem value="text">text</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div class="col-span-1 flex items-center pt-2">
                    <Button type="button" variant="ghost" size="icon" @click="removeCustomDefault(idx)">
                      <XIcon class="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>
              <p class="text-xs text-muted-foreground">
                Uporabite v predlogi kot <code class="px-1 py-0.5 bg-muted rounded text-xs" v-pre>{{custom.your_key}}</code>. Manjkajoče vrednosti se privzeto izpraznijo.
              </p>
            </CardContent>
          </Card>

          <div class="flex items-center gap-3 pt-2">
            <Button type="submit" :disabled="form.processing">
              <SaveIcon class="h-4 w-4 mr-2" />
              {{ form.processing ? "Shranjevanje…" : "Shrani spremembe" }}
            </Button>
            <Button variant="outline" as-child>
              <Link :href="route('admin.document-templates.show', template.id)">
                <XIcon class="h-4 w-4 mr-2" />
                Prekliči
              </Link>
            </Button>
          </div>
        </form>
      </div>

      <!-- Side meta panel -->
      <aside class="w-full lg:w-72 space-y-6">
        <Card>
          <CardHeader>
            <CardTitle class="text-sm">Meta podatki</CardTitle>
          </CardHeader>
          <CardContent class="space-y-4">
            <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>
            <Separator />
            <Button variant="outline" size="sm" class="w-full" as-child>
              <a :href="'/storage/' + template.file_path" target="_blank">
                Prenesi izvorni DOCX
              </a>
            </Button>
          </CardContent>
        </Card>
        <Card v-if="template.tokens?.length">
          <CardHeader>
            <CardTitle class="text-sm">Tokens</CardTitle>
            <CardDescription>{{ template.tokens.length }} tokenov</CardDescription>
          </CardHeader>
          <CardContent>
            <div class="flex flex-wrap gap-1.5 max-h-48 overflow-auto">
              <Badge
                v-for="t in template.tokens"
                :key="t"
                variant="secondary"
                class="font-mono text-xs"
              >
                {{ t }}
              </Badge>
            </div>
          </CardContent>
        </Card>
      </aside>
    </div>
  </AdminLayout>
</template>

<script setup>
import { computed, reactive } from "vue";
import { useForm, Link, router } from "@inertiajs/vue3";
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Settings2Icon, FileTextIcon, ActivityIcon, CodeIcon, SaveIcon, XIcon, EyeIcon, Power, PowerOffIcon } from "lucide-vue-next";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
import { Checkbox } from "@/Components/ui/checkbox";
import { Badge } from "@/Components/ui/badge";
import { Separator } from "@/Components/ui/separator";

// Button style utility classes
const btnBase =
  "inline-flex items-center justify-center gap-1 rounded-md border text-xs font-medium px-3 py-1.5 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed";
const btnPrimary = "bg-indigo-600 border-indigo-600 text-white hover:bg-indigo-500";
const btnOutline = "bg-white text-gray-700 border-gray-300 hover:bg-gray-50";
const btnWarn = "bg-amber-500 border-amber-500 text-white hover:bg-amber-400";

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

const form = useForm({
  output_filename_pattern: props.template.output_filename_pattern || "",
  date_format: props.template.date_format || "",
  fail_on_unresolved: props.template.fail_on_unresolved ?? false,
  number_decimals: props.template.formatting_options?.number_decimals ?? 2,
  decimal_separator: props.template.formatting_options?.decimal_separator ?? ",",
  thousands_separator: props.template.formatting_options?.thousands_separator ?? ".",
  currency_symbol: props.template.formatting_options?.currency_symbol ?? "€",
  currency_position: props.template.formatting_options?.currency_position ?? "after",
  currency_space: props.template.formatting_options?.currency_space ?? true,
  action_id: props.template.action_id ?? null,
  decision_id: props.template.decision_id ?? null,
  activity_note_template: props.template.activity_note_template || "",
  // meta will include custom_defaults on submit
  meta: props.template.meta || {},
});

const toggleForm = useForm({});

const currentActionDecisions = computed(() => {
  if (!form.action_id) {
    return [];
  }
  const a = props.actions.find((a) => a.id === form.action_id);
  return a ? a.decisions : [];
});

function handleActionChange() {
  if (!currentActionDecisions.value.some((d) => d.id === form.decision_id)) {
    form.decision_id = null;
  }
}

function submit() {
  // Build meta.custom_defaults object from rows
  const entries = customRows
    .filter((r) => (r.key || "").trim() !== "")
    .reduce((acc, r) => {
      acc[r.key.trim()] = r.value ?? "";
      return acc;
    }, {});
  const types = customRows
    .filter((r) => (r.key || "").trim() !== "")
    .reduce((acc, r) => {
      acc[r.key.trim()] = r.type || 'string';
      return acc;
    }, {});
  form.meta = Object.assign({}, form.meta || {}, { custom_defaults: entries, custom_default_types: types });
  form.put(route("admin.document-templates.settings.update", props.template.id));
}

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

// Custom defaults rows state
const baseDefaults = (props.template.meta && props.template.meta.custom_defaults) || {};
const baseTypes = (props.template.meta && props.template.meta.custom_default_types) || {};
// Gather detected custom tokens from template.tokens
const detectedCustoms = Array.isArray(props.template.tokens)
  ? props.template.tokens.filter((t) => typeof t === 'string' && t.startsWith('custom.')).map((t) => t.replace(/^custom\./, ''))
  : [];
// Build a union of keys from defaults, types, and detected tokens
const allKeysSet = new Set([
  ...Object.keys(baseDefaults || {}),
  ...Object.keys(baseTypes || {}),
  ...detectedCustoms,
]);
const allKeys = Array.from(allKeysSet);
const customRows = reactive(
  allKeys.length
    ? allKeys.map((k) => ({ key: k, value: baseDefaults[k] ?? '', type: baseTypes[k] || 'string' }))
    : [{ key: '', value: '', type: 'string' }]
);

function addCustomDefault() {
  customRows.push({ key: "", value: "", type: 'string' });
}

function removeCustomDefault(idx) {
  customRows.splice(idx, 1);
  if (!customRows.length) customRows.push({ key: "", value: "", type: 'string' });
}
</script>
