import React, { useEffect, useState } from 'react';
import {
  Button,
  Drawer,
  Form,
  Input,
  InputNumber,
  message,
  Select,
  Space,
  Table,
  Tag,
  TreeSelect,
  Typography,
} from 'antd';
import { MinusCircleOutlined, PlusOutlined, TableOutlined } from '@ant-design/icons';
import type { TableProps } from 'antd';
import XinTable from '@/components/XinTable';
import type { XinTableColumn, XinTableProps } from '@/components/XinTable/typings.ts';
import type IProduct from '@/domain/iProduct.ts';
import type { IBatchPriceUpdate, IPriceMatrixRow } from '@/domain/iProduct.ts';
import { PRODUCT_STATUS_MAP } from '@/domain/iProduct.ts';
import type ICustomerLevel from '@/domain/iCustomerLevel.ts';
import type IProductCategory from '@/domain/iProductCategory.ts';
import { getLevelOptions } from '@/api/customer/level.ts';
import { getSupplierOptions } from '@/api/customer/supplier.ts';
import type ISupplier from '@/domain/iSupplier.ts';
import { getCategoryTree } from '@/api/product/category.ts';
import { batchPrice, getPriceMatrix } from '@/api/product/goods.ts';

const { Title, Text } = Typography;

/**
 * 商品档案管理（A1 商品列表 / A2 价格矩阵与批量调价）
 */
const ProductGoodsPage: React.FC = () => {
  const [levels, setLevels] = useState<ICustomerLevel[]>([]);
  const [suppliers, setSuppliers] = useState<ISupplier[]>([]);
  const [categoryTree, setCategoryTree] = useState<IProductCategory[]>([]);

  // ===== 价格矩阵抽屉 =====
  const [matrixOpen, setMatrixOpen] = useState(false);
  const [matrixLoading, setMatrixLoading] = useState(false);
  const [saveLoading, setSaveLoading] = useState(false);
  const [matrixRows, setMatrixRows] = useState<IPriceMatrixRow[]>([]);
  const [matrixSnapshot, setMatrixSnapshot] = useState<IPriceMatrixRow[]>([]);
  const [matrixLevels, setMatrixLevels] = useState<ICustomerLevel[]>([]);
  const [matrixKeyword, setMatrixKeyword] = useState('');
  const [matrixCategory, setMatrixCategory] = useState<number | undefined>(undefined);

  useEffect(() => {
    getLevelOptions().then((res) => setLevels(res.data.data ?? []));
    getSupplierOptions().then((res) => setSuppliers(res.data.data ?? []));
    getCategoryTree().then((res) => setCategoryTree(res.data.data ?? []));
  }, []);

  const loadMatrix = async (
    keyword = matrixKeyword,
    categoryId = matrixCategory
  ) => {
    setMatrixLoading(true);
    try {
      const res = await getPriceMatrix({
        keyword: keyword || undefined,
        category_id: categoryId,
      });
      const rows = res.data.data?.rows ?? [];
      setMatrixRows(rows);
      setMatrixSnapshot(JSON.parse(JSON.stringify(rows)));
      setMatrixLevels(res.data.data?.levels ?? []);
    } finally {
      setMatrixLoading(false);
    }
  };

  const openMatrix = () => {
    setMatrixOpen(true);
    loadMatrix('', undefined);
  };

  const onMatrixPriceChange = (
    productId: number,
    levelId: number,
    value: number | null
  ) => {
    setMatrixRows((prev) =>
      prev.map((row) =>
        row.id === productId ? { ...row, [`price_${levelId}`]: value } : row
      )
    );
  };

  /** diff 出被修改的价格行，提交批量调价 */
  const saveMatrix = async () => {
    const updates: IBatchPriceUpdate[] = [];
    for (const row of matrixRows) {
      const old = matrixSnapshot.find((r) => r.id === row.id);
      for (const level of matrixLevels) {
        const key = `price_${level.id}`;
        const next = row[key];
        const prev = old?.[key];
        if (next !== null && next !== undefined && String(next) !== String(prev ?? '')) {
          updates.push({ product_id: row.id, level_id: level.id!, price: next as number });
        }
      }
    }
    if (updates.length === 0) {
      message.info('没有需要保存的价格调整');
      return;
    }
    setSaveLoading(true);
    try {
      await batchPrice(updates);
      message.success(`已更新 ${updates.length} 条价格，受影响门店将收到通知`);
      await loadMatrix();
    } finally {
      setSaveLoading(false);
    }
  };

  const matrixColumns: TableProps<IPriceMatrixRow>['columns'] = [
    {
      title: '商品',
      dataIndex: 'name',
      fixed: 'left',
      width: 160,
      render: (name: string, row) => (
        <div>
          <div className="font-medium">{name}</div>
          <Text type="secondary" className="text-xs">
            {row.spec}
            {row.unit ? ` / ${row.unit}` : ''}
          </Text>
        </div>
      ),
    },
    ...matrixLevels.map((level) => ({
      title: level.name,
      key: `price_${level.id}`,
      width: 150,
      render: (_: unknown, row: IPriceMatrixRow) => (
        <InputNumber
          size="small"
          min={0}
          precision={2}
          prefix="¥"
          value={row[`price_${level.id}`] as number | null}
          onChange={(v) => onMatrixPriceChange(row.id, level.id!, v)}
          className="w-32"
        />
      ),
    })),
  ];

  const columns: XinTableColumn<IProduct>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      hideInForm: true,
      hideInSearch: true,
      width: 70,
      align: 'center',
    },
    {
      title: '商品名称',
      dataIndex: 'name',
      valueType: 'text',
      required: true,
      rules: [{ required: true, message: '请输入商品名称' }],
    },
    {
      title: '规格/包规',
      dataIndex: 'spec',
      valueType: 'text',
      hideInSearch: true,
    },
    {
      title: '等级',
      dataIndex: 'grade',
      valueType: 'text',
      hideInSearch: true,
    },
    {
      title: '单位',
      dataIndex: 'unit',
      valueType: 'text',
      hideInSearch: true,
      initialValue: '斤',
    },
    {
      title: '分类',
      dataIndex: 'category_id',
      valueType: 'treeSelect',
      required: true,
      rules: [{ required: true, message: '请选择分类' }],
      fieldProps: {
        treeData: categoryTree,
        fieldNames: { label: 'name', value: 'id', children: 'children' },
        treeDefaultExpandAll: true,
        showSearch: true,
        treeNodeFilterProp: 'name',
        placeholder: '选择分类',
      },
      render: (_, record) =>
        record.category ? <Tag color="cyan">{record.category.name}</Tag> : '-',
    },
    {
      title: '供应商',
      dataIndex: 'supplier_id',
      valueType: 'select',
      hideInSearch: true,
      fieldProps: {
        options: suppliers.map((s) => ({ label: s.name, value: s.id })),
        showSearch: true,
        optionFilterProp: 'label',
        allowClear: true,
        placeholder: '默认供应商（可选）',
      },
      render: (_, record) => record.supplier?.name ?? '-',
    },
    {
      title: '等级价格',
      dataIndex: 'prices',
      hideInForm: true,
      hideInSearch: true,
      render: (_, record) => (
        <Space size={[0, 4]} wrap>
          {record.prices?.length
            ? record.prices.map((p) => (
                <Tag key={p.level_id} color="geekblue">
                  {p.level?.name ?? `等级${p.level_id}`} ¥{p.price}
                </Tag>
              ))
            : '-'}
        </Space>
      ),
    },
    {
      title: '排序',
      dataIndex: 'sort',
      valueType: 'digit',
      hideInSearch: true,
      fieldProps: { min: 0 },
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'radioButton',
      initialValue: 1,
      fieldProps: {
        options: [
          { value: 1, label: '上架' },
          { value: 0, label: '下架' },
        ],
      },
      render: (_, record) => {
        const item = PRODUCT_STATUS_MAP[record.status ?? 1];
        return <Tag color={item?.color}>{item?.text}</Tag>;
      },
      align: 'center',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      valueType: 'textarea',
      hideInSearch: true,
      hideInTable: true,
      fieldProps: { rows: 2 },
    },
    {
      title: '等级价格设置',
      dataIndex: 'prices',
      hideInTable: true,
      hideInSearch: true,
      fieldRender: () => (
        <Form.List name="prices">
          {(fields, { add, remove }) => (
            <div className="space-y-2">
              {fields.map(({ key, name, ...restField }) => (
                <Space key={key} align="baseline" className="flex">
                  <Form.Item
                    {...restField}
                    name={[name, 'level_id']}
                    rules={[{ required: true, message: '请选择等级' }]}
                    className="!mb-0"
                  >
                    <Select
                      style={{ width: 180 }}
                      placeholder="选择客户等级"
                      options={levels.map((l) => ({ label: l.name, value: l.id }))}
                    />
                  </Form.Item>
                  <Form.Item
                    {...restField}
                    name={[name, 'price']}
                    rules={[{ required: true, message: '请输入单价' }]}
                    className="!mb-0"
                  >
                    <InputNumber
                      min={0}
                      precision={2}
                      prefix="¥"
                      placeholder="单价"
                      className="w-32"
                    />
                  </Form.Item>
                  <Button
                    type="text"
                    danger
                    icon={<MinusCircleOutlined />}
                    onClick={() => remove(name)}
                  />
                </Space>
              ))}
              <Button
                type="dashed"
                block
                icon={<PlusOutlined />}
                onClick={() => add()}
              >
                添加等级价格
              </Button>
            </div>
          )}
        </Form.List>
      ),
    },
  ];

  const tableProps: XinTableProps<IProduct> = {
    api: '/product/goods',
    columns,
    rowKey: 'id',
    accessName: 'product.goods',
    scroll: { x: 1200 },
    actionBarRender: (dom) => [
      dom.add,
      <Button key="matrix" icon={<TableOutlined />} onClick={openMatrix}>
        价格矩阵
      </Button>,
      dom.keywordSearch,
    ],
    formProps: {
      grid: true,
      colProps: { span: 12 },
      layout: 'vertical',
    },
    modalProps: { width: 800 },
  };

  return (
    <>
      <div className="mb-5">
        <Title level={3}>商品列表</Title>
        <Text type="secondary">
          商品档案与多等级价格体系；「价格矩阵」支持按等级批量调价，调价后自动通知受影响门店。
        </Text>
      </div>
      <XinTable<IProduct> {...tableProps} />

      <Drawer
        title="价格矩阵 · 批量调价"
        open={matrixOpen}
        onClose={() => setMatrixOpen(false)}
        width={matrixLevels.length * 150 + 260}
        extra={
          <Space>
            <Button onClick={() => loadMatrix()}>刷新</Button>
            <Button type="primary" loading={saveLoading} onClick={saveMatrix}>
              保存调价
            </Button>
          </Space>
        }
      >
        <Space className="mb-4" wrap>
          <TreeSelect
            style={{ width: 180 }}
            placeholder="按分类筛选"
            allowClear
            treeDefaultExpandAll
            treeNodeFilterProp="name"
            fieldNames={{ label: 'name', value: 'id', children: 'children' }}
            treeData={categoryTree}
            value={matrixCategory}
            onChange={(v) => {
              setMatrixCategory(v);
              loadMatrix(matrixKeyword, v);
            }}
          />
          <Input.Search
            style={{ width: 240 }}
            placeholder="搜索品名/规格"
            allowClear
            value={matrixKeyword}
            onChange={(e) => setMatrixKeyword(e.target.value)}
            onSearch={(v) => loadMatrix(v, matrixCategory)}
          />
        </Space>
        <Table<IPriceMatrixRow>
          rowKey="id"
          size="small"
          loading={matrixLoading}
          columns={matrixColumns}
          dataSource={matrixRows}
          pagination={{ pageSize: 20, showSizeChanger: false }}
          scroll={{ x: matrixLevels.length * 150 + 160 }}
        />
      </Drawer>
    </>
  );
};

export default ProductGoodsPage;