import React, { useEffect, useRef, useState } from 'react';
import {
  Button,
  Descriptions,
  Drawer,
  message,
  Popconfirm,
  Space,
  Table,
  Tag,
  Typography,
} from 'antd';
import type { TableProps } from 'antd';
import XinTable from '@/components/XinTable';
import type {
  XinTableColumn,
  XinTableInstance,
  XinTableProps,
} from '@/components/XinTable/typings.ts';
import type IStoreOrder from '@/domain/iStoreOrder.ts';
import type { IStoreOrderItem } from '@/domain/iStoreOrder.ts';
import { STORE_ORDER_STATUS_MAP } from '@/domain/iStoreOrder.ts';
import { getStoreOrder, updateOrderStatus } from '@/api/order/store.ts';
import { getStoreOptions } from '@/api/customer/store.ts';
import type IStore from '@/domain/iStore.ts';
import AuthButton from '@/components/AuthButton';

const { Title, Text } = Typography;

/**
 * 状态流转合法路径：待汇总→配送中/取消；已汇总→配送中；配送中→已完成
 */
const NEXT_STATUS: Record<number, { status: number; label: string; danger?: boolean }[]> = {
  0: [
    { status: 2, label: '开始配送' },
    { status: 9, label: '取消订单', danger: true },
  ],
  1: [{ status: 2, label: '开始配送' }],
  2: [{ status: 3, label: '完成订单' }],
};

/**
 * 门店订单管理（只读 + 状态流转，订单由小程序端创建）
 */
const StoreOrderPage: React.FC = () => {
  const tableRef = useRef<XinTableInstance<IStoreOrder>>(null);
  const [stores, setStores] = useState<IStore[]>([]);

  const [detailOpen, setDetailOpen] = useState(false);
  const [detail, setDetail] = useState<IStoreOrder | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);

  useEffect(() => {
    getStoreOptions().then((res) => setStores(res.data.data ?? []));
  }, []);

  const openDetail = async (id: number) => {
    setDetailOpen(true);
    setDetailLoading(true);
    try {
      const res = await getStoreOrder(id);
      setDetail(res.data.data ?? null);
    } finally {
      setDetailLoading(false);
    }
  };

  const handleStatusChange = async (id: number, status: number) => {
    await updateOrderStatus(id, status);
    message.success('状态已更新');
    setDetailOpen(false);
    await tableRef.current?.reload();
  };

  const itemColumns: TableProps<IStoreOrderItem>['columns'] = [
    { title: '品名', dataIndex: 'product_name' },
    { title: '规格', dataIndex: 'product_spec', render: (v) => v || '-' },
    { title: '单价', dataIndex: 'price', align: 'right', render: (v) => `¥${v}` },
    { title: '订货量', dataIndex: 'quantity', align: 'right' },
    { title: '金额', dataIndex: 'amount', align: 'right', render: (v) => `¥${v}` },
    { title: '备注', dataIndex: 'remark', render: (v) => v || '-' },
  ];

  const columns: XinTableColumn<IStoreOrder>[] = [
    {
      title: '订单号',
      dataIndex: 'order_no',
      valueType: 'text',
      hideInForm: true,
      render: (_, record) => <Text copyable={{ text: record.order_no }}>{record.order_no}</Text>,
    },
    {
      title: '门店',
      dataIndex: 'store_id',
      valueType: 'select',
      hideInForm: true,
      fieldProps: {
        options: stores.map((s) => ({ label: s.name, value: s.id })),
        showSearch: true,
        optionFilterProp: 'label',
      },
      render: (_, record) => record.store?.name ?? '-',
    },
    {
      title: '订货日期',
      dataIndex: 'order_date',
      valueType: 'dateRange',
      hideInForm: true,
      align: 'center',
      render: (_, record) => record.order_date,
    },
    {
      title: '订货总量',
      dataIndex: 'total_quantity',
      hideInForm: true,
      hideInSearch: true,
      align: 'right',
    },
    {
      title: '订单金额',
      dataIndex: 'total_amount',
      hideInForm: true,
      hideInSearch: true,
      align: 'right',
      render: (_, record) => <Text strong>¥{record.total_amount}</Text>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'select',
      hideInForm: true,
      fieldProps: {
        options: Object.entries(STORE_ORDER_STATUS_MAP).map(([value, item]) => ({
          value: Number(value),
          label: item.text,
        })),
      },
      render: (_, record) => {
        const item = STORE_ORDER_STATUS_MAP[record.status ?? 0];
        return <Tag color={item?.color}>{item?.text}</Tag>;
      },
      align: 'center',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      hideInForm: true,
      hideInSearch: true,
      ellipsis: true,
      render: (_, record) => record.remark || '-',
    },
  ];

  const operateRender: XinTableProps<IStoreOrder>['operateRender'] = (record) => [
    <Button key="detail" size="small" onClick={() => openDetail(record.id!)}>
      详情
    </Button>,
  ];

  const tableProps: XinTableProps<IStoreOrder> = {
    api: '/order/store',
    columns,
    rowKey: 'id',
    accessName: 'order.store',
    tableRef,
    operateRender,
    formProps: false,
  };

  return (
    <>
      <div className="mb-5">
        <Title level={3}>门店订单</Title>
        <Text type="secondary">
          小程序下单汇总；待汇总订单将进入采购单生成，订单创建与取消在小程序端完成。
        </Text>
      </div>
      <XinTable<IStoreOrder> {...tableProps} />

      <Drawer
        title="订单详情"
        open={detailOpen}
        onClose={() => setDetailOpen(false)}
        width={720}
        loading={detailLoading}
        footer={
          detail && NEXT_STATUS[detail.status ?? -1] ? (
            <Space className="flex justify-end">
              {NEXT_STATUS[detail.status!].map((action) => (
                <AuthButton key={action.status} auth="order.store.update">
                  <Popconfirm
                    title={`确认将订单状态更新为「${action.label}」？`}
                    onConfirm={() => handleStatusChange(detail.id!, action.status)}
                  >
                    <Button type={action.danger ? undefined : 'primary'} danger={action.danger}>
                      {action.label}
                    </Button>
                  </Popconfirm>
                </AuthButton>
              ))}
            </Space>
          ) : null
        }
      >
        {detail ? (
          <>
            <Descriptions column={2} size="small" bordered>
              <Descriptions.Item label="订单号">{detail.order_no}</Descriptions.Item>
              <Descriptions.Item label="门店">{detail.store?.name}</Descriptions.Item>
              <Descriptions.Item label="订货日期">{detail.order_date}</Descriptions.Item>
              <Descriptions.Item label="状态">
                <Tag color={STORE_ORDER_STATUS_MAP[detail.status ?? 0]?.color}>
                  {STORE_ORDER_STATUS_MAP[detail.status ?? 0]?.text}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="订货总量">{detail.total_quantity}</Descriptions.Item>
              <Descriptions.Item label="订单金额">¥{detail.total_amount}</Descriptions.Item>
              {detail.remark ? (
                <Descriptions.Item label="备注" span={2}>
                  {detail.remark}
                </Descriptions.Item>
              ) : null}
            </Descriptions>
            <Title level={5} className="!mt-6 !mb-3">
              商品明细
            </Title>
            <Table<IStoreOrderItem>
              rowKey="id"
              size="small"
              columns={itemColumns}
              dataSource={detail.items ?? []}
              pagination={false}
              summary={() => (
                <Table.Summary.Row>
                  <Table.Summary.Cell index={0} colSpan={4} align="right">
                    合计
                  </Table.Summary.Cell>
                  <Table.Summary.Cell index={1} align="right">
                    <Text strong>¥{detail.total_amount}</Text>
                  </Table.Summary.Cell>
                  <Table.Summary.Cell index={2} />
                </Table.Summary.Row>
              )}
            />
          </>
        ) : null}
      </Drawer>
    </>
  );
};

export default StoreOrderPage;