<template>
  <div>
    <DefaultHeaderPage title="Financeiro" :show-filter-icon="false" />

    <div class="row justify-end q-px-md q-mb-xs">
      <q-btn
        flat
        round
        :icon="showValues ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
        color="primary"
        @click="showValues = !showValues"
      >
        <q-tooltip anchor="center left" self="center right" :offset="[8, 0]">
          {{ showValues ? 'Ocultar valores' : 'Exibir valores' }}
        </q-tooltip>
      </q-btn>
    </div>

    <div class="row q-pa-md q-gutter-md">
      <FinancialCard
        title="Resultado do Mês"
        icon="mdi-scale-balance"
        :financial-value="overview.result_month"
        :description="overview.result_month >= 0 ? 'Positivo' : 'Negativo'"
        :hide-values="!showValues"
      />
      <FinancialCard
        title="Recebido no Mês"
        icon="mdi-cash-plus"
        :financial-value="overview.received_month"
        :integer="overview.received_month_count"
        integer-label="recebimentos"
        :hide-values="!showValues"
      />
      <FinancialCard
        title="Pago no Mês"
        icon="mdi-cash-minus"
        :financial-value="overview.paid_month"
        :integer="overview.paid_month_count"
        integer-label="pagamentos"
        :hide-values="!showValues"
      />
    </div>

    <div class="row q-px-md q-gutter-md">
      <FinancialCard
        title="Contas a Pagar"
        icon="mdi-cash-minus"
        :financial-value="overview.payable_pending"
        :integer="overview.payable_pending_count"
        integer-label="pendentes"
        :hide-values="!showValues"
        clickable
        @click="$router.push({ name: 'AccountsPayablePage' })"
      />
      <FinancialCard
        title="Contas a Receber"
        icon="mdi-cash-plus"
        :financial-value="overview.receivable_pending"
        :integer="overview.receivable_pending_count"
        integer-label="pendentes"
        :hide-values="!showValues"
        clickable
        @click="$router.push({ name: 'AccountsReceivablePage' })"
      />
      <FinancialCard
        title="Vencidas (a receber)"
        icon="mdi-alert-circle-outline"
        :financial-value="overview.overdue_receivable"
        :integer="overview.overdue_receivable_count"
        integer-label="em atraso"
        :hide-values="!showValues"
      />
    </div>
  </div>
</template>

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

const STORAGE_KEY = "franchisee_financial_show_values";
const showValues = ref(localStorage.getItem(STORAGE_KEY) !== "false");

watch(showValues, (val) => localStorage.setItem(STORAGE_KEY, String(val)));

const defaultOverview = () => ({
  result_month: 0,
  received_month: 0,
  received_month_count: 0,
  paid_month: 0,
  paid_month_count: 0,
  receivable_pending: 0,
  receivable_pending_count: 0,
  payable_pending: 0,
  payable_pending_count: 0,
  overdue_receivable: 0,
  overdue_receivable_count: 0,
});

const overview = ref(defaultOverview());

onMounted(async () => {
  try {
    overview.value = await getFinancialOverviewMe();
  } catch (e) {
    console.error("Erro ao carregar visão geral financeira:", e);
  }
});
</script>
