<template>
  <DefaultTable
    :columns="columns"
    :api-call="loadContracts"
    :show-search-field="true"
    :female="false"
    title="Contratos"
    description="contratos"
  >
    <template #body-cell-start_date="{ row }">
      <q-td>{{ formatDateYMDtoDMY(row.start_date) }}</q-td>
    </template>

    <template #body-cell-end_date="{ row }">
      <q-td>{{ formatDateYMDtoDMY(row.end_date) }}</q-td>
    </template>

    <template #body-cell-inhabitant_classification="{ row }">
      <q-td>{{ row.municipality_size?.description ?? row.inhabitant_classification?.description ?? "—" }}</q-td>
    </template>

    <template #body-cell-tbr_fixed_value="{ row }">
      <q-td>{{ formatToBRLCurrency(row.tbr_fixed_value) }}</q-td>
    </template>

    <template #body-cell-royalties="{ row }">
      <q-td>{{ formatPercentage(row.tbr_fixed_value_percentage) }}</q-td>
    </template>

    <template #body-cell-fnm="{ row }">
      <q-td>{{ formatPercentage(row.marketing_fund_percentage) }}</q-td>
    </template>

    <template #body-cell-maintenance="{ row }">
      <q-td>{{ formatPercentage(row.maintance_tax_percentage) }}</q-td>
    </template>

    <template #body-cell-ref_month="{ row }">
      <q-td>{{
        formatRefMonth(row.contract_month_current, row.validity_months)
      }}</q-td>
    </template>

    <template #body-cell-actions>
      <q-td align="center">
        <q-btn flat round dense icon="mdi-eye-outline" size="sm" />
      </q-td>
    </template>
  </DefaultTable>
</template>

<script setup>
import DefaultTable from "src/components/defaults/DefaultTable.vue";
import { getActiveFranchiseeContracts } from "src/api/franchisee_contract";
import {
  formatToBRLCurrency,
  formatPercentage,
  formatDateYMDtoDMY,
} from "src/helpers/utils";

const loadContracts = () => getActiveFranchiseeContracts();

const columns = [
  { name: "protocol", label: "ID", field: "protocol", align: "left" },
  { name: "unit_name", label: "Unidade", field: "unit_name", align: "left" },
  {
    name: "start_date",
    label: "Data Inicial",
    field: "start_date",
    align: "left",
  },
  { name: "end_date", label: "Data Final", field: "end_date", align: "left" },
  {
    name: "inhabitant_classification",
    label: "Faixa de Habitantes",
    field: "inhabitant_classification",
    align: "left",
  },
  {
    name: "tbr_fixed_value",
    label: "TBR",
    field: "tbr_fixed_value",
    align: "left",
  },
  {
    name: "royalties",
    label: "Royalties",
    field: "tbr_fixed_value_percentage",
    align: "left",
  },
  {
    name: "fnm",
    label: "FNM",
    field: "marketing_fund_percentage",
    align: "left",
  },
  {
    name: "maintenance",
    label: "Manutenção",
    field: "maintance_tax_percentage",
    align: "left",
  },
  {
    name: "ref_month",
    label: "Ref. Mês",
    field: "contract_month_current",
    align: "left",
  },
  { name: "actions", label: "Ações", field: "actions", align: "center" },
];

function formatRefMonth(current, total) {
  if (current == null || total == null) return "—";
  const pad = (n) => String(n).padStart(2, "0");
  return `${pad(current)}/${pad(total)}`;
}
</script>
