<script setup>
import SimpleKpiCard from "./Partials/SimpleKpiCard.vue";
import ActivityFeed from "./Partials/ActivityFeed.vue";
import SmsOverview from "./Partials/SmsOverview.vue";
import CompletedFieldJobsTrend from "./Partials/CompletedFieldJobsTrend.vue";
import FieldJobsAssignedToday from "./Partials/FieldJobsAssignedToday.vue";
import { Users, FileText, Banknote, CalendarCheck } from "lucide-vue-next";
import AppLayout from "@/Layouts/AppLayout.vue";

const props = defineProps({
  kpis: Object,
  activities: Array,
  trends: Object,
  systemHealth: Object,
  staleCases: Array,
  fieldJobsAssignedToday: Array,
  importsInProgress: Array,
  activeTemplates: Array,
  smsStats: Array,
});

// Format balance as currency
const formatBalance = (amount) => {
  if (amount == null) return "—";
  return new Intl.NumberFormat("sl-SI", {
    style: "currency",
    currency: "EUR",
    minimumFractionDigits: 2,
  }).format(amount);
};
</script>

<template>
  <AppLayout title="Nadzorna plošča">
    <template #header> </template>

    <div class="max-w-7xl mx-auto space-y-10 py-6">
      <!-- KPI Cards Grid -->
      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <SimpleKpiCard
          label="Aktivni stranke"
          :value="kpis?.active_clients"
          :icon="Users"
          icon-bg="bg-chart-2/10"
          icon-color="text-chart-2"
        />
        <SimpleKpiCard
          label="Aktivne pogodbe"
          :value="kpis?.active_contracts"
          :icon="FileText"
          icon-bg="bg-chart-2/10"
          icon-color="text-chart-2"
        />
        <SimpleKpiCard
          label="Skupno stanje"
          :value="formatBalance(kpis?.total_balance)"
          :icon="Banknote"
          icon-bg="bg-chart-2/10"
          icon-color="text-chart-2"
        />
        <SimpleKpiCard
          label="Aktivne obljube"
          :value="kpis?.active_promises"
          :icon="CalendarCheck"
          icon-bg="bg-chart-2/10"
          icon-color="text-chart-2"
        />
      </div>

      <div class="grid lg:grid-cols-3 gap-8">
        <!-- Activity Feed -->
        <div class="lg:col-span-1 space-y-4">
          <ActivityFeed :activities="activities" :systemHealth="systemHealth" />
          <!-- Field Jobs Assigned Today -->
          <FieldJobsAssignedToday :fieldJobsAssignedToday="fieldJobsAssignedToday" />
        </div>

        <!-- Right side panels -->
        <div class="lg:col-span-2 space-y-8">
          <!-- SMS Overview -->
          <SmsOverview :smsStats="smsStats" />

          <!-- Completed Field Jobs Trend (7 dni) -->
          <CompletedFieldJobsTrend :trends="trends" />
        </div>
      </div>
    </div>
  </AppLayout>
</template>
