<script setup>
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import { Skeleton } from "@/Components/ui/skeleton";

const props = defineProps({
  show: { type: Boolean, default: false },
  loading: { type: Boolean, default: false },
  contracts: { type: Array, default: () => [] },
  formatMoney: { type: Function, required: true },
});

const emit = defineEmits(["close"]);
</script>

<template>
  <Dialog :open="show" @update:open="(val) => !val && emit('close')">
    <DialogContent class="max-w-3xl max-h-[80vh] overflow-hidden flex flex-col">
      <DialogHeader>
        <DialogTitle>Manjkajoče pogodbe (aktivne, ne-arhivirane)</DialogTitle>
      </DialogHeader>

      <div class="flex-1 overflow-auto">
        <div v-if="loading" class="space-y-3 p-4">
          <Skeleton v-for="i in 5" :key="i" class="h-16 w-full" />
        </div>

        <div v-else-if="!contracts.length" class="py-12 text-center">
          <p class="text-sm text-gray-500">Ni zadetkov.</p>
        </div>

        <div v-else class="divide-y">
          <div
            v-for="row in contracts"
            :key="row.uuid"
            class="p-4 hover:bg-gray-50 transition-colors"
          >
            <div class="flex items-start justify-between gap-4">
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 mb-1">
                  <code class="text-sm font-medium text-gray-900">{{
                    row.reference
                  }}</code>
                  <Badge variant="secondary" class="text-[10px]">Aktivna</Badge>
                </div>
                <div class="text-xs text-gray-600 space-y-0.5">
                  <div class="flex items-center gap-2">
                    <span class="font-medium">Primer:</span>
                    <span class="truncate">{{ row.full_name || "—" }}</span>
                  </div>
                  <div v-if="row.balance_amount != null" class="flex items-center gap-2">
                    <span class="font-medium">Stanje:</span>
                    <span class="font-mono">{{ formatMoney(row.balance_amount) }}</span>
                  </div>
                </div>
              </div>

              <Button
                variant="outline"
                size="sm"
                as="a"
                :href="route('clientCase.show', { client_case: row.case_uuid })"
                class="shrink-0"
              >
                Odpri primer
              </Button>
            </div>
          </div>
        </div>
      </div>

      <div class="border-t pt-4 flex justify-end">
        <Button variant="secondary" @click="emit('close')">Zapri</Button>
      </div>
    </DialogContent>
  </Dialog>
</template>
