import { useState } from 'react'
import { Card, Descriptions, Drawer, Select, Space, Table, Tabs, Tag, Typography } from 'antd'
import type { TableColumnsType } from 'antd'
import { useQuery } from '@tanstack/react-query'

import {
  fetchAdminWorkOrders,
  fetchAdminWorkerDetail,
  fetchAdminWorkerDepositUnfreezes,
  fetchAdminWorkerWalletLedgers,
} from '@/services/admin'
import { ADMIN_DEFAULT_PAGE_SIZE, buildAdminTablePagination } from '@/utils/admin-pagination'
import { formatAdminDateTime } from '@/utils/admin-time'
import type {
  WorkOrder,
  WorkerDepositUnfreeze,
  WorkerUser,
  WorkerWalletLedger,
} from '@/types/worker-platform'
import { formatMoney, formatStatus, formatWorkerStatus, resolveStatusColor } from './shared'

/** 与打手端 worker-profile-view-utils 的流水文案保持一致；未知类型原样展示。 */
const LEDGER_TYPE_LABELS: Record<string, string> = {
  manual_credit: '人工充值',
  withdraw_freeze: '提现冻结',
  withdraw_paid: '提现打款',
  withdraw_release: '提现退回',
  deposit_freeze: '冻结押金',
  deposit_release: '释放押金',
  deposit_pending_unfreeze: '待解冻金额',
  reward_pending_unfreeze: '报酬待解冻',
  deposit_unfreeze: '押金已解冻',
  reward_unfreeze: '报酬已解冻',
  deposit_deduction: '扣除押金',
  reward_settlement: '结算报酬',
  sharing_reward: '拼单报酬',
  after_sales_deposit_deduction: '售后扣减押金',
  after_sales_balance_deduction: '售后扣减余额',
  after_sales_debt_offset: '抵扣售后欠款',
  after_sales_refund: '售后追缴退还',
}

function formatLedgerType(ledgerType: string) {
  return LEDGER_TYPE_LABELS[ledgerType] || ledgerType || '-'
}

function resolveLedgerTagColor(ledgerType: string) {
  if (
    [
      'deposit_freeze',
      'deposit_pending_unfreeze',
      'reward_pending_unfreeze',
      'after_sales_debt_offset',
    ].includes(ledgerType)
  )
    return 'gold'
  if (
    ['deposit_release', 'deposit_unfreeze', 'reward_unfreeze', 'after_sales_refund'].includes(
      ledgerType,
    )
  )
    return 'green'
  if (
    [
      'deposit_deduction',
      'after_sales_deposit_deduction',
      'after_sales_balance_deduction',
    ].includes(ledgerType)
  )
    return 'red'
  if (['reward_settlement', 'sharing_reward'].includes(ledgerType)) return 'cyan'
  if (ledgerType === 'manual_credit') return 'blue'
  if (ledgerType === 'withdraw_freeze') return 'orange'
  if (ledgerType === 'withdraw_paid') return 'purple'
  if (ledgerType === 'withdraw_release') return 'green'
  return 'default'
}

function formatUnfreezeStatus(status: string) {
  if (status === 'pending') return { label: '待解冻', color: 'orange' }
  if (status === 'released') return { label: '已到账', color: 'green' }
  if (status === 'deducted') return { label: '已扣减', color: 'red' }
  return { label: status || '-', color: 'default' }
}

export default function WorkerDetailDrawer({
  worker,
  onClose,
}: {
  worker: WorkerUser | null
  onClose: () => void
}) {
  const workerId = worker?.workerId || 0

  return (
    <Drawer
      className="worker-detail-drawer"
      width="min(1120px, calc(100vw - 24px))"
      open={Boolean(worker)}
      destroyOnHidden
      onClose={onClose}
      title={
        worker ? (
          <Space size={8} wrap>
            <span>{worker.displayName || worker.username}</span>
            <Tag color={worker.workerType === 'internal' ? 'blue' : 'default'}>
              {worker.workerType === 'internal' ? '内部' : '外部'}
            </Tag>
            <Tag color={worker.status === 'active' ? 'green' : 'orange'}>
              {formatWorkerStatus(worker.status)}
            </Tag>
          </Space>
        ) : null
      }
    >
      <Tabs
        items={[
          { key: 'overview', label: '概览', children: <OverviewSection workerId={workerId} /> },
          {
            key: 'unfreezes',
            label: '待解冻',
            children: <UnfreezesSection workerId={workerId} />,
          },
          {
            key: 'ledgers',
            label: '资金流水',
            children: <LedgersSection workerId={workerId} />,
          },
          { key: 'orders', label: '他的订单', children: <OrdersSection workerId={workerId} /> },
        ]}
      />
    </Drawer>
  )
}

function OverviewSection({ workerId }: { workerId: number }) {
  const detailQuery = useQuery({
    queryKey: ['admin-worker-detail', workerId],
    queryFn: () => fetchAdminWorkerDetail(workerId),
    enabled: workerId > 0,
  })
  const detail = detailQuery.data?.data
  if (!workerId) return null
  if (!detail) {
    return <Typography.Text type="secondary">加载中…</Typography.Text>
  }
  const { worker, summary, orderOverview } = detail
  return (
    <div className="worker-order-detail-stack">
      <Card size="small" title="基本信息">
        <Descriptions bordered size="small" column={{ xs: 1, md: 2 }}>
          <Descriptions.Item label="昵称">{worker.displayName || '-'}</Descriptions.Item>
          <Descriptions.Item label="账号">{worker.username}</Descriptions.Item>
          <Descriptions.Item label="手机号">{worker.phone || '-'}</Descriptions.Item>
          <Descriptions.Item label="等级">{worker.level?.name || '-'}</Descriptions.Item>
          <Descriptions.Item label="邀请人">
            {worker.inviter ? `${worker.inviter.displayName || worker.inviter.username}` : '-'}
          </Descriptions.Item>
          <Descriptions.Item label="注册时间">
            {formatAdminDateTime(worker.createdAt)}
          </Descriptions.Item>
        </Descriptions>
      </Card>
      <Card size="small" title="钱包">
        <Descriptions bordered size="small" column={{ xs: 1, md: 2 }}>
          <Descriptions.Item label="可用余额">
            {formatMoney(worker.wallet.availableAmount)}
          </Descriptions.Item>
          <Descriptions.Item label="冻结押金">
            {formatMoney(worker.wallet.frozenDepositAmount)}
          </Descriptions.Item>
          <Descriptions.Item label="待解冻金额">
            {formatMoney(worker.wallet.pendingUnfreezeAmount)}
          </Descriptions.Item>
          <Descriptions.Item label="累计充值">
            {formatMoney(worker.wallet.totalCreditedAmount)}
          </Descriptions.Item>
          <Descriptions.Item label="累计结算">
            {formatMoney(worker.wallet.totalSettledAmount)}
          </Descriptions.Item>
        </Descriptions>
      </Card>
      <Card size="small" title="接单统计">
        <Descriptions bordered size="small" column={{ xs: 1, md: 3 }}>
          <Descriptions.Item label="进行中">{summary.activeOrderCount}</Descriptions.Item>
          <Descriptions.Item label="已完成">{summary.acceptedOrderCount}</Descriptions.Item>
          <Descriptions.Item label="超时">
            {summary.timeoutOrderCount > 0 ? <Tag color="red">{summary.timeoutOrderCount}</Tag> : 0}
          </Descriptions.Item>
        </Descriptions>
      </Card>
      <Card size="small" title="订单概览（按状态）">
        {orderOverview.length === 0 ? (
          <Typography.Text type="secondary">暂无订单</Typography.Text>
        ) : (
          <Space size={[12, 8]} wrap>
            {orderOverview.map((item) => (
              <Tag key={item.status} color={resolveStatusColor(item.status)}>
                {formatStatus(item.status)} {item.orderCount} 单 /{' '}
                {formatMoney(item.settlementAmount)}
              </Tag>
            ))}
          </Space>
        )}
      </Card>
    </div>
  )
}

function UnfreezesSection({ workerId }: { workerId: number }) {
  const [page, setPage] = useState(1)
  const unfreezesQuery = useQuery({
    queryKey: ['admin-worker-detail-unfreezes', workerId, page],
    queryFn: () =>
      fetchAdminWorkerDepositUnfreezes(workerId, { page, pageSize: ADMIN_DEFAULT_PAGE_SIZE }),
    enabled: workerId > 0,
  })
  const data = unfreezesQuery.data?.data
  const columns: TableColumnsType<WorkerDepositUnfreeze> = [
    {
      title: '资金类型',
      width: 110,
      render: (_, row) => {
        const labels: Record<string, string> = {
          deposit: '押金',
          reward: '报酬',
          legacy_combined: '历史合并',
        }
        return <Tag>{labels[row.fundType] || row.fundType}</Tag>
      },
    },
    {
      title: '金额',
      width: 110,
      render: (_, row) => formatMoney(row.amount),
    },
    {
      title: '状态',
      width: 100,
      render: (_, row) => {
        const status = formatUnfreezeStatus(row.status)
        return <Tag color={status.color}>{status.label}</Tag>
      },
    },
    {
      title: '到期时间',
      width: 170,
      render: (_, row) => formatAdminDateTime(row.unfreezeAt),
    },
    {
      title: '到账时间',
      width: 170,
      render: (_, row) => (row.releasedAt ? formatAdminDateTime(row.releasedAt) : '-'),
    },
    { title: '关联工单', dataIndex: 'workOrderId', width: 100 },
    {
      title: '创建时间',
      width: 170,
      render: (_, row) => formatAdminDateTime(row.createdAt),
    },
  ]
  return (
    <Table<WorkerDepositUnfreeze>
      rowKey="id"
      size="small"
      columns={columns}
      dataSource={data?.items || []}
      loading={unfreezesQuery.isFetching}
      scroll={{ x: 930 }}
      pagination={buildAdminTablePagination({
        page,
        pageSize: ADMIN_DEFAULT_PAGE_SIZE,
        total: data?.pagination.total || 0,
        onChange: setPage,
      })}
    />
  )
}

function LedgersSection({ workerId }: { workerId: number }) {
  const [page, setPage] = useState(1)
  const [ledgerType, setLedgerType] = useState('')
  const ledgersQuery = useQuery({
    queryKey: ['admin-worker-detail-ledgers', workerId, page, ledgerType],
    queryFn: () =>
      fetchAdminWorkerWalletLedgers(workerId, {
        page,
        pageSize: ADMIN_DEFAULT_PAGE_SIZE,
        ledgerType: ledgerType || undefined,
      }),
    enabled: workerId > 0,
  })
  const data = ledgersQuery.data?.data
  const columns: TableColumnsType<WorkerWalletLedger> = [
    {
      title: '类型',
      width: 130,
      render: (_, row) => (
        <Tag color={resolveLedgerTagColor(row.ledgerType)}>{formatLedgerType(row.ledgerType)}</Tag>
      ),
    },
    {
      title: '金额',
      width: 110,
      render: (_, row) => (
        <Typography.Text type={row.amount >= 0 ? 'success' : 'danger'}>
          {row.amount >= 0 ? '+' : '-'}
          {formatMoney(Math.abs(row.amount))}
        </Typography.Text>
      ),
    },
    {
      title: '变动后余额',
      width: 110,
      render: (_, row) => formatMoney(row.balanceAfter),
    },
    {
      title: '冻结金额',
      width: 110,
      render: (_, row) => formatMoney(row.frozenAfter),
    },
    {
      title: '关联订单',
      width: 150,
      render: (_, row) => {
        const orderNo = String(row.relatedPlatformOrderId || row.relatedWorkOrderId || '-').trim()
        return (
          <Typography.Text ellipsis={{ tooltip: orderNo }} copyable={orderNo !== '-'}>
            {orderNo}
          </Typography.Text>
        )
      },
    },
    {
      title: '说明',
      ellipsis: true,
      render: (_, row) => row.note || '-',
    },
    {
      title: '时间',
      width: 170,
      render: (_, row) => formatAdminDateTime(row.createdAt),
    },
  ]
  return (
    <div className="worker-order-detail-stack">
      <Select
        allowClear
        value={ledgerType || undefined}
        style={{ width: 180 }}
        placeholder="全部类型"
        options={Object.entries(LEDGER_TYPE_LABELS).map(([value, label]) => ({ value, label }))}
        onChange={(next) => {
          setLedgerType(next || '')
          setPage(1)
        }}
      />
      <Table<WorkerWalletLedger>
        rowKey="ledgerId"
        size="small"
        columns={columns}
        dataSource={data?.items || []}
        loading={ledgersQuery.isFetching}
        scroll={{ x: 1020 }}
        pagination={buildAdminTablePagination({
          page,
          pageSize: ADMIN_DEFAULT_PAGE_SIZE,
          total: data?.pagination.total || 0,
          onChange: setPage,
        })}
      />
    </div>
  )
}

function OrdersSection({ workerId }: { workerId: number }) {
  const [page, setPage] = useState(1)
  const ordersQuery = useQuery({
    queryKey: ['admin-worker-detail-orders', workerId, page],
    queryFn: () => fetchAdminWorkOrders({ workerId, page, pageSize: ADMIN_DEFAULT_PAGE_SIZE }),
    enabled: workerId > 0,
  })
  const data = ordersQuery.data?.data
  const columns: TableColumnsType<WorkOrder> = [
    {
      title: '平台单号',
      width: 160,
      ellipsis: true,
      render: (_, row) => {
        const orderNo = String(row.platformOrderId || row.workOrderNo || row.workOrderId).trim()
        return <Typography.Text ellipsis={{ tooltip: orderNo }}>{orderNo}</Typography.Text>
      },
    },
    {
      title: '商品',
      ellipsis: true,
      render: (_, row) => row.productName || '-',
    },
    {
      title: '状态',
      width: 110,
      render: (_, row) => (
        <Tag color={resolveStatusColor(row.status)}>{formatStatus(row.status)}</Tag>
      ),
    },
    {
      title: '方式',
      width: 90,
      render: (_, row) => (row.sharing?.enabled ? `拼单` : '整单'),
    },
    {
      title: '报酬',
      width: 110,
      render: (_, row) => formatMoney(row.rewardAmount),
    },
    {
      title: '创建时间',
      width: 170,
      render: (_, row) => formatAdminDateTime(row.createdAt),
    },
  ]
  return (
    <Table<WorkOrder>
      rowKey="workOrderId"
      size="small"
      columns={columns}
      dataSource={data?.items || []}
      loading={ordersQuery.isFetching}
      scroll={{ x: 900 }}
      pagination={buildAdminTablePagination({
        page,
        pageSize: ADMIN_DEFAULT_PAGE_SIZE,
        total: data?.pagination.total || 0,
        onChange: setPage,
      })}
    />
  )
}