<template>
  <v-card
    class="eli-cartao"
    :variant="variant"
    :class="classeStatus"
    v-bind="$attrs"
  >
    <v-card-title class="eli-cartao__titulo">
      <div class="eli-cartao__titulo-texto">
        <slot name="titulo">
          {{ titulo }}
        </slot>
      </div>

      <!-- Indicador de status (badge) padronizado pelo design system -->
      <div class="eli-cartao__status">
        <EliBadge
          :badge="rotuloStatus"
          radius="pill"
          :color="corStatus"
        >
          <span />
        </EliBadge>
      </div>
    </v-card-title>

    <v-card-text class="eli-cartao__conteudo">
      <slot />
    </v-card-text>

    <v-card-actions v-if="$slots.acoes" class="eli-cartao__acoes">
      <slot name="acoes" />
    </v-card-actions>
  </v-card>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import type { CartaoStatus } from "../../tipos";
import { EliBadge } from "../indicador";

type CartaoVariante = "outlined" | "flat" | "elevated" | "tonal";

/**
 * EliCartao
 *
 * Um cartão de domínio para listas/pipelines (ex.: oportunidades/propostas) com:
 * - título
 * - status padronizado (novo/rascunho/vendido/cancelado)
 * - slot padrão para conteúdo
 * - slot opcional para ações
 */
export default defineComponent({
  name: "EliCartao",
  components: { EliBadge },
  inheritAttrs: false,
  props: {
    /** Título de fallback caso o slot `titulo` não seja usado. */
    titulo: {
      type: String,
      default: "",
    },

    /**
     * Status semântico do cartão.
     * Usado para cor/label e para permitir filtros por status.
     */
    status: {
      type: String as PropType<CartaoStatus>,
      required: true,
    },

    /** Variante visual do v-card (Vuetify). */
    variant: {
      type: String as PropType<CartaoVariante>,
      default: "outlined",
    },
  },
  emits: {
    /** Emit opcional para padronizar clique no cartão. */
    clicar: (_status: CartaoStatus) => true,
  },
  setup(props, { emit }) {
    const rotuloStatus = computed(() => {
      // Mantém label em PT-BR (não abreviar)
      return props.status;
    });

    const corStatus = computed(() => {
      // Cor neutra por padrão e semântica por status
      switch (props.status) {
        case "novo":
          return "primary";
        case "rascunho":
          return "secondary";
        case "vendido":
          return "success";
        case "cancelado":
          return "error";
      }
    });

    const classeStatus = computed(() => `eli-cartao--${props.status}`);

    function onClick() {
      emit("clicar", props.status);
    }

    return {
      rotuloStatus,
      corStatus,
      classeStatus,
      onClick,
    };
  },
});
</script>

<style>
.eli-cartao {
  border-radius: 12px;
}

.eli-cartao__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.eli-cartao__titulo-texto {
  min-width: 0;
}

.eli-cartao__conteudo {
  padding-top: 8px;
}

.eli-cartao__acoes {
  padding-top: 0;
}

/* Hooks visuais por status (sem forçar cor, deixa o tema do Vuetify fazer o trabalho) */
.eli-cartao--cancelado {
  opacity: 0.85;
}
</style>

