<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Head, Link } from "@inertiajs/vue3";
import { ArrowLeftIcon, MessageSquareIcon, InfoIcon } 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 props = defineProps({ log: { type: Object, required: true } });

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

function getStatusClass(status) {
  if (status === "queued") return "bg-amber-100 text-amber-800 hover:bg-amber-100";
  if (status === "sent") return "bg-sky-100 text-sky-800 hover:bg-sky-100";
  if (status === "delivered") return "bg-green-100 text-green-800 hover:bg-green-100";
  if (status === "failed") return "bg-red-100 text-red-800 hover:bg-red-100";
  return "";
}
</script>

<template>
  <AdminLayout title="SMS log">
    <Head title="SMS log" />

    <Card class="mb-6">
      <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"
            >
              <MessageSquareIcon class="h-5 w-5" />
            </div>
            <div>
              <CardTitle>SMS log</CardTitle>
              <CardDescription>#{{ log.id }}</CardDescription>
            </div>
          </div>
          <Button variant="outline" size="sm" as-child>
            <Link :href="route('admin.sms-logs.index')">
              <ArrowLeftIcon class="h-4 w-4 mr-2" />
              Nazaj
            </Link>
          </Button>
        </div>
      </CardHeader>
    </Card>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="lg:col-span-2 space-y-6">
        <Card>
          <CardHeader>
            <CardTitle class="text-base">Sporočilo</CardTitle>
          </CardHeader>
          <CardContent>
            <pre class="text-sm whitespace-pre-wrap bg-muted p-4 rounded-md">{{
              log.message
            }}</pre>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle class="text-base">Meta podatki</CardTitle>
          </CardHeader>
          <CardContent>
            <pre class="text-xs whitespace-pre-wrap bg-muted p-4 rounded-md font-mono">{{
              JSON.stringify(log.meta || {}, null, 2)
            }}</pre>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <div class="flex items-center gap-2">
            <InfoIcon class="h-4 w-4" />
            <CardTitle class="text-base">Informacije</CardTitle>
          </div>
        </CardHeader>
        <CardContent class="space-y-4">
          <div class="space-y-3">
            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">Prejemnik</div>
              <div class="text-sm font-medium">{{ log.to_number }}</div>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">Sender</div>
              <div class="text-sm">{{ log.sender || "—" }}</div>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">Profil</div>
              <div class="text-sm">{{ log.profile?.name || "—" }}</div>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">Predloga</div>
              <Badge v-if="log.template" variant="outline">{{
                log.template.slug || log.template.name
              }}</Badge>
              <span v-else class="text-sm text-muted-foreground">—</span>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">Status</div>
              <Badge
                :variant="getStatusVariant(log.status)"
                :class="getStatusClass(log.status)"
              >
                {{ log.status }}
              </Badge>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">Cena</div>
              <div class="text-sm">
                {{
                  log.cost != null
                    ? Number(log.cost).toFixed(2) + " " + (log.currency || "")
                    : "—"
                }}
              </div>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">
                Provider ID
              </div>
              <div class="text-sm font-mono text-xs break-all">
                {{ log.provider_message_id || "—" }}
              </div>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">Čas</div>
              <div class="text-sm">{{ new Date(log.created_at).toLocaleString() }}</div>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">Poslano</div>
              <div class="text-sm">
                {{ log.sent_at ? new Date(log.sent_at).toLocaleString() : "—" }}
              </div>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">
                Dostavljeno
              </div>
              <div class="text-sm">
                {{ log.delivered_at ? new Date(log.delivered_at).toLocaleString() : "—" }}
              </div>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">Neuspešno</div>
              <div class="text-sm">
                {{ log.failed_at ? new Date(log.failed_at).toLocaleString() : "—" }}
              </div>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">
                Napaka (koda)
              </div>
              <div class="text-sm">{{ log.error_code || "—" }}</div>
            </div>

            <Separator />

            <div>
              <div class="text-xs font-medium text-muted-foreground mb-1">
                Napaka (opis)
              </div>
              <div class="text-sm text-destructive">{{ log.error_message || "—" }}</div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  </AdminLayout>
</template>

<style scoped></style>
