import { Alert, Card, Col, Row, Skeleton, Statistic } from 'antd'
import { useQuery } from '@tanstack/react-query'

import PageHeader from '@/components/admin/PageHeader'
import { fetchAdminDashboardSummary } from '@/services/admin'

const cards = [
  { key: 'todayOrders', label: '今日订单' },
  { key: 'paidPendingClaim', label: '待领取' },
  { key: 'claimingTasks', label: '领取中' },
  { key: 'redeemedToday', label: '今日成功' },
  { key: 'abnormalTasks', label: '异常任务' },
] as const

export default function AdminDashboardPage() {
  const query = useQuery({
    queryKey: ['admin-dashboard-summary'],
    queryFn: () => fetchAdminDashboardSummary(),
  })
  const summary = query.data?.data

  return (
    <section className="page-stack">
      <PageHeader title="系统概览" description="快速查看订单和交付链路的运行状态。" />

      {query.error ? (
        <Alert
          type="error"
          showIcon
          message={query.error instanceof Error ? query.error.message : '读取概览失败'}
        />
      ) : null}

      {query.isLoading ? (
        <Card>
          <Skeleton active paragraph={{ rows: 8 }} />
        </Card>
      ) : (
        <Row gutter={[16, 16]}>
          {cards.map((card) => (
            <Col xs={24} md={12} xl={8} key={card.key}>
              <Card>
                <Statistic title={card.label} value={summary?.[card.key] ?? 0} />
              </Card>
            </Col>
          ))}
        </Row>
      )}
    </section>
  )
}