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

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

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

<template>
  <Dialog :open="show" @update:open="(val) => !val && emit('close')">
    <DialogContent class="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col">
      <DialogHeader>
        <DialogTitle>Obstoječe pogodbe najdene v zgodovinskem uvozu</DialogTitle>
      </DialogHeader>
      
      <div class="flex-1 overflow-auto">
        <div v-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="item in contracts"
            :key="item.contract_uuid || item.reference"
            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">{{ item.reference }}</code>
                  <Badge variant="outline" class="text-[10px]">Najdena</Badge>
                </div>
                <div class="text-xs text-gray-600">
                  <span>{{ item.full_name || "—" }}</span>
                </div>
              </div>
              
              <Button
                v-if="item.case_uuid"
                variant="outline"
                size="sm"
                as="a"
                :href="route('clientCase.show', { client_case: item.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>
