<template>
  <div
    class="partner-card column items-center q-pa-md"
    :class="{ 'cursor-pointer': !editable }"
    @click="!editable && emit('click')"
  >
    <div
      class="partner-avatar flex flex-center q-mb-md"
      :style="partner.avatar_url ? {} : { backgroundColor: '#ff8340' }"
    >
      <img
        v-if="partner.avatar_url"
        :src="partner.avatar_url"
        class="avatar-img"
      />
      <span v-else class="avatar-initials text-white text-weight-bold">
        {{ initials }}
      </span>
    </div>

    <template v-if="editable">
      <div class="full-width column q-gutter-sm">
        <DefaultInput
          :model-value="partner.social_name"
          label="Nome Social"
          outlined
          @update:model-value="update('social_name', $event)"
        />
        <DefaultInput
          :model-value="partner.role"
          label="Cargo"
          outlined
          @update:model-value="update('role', $event)"
        />
      </div>
    </template>

    <template v-else>
      <div class="full-width column items-center q-gutter-xs">
        <span class="text-weight-medium text-body1 text-center ellipsis full-width">
          {{ partner.name }}
        </span>

        <span v-if="partner.social_name" class="text-caption text-grey-6 text-center ellipsis full-width">
          {{ partner.social_name }}
        </span>

        <q-chip
          v-if="partner.role"
          dense
          color="primary"
          text-color="white"
          class="q-mt-xs"
        >
          {{ partner.role }}
        </q-chip>

        <span v-if="partner.participation != null" class="text-caption text-grey-7 q-mt-xs">
          {{ partner.participation }}% de participação
        </span>
      </div>
    </template>
  </div>
</template>

<script setup>
import { computed } from "vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";

const emit = defineEmits(["click", "update:partner"]);

const { partner, editable } = defineProps({
  partner: {
    type: Object,
    required: true,
  },
  editable: {
    type: Boolean,
    default: false,
  },
});

function update(field, value) {
  emit("update:partner", { ...partner, [field]: value });
}

const initials = computed(() => {
  if (!partner.name) return "?";
  return partner.name
    .split(" ")
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase())
    .join("");
});
</script>

<style scoped>
.partner-card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.partner-card:hover {
  border-color: #ff8340;
  box-shadow: 0 2px 12px rgba(255, 131, 64, 0.15);
}

.partner-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  font-size: 28px;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
