<template>
  <q-page padding>
    <PageHeader title="Rapports" :count="financeReports.length" />

    <!-- Comptabilité section (rapports opérationnels) -->
    <div class="text-subtitle2 text-grey-7 text-weight-bold q-mb-sm">Comptabilité & Finances</div>
    <div class="row q-col-gutter-md q-mb-lg">
      <div class="col-12 col-md-6 col-lg-4" v-for="report in financeReports" :key="report.title">
        <div class="ops-card cursor-pointer" style="min-height:120px" @click="$router.push(report.route)">
          <div class="row items-center q-mb-sm">
            <q-icon :name="report.icon" size="28px" :color="report.color" class="q-mr-sm" />
            <div class="text-subtitle1 text-weight-bold">{{ report.title }}</div>
          </div>
          <div class="text-caption text-grey-6">{{ report.description }}</div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import PageHeader from 'src/components/shared/PageHeader.vue'
import { useCommandPalette } from 'src/composables/useCommandPalette'

const router = useRouter()

const financeReports = [
  {
    title: 'Explorateur de revenus',
    description: 'MRR net récurrent, regroupé par catégorie, code postal, ville, segment ou plan — critères ajoutables en chips. Un seul rapport unifié.',
    icon: 'pivot_table_chart',
    color: 'primary',
    route: '/rapports/explorateur-revenus',
  },
  {
    title: 'Revenus par compte',
    description: 'Évolution mensuelle des revenus par compte GL (4000-5000). Graphique stacked + export CSV.',
    icon: 'trending_up',
    color: 'green-6',
    route: '/rapports/revenus',
  },
  {
    title: 'Ventes détaillées',
    description: 'Liste des factures avec sous-total, TPS, TVQ et total. Inclut les notes de crédit.',
    icon: 'receipt_long',
    color: 'primary',
    route: '/rapports/ventes',
  },
  {
    title: 'Rapport de taxes (TPS/TVQ)',
    description: 'Taxes perçues vs payées par période mensuelle ou trimestrielle. Pour les déclarations fiscales.',
    icon: 'account_balance',
    color: 'purple-6',
    route: '/rapports/taxes',
  },
  {
    title: 'Âge des comptes',
    description: 'Comptes à recevoir par tranche d\'ancienneté: courant, 30, 60, 90, 120+ jours.',
    icon: 'account_balance_wallet',
    color: 'red-6',
    route: '/rapports/ar',
  },
  {
    title: 'Clients qui paient cher — Internet',
    description: 'Adresses dont la facture Internet mensuelle (forfait + rabais, hors TV/téléphonie) dépasse un seuil. Pour cibler les forfaits à réviser.',
    icon: 'trending_up',
    color: 'deep-orange-6',
    route: '/rapports/internet-cher',
  },
  {
    title: 'Factures récurrentes négatives',
    description: 'Comptes dont le total récurrent mensuel est négatif (rabais > frais) — anomalies de données à corriger. F reste autoritaire.',
    icon: 'error',
    color: 'red-7',
    route: '/rapports/factures-negatives',
  },
  {
    title: 'Services actifs sur comptes résiliés',
    description: 'Comptes terminés dans F qui gardent des services récurrents actifs (charges + crédits). Liste de ménage — désactiver au niveau service (sauf employés à internet fourni).',
    icon: 'cleaning_services',
    color: 'blue-7',
    route: '/rapports/resilies-actifs',
  },
]

// Chaque rapport devient joignable par la palette (⌘K) — l'index visuel reste épuré,
// mais rien n'est « caché » : taper le nom d'un rapport l'ouvre directement.
const { registerActions, unregisterActions } = useCommandPalette()
onMounted(() => registerActions('rapports', financeReports.map(r => ({
  id: 'rapport-' + r.route,
  label: r.title,
  caption: 'Rapport',
  icon: r.icon,
  group: 'Rapports',
  keywords: r.description,
  run: () => router.push(r.route),
}))))
onUnmounted(() => unregisterActions('rapports'))
</script>
