<script setup>
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/Components/ui/card";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/Components/ui/item";
import {
  MessageSquare,
  Send,
  CheckCircle,
  XCircle,
  MessageCircle,
  Smartphone,
} from "lucide-vue-next";

const props = defineProps({
  smsStats: { type: Array, required: false },
});
</script>

<template>
  <AppCard
    title=""
    padding="none"
    class="p-0! gap-2"
    header-class="py-3! px-4 border-b gap-0 text-muted-foreground"
    body-class=""
  >
    <template #header>
      <div class="flex items-center gap-2">
        <Smartphone size="18" />
        <CardTitle class="uppercase">SMS stanje </CardTitle>
      </div>
    </template>

    <div v-if="smsStats?.length">
      <div v-for="p in smsStats" :key="p.id" class="flex flex-col rounded-lg bg-card">
        <Item variant="outline" size="lg" class="rounded-t-none border-t-0">
          <ItemContent class="gap-0">
            <ItemTitle
              class="w-full flex flex-row items-center justify-between border-b py-2 px-4"
            >
              <div class="flex items-center gap-2">
                <span class="font-semibold text-base">{{ p.name }}</span>
                <span
                  class="px-2 py-0.5 text-xs font-medium rounded-full"
                  :class="
                    p.active
                      ? 'bg-emerald-100 text-emerald-700'
                      : 'bg-gray-100 text-gray-500'
                  "
                >
                  {{ p.active ? "Aktiven" : "Neaktiven" }}
                </span>
              </div>
              <div class="text-right flex-1">
                <div class="text-xs text-muted-foreground">Bilanca</div>
                <div class="text-xl font-bold">{{ p.balance ?? "—" }}</div>
              </div>
            </ItemTitle>
            <!-- Stats grid -->
            <ItemDescription>
              <div class="grid grid-cols-4 divide-x">
                <div class="flex flex-row items-center justify-between p-3">
                  <div class="flex flex-col gap-2">
                    <span class="text-muted-foreground text-xs">Skupaj</span>
                    <span class="text-xl font-bold">{{ p.today?.total ?? 0 }}</span>
                  </div>
                  <MessageSquare class="h-5 w-5 text-gray-500" />
                </div>
                <div class="flex flex-row items-center justify-between p-3">
                  <div class="flex flex-col gap-2">
                    <span class="text-muted-foreground text-xs">Poslano</span>
                    <span class="text-xl font-bold">{{ p.today?.sent ?? 0 }}</span>
                  </div>
                  <Send class="h-5 w-5 text-sky-600" />
                </div>
                <div class="flex flex-row items-center justify-between p-3">
                  <div class="flex flex-col gap-2">
                    <span class="text-muted-foreground text-xs">Delivered</span>
                    <span class="text-xl font-bold">{{ p.today?.delivered ?? 0 }}</span>
                  </div>
                  <CheckCircle class="h-5 w-5 text-emerald-600" />
                </div>
                <div class="flex flex-row items-center justify-between p-3">
                  <div class="flex flex-col gap-2">
                    <span class="text-muted-foreground text-xs">Failed</span>
                    <span class="text-xl font-bold">{{ p.today?.failed ?? 0 }}</span>
                  </div>
                  <XCircle class="h-5 w-5 text-rose-600" />
                </div>
              </div>
            </ItemDescription>
          </ItemContent>
        </Item>
      </div>
    </div>
    <div v-else class="text-sm text-gray-500 p-4">Ni podatkov o SMS.</div>
  </AppCard>
</template>
