import type { ColumnDef } from '@tanstack/vue-table'
import type { Composer } from 'vue-i18n'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Check, Pencil, Trash2 } from 'lucide-vue-next'
import { h } from 'vue'

import type { AgentApp } from '../data/schema'

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { MoreHorizontal } from 'lucide-vue-next'

export function getColumns(actions: {
  onEdit: (row: AgentApp) => void
  onDelete: (row: AgentApp) => void
  onToggleStatus: (row: AgentApp) => void
}, t: Composer['t']): ColumnDef<AgentApp>[] {
  return [
    {
      accessorKey: 'agent_name',
      header: () => h('span', {}, '代理'),
      cell: ({ row }) => {
        const agentName = row.getValue('agent_name') as string
        return h('div', { class: 'flex items-center gap-2' }, [
          h('span', { class: 'font-medium' }, agentName || '-'),
        ])
      },
    },
    {
      accessorKey: 'app_name',
      header: () => h('span', {}, '应用'),
      cell: ({ row }) => {
        const appName = row.getValue('app_name') as string
        return h('span', { class: 'font-medium' }, appName || '-')
      },
    },
    {
      accessorKey: 'card_types',
      header: () => h('span', {}, '卡密类型'),
      cell: ({ row }) => {
        const cardTypes = row.getValue('card_types') as AgentApp['card_types']
        if (!cardTypes || cardTypes.length === 0) {
          return h('span', { class: 'text-muted-foreground' }, '-')
        }

        return h('div', { class: 'flex flex-wrap gap-1' },
          cardTypes.map(ct =>
            h('span', {
              class: `inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${
                ct.can_generate
                  ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
                  : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400'
              }`
            }, [
              ct.can_generate && h(Check, { class: 'size-3' }),
              ct.name || `卡类#${ct.card_type_id}`
            ])
          )
        )
      },
    },
    {
      accessorKey: 'card_types',
      id: 'price',
      header: () => h('span', {}, '价格'),
      cell: ({ row }) => {
        const cardTypes = row.getValue('card_types') as AgentApp['card_types']
        if (!cardTypes || cardTypes.length === 0) {
          return h('span', { class: 'text-muted-foreground' }, '-')
        }
        const price = cardTypes[0]?.price || 0
        return h('span', { class: 'font-medium' }, `¥${price}`)
      },
    },
    {
      accessorKey: 'status',
      header: () => h('span', {}, '状态'),
      cell: ({ row }) => {
        const status = row.getValue('status') as string
        const isActive = status === 'active'
        return h(Badge, { variant: isActive ? 'default' : 'secondary' }, () =>
          isActive ? '已启用' : '已禁用'
        )
      },
    },
    {
      accessorKey: 'created_at',
      header: () => h('span', {}, '授权时间'),
      cell: ({ row }) => {
        const createdAt = row.getValue('created_at') as string
        if (!createdAt) return h('span', { class: 'text-muted-foreground' }, '-')
        const date = new Date(createdAt)
        return h('span', { class: 'text-sm' }, date.toLocaleString('zh-CN'))
      },
    },
    {
      accessorKey: 'remark',
      header: () => h('span', {}, '备注'),
      cell: ({ row }) => {
        const remark = row.getValue('remark') as string
        return h('span', { class: 'text-sm text-muted-foreground' }, remark || '-')
      },
    },
    {
      id: 'actions',
      header: () => h('span', { class: 'sr-only' }, '操作'),
      cell: ({ row }) => {
        const app = row.original
        const isActive = app.status === 'active'

        return h(
          DropdownMenu,
          {},
          {
            default: () => [
              h(DropdownMenuTrigger, { asChild: true }, () =>
                h(Button, { variant: 'ghost', class: 'h-8 w-8 p-0' }, () => [
                  h(MoreHorizontal, { class: 'h-4 w-4' }),
                  h('span', { class: 'sr-only' }, '打开菜单'),
                ])),
              h(
                DropdownMenuContent,
                { align: 'end' },
                () => [
                  h(DropdownMenuItem, { onClick: () => actions.onEdit(app) }, () => [
                    h(Pencil, { class: 'mr-2 h-4 w-4' }),
                    '编辑',
                  ]),
                  h(DropdownMenuItem, { onClick: () => actions.onToggleStatus(app) }, () => [
                    h(Check, { class: 'mr-2 h-4 w-4' }),
                    isActive ? '禁用' : '启用',
                  ]),
                  h(DropdownMenuSeparator),
                  h(DropdownMenuItem, { class: 'text-destructive', onClick: () => actions.onDelete(app) }, () => [
                    h(Trash2, { class: 'mr-2 h-4 w-4' }),
                    '删除',
                  ]),
                ],
              ),
            ],
          },
        )
      },
    },
  ]
}