<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link } from "@inertiajs/vue3";
import { computed, ref } from "vue";

const props = defineProps({
  segments: Array,
});

const search = ref("");

const filtered = computed(() => {
  const q = (search.value || "").toLowerCase();
  if (!q) {
    return props.segments || [];
  }
  return (props.segments || []).filter((s) => {
    return (
      String(s.name || "")
        .toLowerCase()
        .includes(q) ||
      String(s.description || "")
        .toLowerCase()
        .includes(q)
    );
  });
});

function formatCurrencyEUR(value) {
  if (value === null || value === undefined) {
    return "-";
  }
  const n = Number(value);
  if (isNaN(n)) {
    return String(value);
  }
  return (
    n.toLocaleString("sl-SI", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +
    " €"
  );
}
</script>

<template>
  <AppLayout title="Segmenti">
    <template #header>Segmenti</template>
    <div class="pt-12">
      <div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-4 mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-1"
            >Iskanje (segment ali opis)</label
          >
          <input
            v-model="search"
            type="text"
            class="border rounded px-3 py-2 w-full max-w-xl"
            placeholder="Išči po nazivu segmenta ali opisu"
          />
        </div>

        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
          <h2 class="text-xl font-semibold mb-4">Aktivni segmenti</h2>
          <div
            v-if="filtered.length"
            class="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
          >
            <div
              v-for="s in filtered"
              :key="s.id"
              class="border rounded-lg p-4 shadow-sm hover:shadow transition bg-white"
            >
              <div class="flex items-start justify-between mb-2">
                <h3 class="text-base font-semibold text-gray-900">
                  <Link :href="route('segments.show', s.id)" class="hover:underline">{{
                    s.name
                  }}</Link>
                </h3>
                <span
                  class="inline-flex items-center text-xs px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-100"
                >
                  {{ s.contracts_count ?? 0 }} pogodb
                </span>
              </div>
              <p class="text-sm text-gray-600 min-h-[1.25rem]">
                {{ s.description || "—" }}
              </p>
              <div class="mt-4 flex items-center justify-between">
                <div class="text-sm text-gray-500">Vsota stanj</div>
                <div class="text-sm font-medium text-gray-900">
                  {{ formatCurrencyEUR(s.total_balance) }}
                </div>
              </div>
              <div class="mt-3">
                <Link
                  :href="route('segments.show', s.id)"
                  class="text-sm text-indigo-600 hover:underline"
                  >Odpri</Link
                >
              </div>
            </div>
          </div>
          <div v-else class="text-gray-500">Ni aktivnih segmentov.</div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
