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

    <div class="row q-pa-md q-gutter-md">
      <FinancialCard
        title="Saldo Tesouraria"
        icon="mdi-bank-outline"
        :financial-value="0"
      />
      <FinancialCard
        title="Contas Recebidas"
        icon="mdi-check-circle-outline"
        :financial-value="receivedTotal"
        :integer="receivedCount"
        integer-label="títulos recebidos"
      />
      <FinancialCard
        title="Contas a Receber"
        icon="mdi-cash-plus"
        :financial-value="pendingTotal"
        :integer="pendingCount"
        integer-label="títulos pendentes"
      />
    </div>

    <div class="row justify-end items-center q-px-md q-mb-sm q-gutter-sm">
      <q-btn color="primary" label="Exportar Relatório" icon="mdi-download" unelevated no-caps />
    </div>

    <div class="q-px-md">
      <DefaultTable
        v-model:rows="rows"
        no-api-call
        :add-item="false"
        :loading="loading"
        title="Contas a Receber"
        description="contas"
        :female="true"
        :columns="columns"
      />
    </div>
  </div>
</template>

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

const loading = ref(false);
const items = ref([]);

const columns = [
  { name: "unit", label: "Unidade", field: "unit", align: "left" },
  { name: "description", label: "Descrição", field: "description", align: "left" },
  { name: "category", label: "Categoria", field: "category", align: "left" },
  { name: "value", label: "Valor", field: "value", align: "left" },
  { name: "due_date", label: "Vencimento", field: "due_date", align: "left" },
  { name: "status", label: "Status", field: "status", align: "left" },
];

const STATUS_LABEL = {
  pending: "Pendente",
  awaiting_payment: "Aguardando",
  paid: "Pago",
  overdue: "Atrasado",
  cancelled: "Cancelado",
};

const formatCurrency = (value) =>
  new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(value ?? 0);

const formatDate = (value) => {
  if (!value) return "—";
  const [y, m, d] = value.split("-");
  return `${d}/${m}/${y}`;
};

const rows = computed(() =>
  items.value.map((i) => ({
    id: i.id,
    unit: i.unit_name ?? `Unidade ${i.unit_id}`,
    description: i.history,
    category: "TBR",
    value: formatCurrency(Number(i.value)),
    due_date: formatDate(i.due_date),
    status: STATUS_LABEL[i.status] ?? i.status,
  })),
);

const isSettled = (status) => status === "paid";

const receivedTotal = computed(() =>
  items.value
    .filter((i) => isSettled(i.status))
    .reduce((acc, i) => acc + Number(i.paid_value || 0), 0),
);
const receivedCount = computed(() => items.value.filter((i) => isSettled(i.status)).length);

const pendingTotal = computed(() =>
  items.value
    .filter((i) => !isSettled(i.status) && i.status !== "cancelled")
    .reduce((acc, i) => acc + (Number(i.value || 0) - Number(i.paid_value || 0)), 0),
);
const pendingCount = computed(
  () => items.value.filter((i) => !isSettled(i.status) && i.status !== "cancelled").length,
);

const fetchReceivables = async () => {
  loading.value = true;
  try {
    items.value = await getFranchiseeReceivables();
  } catch {
    Notify.create({ message: "Não foi possível carregar as contas a receber.", type: "negative" });
  } finally {
    loading.value = false;
  }
};

onMounted(fetchReceivables);
</script>
