import { useCallback, useEffect, useState } from 'react'
import {
  Card,
  Table,
  Typography,
  Space,
  Select,
  Tag,
  message,
  Tabs,
  Input,
  Button,
  Modal,
} from 'antd'
import { SearchOutlined, CheckCircleOutlined, StopOutlined } from '@ant-design/icons'
import {
  formatMoney,
  listOrders,
  listSites,
  fetchReceivedListings,
  updateReceivedListingStatus,
  type DistributionOrder,
  type ReceivedListing,
  type Site,
} from '../api'

const ORDER_STATUSES = [
  'pending_payment',
  'pending_handoff',
  'renting',
  'overdue',
  'pending_checkout_confirm',
  'pending_checkout_accept',
  'checkout_disputing',
  'disputing',
  'abnormal',
  'completed',
  'refunded',
  'cancelled',
]

const REVIEW_STATUS_LABELS: Record<string, { label: string; color: string }> = {
  pending: { label: '待审核', color: 'orange' },
  approved: { label: '审核通过', color: 'success' },
  rejected: { label: '审核未通过', color: 'error' },
  none: { label: '免审', color: 'default' },
}

const LISTING_STATUS_LABELS: Record<string, { label: string; color: string }> = {
  published: { label: '上架在售', color: 'green' },
  inactive: { label: '已下架', color: 'default' },
  closed: { label: '已关闭', color: 'error' },
  draft: { label: '草稿', color: 'warning' },
}

export default function Orders({ kind }: { kind: 'all' | 'sold' | 'receive' }) {
  const [sites, setSites] = useState<Site[]>([])
  const [siteID, setSiteID] = useState<number>()
  const [activeTab, setActiveTab] = useState<'received_listings' | 'orders'>('received_listings')

  // Orders Tab State
  const [status, setStatus] = useState<string>('')
  const [orders, setOrders] = useState<DistributionOrder[]>([])
  const [orderTotal, setOrderTotal] = useState(0)
  const [orderPage, setOrderPage] = useState(1)
  const [orderLoading, setOrderLoading] = useState(false)

  // Received Listings Tab State
  const [receivedListings, setReceivedListings] = useState<ReceivedListing[]>([])
  const [recvTotal, setRecvTotal] = useState(0)
  const [recvPage, setRecvPage] = useState(1)
  const [recvLoading, setRecvLoading] = useState(false)
  const [recvStatus, setRecvStatus] = useState<string>('')
  const [recvReviewStatus, setRecvReviewStatus] = useState<string>('')
  const [recvKeyword, setRecvKeyword] = useState<string>('')

  const pageSize = 20

  const loadOrders = useCallback(async (targetPage: number) => {
    setOrderLoading(true)
    try {
      const result = await listOrders({ kind, status, siteID, page: targetPage, pageSize })
      setOrders(result.items)
      setOrderTotal(result.total)
      setOrderPage(result.page)
    } catch {
      message.error('订单加载失败')
    } finally {
      setOrderLoading(false)
    }
  }, [kind, status, siteID])

  const loadReceivedListings = useCallback(async (targetPage: number) => {
    if (!siteID) return
    setRecvLoading(true)
    try {
      const result = await fetchReceivedListings({
        siteID,
        page: targetPage,
        pageSize,
        status: recvStatus,
        reviewStatus: recvReviewStatus,
        keyword: recvKeyword,
      })
      setReceivedListings(result.items)
      setRecvTotal(result.total)
      setRecvPage(result.page)
    } catch {
      message.error('分销收号资产加载失败')
    } finally {
      setRecvLoading(false)
    }
  }, [siteID, recvStatus, recvReviewStatus, recvKeyword])

  useEffect(() => {
    listSites()
      .then((rows) => {
        setSites(rows)
        if (rows.length > 0) setSiteID(rows[0].id)
      })
      .catch(() => message.error('站点加载失败'))
  }, [])

  useEffect(() => {
    if (kind === 'receive') {
      if (activeTab === 'received_listings') {
        void loadReceivedListings(1)
      } else {
        void loadOrders(1)
      }
    } else {
      void loadOrders(1)
    }
  }, [kind, activeTab, loadOrders, loadReceivedListings])

  async function handleToggleListingStatus(item: ReceivedListing) {
    const nextStatus = item.status === 'published' ? 'inactive' : 'published'
    const actionName = nextStatus === 'published' ? '重新上架' : '下架'
    Modal.confirm({
      title: `确认${actionName}该账号？`,
      content: `账号编号：${item.listing_no} (${item.title})`,
      onOk: async () => {
        try {
          await updateReceivedListingStatus(item.listing_id, nextStatus)
          message.success(`已${actionName}`)
          void loadReceivedListings(recvPage)
        } catch (error: unknown) {
          const respMessage = (error as { response?: { data?: { message?: string } } })?.response?.data?.message
          message.error(respMessage || `${actionName}操作失败`)
        }
      },
    })
  }

  const title = kind === 'sold' ? '售出账号订单' : kind === 'receive' ? '分销收号管理' : '全部分销订单'

  return (
    <Space direction="vertical" className="page" style={{ width: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Typography.Title level={3} style={{ marginBottom: 4 }}>{title}</Typography.Title>
          <Typography.Text type="secondary">
            {kind === 'receive'
              ? '查看由当前分销网站上传的号源资产及审核流转状态，并跟踪对应的收号分成订单'
              : '查看分销订单交易及财务明细'}
          </Typography.Text>
        </div>
        <Select
          placeholder="切换分销网站"
          style={{ width: 220 }}
          value={siteID}
          options={sites.map((site) => ({ label: `${site.site_name} (${site.site_code})`, value: site.id }))}
          onChange={(value) => setSiteID(value)}
        />
      </div>

      {kind === 'receive' ? (
        <Card>
          <Tabs
            activeKey={activeTab}
            onChange={(k) => setActiveTab(k as 'received_listings' | 'orders')}
            items={[
              {
                key: 'received_listings',
                label: `收到的账号资产 (${recvTotal})`,
                children: (
                  <Space direction="vertical" style={{ width: '100%' }}>
                    <Space wrap style={{ marginBottom: 16 }}>
                      <Select
                        allowClear
                        placeholder="审核状态"
                        style={{ width: 140 }}
                        value={recvReviewStatus || undefined}
                        options={Object.entries(REVIEW_STATUS_LABELS).map(([k, v]) => ({ label: v.label, value: k }))}
                        onChange={(val) => {
                          setRecvReviewStatus(val ?? '')
                        }}
                      />
                      <Select
                        allowClear
                        placeholder="货架状态"
                        style={{ width: 140 }}
                        value={recvStatus || undefined}
                        options={Object.entries(LISTING_STATUS_LABELS).map(([k, v]) => ({ label: v.label, value: k }))}
                        onChange={(val) => {
                          setRecvStatus(val ?? '')
                        }}
                      />
                      <Input
                        placeholder="搜索编号/标题/联系电话/昵称"
                        prefix={<SearchOutlined />}
                        style={{ width: 260 }}
                        allowClear
                        value={recvKeyword}
                        onChange={(e) => setRecvKeyword(e.target.value)}
                        onPressEnter={() => void loadReceivedListings(1)}
                      />
                      <Button type="primary" onClick={() => void loadReceivedListings(1)}>
                        筛选
                      </Button>
                    </Space>

                    <Table
                      rowKey="listing_id"
                      loading={recvLoading}
                      dataSource={receivedListings}
                      pagination={{
                        current: recvPage,
                        pageSize,
                        total: recvTotal,
                        showTotal: (tot) => `共 ${tot} 个分销收号商品`,
                        onChange: (p) => void loadReceivedListings(p),
                      }}
                      columns={[
                        {
                          title: '商品编号',
                          dataIndex: 'listing_no',
                          width: 140,
                          render: (v: string) => <Typography.Text strong copyable>{v}</Typography.Text>,
                        },
                        {
                          title: '账号标题与游戏',
                          dataIndex: 'title',
                          minWidth: 220,
                          render: (_: unknown, row: ReceivedListing) => (
                            <div>
                              <Typography.Text strong style={{ display: 'block' }}>
                                {row.title || '无标题'}
                              </Typography.Text>
                              <Space size={4} style={{ marginTop: 4 }}>
                                <Tag color="blue">{row.game_name}</Tag>
                                {row.server_region && <Tag>{row.server_region}</Tag>}
                                {row.login_platform && <Tag>{row.login_platform}</Tag>}
                                {row.rank_level && <Tag color="purple">{row.rank_level}</Tag>}
                              </Space>
                            </div>
                          ),
                        },
                        {
                          title: '上传卖家',
                          dataIndex: 'owner_phone',
                          width: 150,
                          render: (_: unknown, row: ReceivedListing) => (
                            <div>
                              <div>{row.owner_nickname || '匿名卖家'}</div>
                              <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                                {row.owner_phone || '-'}
                              </Typography.Text>
                            </div>
                          ),
                        },
                        {
                          title: '价格 / 押金',
                          width: 140,
                          render: (_: unknown, row: ReceivedListing) => (
                            <div>
                              <Typography.Text strong style={{ color: '#cf1322' }}>
                                {formatMoney(row.price_cent)}/时
                              </Typography.Text>
                              <div style={{ fontSize: 12, color: '#888' }}>
                                押金: {formatMoney(row.deposit_amount_cent)}
                              </div>
                            </div>
                          ),
                        },
                        {
                          title: '主站审核',
                          dataIndex: 'review_status',
                          width: 120,
                          render: (v: string, row: ReceivedListing) => {
                            const conf = REVIEW_STATUS_LABELS[v] || { label: v, color: 'default' }
                            return (
                              <div>
                                <Tag color={conf.color}>{conf.label}</Tag>
                                {row.review_reason && (
                                  <Typography.Text type="danger" style={{ display: 'block', fontSize: 11 }}>
                                    {row.review_reason}
                                  </Typography.Text>
                                )}
                              </div>
                            )
                          },
                        },
                        {
                          title: '货架状态',
                          dataIndex: 'status',
                          width: 110,
                          render: (v: string) => {
                            const conf = LISTING_STATUS_LABELS[v] || { label: v, color: 'default' }
                            return <Tag color={conf.color}>{conf.label}</Tag>
                          },
                        },
                        {
                          title: '上传时间',
                          dataIndex: 'created_at',
                          width: 160,
                          render: (v: string) => <span style={{ fontSize: 12, color: '#666' }}>{v}</span>,
                        },
                        {
                          title: '操作',
                          width: 110,
                          render: (_: unknown, row: ReceivedListing) => (
                            <Button
                              type="link"
                              size="small"
                              danger={row.status === 'published'}
                              icon={row.status === 'published' ? <StopOutlined /> : <CheckCircleOutlined />}
                              onClick={() => void handleToggleListingStatus(row)}
                            >
                              {row.status === 'published' ? '下架' : '上架'}
                            </Button>
                          ),
                        },
                      ]}
                    />
                  </Space>
                ),
              },
              {
                key: 'orders',
                label: `收号分成订单 (${orderTotal})`,
                children: (
                  <Space direction="vertical" style={{ width: '100%' }}>
                    <Space style={{ marginBottom: 16 }}>
                      <Select
                        allowClear
                        placeholder="订单状态"
                        style={{ width: 180 }}
                        options={ORDER_STATUSES.map((value) => ({ label: value, value }))}
                        onChange={(value) => setStatus(value ?? '')}
                      />
                    </Space>
                    <Table
                      rowKey="order_id"
                      loading={orderLoading}
                      dataSource={orders}
                      pagination={{
                        current: orderPage,
                        pageSize,
                        total: orderTotal,
                        onChange: (p) => void loadOrders(p),
                      }}
                      columns={[
                        { title: '订单号', dataIndex: 'order_no' },
                        { title: '订单状态', dataIndex: 'status', render: (v: string) => <Tag>{v}</Tag> },
                        { title: '退款状态', dataIndex: 'refund_status' },
                        { title: '净支付', dataIndex: 'net_paid_amount_cent', render: (v: number) => formatMoney(v) },
                        { title: '手续费', dataIndex: 'payment_fee_cent', render: (v: number) => formatMoney(v) },
                        { title: '服务费', dataIndex: 'service_fee_cent', render: (v: number) => formatMoney(v) },
                        { title: '分成基数', dataIndex: 'split_base_amount_cent', render: (v: number) => formatMoney(v) },
                        { title: '尾差', dataIndex: 'rounding_adjustment_cent', render: (v: number) => formatMoney(v) },
                        { title: '结算', dataIndex: 'settlement_status' },
                        { title: '创建时间', dataIndex: 'created_at' },
                      ]}
                    />
                  </Space>
                ),
              },
            ]}
          />
        </Card>
      ) : (
        <Card>
          <Space style={{ marginBottom: 16 }}>
            <Select
              allowClear
              placeholder="订单状态"
              style={{ width: 200 }}
              options={ORDER_STATUSES.map((value) => ({ label: value, value }))}
              onChange={(value) => setStatus(value ?? '')}
            />
          </Space>
          <Table
            rowKey="order_id"
            loading={orderLoading}
            dataSource={orders}
            pagination={{ current: orderPage, pageSize, total: orderTotal, onChange: (p) => void loadOrders(p) }}
            columns={[
              { title: '订单号', dataIndex: 'order_no' },
              { title: '订单状态', dataIndex: 'status', render: (v: string) => <Tag>{v}</Tag> },
              { title: '退款状态', dataIndex: 'refund_status' },
              { title: '净支付', dataIndex: 'net_paid_amount_cent', render: (v: number) => formatMoney(v) },
              { title: '手续费', dataIndex: 'payment_fee_cent', render: (v: number) => formatMoney(v) },
              { title: '服务费', dataIndex: 'service_fee_cent', render: (v: number) => formatMoney(v) },
              { title: '分成基数', dataIndex: 'split_base_amount_cent', render: (v: number) => formatMoney(v) },
              { title: '尾差', dataIndex: 'rounding_adjustment_cent', render: (v: number) => formatMoney(v) },
              { title: '结算', dataIndex: 'settlement_status' },
              { title: '创建时间', dataIndex: 'created_at' },
            ]}
          />
        </Card>
      )}
    </Space>
  )
}