<script lang="ts" setup>
import { router } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'

defineOptions({ layout: AdminLayout })

interface ReportCard {
  type: string
  title: string
  description: string
  icon: string
  color: string
}

const reports: ReportCard[] = [
  {
    type: 'revenue',
    title: 'Revenue Report',
    description: 'Revenue breakdown by period, service type, payment gateway, and plan.',
    icon: 'tabler-currency-dollar',
    color: 'success',
  },
  {
    type: 'profit_loss',
    title: 'Profit & Loss',
    description: 'Revenue minus refunds, gateway fees, and estimated infrastructure costs.',
    icon: 'tabler-chart-bar',
    color: 'primary',
  },
  {
    type: 'tax',
    title: 'Tax Report',
    description: 'Tax collected on paid invoices, grouped by customer billing country and region.',
    icon: 'tabler-receipt-tax',
    color: 'warning',
  },
  {
    type: 'aging',
    title: 'Aging Report',
    description: 'Outstanding invoices grouped by overdue brackets: 0-30, 31-60, 61-90, and 90+ days.',
    icon: 'tabler-clock-exclamation',
    color: 'error',
  },
  {
    type: 'refund',
    title: 'Refund Report',
    description: 'Refund totals and trends, broken down by payment gateway and month.',
    icon: 'tabler-receipt-refund',
    color: 'secondary',
  },
  {
    type: 'subscription',
    title: 'Subscription Report',
    description: 'New and cancelled subscriptions, churn rate, and MRR movement over a period.',
    icon: 'tabler-repeat',
    color: 'info',
  },
]

function openReport(type: string): void {
  const now = new Date()
  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
  const defaultStart = startOfMonth.toISOString().split('T')[0]
  const defaultEnd = now.toISOString().split('T')[0]

  if (type === 'aging') {
    router.post('/reports/generate', { report_type: type })
  } else {
    router.post('/reports/generate', {
      report_type: type,
      start_date: defaultStart,
      end_date: defaultEnd,
    })
  }
}
</script>

<template>
  <div>
    <div class="d-flex align-center justify-space-between mb-6">
      <div>
        <div class="text-h4 font-weight-bold">
          Financial Reports
        </div>
        <div class="text-body-2 text-medium-emphasis">
          Generate and export financial reports for your business
        </div>
      </div>
    </div>

    <VRow>
      <VCol
        v-for="report in reports"
        :key="report.type"
        cols="12"
        sm="6"
        lg="4"
      >
        <VCard class="h-100">
          <VCardText class="d-flex flex-column h-100">
            <div class="d-flex align-center gap-3 mb-3">
              <VAvatar :color="report.color" variant="tonal" rounded size="44">
                <VIcon :icon="report.icon" size="26" />
              </VAvatar>
              <div class="text-h6 font-weight-semibold">
                {{ report.title }}
              </div>
            </div>

            <div class="text-body-2 text-medium-emphasis flex-grow-1 mb-4">
              {{ report.description }}
            </div>

            <VBtn
              :color="report.color"
              variant="tonal"
              block
              @click="openReport(report.type)"
            >
              <VIcon icon="tabler-arrow-right" start />
              Generate Report
            </VBtn>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </div>
</template>
