<script setup>
import { PlusIcon, DottedMenu, EditIcon, TrashBinIcon } 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 getEmails = (p) => (Array.isArray(p?.emails) ? p.emails : []);

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

<template>
  <div class="flex justify-end mb-3" v-if="edit">
    <button
      @click="handleAdd"
      class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all"
      title="Dodaj email"
    >
      <PlusIcon size="sm" />
      <span>Dodaj email</span>
    </button>
  </div>
  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-3">
    <template v-if="getEmails(person).length">
      <div
        class="rounded-lg p-4 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
        v-for="(email, idx) in getEmails(person)"
        :key="idx"
      >
        <div class="flex items-start justify-between mb-2" v-if="edit">
          <div class="flex flex-wrap gap-2">
            <span
              v-if="email?.label"
              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
            >
              {{ email.label }}
            </span>
            <span
              v-else
              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"
            >
              Email
            </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(email.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(email.id, email?.value || email?.email || email?.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">
          {{ email?.value || email?.email || email?.address || "-" }}
        </p>
        <p v-if="email?.note" class="mt-2 text-xs text-gray-600 whitespace-pre-wrap leading-relaxed">
          {{ email.note }}
        </p>
      </div>
    </template>
    <p v-else class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200">
      Ni e-poštnih naslovov.
    </p>
  </div>
</template>

