<template>
  <q-card
    class="kanban-card"
    :class="{ 'cursor-pointer': canEdit }"
    :style="{ borderLeft: `4px solid ${phaseColor}` }"
    @click="canEdit && $emit('edit', card)"
  >
    <!-- Header: Creator name + Priority badge + Delete button -->
    <div class="row items-center justify-between q-px-md q-pt-md">
      <span class="text-body2 text-weight-medium text-grey-8 ellipsis" style="max-width: 55%">
        {{ card.created_by_user_name ?? '—' }}
      </span>

      <div class="row items-center" style="gap: 6px">
        <q-badge
          :color="priorityColor"
          :label="priorityLabel"
          style="padding: 4px 8px; font-size: 11px"
        />
        <q-btn
          v-if="canDelete"
          flat
          dense
          round
          icon="mdi-trash-can-outline"
          size="xs"
          color="grey-5"
          @click.stop="onDelete"
        />
      </div>
    </div>

    <!-- De / Para -->
    <div class="q-px-md q-mt-xs" style="display: flex; gap: 10px">
      <span class="text-caption text-grey-6">
        <span class="text-weight-medium text-grey-7">De:</span>
        {{ card.applicant_unit_name ?? 'Matriz' }}
      </span>
      <span class="text-caption text-grey-6">
        <span class="text-weight-medium text-grey-7">Para:</span>
        {{ paraLabel }}
      </span>
    </div>

    <!-- Responsável -->
    <div v-if="card.responsible_user_name" class="q-px-md q-mt-xs text-caption text-grey-6">
      <span class="text-weight-medium text-grey-7">Resp.:</span>
      {{ card.responsible_user_name }}
    </div>

    <!-- Description truncated -->
    <div
      v-if="card.description"
      class="q-px-md q-mt-sm text-body2 text-grey-7"
      style="line-height: 1.4"
    >
      {{ truncated }}
    </div>

    <!-- Footer: Sector + Comments count -->
    <div class="row items-center justify-between q-px-md q-pb-md q-mt-sm">
      <span class="text-caption text-grey-6">{{ card.sector ?? '—' }}</span>
      <div class="row items-center" style="gap: 4px">
        <q-icon name="mdi-comment-outline" color="grey-5" size="16px" />
        <span class="text-caption text-grey-6">{{ card.replies_count ?? 0 }}</span>
      </div>
    </div>
  </q-card>
</template>

<script setup>
import { computed } from "vue";
import { useQuasar } from "quasar";
import { deleteKanban } from "src/api/kanban";

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

const { card, canEdit, canDelete } = defineProps({
  card: { type: Object, required: true },
  canEdit: { type: Boolean, default: false },
  canDelete: { type: Boolean, default: false },
});

const $q = useQuasar();

const truncated = computed(() => {
  const desc = card.description ?? "";
  return desc.length > 50 ? desc.slice(0, 50) + "…" : desc;
});

const paraLabel = computed(() => {
  if (card.scope === "internal") return "Interno";
  return card.target_unit_name ?? "—";
});

const priorityColor = computed(() => {
  const map = { alta: "negative", normal: "warning", baixa: "positive" };
  return map[card.priority] ?? "grey";
});

const priorityLabel = computed(() => {
  const map = { alta: "Alta", normal: "Normal", baixa: "Baixa" };
  return map[card.priority] ?? card.priority;
});

const phaseColor = computed(() => {
  const map = {
    a_fazer:            "#9E9E9E",
    em_progresso:       "#1976D2",
    em_revisao:         "#FF9800",
    concluido:          "#4CAF50",
    demandas_especiais: "#FFC107",
  };
  return map[card.phase] ?? "#9E9E9E";
});

const onDelete = () => {
  $q.dialog({
    title:   "Excluir Atividade",
    message: `Tem certeza que deseja excluir "${card.title}"?`,
    cancel:  { outline: true, color: "primary",  label: "Cancelar" },
    ok:      {               color: "negative",  label: "Excluir"  },
  }).onOk(async () => {
    await deleteKanban(card.id);
    emit("delete", card.id);
  });
};
</script>

<style scoped>
.kanban-card {
  border-radius: 10px;
  transition: box-shadow 0.2s;
}

.kanban-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
</style>
