<script setup lang="ts">
import type {
  ColumnDef,
  ColumnFiltersState,
  SortingState,
  VisibilityState,
} from '@tanstack/vue-table'

import { Icon } from '@iconify/vue'
import {
  FlexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useVueTable,
} from '@tanstack/vue-table'
import { computed, h, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { toast } from 'vue-sonner'

import ConfirmDialog from '@/components/confirm-dialog.vue'
import DataTablePagination from '@/components/data-table/table-pagination.vue'
import { BasicPage } from '@/components/global-layout'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import DateTimePicker from '@/components/ui/date-picker/DateTimePicker.vue'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { valueUpdater } from '@/lib/utils'
import api from '@/services/api'

interface Application {
  id: number
  name: string
}

interface FinanceRecord {
  id: number
  order_no: string
  type: 'recharge' | 'consumption'
  user_id: number
  app_id?: number
  amount: number
  detail: string
  status: string
  payment_type: string
  remark: string
  created_at: string
  user?: {
    id: number
    username: string
    email: string
  }
}

const { t } = useI18n()
const loading = ref(true)
const records = ref<FinanceRecord[]>([])
const applications = ref<Application[]>([])

const appFilter = ref<string>('all')
const statusFilter = ref<string>('all')
const dateRange = ref<{ from: string, to: string }>({ from: '', to: '' })

function setQuickRange(range: 'today' | 'week' | 'month') {
  const now = new Date()
  const today = now.toISOString().split('T')[0]
  const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0]

  switch (range) {
    case 'today':
      dateRange.value = { from: `${today}T00:00`, to: `${today}T23:59` }
      break
    case 'week': {
      const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
      dateRange.value = {
        from: `${weekAgo.toISOString().split('T')[0]}T00:00`,
        to: `${today}T23:59`,
      }
      break
    }
    case 'month':
      dateRange.value = { from: `${firstDayOfMonth}T00:00`, to: `${today}T23:59` }
      break
  }
}

const filteredRecords = computed(() => {
  let result = records.value

  if (appFilter.value !== 'all') {
    result = result.filter(r => r.app_id === Number(appFilter.value))
  }

  if (statusFilter.value !== 'all') {
    result = result.filter(r => r.status === statusFilter.value)
  }

  if (dateRange.value.from) {
    const fromDateTime = dateRange.value.from.includes('T')
      ? dateRange.value.from.replace('T', ' ')
      : `${dateRange.value.from} 00:00`
    result = result.filter(r => r.created_at >= fromDateTime)
  }
  if (dateRange.value.to) {
    const toDateTime = dateRange.value.to.includes('T')
      ? dateRange.value.to.replace('T', ' ')
      : `${dateRange.value.to} 23:59`
    result = result.filter(r => r.created_at <= toDateTime)
  }

  return result
})

const stats = computed(() => {
  const rechargeRecords = filteredRecords.value.filter(r => r.type === 'recharge' && r.status === 'success')
  const consumptionRecords = filteredRecords.value.filter(r => r.type === 'consumption' && r.status === 'success')

  const totalRecharge = rechargeRecords.reduce((sum, r) => sum + r.amount, 0)
  const totalConsumption = consumptionRecords.reduce((sum, r) => sum + r.amount, 0)

  return {
    rechargeCount: rechargeRecords.length,
    rechargeAmount: totalRecharge,
    consumptionCount: consumptionRecords.length,
    consumptionAmount: totalConsumption,
    profit: totalRecharge - totalConsumption,
  }
})

function formatTime(time: string) {
  if (!time)
    return '-'
  try {
    const date = new Date(time)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    })
  }
  catch {
    return '-'
  }
}

const sorting = ref<SortingState>([])
const columnFilters = ref<ColumnFiltersState>([])
const columnVisibility = ref<VisibilityState>({})
const rowSelection = ref({})

const deleteDialogOpen = ref(false)
const deleteTarget = ref<FinanceRecord | null>(null)
const batchDeleteDialogOpen = ref(false)

async function confirmDelete(record: FinanceRecord) {
  deleteTarget.value = record
  deleteDialogOpen.value = true
}

async function handleDelete() {
  if (!deleteTarget.value)
    return

  try {
    await api.delete(`/dev/finance/records/${deleteTarget.value.id}?type=${deleteTarget.value.type}`)
    toast.success(t('developer.finance.deleteSuccess'))
    fetchRecords()
  }
  catch (error: any) {
    toast.error(error.message || t('developer.finance.deleteFailed'))
  }
  finally {
    deleteTarget.value = null
  }
}

const columns: ColumnDef<FinanceRecord>[] = [
  {
    id: 'select',
    header: ({ table }) => h(Checkbox, {
      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
      'onUpdate:checked': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
      'ariaLabel': 'Select all',
    }),
    cell: ({ row }) => h(Checkbox, {
      'checked': row.getIsSelected(),
      'onUpdate:checked': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
      'ariaLabel': 'Select row',
    }),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'type',
    header: () => t('developer.finance.columns.type'),
    cell: ({ row }) => {
      const type = row.getValue('type') as string
      return h(Badge, { variant: type === 'recharge' ? 'default' : 'secondary' }, () => type === 'recharge' ? t('developer.finance.types.recharge') : t('developer.finance.types.consumption'))
    },
  },
  {
    accessorKey: 'amount',
    header: () => t('developer.finance.columns.amount'),
    cell: ({ row }) => {
      const type = row.getValue('type') as string
      const amount = row.getValue('amount') as number
      const prefix = type === 'recharge' ? '+' : '-'
      return h('span', { class: 'font-medium' }, `${prefix}¥${amount.toFixed(2)}`)
    },
  },
  {
    accessorKey: 'user',
    header: () => t('developer.finance.columns.user'),
    cell: ({ row }) => {
      const user = row.original.user
      return user?.username || '-'
    },
  },
  {
    accessorKey: 'detail',
    header: () => t('developer.finance.columns.detail'),
    cell: ({ row }) => {
      const detail = row.getValue('detail') as string
      return h('span', { class: 'max-w-[200px] truncate text-muted-foreground block' }, detail || '-')
    },
  },
  {
    accessorKey: 'status',
    header: () => t('developer.finance.columns.status'),
    cell: ({ row }) => {
      const status = row.getValue('status') as string
      const map: Record<string, { label: string, variant: 'default' | 'secondary' | 'destructive' }> = {
        success: { label: t('developer.finance.success'), variant: 'default' },
        pending: { label: t('developer.finance.pending'), variant: 'secondary' },
        failed: { label: t('developer.finance.failed'), variant: 'destructive' },
      }
      const { label, variant } = map[status] || { label: status, variant: 'secondary' }
      return h(Badge, { variant }, () => label)
    },
  },
  {
    accessorKey: 'created_at',
    header: () => t('developer.finance.columns.time'),
    cell: ({ row }) => {
      return h('span', { class: 'text-muted-foreground whitespace-nowrap' }, formatTime(row.getValue('created_at')))
    },
  },
  {
    id: 'actions',
    header: () => t('developer.finance.columns.actions'),
    cell: ({ row }) => {
      return h(Button, {
        variant: 'ghost',
        size: 'sm',
        class: 'h-8 w-8 p-0',
        onClick: () => confirmDelete(row.original),
      }, () => h(Icon, { icon: 'lucide:trash-2', class: 'size-4 text-muted-foreground hover:text-destructive' }))
    },
  },
]

const table = useVueTable({
  get data() { return filteredRecords.value },
  get columns() { return columns },
  state: {
    get sorting() { return sorting.value },
    get columnFilters() { return columnFilters.value },
    get columnVisibility() { return columnVisibility.value },
    get rowSelection() { return rowSelection.value },
  },
  enableRowSelection: true,
  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
})

async function confirmBatchDelete() {
  const selectedRows = table.getSelectedRowModel().rows
  if (selectedRows.length === 0) {
    toast.error(t('developer.finance.delete'))
    return
  }
  batchDeleteDialogOpen.value = true
}

async function handleBatchDelete() {
  const selectedRows = table.getSelectedRowModel().rows
  const ids = selectedRows.map(row => row.original.id)
  try {
    await api.post('/dev/finance/records/batch-delete', { ids })
    toast.success(t('developer.finance.deleteSuccess'))
    fetchRecords()
  }
  catch (error: any) {
    toast.error(error.message || t('developer.finance.deleteFailed'))
  }
}

async function fetchApplications() {
  try {
    const data = await api.get<{ applications: Application[] }>('/dev/applications')
    applications.value = data?.applications || []
  }
  catch (error) {
    console.error('获取应用列表失败:', error)
  }
}

async function fetchRecords() {
  loading.value = true
  try {
    const data = await api.get<{ records: FinanceRecord[] }>('/dev/finance/records')
    records.value = data?.records || []
  }
  catch (error) {
    console.error('获取财务记录失败:', error)
  }
  finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchApplications()
  fetchRecords()
})
</script>

<template>
  <BasicPage
    :title="t('developer.finance.title')"
    :description="t('developer.finance.description')"
    sticky
  >
    <div class="space-y-6">
      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
        <UiCard>
          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
            <UiCardTitle class="text-sm font-medium">
              {{ t('developer.finance.rechargeCount') }}
            </UiCardTitle>
            <Icon icon="lucide:arrow-down-left" class="size-4 text-muted-foreground" />
          </UiCardHeader>
          <UiCardContent>
            <div class="text-2xl font-bold">
              {{ stats.rechargeCount }}
            </div>
          </UiCardContent>
        </UiCard>

        <UiCard>
          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
            <UiCardTitle class="text-sm font-medium">
              {{ t('developer.finance.rechargeAmount') }}
            </UiCardTitle>
            <Icon icon="lucide:dollar-sign" class="size-4 text-muted-foreground" />
          </UiCardHeader>
          <UiCardContent>
            <div class="text-2xl font-bold">
              ¥{{ stats.rechargeAmount.toFixed(2) }}
            </div>
          </UiCardContent>
        </UiCard>

        <UiCard>
          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
            <UiCardTitle class="text-sm font-medium">
              {{ t('developer.finance.consumptionCount') }}
            </UiCardTitle>
            <Icon icon="lucide:arrow-up-right" class="size-4 text-muted-foreground" />
          </UiCardHeader>
          <UiCardContent>
            <div class="text-2xl font-bold">
              {{ stats.consumptionCount }}
            </div>
          </UiCardContent>
        </UiCard>

        <UiCard>
          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
            <UiCardTitle class="text-sm font-medium">
              {{ t('developer.finance.consumptionAmount') }}
            </UiCardTitle>
            <Icon icon="lucide:credit-card" class="size-4 text-muted-foreground" />
          </UiCardHeader>
          <UiCardContent>
            <div class="text-2xl font-bold">
              ¥{{ stats.consumptionAmount.toFixed(2) }}
            </div>
          </UiCardContent>
        </UiCard>

        <UiCard>
          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
            <UiCardTitle class="text-sm font-medium">
              {{ t('developer.finance.profit') }}
            </UiCardTitle>
            <Icon icon="lucide:trending-up" class="size-4 text-muted-foreground" />
          </UiCardHeader>
          <UiCardContent>
            <div class="text-2xl font-bold">
              ¥{{ stats.profit.toFixed(2) }}
            </div>
          </UiCardContent>
        </UiCard>
      </div>

      <UiCard>
        <UiCardHeader>
          <UiCardTitle>{{ t('developer.finance.transactionRecords') }}</UiCardTitle>
          <UiCardDescription>
            {{ t('developer.finance.transactionRecordsDesc') }}
          </UiCardDescription>
        </UiCardHeader>
        <UiCardContent>
          <div class="space-y-3 mb-4">
            <div class="flex items-center justify-end">
              <UiButton
                v-if="table.getSelectedRowModel().rows.length > 0"
                variant="destructive"
                size="sm"
                @click="confirmBatchDelete"
              >
                <Icon icon="lucide:trash-2" class="mr-2 size-4" />
                {{ t('developer.finance.batchDeleteBtn') }}
              </UiButton>
            </div>
            <div class="flex flex-wrap items-center justify-between gap-2">
              <div class="flex flex-wrap items-center gap-2">
                <UiSelect v-model="appFilter" class="w-[140px]">
                  <UiSelectTrigger>
                    <UiSelectValue :placeholder="t('developer.finance.allApplications')" />
                  </UiSelectTrigger>
                  <UiSelectContent>
                    <UiSelectItem value="all">
                      {{ t('developer.finance.allApplications') }}
                    </UiSelectItem>
                    <UiSelectItem v-for="app in applications" :key="app.id" :value="String(app.id)">
                      {{ app.name }}
                    </UiSelectItem>
                  </UiSelectContent>
                </UiSelect>

                <UiSelect v-model="statusFilter" class="w-[120px]">
                  <UiSelectTrigger>
                    <UiSelectValue :placeholder="t('developer.finance.allStatus')" />
                  </UiSelectTrigger>
                  <UiSelectContent>
                    <UiSelectItem value="all">
                      {{ t('developer.finance.allStatus') }}
                    </UiSelectItem>
                    <UiSelectItem value="success">
                      {{ t('developer.finance.success') }}
                    </UiSelectItem>
                    <UiSelectItem value="pending">
                      {{ t('developer.finance.pending') }}
                    </UiSelectItem>
                    <UiSelectItem value="failed">
                      {{ t('developer.finance.failed') }}
                    </UiSelectItem>
                  </UiSelectContent>
                </UiSelect>

                <DateTimePicker
                  v-model="dateRange.from"
                  :placeholder="t('developer.finance.startTime')"
                  class="w-[180px]"
                />
                <span class="text-muted-foreground">{{ t('developer.finance.to') }}</span>
                <DateTimePicker
                  v-model="dateRange.to"
                  :placeholder="t('developer.finance.endTime')"
                  class="w-[180px]"
                />
                <UiButton variant="ghost" size="sm" @click="setQuickRange('today')">
                  {{ t('developer.finance.today') }}
                </UiButton>
                <UiButton variant="ghost" size="sm" @click="setQuickRange('week')">
                  {{ t('developer.finance.last7Days') }}
                </UiButton>
                <UiButton variant="ghost" size="sm" @click="setQuickRange('month')">
                  {{ t('developer.finance.thisMonth') }}
                </UiButton>
              </div>
            </div>
          </div>

          <div v-if="loading" class="flex items-center justify-center py-12">
            <Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
          </div>

          <div v-else class="border rounded-md">
            <Table>
              <TableHeader>
                <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                  <TableHead v-for="header in headerGroup.headers" :key="header.id">
                    <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <template v-if="table.getRowModel().rows?.length">
                  <TableRow
                    v-for="row in table.getRowModel().rows"
                    :key="row.id"
                    :data-state="row.getIsSelected() && 'selected'"
                  >
                    <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
                      <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
                    </TableCell>
                  </TableRow>
                </template>

                <TableRow v-else>
                  <TableCell
                    :colspan="columns.length"
                    class="h-24 text-center"
                  >
                    <div class="flex flex-col items-center justify-center text-muted-foreground">
                      <Icon icon="lucide:inbox" class="size-12 mb-2 opacity-50" />
                      <span>{{ t('developer.finance.noRecords') }}</span>
                    </div>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>

          <DataTablePagination v-if="!loading && table.getRowModel().rows?.length" :table="table" class="mt-4" />
        </UiCardContent>
      </UiCard>
    </div>
  </BasicPage>

  <ConfirmDialog
    v-model:open="deleteDialogOpen"
    destructive
    :confirm-button-text="t('developer.finance.delete')"
    :cancel-button-text="t('developer.finance.cancel')"
    @confirm="handleDelete"
  >
    <template #title>
      {{ t('developer.finance.delete') }}
    </template>
    <template #description>
      {{ t('developer.finance.deleteConfirm') }}
    </template>
  </ConfirmDialog>

  <ConfirmDialog
    v-model:open="batchDeleteDialogOpen"
    destructive
    :confirm-button-text="t('developer.finance.delete')"
    :cancel-button-text="t('developer.finance.cancel')"
    @confirm="handleBatchDelete"
  >
    <template #title>
      {{ t('developer.finance.batchDeleteBtn') }}
    </template>
    <template #description>
      {{ t('developer.finance.batchDeleteConfirm', { count: table.getSelectedRowModel().rows.length }) }}
    </template>
  </ConfirmDialog>
</template>
