<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import SectionTitle from "@/Components/SectionTitle.vue";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
import { Link, router } from "@inertiajs/vue3";
import { ref, computed, watch } from "vue";
import Dropdown from "@/Components/Dropdown.vue";

const props = defineProps({
  activities: { type: Object, required: true },
  today: { type: String, required: true },
  // Optional: full list of clients with unread items to populate filter dropdown
  clients: { type: Array, default: () => [] },
});

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);
  const formatted = new Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(num);
  return formatted.replace("\u00A0", " ");
}

// --- Client filter (like Segments/Show.vue) ---
const urlParams = new URLSearchParams(window.location.search);
const initialClient = urlParams.get("client") || urlParams.get("client_id") || "";
const selectedClient = ref(initialClient);

const clientOptions = computed(() => {
  // Prefer server-provided clients list; fallback to deriving from rows
  const list =
    Array.isArray(props.clients) && props.clients.length
      ? props.clients
      : (Array.isArray(props.activities?.data) ? props.activities.data : [])
          .map((row) => {
            const client = row.contract?.client_case?.client || row.client_case?.client;
            if (!client?.uuid) return null;
            return {
              value: client.uuid,
              label: client.person?.full_name || "(neznana stranka)",
            };
          })
          .filter(Boolean)
          .reduce((acc, cur) => {
            if (!acc.find((x) => x.value === cur.value)) acc.push(cur);
            return acc;
          }, []);
  return list.sort((a, b) => (a.label || "").localeCompare(b.label || ""));
});

watch(selectedClient, (val) => {
  const query = {};
  if (val) query.client = val;
  router.get(route("notifications.unread"), query, {
    preserveState: true,
    preserveScroll: true,
    only: ["activities"],
    replace: true,
  });
});

const selectedRows = ref([]);

function toggleSelectAll() {
  if (selectedRows.value.length === (props.activities.data?.length || 0)) {
    selectedRows.value = [];
  } else {
    selectedRows.value = (props.activities.data || []).map((row) => row.id);
  }
}

function toggleRowSelection(id) {
  const idx = selectedRows.value.indexOf(id);
  if (idx > -1) {
    selectedRows.value.splice(idx, 1);
  } else {
    selectedRows.value.push(id);
  }
}

function isRowSelected(id) {
  return selectedRows.value.includes(id);
}

function isAllSelected() {
  return (
    (props.activities.data?.length || 0) > 0 &&
    selectedRows.value.length === (props.activities.data?.length || 0)
  );
}

function isIndeterminate() {
  return (
    selectedRows.value.length > 0 &&
    selectedRows.value.length < (props.activities.data?.length || 0)
  );
}

function markRead(id) {
  router.patch(
    route("notifications.activity.read"),
    { activity_id: id },
    {
      only: ["activities"],
      preserveScroll: true,
    }
  );
}

function markReadBulk() {
  if (!selectedRows.value.length) return;
  router.patch(
    route("notifications.activity.read"),
    { activity_ids: selectedRows.value },
    {
      only: ["activities"],
      preserveScroll: true,
      onSuccess: () => {
        selectedRows.value = [];
      },
    }
  );
}
</script>

<template>
  <AppLayout title="Obvestila">
    <template #header></template>
    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <div class="mx-auto max-w-4x1 py-3">
            <div class="pb-3">
              <SectionTitle>
                <template #title>Neprikazana obvestila</template>
                <template #description>Do danes: {{ fmtDate(today) }}</template>
              </SectionTitle>
            </div>

            <!-- Filters -->
            <div class="mb-4 flex items-center gap-3">
              <div class="flex-1 max-w-sm">
                <label class="block text-sm font-medium text-gray-700 mb-1"
                  >Partner</label
                >
                <div class="flex items-center gap-2">
                  <select
                    v-model="selectedClient"
                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                  >
                    <option value="">Vsi partnerji</option>
                    <option
                      v-for="opt in clientOptions"
                      :key="opt.value || opt.label"
                      :value="opt.value"
                    >
                      {{ opt.label }}
                    </option>
                  </select>
                  <button
                    v-if="selectedClient"
                    type="button"
                    class="text-sm text-gray-600 hover:text-gray-900"
                    @click="selectedClient = ''"
                  >
                    Počisti
                  </button>
                </div>
              </div>
            </div>

            <DataTableServer
              :columns="[
                { key: 'select', label: '', sortable: false, width: '50px' },
                { key: 'what', label: 'Zadeva', sortable: false },
                { key: 'partner', label: 'Partner', sortable: false },
                {
                  key: 'balance',
                  label: 'Stanje',
                  sortable: false,
                  align: 'right',
                  class: 'w-40',
                },
                { key: 'due', label: 'Zapadlost', sortable: true, class: 'w-28' },
              ]"
              :rows="activities.data || []"
              :meta="{
                current_page: activities.current_page,
                per_page: activities.per_page,
                total: activities.total,
                last_page: activities.last_page,
              }"
              route-name="notifications.unread"
              page-param-name="unread-page"
              :only-props="['activities']"
              :query="{ client: selectedClient || undefined }"
            >
              <template #toolbar-extra>
                <div v-if="selectedRows.length" class="flex items-center gap-2">
                  <div class="text-sm text-gray-700">
                    Izbrano: <span class="font-medium">{{ selectedRows.length }}</span>
                  </div>
                  <Dropdown width="48" align="left">
                    <template #trigger>
                      <button
                        type="button"
                        class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50"
                      >
                        Akcije
                        <svg
                          class="ml-1 h-4 w-4"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                          aria-hidden="true"
                        >
                          <path
                            fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z"
                            clip-rule="evenodd"
                          />
                        </svg>
                      </button>
                    </template>
                    <template #content>
                      <button
                        type="button"
                        class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        @click="markReadBulk"
                      >
                        Označi kot prebrano
                      </button>
                    </template>
                  </Dropdown>
                </div>
              </template>
              <template #header-select>
                <input
                  type="checkbox"
                  :checked="isAllSelected()"
                  :indeterminate="isIndeterminate()"
                  @change="toggleSelectAll"
                  class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                />
              </template>
              <template #cell-select="{ row }">
                <input
                  type="checkbox"
                  :checked="isRowSelected(row.id)"
                  @change="toggleRowSelection(row.id)"
                  class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                />
              </template>
              <template #cell-what="{ row }">
                <div class="font-medium text-gray-800 truncate">
                  <template v-if="row.contract?.uuid">
                    Pogodba:
                    <Link
                      v-if="row.contract?.client_case?.uuid"
                      :href="
                        route('clientCase.show', {
                          client_case: row.contract.client_case.uuid,
                        })
                      "
                      class="text-indigo-600 hover:underline"
                    >
                      {{ row.contract?.reference || "—" }}
                    </Link>
                    <span v-else>{{ row.contract?.reference || "—" }}</span>
                  </template>
                  <template v-else>
                    Primer:
                    <Link
                      v-if="row.client_case?.uuid"
                      :href="
                        route('clientCase.show', { client_case: row.client_case.uuid })
                      "
                      class="text-indigo-600 hover:underline"
                    >
                      {{ row.client_case?.person?.full_name || "—" }}
                    </Link>
                    <span v-else>{{ row.client_case?.person?.full_name || "—" }}</span>
                  </template>
                </div>
              </template>
              <template #cell-partner="{ row }">
                <div class="truncate">
                  {{
                    row.contract?.client_case?.client?.person?.full_name ||
                    row.client_case?.client?.person?.full_name ||
                    "—"
                  }}
                </div>
              </template>
              <template #cell-balance="{ row }">
                <div class="text-right">
                  <span v-if="row.contract">{{
                    fmtEUR(row.contract?.account?.balance_amount)
                  }}</span>
                  <span v-else>—</span>
                </div>
              </template>
              <template #cell-due="{ row }">
                {{ fmtDate(row.due_date) }}
              </template>
              <template #actions="{ row }">
                <button
                  type="button"
                  class="text-[12px] text-gray-500 hover:text-gray-700"
                  @click="markRead(row.id)"
                >
                  Označi kot prebrano
                </button>
              </template>
              <template #empty>
                <div class="p-6 text-center text-gray-500">
                  Trenutno ni neprikazanih obvestil.
                </div>
              </template>
            </DataTableServer>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
