import { ReloadOutlined, SearchOutlined } from '@ant-design/icons'
import { Button, Card, Empty, Input, Space, Table, Tabs, Typography } from 'antd'
import type { TableColumnsType } from 'antd'

import type { Pagination, WorkerOrderOverviewItem, WorkOrder } from '@/types/worker-platform'

import { formatMoney, getSettlementLabel } from './worker-order-utils'

export type WorkerOrderStatusOption = {
  value: string
  label: string
}

export function WorkerOrderDesktopList({
  statusOptions,
  status,
  overviewByStatus,
  keywordInput,
  keyword,
  orders,
  pagination,
  page,
  pageSize,
  columns,
  loading,
  searching,
  refreshing,
  error,
  onRefresh,
  onStatusChange,
  onKeywordInputChange,
  onKeywordSearch,
  onPageChange,
}: {
  statusOptions: readonly WorkerOrderStatusOption[]
  status: string
  overviewByStatus: Map<string, WorkerOrderOverviewItem>
  keywordInput: string
  keyword: string
  orders: WorkOrder[]
  pagination: Pagination | undefined
  page: number
  pageSize: number
  columns: TableColumnsType<WorkOrder>
  loading: boolean
  searching: boolean
  refreshing: boolean
  error: unknown
  onRefresh: () => void
  onStatusChange: (status: string) => void
  onKeywordInputChange: (keyword: string) => void
  onKeywordSearch: () => void
  onPageChange: (page: number, pageSize: number) => void
}) {
  return (
    <section className="page-stack">
      <div className="worker-page-head">
        <Typography.Title level={3}>我的订单</Typography.Title>
        <Button icon={<ReloadOutlined />} loading={refreshing} onClick={onRefresh}>
          刷新
        </Button>
      </div>

      <Card bordered={false}>
        <Space direction="vertical" size={16} style={{ width: '100%' }}>
          <Tabs
            className="worker-order-tabs"
            activeKey={status || 'all'}
            items={statusOptions.map((item) => {
              const overview = overviewByStatus.get(item.value || 'all')
              const count = Number(overview?.orderCount || 0)
              const settlementAmount = Number(overview?.settlementAmount || 0)
              return {
                key: item.value || 'all',
                label: (
                  <span className="worker-order-tab-label">
                    <span className="worker-order-tab-label-main">
                      {item.label}
                      {count > 0 ? <span className="worker-order-tab-count">{count}</span> : null}
                    </span>
                    <span className="worker-order-tab-settlement">
                      {getSettlementLabel(item.value)} {formatMoney(settlementAmount)}
                    </span>
                  </span>
                ),
              }
            })}
            onChange={(nextKey) => onStatusChange(nextKey === 'all' ? '' : nextKey)}
          />

          <Space.Compact style={{ width: '100%', maxWidth: 460 }}>
            <Input
              allowClear
              value={keywordInput}
              placeholder="搜索订单号 / 商品名 / 游戏ID / 游戏昵称"
              prefix={<SearchOutlined />}
              onChange={(event) => onKeywordInputChange(event.target.value)}
              onPressEnter={onKeywordSearch}
            />
            <Button icon={<SearchOutlined />} loading={searching} onClick={onKeywordSearch}>
              搜索
            </Button>
          </Space.Compact>

          <Table<WorkOrder>
            rowKey="workOrderId"
            size="small"
            loading={loading}
            dataSource={orders}
            columns={columns}
            locale={{
              emptyText: error ? (
                <Empty description={error instanceof Error ? error.message : '读取我的订单失败'} />
              ) : (
                <Empty
                  description={
                    keyword ? `没有找到与 “${keyword}” 相关的订单` : '当前筛选下暂无订单'
                  }
                />
              ),
            }}
            pagination={{
              current: pagination?.page || page,
              pageSize: pagination?.pageSize || pageSize,
              total: pagination?.total || 0,
              showSizeChanger: true,
              pageSizeOptions: [10, 20, 50, 100],
              showTotal: (total) => `共 ${total} 条`,
              onChange: onPageChange,
            }}
            scroll={{ x: 1440 }}
          />
        </Space>
      </Card>
    </section>
  )
}
