<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 { EllipsisVertical } from "lucide-vue-next";
import { Button } from "../ui/button";

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

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

const getTRRs = (p) => {
  if (Array.isArray(p?.trrs)) return p.trrs;
  if (Array.isArray(p?.bank_accounts)) return p.bank_accounts;
  if (Array.isArray(p?.accounts)) return p.accounts;
  if (Array.isArray(p?.bankAccounts)) return p.bankAccounts;
  return [];
};

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">
    <template v-if="getTRRs(person).length">
      <Card class="p-2 gap-2" v-for="(acc, idx) in getTRRs(person)" :key="idx">
        <div class="flex items-center justify-between mb-2" v-if="edit">
          <div class="flex flex-wrap gap-2">
            <span
              v-if="acc?.bank_name"
              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
            >
              {{ acc.bank_name }}
            </span>
            <span
              v-if="acc?.holder_name"
              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"
            >
              {{ acc.holder_name }}
            </span>
            <span
              v-if="acc?.currency"
              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
            >
              {{ acc.currency }}
            </span>
          </div>
          <div v-if="edit">
            <DropdownMenu>
              <DropdownMenuTrigger as-child>
                <Button variant="ghost" size="icon" title="Možnosti">
                  <EllipsisVertical />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem @click="handleEdit(acc.id)">
                  <EditIcon size="sm" />
                  <span>Uredi</span>
                </DropdownMenuItem>
                <DropdownMenuItem
                  @click="handleDelete(acc.id, acc?.iban || acc?.account_number)"
                  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="text-sm font-medium text-gray-900 leading-relaxed font-mono">
          {{
            acc?.iban ||
            acc?.account_number ||
            acc?.account ||
            acc?.nu ||
            acc?.number ||
            "-"
          }}
        </p>
        <p
          v-if="acc?.notes"
          class="mt-2 text-xs text-gray-600 whitespace-pre-wrap leading-relaxed"
        >
          {{ acc.notes }}
        </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 TRR"
    >
      <PlusIcon class="h-8 w-8 text-gray-400" />
    </button>
    <p
      v-else-if="!edit && !getTRRs(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 TRR računov.
    </p>
  </div>
</template>
