import React, { useRef, useState } from 'react';
import {
  Button,
  Descriptions,
  Drawer,
  Dropdown,
  InputNumber,
  message,
  Popconfirm,
  Table,
  Tag,
  Typography,
} from 'antd';
import { CheckOutlined, DownloadOutlined } from '@ant-design/icons';
import type { TableProps } from 'antd';
import XinTable from '@/components/XinTable';
import type {
  XinTableColumn,
  XinTableInstance,
  XinTableProps,
} from '@/components/XinTable/typings.ts';
import type IPurchaseOrder from '@/domain/iPurchaseOrder.ts';
import type {
  IPurchaseDetail,
  IPurchaseDetailRow,
} from '@/domain/iPurchaseOrder.ts';
import { PURCHASE_STATUS_MAP } from '@/domain/iPurchaseOrder.ts';
import {
  exportPurchase,
  getPurchaseDetail,
} from '@/api/purchase/order.ts';
import { Update } from '@/api/common/table.ts';
import AuthButton from '@/components/AuthButton';

const { Title, Text } = Typography;

/** 行草稿：成本/称重 + 各门店单元格数量 */
interface RowDraft {
  cost_price?: number;
  weight?: number;
  cells: Record<number, number>;
}

/**
 * 采购单管理（C1 在门店订单页合并生成 / C2-C3 导出 / C4 明细矩阵修改）
 * 采购单无独立明细表，明细直接溯源门店订货明细：商品行 × 门店列
 */
const PurchaseOrderPage: React.FC = () => {
  const tableRef = useRef<XinTableInstance<IPurchaseOrder>>(null);

  // 详情抽屉
  const [detailOpen, setDetailOpen] = useState(false);
  const [detail, setDetail] = useState<IPurchaseDetail | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [drafts, setDrafts] = useState<Record<number, RowDraft>>({});
  const [savingProductId, setSavingProductId] = useState<number | null>(null);
  const [completing, setCompleting] = useState(false);

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

  const openDetail = async (id: number) => {
    setDetailOpen(true);
    await loadDetail(id);
  };

  const getDraft = (productId: number): RowDraft => drafts[productId] ?? { cells: {} };

  const patchDraft = (productId: number, patch: Partial<RowDraft>) => {
    setDrafts((prev) => {
      const current = prev[productId] ?? { cells: {} };
      return {
        ...prev,
        [productId]: { ...current, ...patch, cells: { ...current.cells, ...patch.cells } },
      };
    });
  };

  /** 草稿成本（未修改取原值） */
  const draftCost = (row: IPurchaseDetailRow): number =>
    getDraft(row.product_id).cost_price ?? row.cost_price;

  const isRowDirty = (row: IPurchaseDetailRow): boolean => {
    // const draft = getDraft(row.product_id);
    // if (draft.cost_price !== undefined && draft.cost_price !== row.cost_price) {
    //   return true;
    // }
    // if (draft.weight !== undefined && draft.weight !== row.weight) {
    //   return true;
    // }
    // return row.cells.some(
    //   (cell) => draft.cells[cell.order_item_id] !== undefined
    //     && draft.cells[cell.order_item_id] !== cell.quantity,
    // );
  };

  /** 保存一行：先落各门店单元格数量，再落行级成本/称重，最后刷新 */
  const saveRow = async (row: IPurchaseDetailRow) => {
    if (!detail || !isRowDirty(row)) {
      return;
    }
    const draft = getDraft(row.product_id);
    setSavingProductId(row.product_id);
    try {
      // for (const cell of row.cells) {
      //   const qty = draft.cells[cell.order_item_id];
      //   if (qty !== undefined && qty !== cell.quantity) {
      //     await updatePurchaseCell(cell.order_item_id, { quantity: qty });
      //   }
      // }
      // const rowPatch: { cost_price?: number; weight?: number } = {};
      // if (draft.cost_price !== undefined && draft.cost_price !== row.cost_price) {
      //   rowPatch.cost_price = draft.cost_price;
      // }
      // if (draft.weight !== undefined && draft.weight !== row.weight) {
      //   rowPatch.weight = draft.weight;
      // }
      // if (Object.keys(rowPatch).length > 0) {
      //   await updatePurchaseRow(detail.purchase.id!, row.product_id, rowPatch);
      // }
      message.success('已保存并同步订货明细');
      await loadDetail(detail.purchase.id!);
      await tableRef.current?.reload();
    } finally {
      setSavingProductId(null);
    }
  };

  const handleComplete = async () => {
    if (!detail) {
      return;
    }
    setCompleting(true);
    try {
      await Update(`/purchase/order/${detail.purchase.id}`, { status: 3 });
      message.success('采购单已标记完成');
      await loadDetail(detail.purchase.id!);
      await tableRef.current?.reload();
    } finally {
      setCompleting(false);
    }
  };

  /** 明细矩阵列：品名/供应商/包规/单位/成本/单价 + 每门店一组（数量/金额）+ 合计 + 操作 */
  const buildItemColumns = (): TableProps<IPurchaseDetailRow>['columns'] => {
    const fixed: NonNullable<TableProps<IPurchaseDetailRow>['columns']> = [
      { title: '品名', dataIndex: 'product_name', width: 120, align: 'center' },
      {
        title: '供应商',
        dataIndex: 'supplier',
        width: 110,
        align: 'center',
        render: (_, row) => row.supplier?.name ?? '-',
      },
      {
        title: '单价',
        key: 'unit_cost',
        width: 80,
        align: 'center',
        render: (_, row) => `¥${(Number(row.cost_price) / Number(row.product_spec)).toFixed(2)}`,
      },
      { title: '包规', dataIndex: 'product_spec', align: 'center', width: 90, render: (v) => v || '-' },
      { title: '单位', dataIndex: 'unit', width: 70, align: 'center', render: (v) => v || '-' },
      { title: '成本', dataIndex: 'cost_price', width: 110, align: 'center', render: (v) => v || '-' }
    ];

    const storeColumns = (detail?.stores ?? []).map((store) => ({
      title: store.name,
      key: `store-${store.id}`,
      align: 'center' as const,
      render: (_: unknown, row: IPurchaseDetailRow) => {
        const cell = row.cells[store.id];
        if (!cell) {
          return <Text type="secondary">-</Text>;
        }
        return (
          <Text>{ row.cells[store.id] }</Text>
        );
      },
    }));

    const tail: NonNullable<TableProps<IPurchaseDetailRow>['columns']> = [
      {
        title: '合计数量',
        key: 'total_quantity',
        width: 90,
        align: 'center',
        render: (_, row) => Object.values(row.cells).reduce((a, b) => a + b, 0),
      },
      {
        title: '操作',
        key: 'action',
        width: 80,
        fixed: 'right',
        render: (_, row) => (
          <AuthButton auth="purchase.order.update">
            <Button
              size="small"
              type="link"
              disabled={!isRowDirty(row)}
              loading={savingProductId === row.product_id}
              onClick={() => saveRow(row)}
            >
              修改
            </Button>
          </AuthButton>
        ),
      },
    ];

    return [...fixed, ...storeColumns, ...tail];
  };

  const columns: XinTableColumn<IPurchaseOrder>[] = [
    {
      title: '采购单号',
      dataIndex: 'purchase_no',
      valueType: 'text',
      hideInForm: true,
      render: (_, record) => <Text copyable={{ text: record.purchase_no }}>{record.purchase_no}</Text>,
    },
    {
      title: '采购日期',
      dataIndex: 'purchase_date',
      valueType: 'dateRange',
      hideInForm: true,
      align: 'center',
      render: (_, record) => record.purchase_date,
    },
    {
      title: '预估金额',
      dataIndex: 'estimate_amount',
      hideInForm: true,
      hideInSearch: true,
      align: 'right',
      render: (_, record) => `¥${record.estimate_amount}`,
    },
    {
      title: '实际金额',
      dataIndex: 'actual_amount',
      hideInForm: true,
      hideInSearch: true,
      align: 'right',
      render: (_, record) =>
        Number(record.actual_amount) > 0 ? (
          <Text strong>¥{record.actual_amount}</Text>
        ) : (
          <Text type="secondary">未录入</Text>
        ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'select',
      hideInForm: true,
      fieldProps: {
        options: Object.entries(PURCHASE_STATUS_MAP).map(([value, item]) => ({
          value: Number(value),
          label: item.text,
        })),
      },
      render: (_, record) => {
        const item = PURCHASE_STATUS_MAP[record.status ?? 0];
        return <Tag color={item?.color}>{item?.text}</Tag>;
      },
      align: 'center',
    },
    {
      title: '制单人',
      dataIndex: 'operator',
      hideInForm: true,
      hideInSearch: true,
      render: (_, record) => record.operator?.nickname ?? '-',
      align: 'center',
    },
  ];

  const operateRender: XinTableProps<IPurchaseOrder>['operateRender'] = (record) => [
    <Button key="detail" size="small" onClick={() => openDetail(record.id!)}>
      详情
    </Button>,
    <AuthButton key="export" auth="purchase.order.export">
      <Dropdown
        menu={{
          items: [
            { key: 'all-xlsx', label: '全品类 Excel', onClick: () => exportPurchase(record.id!, 'all', 'xlsx') },
            { key: 'all-pdf', label: '全品类 PDF', onClick: () => exportPurchase(record.id!, 'all', 'pdf') },
            { key: 'category-xlsx', label: '蔬果分类 Excel', onClick: () => exportPurchase(record.id!, 'category', 'xlsx') },
            { key: 'category-pdf', label: '蔬果分类 PDF', onClick: () => exportPurchase(record.id!, 'category', 'pdf') },
          ],
        }}
      >
        <Button size="small" icon={<DownloadOutlined />} />
      </Dropdown>
    </AuthButton>,
  ];

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

  return (
    <>
      <div className="mb-5">
        <Title level={3}>采购单</Title>
        <Text type="secondary">
          在「门店订单」页勾选已接单订单合并生成；明细按商品行 × 门店列展示，修改数量/成本/称重后点行内「保存」同步订货明细。
        </Text>
      </div>
      <XinTable<IPurchaseOrder> {...tableProps} />

      {/* 采购单详情：商品行 × 门店列矩阵 */}
      <Drawer
        title={detail ? `采购单 ${detail.purchase.purchase_no}` : '采购单详情'}
        open={detailOpen}
        onClose={() => setDetailOpen(false)}
        size={1200}
        loading={detailLoading}
      >
        {detail ? (
          <>
            <Descriptions
              column={3}
              size="small"
              bordered
              extra={
                detail.purchase.status === 0 ? (
                  <AuthButton auth="purchase.order.update">
                    <Popconfirm title="确认标记该采购单为已完成？" onConfirm={handleComplete}>
                      <Button size="small" icon={<CheckOutlined />} loading={completing}>
                        标记完成
                      </Button>
                    </Popconfirm>
                  </AuthButton>
                ) : undefined
              }
            >
              <Descriptions.Item label="采购日期">{detail.purchase.purchase_date}</Descriptions.Item>
              <Descriptions.Item label="状态">
                <Tag color={PURCHASE_STATUS_MAP[detail.purchase.status ?? 0]?.color}>
                  {PURCHASE_STATUS_MAP[detail.purchase.status ?? 0]?.text}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="制单人">
                {detail.purchase.operator?.nickname ?? '-'}
              </Descriptions.Item>
              <Descriptions.Item label="预估金额">¥{detail.purchase.estimate_amount}</Descriptions.Item>
              <Descriptions.Item label="实际金额">¥{detail.purchase.actual_amount}</Descriptions.Item>
              <Descriptions.Item label="总重量">{detail.purchase.total_weight}</Descriptions.Item>
            </Descriptions>

            <div className="my-2 text-gray-500">
              单价 = 成本 ÷ 包规；门店金额 = 数量 × 单价；行级「实际称重」保存时按各店数量比例分摊到订货明细（称重&gt;0 时金额按称重×单价计）。
            </div>
            <Table<IPurchaseDetailRow>
              rowKey="product_id"
              size="small"
              bordered
              columns={buildItemColumns()}
              dataSource={detail.items}
              pagination={false}
              scroll={{ x: 'max-content' }}
            />
          </>
        ) : null}
      </Drawer>
    </>
  );
};

export default PurchaseOrderPage;