<script setup>
import { computed, onMounted } from "vue";
import { usePage, Link } from "@inertiajs/vue3";
import Dropdown from "@/Components/Dropdown.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faBell } from "@fortawesome/free-solid-svg-icons";

const page = usePage();
const due = computed(
  () => page.props.notifications?.dueToday || { count: 0, items: [], date: null }
);

function fmtDate(d) {
  if (!d) return "";
  try {
    return new Date(d).toLocaleDateString("sl-SI");
  } catch {
    return String(d);
  }
}

function fmtEUR(value) {
  if (value === null || value === undefined) {
    return "—";
  }
  const num = typeof value === "string" ? Number(value) : value;
  if (Number.isNaN(num)) {
    return String(value);
  }
  // de-DE locale: dot thousands, comma decimals, trailing Euro symbol
  const formatted = new Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(num);
  // Replace non-breaking space with normal space for consistency
  return formatted.replace("\u00A0", " ");
}
onMounted(() => {
  console.log(due.value);
});
</script>

<template>
  <Dropdown
    align="right"
    width="72"
    :content-classes="['py-1', 'bg-white', 'max-h-96', 'overflow-auto']"
  >
    <template #trigger>
      <button
        type="button"
        class="relative inline-flex items-center justify-center w-9 h-9 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100"
        aria-label="Notifications"
      >
        <FontAwesomeIcon :icon="faBell" class="w-5 h-5" />
        <span
          v-if="due.count"
          class="absolute -top-1 -right-1 inline-flex items-center justify-center h-5 min-w-[1.25rem] px-1 rounded-full text-[11px] bg-red-600 text-white"
          >{{ due.count }}</span
        >
      </button>
    </template>

    <template #content>
      <div class="px-3 py-2 text-xs text-gray-400 border-b">Obljube zapadejo jutri</div>
      <!-- Scrollable content area with max height -->
      <div class="max-h-96 overflow-y-auto">
        <div v-if="!due.count" class="px-3 py-3 text-sm text-gray-500">
          Ni zapadlih aktivnosti danes.
        </div>
        <ul v-else class="divide-y">
          <li
            v-for="item in due.items"
            :key="item.id"
            class="px-3 py-2 text-sm flex items-start gap-2"
          >
            <div class="flex-1 min-w-0">
              <div class="font-medium text-gray-800 truncate">
                Pogodba:
                <Link
                  v-if="item.contract?.client_case?.uuid"
                  :href="
                    route('clientCase.show', {
                      client_case: item.contract.client_case.uuid,
                    })
                  "
                  class="text-indigo-600 hover:text-indigo-700 hover:underline"
                >
                  {{ item.contract?.reference || "—" }}
                </Link>
                <span v-else>{{ item.contract?.reference || "—" }}</span>
              </div>
              <div class="text-gray-600 truncate">
                {{ fmtEUR(item.contract?.account?.balance_amount) }}
              </div>
            </div>
            <div class="text-xs text-gray-500 whitespace-nowrap">
              {{ fmtDate(item.due_date) }}
            </div>
          </li>
        </ul>
      </div>
    </template>
  </Dropdown>
</template>
