<script setup>
import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { Card } from "@/Components/ui/card";
import { Button } from "../ui/button";
import {
  CircleCheckBigIcon,
  CircleCheckIcon,
  EllipsisVertical,
  MessageSquare,
  MessageSquareText,
} from "lucide-vue-next";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";

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

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

const getPhones = (p) => (Array.isArray(p?.phones) ? p.phones : []);

const handleAdd = () => emit("add");
const handleEdit = (id) => emit("edit", id);
const handleDelete = (id, label) => emit("delete", id, label);
const handleSms = (phone) => emit("sms", phone);
</script>

<template>
  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
    <template v-if="getPhones(person).length">
      <Card class="p-2 gap-0" v-for="phone in getPhones(person)" :key="phone.id">
        <div class="flex items-center justify-between">
          <div class="flex flex-wrap gap-1">
            <span
              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
            >
              +{{ phone.country_code }}
            </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"
            >
              {{ phone && phone.type && phone.type.name ? phone.type.name : "—" }}
            </span>
          </div>
          <div class="flex items-center gap-1">
            <!-- Send SMS only in ClientCase person context -->

            <Button
              v-if="enableSms"
              @click="handleSms(phone)"
              title="Pošlji SMS"
              size="icon"
              variant="ghost"
            >
              <MessageSquare />
            </Button>

            <DropdownMenu v-if="edit">
              <DropdownMenuTrigger as-child>
                <Button variant="ghost" size="icon" title="Možnosti">
                  <EllipsisVertical />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem @click="handleEdit(phone.id)">
                  <EditIcon size="sm" />
                  <span>Uredi</span>
                </DropdownMenuItem>
                <DropdownMenuItem
                  @click="handleDelete(phone.id, phone.nu)"
                  class="text-red-600 focus:bg-red-50 focus:text-red-600"
                >
                  <TrashBinIcon size="sm" class="text-red-600" />
                  <span>Izbriši</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
        <p class="font-medium leading-relaxed p-1 flex gap-1 items-center">
          {{ phone.nu }}
          <CircleCheckBigIcon color="#3e9392" size="20" v-if="phone.validated" />
        </p>
        <p class="text-sm text-muted-foreground p-1" v-if="phone.description">
          {{ phone.description }}
        </p>
      </Card>
    </template>
    <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 h-full"
      title="Dodaj telefon"
    >
      <PlusIcon class="h-8 w-8 text-gray-400" />
    </button>
    <p
      v-else-if="!edit && !getPhones(person).length"
      class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200"
    >
      Ni telefonov.
    </p>
  </div>
</template>
