<script setup>
import { computed, onMounted } from "vue";
import { Link } from "@inertiajs/vue3";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
import Badge from "@/Components/ui/badge/Badge.vue";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/Components/ui/item";
import { BadgeCheckIcon, ChevronRightIcon, Radar, Radio, RssIcon } from "lucide-vue-next";
import { ScrollArea } from "@/Components/ui/scroll-area";

const props = defineProps({
  activities: Array,
  systemHealth: Object,
});

function buildRelated(a) {
  const links = [];
  if (a.client_case_uuid || a.client_case_id) {
    const caseParam = a.client_case_uuid || a.client_case_id;
    try {
      const href = String(route("clientCase.show", { client_case: caseParam }));
      links.push({
        type: "client_case",
        label: "Primer",
        href,
      });
    } catch (e) {
      links.push({
        type: "client_case",
        label: "Primer",
        href: `/client-cases/${caseParam}`,
      });
    }
  }
  return links;
}

onMounted(() => {
  console.log((props.activities || []).map((a) => ({ ...a, links: buildRelated(a) })));
});

const activityItems = computed(() =>
  (props.activities || []).map((a) => ({ ...a, links: buildRelated(a) }))
);
</script>

<template>
  <AppCard
    title=""
    padding="none"
    class="p-0! gap-2"
    header-class="py-3! px-4 border-b text-muted-foreground gap-0"
    body-class="flex flex-col gap-4"
  >
    <template #header>
      <div class="flex items-center gap-2">
        <Radio size="20" />
        <CardTitle class="uppercase"> Aktivnost </CardTitle>
      </div>
    </template>
    <ScrollArea class="h-96 w-full">
      <div class="flex flex-col gap-1 px-1" v-if="activities">
        <Item v-for="a in activityItems" :key="a.id" variant="outline" size="sm" as-child>
          <a :href="a.links[0].href ?? ''">
            <ItemMedia>
              <span class="w-2 h-2 mt-2 rounded-full bg-primary" />
            </ItemMedia>
            <ItemContent>
              <ItemTitle>{{ a.note || "Dogodek" }}</ItemTitle>
              <ItemDescription>
                {{ new Date(a.created_at).toLocaleString() }}
              </ItemDescription>
            </ItemContent>
            <ItemActions>
              <ChevronRightIcon class="size-4" />
            </ItemActions>
          </a>
        </Item>
        <div v-if="!activities?.length" class="py-4 text-xs text-gray-500 text-center">
          Ni zabeleženih aktivnosti.
        </div>
      </div>
      <ul v-else class="animate-pulse space-y-2">
        <li v-for="n in 5" :key="n" class="h-5 bg-gray-100 rounded" />
      </ul>
    </ScrollArea>

    <div class="flex justify-between items-center text-[11px] p-2">
      <Link
        :href="route('dashboard')"
        class="inline-flex items-center gap-1 font-medium text-primary hover:underline"
        >Več kmalu <FontAwesomeIcon :icon="faArrowUpRightFromSquare" class="w-3 h-3"
      /></Link>
      <span v-if="systemHealth" class="text-gray-400"
        >Posodobljeno {{ new Date(systemHealth.generated_at).toLocaleTimeString() }}</span
      >
    </div>
  </AppCard>
</template>
