import React, { useEffect, useState } from 'react';
import { Button, DatePicker, Form, Modal, Select, Typography } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import XinTable from '@/components/XinTable';
import type { XinTableColumn, XinTableProps } from '@/components/XinTable/typings.ts';
import type IContainerReturn from '@/domain/iContainerReturn.ts';
import { getStoreOptions } from '@/api/customer/store.ts';
import { exportContainerReturns } from '@/api/recon/containerReturn.ts';
import type IStore from '@/domain/iStore.ts';
import AuthButton from '@/components/AuthButton';

const { Title, Text } = Typography;
const { RangePicker } = DatePicker;

/** 汇总导出表单值 */
interface ExportFormValues {
  date_range: [dayjs.Dayjs, dayjs.Dayjs];
  store_ids?: number[];
}

/** 有符号数量展示：正数=压筐（橙色 +N），负数=回筐（绿色 N），0 置灰 */
const SignedNum: React.FC<{ value?: number }> = ({ value }) => {
  const num = Number(value ?? 0);
  if (num > 0) {
    return <Text strong type="warning">+{num}</Text>;
  }
  if (num < 0) {
    return <Text strong type="success">{num}</Text>;
  }
  return <Text type="secondary">0</Text>;
};

/** 有符号金额展示：正=压筐附加（橙），负=回筐抵扣（绿） */
const SignedAmount: React.FC<{ value?: string }> = ({ value }) => {
  const num = Number(value ?? 0);
  if (num > 0) {
    return <Text strong type="warning">+¥{num.toFixed(2)}</Text>;
  }
  if (num < 0) {
    return <Text strong type="success">-¥{Math.abs(num).toFixed(2)}</Text>;
  }
  return <Text type="secondary">¥0.00</Text>;
};

/**
 * 压回筐记录（周转筐/托盘跟账单走：生成账单时自动写入完整快照，只读）
 * 数量正数=压筐（附加金额），负数=回筐（抵扣金额）
 */
const ContainerReturnPage: React.FC = () => {
  const [stores, setStores] = useState<IStore[]>([]);

  // 汇总导出（日期区间 + 门店：行=日期，列=门店，单元格为抵扣/附加金额）
  const [exportOpen, setExportOpen] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [exportForm] = Form.useForm<ExportFormValues>();

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

  /** 提交汇总导出：下载失败时 downloadBlob 内部已提示 */
  const handleExport = async (values: ExportFormValues) => {
    const [start, end] = values.date_range;
    setExporting(true);
    try {
      await exportContainerReturns(
        start.format('YYYY-MM-DD'),
        end.format('YYYY-MM-DD'),
        values.store_ids ?? []
      );
      setExportOpen(false);
    } finally {
      setExporting(false);
    }
  };

  const columns: XinTableColumn<IContainerReturn>[] = [
    {
      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: 'bill_id',
      hideInForm: true,
      hideInSearch: true,
      render: (_, record) => record.bill ? (
        <>
          <Text copyable={{ text: record.bill.bill_no }}>{record.bill.bill_no}</Text>
          <div className={'text-[12px] text-[#999]'}>{record.bill.bill_date}</div>
        </>
      ) : '-',
    },
    {
      title: '压(回)筐数量',
      dataIndex: 'box_num',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) => <SignedNum value={record.box_num} />,
    },
    {
      title: '压(回)托盘数量',
      dataIndex: 'tray_num',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) => <SignedNum value={record.tray_num} />,
    },
    {
      title: '筐单价',
      dataIndex: 'box_price',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) => `¥${Number(record.box_price ?? 0).toFixed(2)}`,
    },
    {
      title: '托盘单价',
      dataIndex: 'tray_price',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) => `¥${Number(record.tray_price ?? 0).toFixed(2)}`,
    },
    {
      title: '抵扣(附加)金额',
      dataIndex: 'amount',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) => <SignedAmount value={record.amount} />,
    },
    {
      title: '操作人',
      dataIndex: 'operator',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) => record.operator?.nickname ?? '-',
    },
    {
      title: '记录时间',
      dataIndex: 'created_at',
      valueType: 'dateRange',
      hideInForm: true,
      hideInTable: true,
      align: 'center',
    },
    {
      title: '记录时间',
      dataIndex: 'created_at',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
    },
  ];

  const tableProps: XinTableProps<IContainerReturn> = {
    api: '/recon/container-return',
    columns,
    rowKey: 'id',
    accessName: 'recon.containerReturn',
    // 记录随账单生成，只读：不新增、不编辑、不删除
    addShow: false,
    editShow: false,
    deleteShow: false,
    formProps: false,
    toolBarRender: (dom) => [
      <AuthButton key="export" auth="recon.containerReturn.export">
        <Button icon={<DownloadOutlined />} onClick={() => setExportOpen(true)}>
          导出
        </Button>
      </AuthButton>,
      dom.columnSetting,
      dom.hideBorder,
      dom.reload,
      dom.columnHeight,
    ],
  };

  return (
    <>
      <div className="mb-5">
        <Title level={3}>回筐记录</Title>
        <Text type="secondary">
          周转筐/托盘跟账单走：生成账单时按填写数量自动写入；正数=压筐（附加金额），负数=回筐（抵扣金额），数量为 0 不生成记录；
          可按日期区间与门店汇总导出（行=日期，列=门店，含行列合计）。
        </Text>
      </div>
      <XinTable<IContainerReturn> {...tableProps} />

      {/* 汇总导出：日期区间 + 门店，同日记录合并，无记录填 0 */}
      <Modal
        title="导出回筐记录"
        open={exportOpen}
        onCancel={() => setExportOpen(false)}
        onOk={() => exportForm.submit()}
        confirmLoading={exporting}
        okText="导出"
        destroyOnHidden
      >
        <div className="py-2 text-gray-500">
          按日期区间与门店导出抵扣（附加）金额汇总表：行=日期（同日记录合并），列=门店，
          当天门店无记录填 0，含行合计与列合计。门店不选默认导出全部门店。
        </div>
        <Form
          form={exportForm}
          layout="vertical"
          onFinish={handleExport}
          initialValues={{
            date_range: [dayjs().startOf('month'), dayjs()],
            store_ids: [],
          }}
        >
          <Form.Item
            label="日期区间"
            name="date_range"
            rules={[{ required: true, message: '请选择日期区间' }]}
          >
            <RangePicker className="w-full" allowClear={false} />
          </Form.Item>
          <Form.Item label="门店" name="store_ids">
            <Select
              mode="multiple"
              allowClear
              maxTagCount="responsive"
              placeholder="全部门店"
              showSearch
              optionFilterProp="label"
              options={stores.map((s) => ({ label: s.name, value: s.id }))}
            />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default ContainerReturnPage;