import { useCallback, useEffect, useState } from 'react';
import {
  Button,
  Descriptions,
  Drawer,
  Form,
  Input,
  Select,
  Space,
  Table,
  Tag,
  Typography,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { request, type AdminOrderRow, type Paginated } from '../lib/api';

const STATUS_LABELS: Record<string, string> = {
  PENDING_PAY: '待付款',
  PENDING_SHIP: '待发货',
  OUT_WAREHOUSE: '已出库',
  SHIPPING: '配送中',
  PENDING_RECEIVE: '待收货',
  COMPLETED: '已完成',
  CANCELLED: '已取消',
  REFUNDING: '退款中',
  REFUNDED: '已退款',
};

type OrderDetail = AdminOrderRow & {
  receiverAddress?: string;
  receiverProvince?: string;
  receiverCity?: string;
  receiverDistrict?: string;
  clientIp?: string | null;
  ipProvince?: string | null;
  ipCity?: string | null;
  ipDistrict?: string | null;
  gpsProvince?: string | null;
  gpsCity?: string | null;
  gpsDistrict?: string | null;
  gpsLatitude?: number | null;
  gpsLongitude?: number | null;
  gpsAddress?: string | null;
  productAmount?: number;
  freightAmount?: number;
  benefitAmount?: number;
  paidAt?: string | null;
  payExpireAt?: string | null;
  items?: Array<Record<string, unknown>>;
  payment?: Record<string, unknown> | null;
  statusLogs?: Array<{ fromStatus: string | null; toStatus: string; createdAt: string }>;
  benefitCoupons?: Array<Record<string, unknown>>;
  city?: { name: string; code: string };
};

export default function OrdersPage() {
  const [form] = Form.useForm();
  const [data, setData] = useState<Paginated<AdminOrderRow> | null>(null);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const [detail, setDetail] = useState<OrderDetail | null>(null);
  const [drawerOpen, setDrawerOpen] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const values = form.getFieldsValue();
      const qs = new URLSearchParams({ page: String(page), pageSize: String(pageSize) });
      if (values.orderNo) qs.set('orderNo', values.orderNo);
      if (values.status) qs.set('status', values.status);
      if (values.receiverPhone) qs.set('receiverPhone', values.receiverPhone);
      const res = await request<Paginated<AdminOrderRow>>(`/admin/orders?${qs}`);
      setData(res);
    } finally {
      setLoading(false);
    }
  }, [form, page, pageSize]);

  useEffect(() => {
    void load();
  }, [load]);

  async function openDetail(id: string) {
    const res = await request<OrderDetail>(`/admin/orders/${id}`);
    setDetail(res);
    setDrawerOpen(true);
  }

  const columns: ColumnsType<AdminOrderRow> = [
    { title: '订单号', dataIndex: 'orderNo', width: 180 },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      render: (s) => <Tag>{STATUS_LABELS[s] || s}</Tag>,
    },
    {
      title: '配送',
      dataIndex: 'deliveryType',
      width: 90,
      render: (v) => (v === 'LOCAL' ? '同城' : '跨城'),
    },
    { title: '实付', dataIndex: 'payAmount', width: 90, render: (v) => `¥${v}` },
    { title: '收货人', dataIndex: 'receiverName', width: 90 },
    { title: '手机', dataIndex: 'receiverPhone', width: 120 },
    {
      title: '用户',
      dataIndex: ['user', 'userNo'],
      width: 110,
      render: (_, row) => row.user?.userNo || '—',
    },
    {
      title: '快递',
      width: 100,
      render: (_, row) => row.delivery?.trackingNo || row.delivery?.provider || '—',
    },
    {
      title: '下单时间',
      dataIndex: 'createdAt',
      width: 170,
      render: (v) => new Date(v).toLocaleString('zh-CN'),
    },
    {
      title: '操作',
      width: 80,
      render: (_, row) => (
        <Button type="link" size="small" onClick={() => openDetail(row.id)}>
          详情
        </Button>
      ),
    },
  ];

  return (
    <div>
      <Typography.Title level={4}>订单监控</Typography.Title>
      <Form form={form} layout="inline" style={{ marginBottom: 16 }} onFinish={() => { setPage(1); void load(); }}>
        <Form.Item name="orderNo" label="订单号">
          <Input placeholder="DK..." allowClear />
        </Form.Item>
        <Form.Item name="status" label="状态">
          <Select allowClear style={{ width: 120 }} options={Object.entries(STATUS_LABELS).map(([value, label]) => ({ value, label }))} />
        </Form.Item>
        <Form.Item name="receiverPhone" label="收货手机">
          <Input allowClear />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">查询</Button>
            <Button onClick={() => { form.resetFields(); setPage(1); void load(); }}>重置</Button>
          </Space>
        </Form.Item>
      </Form>

      <Table
        rowKey="id"
        loading={loading}
        columns={columns}
        dataSource={data?.items ?? []}
        scroll={{ x: 1200 }}
        pagination={{
          current: page,
          pageSize,
          total: data?.total ?? 0,
          showSizeChanger: true,
          onChange: (p, ps) => {
            setPage(p);
            setPageSize(ps);
          },
        }}
      />

      <Drawer title="订单详情" width={640} open={drawerOpen} onClose={() => setDrawerOpen(false)}>
        {detail && (
          <>
            <Descriptions column={1} bordered size="small" title="基本信息">
              <Descriptions.Item label="订单号">{detail.orderNo}</Descriptions.Item>
              <Descriptions.Item label="状态">{STATUS_LABELS[detail.status] || detail.status}</Descriptions.Item>
              <Descriptions.Item label="用户">{detail.user?.userNo} / {detail.user?.nickname}</Descriptions.Item>
              <Descriptions.Item label="商品额">¥{detail.productAmount}</Descriptions.Item>
              <Descriptions.Item label="实付">¥{detail.payAmount}</Descriptions.Item>
              <Descriptions.Item label="好客权益">¥{detail.benefitAmount}</Descriptions.Item>
              <Descriptions.Item label="下单时间">{new Date(detail.createdAt).toLocaleString('zh-CN')}</Descriptions.Item>
            </Descriptions>

            <Descriptions column={1} bordered size="small" title="收货信息" style={{ marginTop: 16 }}>
              <Descriptions.Item label="收货人">{detail.receiverName} {detail.receiverPhone}</Descriptions.Item>
              <Descriptions.Item label="地址">{detail.receiverAddress}</Descriptions.Item>
            </Descriptions>

            <Descriptions column={1} bordered size="small" title="位置快照（方案C）" style={{ marginTop: 16 }}>
              <Descriptions.Item label="clientIp">{detail.clientIp || '—'}</Descriptions.Item>
              <Descriptions.Item label="IP解析">{[detail.ipProvince, detail.ipCity, detail.ipDistrict].filter(Boolean).join(' / ') || '—'}</Descriptions.Item>
              <Descriptions.Item label="GPS">{[detail.gpsProvince, detail.gpsCity, detail.gpsDistrict].filter(Boolean).join(' / ') || '—'}</Descriptions.Item>
              <Descriptions.Item label="坐标">
                {detail.gpsLatitude != null ? `${detail.gpsLatitude}, ${detail.gpsLongitude}` : '—'}
              </Descriptions.Item>
            </Descriptions>

            {detail.delivery && (
              <Descriptions column={1} bordered size="small" title="配送" style={{ marginTop: 16 }}>
                <Descriptions.Item label="provider">{detail.delivery.provider}</Descriptions.Item>
                <Descriptions.Item label="运单号">{detail.delivery.trackingNo || '—'}</Descriptions.Item>
              </Descriptions>
            )}

            {detail.statusLogs && detail.statusLogs.length > 0 && (
              <>
                <Typography.Title level={5} style={{ marginTop: 16 }}>状态流转</Typography.Title>
                <Table
                  size="small"
                  rowKey="createdAt"
                  pagination={false}
                  dataSource={detail.statusLogs}
                  columns={[
                    { title: '从', dataIndex: 'fromStatus', render: (v) => v || '—' },
                    { title: '到', dataIndex: 'toStatus', render: (v) => STATUS_LABELS[v] || v },
                    { title: '时间', dataIndex: 'createdAt', render: (v) => new Date(v).toLocaleString('zh-CN') },
                  ]}
                />
              </>
            )}
          </>
        )}
      </Drawer>
    </div>
  );
}