<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Head, Link, router } from "@inertiajs/vue3";
import { ref } from "vue";
import { MailIcon, FilterIcon, ExternalLinkIcon } 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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";
import { Badge } from "@/Components/ui/badge";
import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
import AppCard from "@/Components/app/ui/card/AppCard.vue";

const props = defineProps({
  logs: Object,
  templates: Array,
  filters: Object,
});

const form = ref({
  status: props.filters?.status || "",
  to: props.filters?.to || "",
  subject: props.filters?.subject || "",
  template_id: props.filters?.template_id || "",
  date_from: props.filters?.date_from || "",
  date_to: props.filters?.date_to || "",
});

function applyFilters() {
  router.get(
    route("admin.email-logs.index"),
    {
      ...form.value,
    },
    { preserveState: true, preserveScroll: true }
  );
}

function getStatusVariant(status) {
  if (status === "sent") return "default";
  if (status === "queued" || status === "sending") return "secondary";
  if (status === "failed") return "destructive";
  return "outline";
}

const columns = [
  {
    key: "created_at",
    label: "Datum",
    sortable: false,
  },
  {
    key: "status",
    label: "Status",
    sortable: false,
  },
  {
    key: "to_email",
    label: "Prejemnik",
    sortable: false,
  },
  {
    key: "subject",
    label: "Zadeva",
    sortable: false,
  },
  {
    key: "template",
    label: "Predloga",
    sortable: false,
  },
  {
    key: "duration_ms",
    label: "Trajanje",
    sortable: false,
  },
  {
    key: "actions",
    label: "Dejanja",
    sortable: false,
    align: "right",
  },
];
</script>

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

    <div class="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"
              >
                <MailIcon class="h-5 w-5" />
              </div>
              <div>
                <CardTitle>Email Logs</CardTitle>
                <CardDescription>
                  Pregled vseh poslanih in čakajočih e-poštnih sporočil
                </CardDescription>
              </div>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <form @submit.prevent="applyFilters" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4">
              <div class="space-y-2">
                <Label for="status">Status</Label>
                <Select v-model="form.status">
                  <SelectTrigger id="status">
                    <SelectValue placeholder="All statuses" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem :value="null">All statuses</SelectItem>
                    <SelectItem value="queued">Queued</SelectItem>
                    <SelectItem value="sending">Sending</SelectItem>
                    <SelectItem value="sent">Sent</SelectItem>
                    <SelectItem value="failed">Failed</SelectItem>
                    <SelectItem value="bounced">Bounced</SelectItem>
                    <SelectItem value="deferred">Deferred</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div class="space-y-2">
                <Label for="to">To email</Label>
                <Input id="to" v-model="form.to" placeholder="prejemnik@email.com" />
              </div>
              <div class="space-y-2">
                <Label for="subject">Subject</Label>
                <Input
                  id="subject"
                  v-model="form.subject"
                  placeholder="Iskanje po zadevi"
                />
              </div>
              <div class="space-y-2">
                <Label for="template">Template</Label>
                <Select v-model="form.template_id">
                  <SelectTrigger id="template">
                    <SelectValue placeholder="All templates" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem :value="null">All templates</SelectItem>
                    <SelectItem v-for="t in templates" :key="t.id" :value="t.id">{{
                      t.name
                    }}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div class="space-y-2">
                <Label for="date_from">Od datuma</Label>
                <Input id="date_from" v-model="form.date_from" type="date" />
              </div>
              <div class="space-y-2">
                <Label for="date_to">Do datuma</Label>
                <Input id="date_to" v-model="form.date_to" type="date" />
              </div>
            </div>
            <Button type="submit" size="sm">
              <FilterIcon class="h-4 w-4 mr-2" />
              Filtriraj
            </Button>
          </form>
        </CardContent>
      </Card>

      <AppCard
        title=""
        padding="none"
        class="p-0! gap-0"
        header-class="py-3! px-4 gap-0 text-muted-foreground"
        body-class=""
      >
        <template #header>
          <div class="flex items-center gap-2">
            <MailIcon size="18" />
            <CardTitle class="uppercase">Uvozi</CardTitle>
          </div>
        </template>
        <DataTableNew2
          :columns="columns"
          :data="logs.data"
          :meta="logs"
          :show-toolbar="false"
          :show-pagination="true"
          route-name="admin.email-logs.index"
          :preserve-state="true"
          :preserve-scroll="true"
          empty-text="Ni e-poštnih dnevnikov"
          empty-description="Začnite z ustvarjanjem e-poštnih sporočil"
        >
          <template #cell-created_at="{ value }">
            <div class="whitespace-nowrap text-sm">
              {{ new Date(value).toLocaleString() }}
            </div>
          </template>

          <template #cell-status="{ value }">
            <Badge :variant="getStatusVariant(value)">
              {{ value }}
            </Badge>
          </template>

          <template #cell-to_email="{ row }">
            <div class="max-w-55 truncate">
              {{
                row.to_email ||
                (Array.isArray(row.to_recipients) && row.to_recipients.length
                  ? row.to_recipients.join(", ")
                  : "-")
              }}
            </div>
          </template>

          <template #cell-subject="{ value }">
            <div class="max-w-[320px] truncate">{{ value }}</div>
          </template>

          <template #cell-template="{ row }">
            <div class="max-w-55 truncate">{{ row.template?.name || "-" }}</div>
          </template>

          <template #cell-duration_ms="{ value }">
            <span v-if="value" class="text-xs text-muted-foreground">
              {{ value }} ms
            </span>
            <span v-else class="text-muted-foreground">-</span>
          </template>

          <template #cell-actions="{ row }">
            <Button size="sm" variant="ghost" as-child>
              <Link :href="route('admin.email-logs.show', row.id)">
                <ExternalLinkIcon class="h-4 w-4" />
              </Link>
            </Button>
          </template>
        </DataTableNew2>
      </AppCard>
    </div>
  </AdminLayout>
</template>
