import React, { useEffect, useRef, useState } from 'react';
import {
  Button,
  DatePicker,
  Descriptions,
  Drawer,
  Form,
  Input,
  message,
  Modal,
  Table,
  Tag,
  Typography,
} from 'antd';
import type { TableProps } from 'antd';
import { UnorderedListOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import XinTable from '@/components/XinTable';
import type {
  XinTableColumn,
  XinTableInstance,
  XinTableProps,
} from '@/components/XinTable/typings.ts';
import type { IBill, IBillDetail, IBillGoodsItem, IBillOrder } from '@/domain/iBill.ts';
import { BILL_STATUS_MAP } from '@/domain/iBill.ts';
import { STORE_ORDER_STATUS_MAP } from '@/domain/iStoreOrder.ts';
import { getBillDetail, payBill } from '@/api/recon/bill.ts';
import { getStoreOptions } from '@/api/customer/store.ts';
import type IStore from '@/domain/iStore.ts';
import AuthButton from '@/components/AuthButton';

const { Title, Text } = Typography;

/** 确认收款表单 */
interface PayFormValues {
  paid_at: dayjs.Dayjs;
  pay_remark?: string;
}

/**
 * 门店账单（采购单完成后按门店生成；详情含合并后的商品明细与关联订单；线下收款手动登记）
 */
const BillPage: React.FC = () => {
  const tableRef = useRef<XinTableInstance<IBill>>(null);
  const [stores, setStores] = useState<IStore[]>([]);

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

  // 确认收款（线下收款手动登记）
  const [payTarget, setPayTarget] = useState<IBill | null>(null);
  const [paySaving, setPaySaving] = useState(false);
  const [payForm] = Form.useForm<PayFormValues>();

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

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

  /** 打开确认收款弹窗（默认付款时间为当前） */
  const openPay = (record: IBill) => {
    setPayTarget(record);
    payForm.setFieldsValue({ paid_at: dayjs(), pay_remark: '' });
  };

  /** 提交确认收款：登记付款信息并置为已支付 */
  const handlePaySave = async (values: PayFormValues) => {
    if (!payTarget?.id) {
      return;
    }
    setPaySaving(true);
    try {
      await payBill(payTarget.id, {
        paid_at: values.paid_at.format('YYYY-MM-DD HH:mm:ss'),
        pay_remark: values.pay_remark ?? '',
      });
      message.success('收款已登记，账单已置为已支付');
      setPayTarget(null);
      await tableRef.current?.reload();
    } finally {
      setPaySaving(false);
    }
  };

  /** 合并商品明细列：品名/包规/单位/单价(加权平均)/数量/重量/金额 */
  const itemColumns: TableProps<IBillGoodsItem>['columns'] = [
    { title: '品名', dataIndex: 'product_name', width: 160, align: 'center' },
    { title: '包规', dataIndex: 'product_spec', width: 100, align: 'center', render: (v) => v || '-' },
    { title: '单位', dataIndex: 'unit', width: 80, align: 'center', render: (v) => v || '-' },
    {
      title: '单价',
      dataIndex: 'price',
      width: 100,
      align: 'center',
      render: (v) => `¥${Number(v).toFixed(2)}`,
    },
    {
      title: '数量',
      dataIndex: 'quantity',
      width: 90,
      align: 'center',
      render: (v) => <Text strong>{v}</Text>,
    },
    { title: '重量', dataIndex: 'weight', width: 100, align: 'center', render: (v) => `${v}斤` },
    {
      title: '金额',
      dataIndex: 'amount',
      width: 110,
      align: 'center',
      render: (v) => <Text strong>¥{Number(v).toFixed(2)}</Text>,
    },
  ];

  /** 合并商品明细合计行 */
  const renderItemSummary = () => {
    const items = detail?.items ?? [];
    const totalQuantity = items.reduce((sum, row) => sum + Number(row.quantity), 0);
    const totalWeight = items.reduce((sum, row) => sum + Number(row.weight), 0);
    const totalAmount = items.reduce((sum, row) => sum + Number(row.amount), 0);
    return (
      <Table.Summary.Row>
        <Table.Summary.Cell index={0} colSpan={4} align="center">
          <Text strong>合计</Text>
        </Table.Summary.Cell>
        <Table.Summary.Cell index={4} align="center">
          <Text strong>{totalQuantity}</Text>
        </Table.Summary.Cell>
        <Table.Summary.Cell index={5} align="center">
          <Text strong>{totalWeight.toFixed(3)}斤</Text>
        </Table.Summary.Cell>
        <Table.Summary.Cell index={6} align="center">
          <Text strong type="danger">¥{totalAmount.toFixed(2)}</Text>
        </Table.Summary.Cell>
      </Table.Summary.Row>
    );
  };

  /** 关联订单列 */
  const orderColumns: TableProps<IBillOrder>['columns'] = [
    {
      title: '订单号',
      dataIndex: 'order_no',
      align: 'center',
      render: (v) => <Text copyable={{ text: v }}>{v}</Text>,
    },
    { title: '订货日期', dataIndex: 'order_date', align: 'center' },
    { title: '订货数量', dataIndex: 'total_quantity', align: 'center' },
    { title: '总重量', dataIndex: 'total_weight', align: 'center', render: (v) => `${v}斤` },
    {
      title: '订单金额',
      dataIndex: 'total_amount',
      align: 'center',
      render: (v) => <Text strong>¥{v}</Text>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      render: (v) => {
        const item = STORE_ORDER_STATUS_MAP[Number(v ?? 0)];
        return <Tag color={item?.color}>{item?.text}</Tag>;
      },
    },
  ];

  const columns: XinTableColumn<IBill>[] = [
    {
      title: '账单号',
      dataIndex: 'bill_no',
      valueType: 'text',
      hideInForm: true,
      width: 210,
      render: (_, record) => <Text copyable={{ text: record.bill_no }}>{record.bill_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 ?? `门店#${record.store_id}`,
    },
    {
      title: '采购单号',
      dataIndex: 'purchase_no',
      valueType: 'text',
      hideInForm: true,
      render: (_, record) => record.purchase?.purchase_no ?? '-',
    },
    {
      title: '账单日期',
      dataIndex: 'bill_date',
      valueType: 'dateRange',
      hideInForm: true,
      align: 'center',
      render: (_, record) => record.bill_date,
    },
    {
      title: '商品金额',
      dataIndex: 'product_amount',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) => `¥${record.product_amount}`,
    },
    {
      title: '配送费',
      dataIndex: 'delivery_fee',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) => `¥${record.delivery_fee}`,
    },
    {
      title: '附加金额',
      dataIndex: 'added_amount',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) => (
        <span title={`周转筐 ${record.box_num} 个 / 周转托盘 ${record.tray_num} 个`}>
          ¥{record.added_amount}
        </span>
      ),
    },
    {
      title: '账单总金额',
      dataIndex: 'total_amount',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) => <Text strong type="danger">¥{record.total_amount}</Text>,
    },
    {
      title: '支付状态',
      dataIndex: 'status',
      valueType: 'select',
      hideInForm: true,
      align: 'center',
      fieldProps: {
        options: Object.entries(BILL_STATUS_MAP).map(([value, item]) => ({
          value: Number(value),
          label: item.text,
        })),
      },
      render: (_, record) => {
        const item = BILL_STATUS_MAP[record.status ?? 0];
        return <Tag color={item?.color}>{item?.text}</Tag>;
      },
    },
    {
      title: '关联订单',
      dataIndex: 'orders_count',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) => `${record.orders_count ?? 0} 笔`,
    },
    {
      title: '生成时间',
      dataIndex: 'created_at',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
    },
  ];

  const operateRender: XinTableProps<IBill>['operateRender'] = (record) => [
    <Button
      key="detail"
      size="small"
      type="primary"
      icon={<UnorderedListOutlined />}
      onClick={() => openDetail(record.id!)}
    />,
    record.status === 0 ? (
      <AuthButton key="pay" auth="recon.bill.pay">
        <Button size="small" variant="solid" color="green" onClick={() => openPay(record)}>
          确认收款
        </Button>
      </AuthButton>
    ) : null,
  ];

  const tableProps: XinTableProps<IBill> = {
    api: '/recon/bill',
    columns,
    rowKey: 'id',
    accessName: 'recon.bill',
    tableRef,
    operateRender,
    formProps: false,
    actionBarRender: (dom) => [dom.search, dom.keywordSearch],
  };

  return (
    <>
      <div className="mb-5">
        <Title level={3}>门店账单</Title>
        <Text type="secondary">
          采购单完成后在「采购单」页生成，每个门店单独一张；账单总金额 = 商品金额 + 配送费 + 附加金额（周转筐/托盘）。
        </Text>
      </div>
      <XinTable<IBill> {...tableProps} />

      <Drawer
        title={detail ? `账单 ${detail.bill.bill_no}` : '账单详情'}
        open={detailOpen}
        onClose={() => setDetailOpen(false)}
        size={1000}
        loading={detailLoading}
      >
        {detail ? (
          <>
            <Descriptions column={3} size="small" bordered>
              <Descriptions.Item label="门店">{detail.bill.store?.name ?? `门店#${detail.bill.store_id}`}</Descriptions.Item>
              <Descriptions.Item label="采购单号">{detail.bill.purchase?.purchase_no ?? '-'}</Descriptions.Item>
              <Descriptions.Item label="账单日期">{detail.bill.bill_date}</Descriptions.Item>
              <Descriptions.Item label="商品金额">¥{detail.bill.product_amount}</Descriptions.Item>
              <Descriptions.Item label="配送费">¥{detail.bill.delivery_fee}</Descriptions.Item>
              <Descriptions.Item label="附加金额">
                ¥{detail.bill.added_amount}
                <Text type="secondary" className="ml-2!">
                  （筐 {detail.bill.box_num}×¥{detail.bill.box_price}，托盘 {detail.bill.tray_num}×¥{detail.bill.tray_price}）
                </Text>
              </Descriptions.Item>
              <Descriptions.Item label="账单总金额">
                <Text strong type="danger">¥{detail.bill.total_amount}</Text>
              </Descriptions.Item>
              <Descriptions.Item label="支付状态">
                <Tag color={BILL_STATUS_MAP[detail.bill.status ?? 0]?.color}>
                  {BILL_STATUS_MAP[detail.bill.status ?? 0]?.text}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="付款时间">{detail.bill.paid_at ?? '-'}</Descriptions.Item>
              <Descriptions.Item label="收款人">{detail.bill.paid_operator?.nickname ?? '-'}</Descriptions.Item>
              <Descriptions.Item label="生成人">{detail.bill.operator?.nickname ?? '-'}</Descriptions.Item>
              <Descriptions.Item label="生成时间">{detail.bill.created_at}</Descriptions.Item>
              {detail.bill.pay_remark ? (
                <Descriptions.Item label="付款备注" span={3}>{detail.bill.pay_remark}</Descriptions.Item>
              ) : null}
              {detail.bill.remark ? (
                <Descriptions.Item label="备注" span={3}>{detail.bill.remark}</Descriptions.Item>
              ) : null}
            </Descriptions>

            <Title level={5} className="mt-6! mb-3!">
              商品明细（按商品合并）
            </Title>
            <Table<IBillGoodsItem>
              rowKey="product_id"
              size="small"
              bordered
              columns={itemColumns}
              dataSource={detail.items}
              pagination={false}
              summary={renderItemSummary}
            />

            <Title level={5} className="mt-6! mb-3!">
              关联订单（{detail.orders.length} 笔）
            </Title>
            <Table<IBillOrder>
              rowKey="id"
              size="small"
              bordered
              columns={orderColumns}
              dataSource={detail.orders}
              pagination={false}
            />
          </>
        ) : null}
      </Drawer>

      {/* 确认收款：线下收款后手动登记付款信息 */}
      <Modal
        title={payTarget ? `确认收款 · ${payTarget.bill_no}` : '确认收款'}
        open={payTarget !== null}
        onCancel={() => setPayTarget(null)}
        onOk={() => payForm.submit()}
        confirmLoading={paySaving}
        okText="确认收款"
        destroyOnHidden
      >
        <div className="py-2 text-gray-500">
          应收金额 <Text strong type="danger">¥{payTarget?.total_amount ?? '0.00'}</Text>
          （商品 ¥{payTarget?.product_amount ?? '0.00'} + 配送费 ¥{payTarget?.delivery_fee ?? '0.00'} + 附加 ¥{payTarget?.added_amount ?? '0.00'}）；
          线下收款完成后登记付款信息，账单支付状态将置为「已支付」。
        </div>
        <Form form={payForm} layout="vertical" onFinish={handlePaySave}>
          <Form.Item
            label="付款时间"
            name="paid_at"
            rules={[{ required: true, message: '请选择付款时间' }]}
          >
            <DatePicker className="w-full" showTime allowClear={false} />
          </Form.Item>
          <Form.Item label="付款备注" name="pay_remark" rules={[{ max: 255 }]}>
            <Input.TextArea rows={2} maxLength={255} placeholder="如：现金/转账单号等线下收款信息（选填）" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default BillPage;