<script setup>
import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
import Dropdown from "../Dropdown.vue";

const props = defineProps({
  person: Object,
  edit: { type: Boolean, default: true },
});

const emit = defineEmits(['add', 'edit', 'delete']);

const handleAdd = () => emit('add');
const handleEdit = (id) => emit('edit', id);
const handleDelete = (id, label) => emit('delete', id, label);
</script>

<template>
  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
    <div
      class="rounded-lg p-4 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
      v-for="address in person.addresses"
      :key="address.id"
    >
      <div class="flex items-start justify-between mb-2">
        <div class="flex flex-wrap gap-2">
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
            {{ address.country }}
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
            {{ address.type.name }}
          </span>
        </div>
        <div v-if="edit">
          <Dropdown align="right" width="48">
            <template #trigger>
              <button
                type="button"
                class="p-1 rounded hover:bg-gray-100 border border-transparent hover:border-gray-200 transition-colors"
                title="Možnosti"
              >
                <DottedMenu size="sm" css="text-gray-600" />
              </button>
            </template>
            <template #content>
              <div class="py-1">
                <button
                  @click="handleEdit(address.id)"
                  class="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
                >
                  <EditIcon size="sm" />
                  <span>Uredi</span>
                </button>
                <button
                  @click="handleDelete(address.id, address.address)"
                  class="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
                >
                  <TrashBinIcon size="sm" />
                  <span>Izbriši</span>
                </button>
              </div>
            </template>
          </Dropdown>
        </div>
      </div>
      <p class="text-sm font-medium text-gray-900 leading-relaxed">
        {{
          address.post_code && address.city
            ? `${address.address}, ${address.post_code} ${address.city}`
            : address.address
        }}
      </p>
    </div>
    <button
      v-if="edit"
      @click="handleAdd"
      class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center min-h-[120px]"
      title="Dodaj naslov"
    >
      <PlusIcon class="h-8 w-8 text-gray-400" />
    </button>
  </div>
</template>

