import { useState } from 'react'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { Table, Tag, Button, Typography, App, Space, Badge } from 'antd'
import { ReloadOutlined, RetweetOutlined, CloudServerOutlined } from '@ant-design/icons'
import { getQueueOverview, getFailedJobs, retryJob } from '@/services/events-api'

const { Title, Text } = Typography

function EventsPage() {
  const { message } = App.useApp()
  const qc = useQueryClient()
  const [selectedQueue, setSelectedQueue] = useState<string | null>(null)

  const { data: overview } = useQuery({ queryKey: ['events', 'overview'], queryFn: getQueueOverview, staleTime: 10_000 })
  const { data: failed } = useQuery({
    queryKey: ['events', 'failed', selectedQueue],
    queryFn: () => selectedQueue ? getFailedJobs(selectedQueue) : null,
    enabled: !!selectedQueue,
  })

  const handleRetry = async (queue: string, jobId: string) => {
    await retryJob(queue, jobId)
    message.success('已重试')
    qc.invalidateQueries({ queryKey: ['events'] })
  }

  const overviewColumns = [
    { title: '队列', dataIndex: 'name', width: 160 },
    { title: '总计', dataIndex: 'total', width: 60, align: 'center' as const },
    { title: '等待', dataIndex: 'waiting', width: 60, align: 'center' as const, render: (v: number) => <Badge count={v} showZero color="blue" /> },
    { title: '进行中', dataIndex: 'active', width: 70, align: 'center' as const, render: (v: number) => <Badge count={v} showZero color="processing" /> },
    { title: '完成', dataIndex: 'completed', width: 60, align: 'center' as const, render: (v: number) => <Text type="success">{v}</Text> },
    { title: '失败', dataIndex: 'failed', width: 60, align: 'center' as const, render: (v: number, r: any) => (
      v > 0 ? <Button type="link" size="small" danger onClick={() => setSelectedQueue(r.name)}>{v}</Button> : <Text type="secondary">0</Text>
    )},
    { title: '延迟', dataIndex: 'delayed', width: 60, align: 'center' as const },
  ]

  const failedColumns = [
    { title: 'Job ID', dataIndex: 'id', width: 160, ellipsis: true },
    { title: '名称', dataIndex: 'name', width: 150 },
    { title: '重试', dataIndex: 'attemptsMade', width: 60, align: 'center' as const },
    { title: '失败原因', dataIndex: 'failedReason', ellipsis: true },
    { title: '操作', width: 80, render: (_: any, r: any) => (
      <Button type="link" size="small" icon={<RetweetOutlined />} onClick={() => handleRetry(selectedQueue!, r.id)}>重试</Button>
    )},
  ]

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
        <Title level={5} style={{ margin: 0 }}><CloudServerOutlined /> 事件队列</Title>
        <Button icon={<ReloadOutlined />} onClick={() => qc.invalidateQueries({ queryKey: ['events'] })}>刷新</Button>
      </div>

      <Table dataSource={overview?.queues || []} columns={overviewColumns} rowKey="name" pagination={false} style={{ marginBottom: 24 }} />

      {selectedQueue && (
        <>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
            <Title level={5} style={{ margin: 0, fontSize: 14 }}>失败任务 · {selectedQueue}</Title>
            <Button size="small" onClick={() => setSelectedQueue(null)}>关闭</Button>
          </div>
          <Table dataSource={failed?.jobs || []} columns={failedColumns} rowKey="id" pagination={false} size="small" />
        </>
      )}
    </div>
  )
}

export default EventsPage