<template>
  <section class="stack">
    <h2>EliCartao (pipeline)</h2>

    <div class="toolbar">
      <EliEntradaTexto
        v-model:value="filtro"
        :opcoes="{ rotulo: 'Buscar', placeholder: 'Cliente, título, valor...' }"
        density="compact"
      />

      <EliBotao @click="criar">Novo card</EliBotao>
    </div>

    <div class="colunas">
      <section v-for="coluna in colunas" :key="coluna.status" class="coluna">
        <header class="coluna-header">
          <strong class="text-subtitle-1">{{ coluna.titulo }}</strong>
          <EliBadge :badge="coluna.itens.length" radius="pill" />
        </header>

        <div class="cards">
          <EliCartao
            v-for="item in itensFiltrados(coluna.itens)"
            :key="item.id"
            :titulo="item.titulo"
            :status="coluna.status"
          >
            <div class="linha"><strong>Cliente:</strong> {{ item.cliente }}</div>
            <div class="linha"><strong>Valor:</strong> {{ item.valor }}</div>
            <div class="linha"><strong>Vencimento:</strong> {{ item.vencimento }}</div>

            <template #acoes>
              <EliBotao variant="text" @click="abrir(item)">Abrir</EliBotao>
              <EliBotao variant="text" color="secondary" @click="editar(item)">
                Editar
              </EliBotao>
            </template>
          </EliCartao>
        </div>
      </section>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { EliBadge } from "@/componentes/indicador";
import { EliBotao } from "@/componentes/botao";
import { EliEntradaTexto } from "@/componentes/EliEntrada";
import { EliCartao } from "@/componentes/cartao";
import type { CartaoStatus } from "@/tipos";

type Card = {
  id: string;
  titulo: string;
  cliente: string;
  valor: string;
  vencimento: string;
};

type Coluna = {
  status: CartaoStatus;
  titulo: string;
  itens: Card[];
};

export default defineComponent({
  name: "CartaoPlayground",
  components: { EliBadge, EliBotao, EliEntradaTexto, EliCartao },
  setup() {
    const filtro = ref("");

    const colunas = ref<Coluna[]>([
      {
        status: "novo",
        titulo: "Novo",
        itens: [
          {
            id: "1",
            titulo: "Proposta #1024",
            cliente: "ACME Ltda",
            valor: "R$ 12.500,00",
            vencimento: "10/01/2026",
          },
        ],
      },
      {
        status: "rascunho",
        titulo: "Rascunho",
        itens: [
          {
            id: "2",
            titulo: "Oportunidade #204",
            cliente: "Empresa X",
            valor: "R$ 8.000,00",
            vencimento: "15/01/2026",
          },
        ],
      },
      {
        status: "vendido",
        titulo: "Vendido",
        itens: [],
      },
      {
        status: "cancelado",
        titulo: "Cancelado",
        itens: [
          {
            id: "3",
            titulo: "Proposta #999",
            cliente: "Cliente Y",
            valor: "R$ 3.200,00",
            vencimento: "02/01/2026",
          },
        ],
      },
    ]);

    function itensFiltrados(itens: Card[]) {
      const q = filtro.value.trim().toLowerCase();
      if (!q) return itens;
      return itens.filter((i) =>
        `${i.titulo} ${i.cliente} ${i.valor}`.toLowerCase().includes(q)
      );
    }

    function criar() {
      // Exemplo: criar card no status "novo"
      colunas.value[0]?.itens.unshift({
        id: String(Date.now()),
        titulo: "Nova oportunidade",
        cliente: "(definir)",
        valor: "R$ 0,00",
        vencimento: "--/--/----",
      });
    }

    function abrir(_item: Card) {
      // Navegar para detalhes
    }

    function editar(_item: Card) {
      // Abrir modal/rota de edição
    }

    return { filtro, colunas, itensFiltrados, criar, abrir, editar };
  },
});
</script>

<style scoped>
.stack {
  display: grid;
  gap: 16px;
}

.toolbar {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 420px) auto;
  align-items: center;
}

.colunas {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.coluna {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.02);
}

.coluna-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cards {
  display: grid;
  gap: 12px;
}

.linha {
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  .toolbar {
    grid-template-columns: 1fr;
  }
}
</style>

