<template>
  <div>
    <DefaultHeaderPage title="Contas a Receber" :show-filter-icon="false" />

    <div class="row q-pa-md q-gutter-md">
      <FinancialCard
        title="Saldo Bancário"
        icon="mdi-bank-outline"
        :financial-value="0"
        :integer="0"
        integer-label="pagamentos pendentes"
      />
      <FinancialCard
        title="Contas Recebidas"
        icon="mdi-check-circle-outline"
        :financial-value="0"
        :integer="0"
        integer-label="recebimentos no mês"
      />
      <FinancialCard
        title="Contas a Receber"
        icon="mdi-cash-plus"
        :financial-value="0"
        :integer="0"
        integer-label="pagamentos pendentes"
      />
    </div>

    <div class="row justify-end items-center q-px-md q-mb-sm q-gutter-sm">
      <q-btn
        :color="showMovimentacoes ? 'secondary' : 'primary'"
        label="Últimas Movimentações"
        unelevated
        no-caps
        @click="showMovimentacoes = !showMovimentacoes"
      />
      <q-btn color="primary" label="Exportar Relatório" icon="mdi-download" unelevated no-caps />
    </div>

    <div class="q-px-md">
      <DefaultTable
        v-if="!showMovimentacoes"
        v-model:rows="rows"
        no-api-call
        add-item
        title="Contas a Receber"
        description="contas"
        :female="true"
        :columns="columns"
        :actions="tableActions"
        @on-add-item="handleAddItem"
      />
      <DefaultTable
        v-else
        v-model:rows="movimentacoesRows"
        no-api-call
        :add-item="false"
        title="Últimas Movimentações"
        description="movimentações"
        :female="true"
        :columns="movimentacoesColumns"
        @on-add-item="handleAddItem"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import api from "src/api";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import DefaultTable from "src/components/defaults/DefaultTable.vue";
import FinancialCard from "src/components/financial/FinancialCard.vue";

const showMovimentacoes = ref(false);
const rows = ref([]);
const movimentacoesRows = ref([]);

// Para controlar as Actions e o Link do Asaas
const tableActions = [
  {
    label: "Ver Boleto/Pix",
    icon: "mdi-barcode",
    color: "primary",
    onClick: (row) => {
      if (row.invoice_url) window.open(row.invoice_url, "_blank");
      else alert("Ainda não possui link de cobrança gerado no Asaas.");
    },
  },
];

const columns = [
  { name: "history", label: "Descrição", field: "history", align: "left" },
  { name: "type", label: "Categoria", field: "type", align: "left" },
  { name: "value", label: "Valor", field: "value", align: "left", format: val => `R$ ${val}` },
  { name: "due_date", label: "Vencimento", field: "due_date", align: "left" },
  { name: "status", label: "Status", field: "status", align: "left" },
  { name: "actions", label: "Ações", field: "actions", align: "right" }
];

const movimentacoesColumns = [
  { name: "description", label: "Descrição", field: "description", align: "left" },
  { name: "date", label: "Data", field: "date", align: "left" },
  { name: "value", label: "Valor", field: "value", align: "left" },
  { name: "status", label: "Status", field: "status", align: "left" },
];

const loadData = async () => {
  try {
    const res = await api.get('/franchisee-receivable');
    rows.value = res.data.payload;
  } catch (error) {
    console.error("Erro ao buscar contas a receber:", error);
  }
};

onMounted(() => {
  loadData();
});

const handleAddItem = () => {};
</script>
