<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Head, Link } from "@inertiajs/vue3";
import { PlusIcon, PencilIcon, Trash2Icon, MailIcon } from 'lucide-vue-next';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { Button } from '@/Components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
import { Badge } from '@/Components/ui/badge';

const props = defineProps({
  templates: { type: Array, default: () => [] },
});

function destroyTemplate(tpl) {
  if (!confirm(`Delete template "${tpl.name}"?`)) return;
  window.axios
    .delete(route("admin.email-templates.destroy", tpl.id))
    .then(() => window.location.reload());
}
</script>

<template>
  <AdminLayout title="Email predloge">
    <Head title="Email predloge" />

    <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">
              <MailIcon class="h-5 w-5" />
            </div>
            <div>
              <CardTitle>Email predloge</CardTitle>
              <CardDescription>
                Upravljanje predlog za e-poštna sporočila
              </CardDescription>
            </div>
          </div>
          <Button as-child>
            <Link :href="route('admin.email-templates.create')">
              <PlusIcon class="h-4 w-4 mr-2" />
              Nova predloga
            </Link>
          </Button>
        </div>
      </CardHeader>
      <CardContent class="p-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Ime</TableHead>
              <TableHead>Ključ</TableHead>
              <TableHead>Entitete</TableHead>
              <TableHead>Status</TableHead>
              <TableHead class="text-right">Akcije</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-for="t in templates" :key="t.id">
              <TableCell class="font-medium">{{ t.name }}</TableCell>
              <TableCell>
                <code class="text-xs bg-muted px-1.5 py-0.5 rounded">{{ t.key }}</code>
              </TableCell>
              <TableCell>
                <div class="flex flex-wrap gap-1">
                  <Badge v-for="entity in (t.entity_types || [])"
                    :key="entity"
                    variant="outline"
                    class="text-xs"
                  >
                    {{ entity }}
                  </Badge>
                </div>
              </TableCell>
              <TableCell>
                <Badge :variant="t.active ? 'default' : 'secondary'">
                  {{ t.active ? 'Aktivno' : 'Neaktivno' }}
                </Badge>
              </TableCell>
              <TableCell class="text-right">
                <div class="flex items-center justify-end gap-2">
                  <Button size="sm" variant="outline" as-child>
                    <Link :href="route('admin.email-templates.edit', t.id)">
                      <PencilIcon class="h-4 w-4 mr-1" />
                      Uredi
                    </Link>
                  </Button>
                  <Button
                    size="sm"
                    variant="destructive"
                    @click="destroyTemplate(t)"
                  >
                    <Trash2Icon class="h-4 w-4 mr-1" />
                    Izbriši
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  </AdminLayout>
</template>
