const { useMemo, useState, useEffect } = React;
const {
  Button, Input, InputNumber, Select, Table, Pagination, Space, Radio, Form,
  Modal, DatePicker, Tag,
} = antd;
const { RangePicker } = DatePicker;

function ModulePlaceholder({ title }) {
  return (
    <div className="placeholder" data-screen-label={"module-" + title}>
      <span className="tag-lite">一级菜单</span>
      <h2>{title}</h2>
      <p>本模块仅展示一级入口，不展开二级 / 三级菜单。</p>
    </div>
  );
}

function FilterActions({ onReset, onQuery }) {
  return (
    <Space className="filter-actions">
      <Button onClick={onReset}>重 置</Button>
      <Button type="primary" onClick={onQuery}>查 询</Button>
    </Space>
  );
}

function ListPager({ total, page, pageSize, onChange, onPageSize }) {
  return (
    <div className="pager-bar">
      <Pagination
        current={page}
        pageSize={pageSize}
        total={total}
        showTotal={(t) => `共 ${t} 条记录`}
        showSizeChanger
        pageSizeOptions={["10", "20", "50"]}
        onChange={(p, ps) => {
          if (ps !== pageSize && onPageSize) onPageSize(ps);
          else onChange(p);
        }}
      />
    </div>
  );
}

function pushDownloadTask(update, task) {
  const item = {
    id: String(100 + Math.floor(Math.random() * 900)),
    status: "success",
    at: new Date().toISOString().slice(0, 19).replace("T", " "),
    ...task,
  };
  update((s) => ({
    ...s,
    downloadTasks: [item, ...(s.downloadTasks || [])],
  }));
  return item;
}

/** 我的任务：线上为独立页面，非弹窗 */
function MyTasksPage({ state, toast, from }) {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const tasks = useMemo(
    () => (state.downloadTasks || []).filter((t) => !from || t.from === from),
    [state.downloadTasks, from]
  );
  const rows = tasks.slice((page - 1) * pageSize, page * pageSize);
  const columns = [
    { title: "任务ID", dataIndex: "id", key: "id", width: 100 },
    { title: "文件名", dataIndex: "name", key: "name", ellipsis: true },
    {
      title: "任务状态",
      dataIndex: "status",
      key: "status",
      width: 120,
      render: () => <Tag color="success">成功</Tag>,
    },
    { title: "创建时间", dataIndex: "at", key: "at", width: 180 },
    {
      title: "操作",
      key: "op",
      width: 110,
      render: (_, row) => (
        <Button type="link" onClick={() => toast("开始下载：" + row.name)}>下载文件</Button>
      ),
    },
  ];

  return (
    <div data-screen-label="page-my-tasks">
      <div className="table-panel">
        <Table
          rowKey="id"
          size="middle"
          columns={columns}
          dataSource={rows}
          pagination={false}
          className="nowrap-table"
          locale={{ emptyText: "暂无下载任务" }}
        />
        <ListPager
          total={tasks.length}
          page={page}
          pageSize={pageSize}
          onChange={setPage}
          onPageSize={(n) => { setPageSize(n); setPage(1); }}
        />
      </div>
    </div>
  );
}

/** 商户明细弹窗（活动数据 / 对账单） */
function MerchantDetailModal({ open, source, mode, onClose, toast, onExportOrders, onDownload }) {
  const rows = source && source.merchants ? source.merchants : [];
  const columns = [
    { title: "广场ID", dataIndex: "plazaId", key: "plazaId", width: 100 },
    { title: "广场名称", dataIndex: "plazaName", key: "plazaName", width: 130 },
    { title: "门店ID", dataIndex: "storeId", key: "storeId", width: 110 },
    { title: "门店名称", dataIndex: "storeName", key: "storeName" },
    { title: "补贴订单数", dataIndex: "orderCount", key: "orderCount", width: 96 },
    { title: "订单金额", dataIndex: "orderAmount", key: "orderAmount", width: 96, render: (v) => SPData.amt(v) },
    { title: "实付金额", dataIndex: "payAmount", key: "payAmount", width: 96, render: (v) => SPData.amt(v) },
    { title: "积分抵扣金额", dataIndex: "pointDeduct", key: "pointDeduct", width: 110, render: (v) => SPData.amt(v) },
    { title: "补贴应结算金额", dataIndex: "subsidyDue", key: "subsidyDue", width: 120, render: (v) => SPData.amt(v) },
  ];
  if (mode === "bill") {
    columns.push({ title: "状态", dataIndex: "billStatus", key: "billStatus", width: 88 });
  }
  const summaryItems = source ? [
    ["参与商户数", source.merchantCount],
    ["参与订单数", source.orderCount],
    ["订单金额", SPData.amt(source.orderAmount)],
    ["实付金额", SPData.amt(source.payAmount)],
    ["积分抵扣金额", SPData.amt(source.pointDeduct)],
    ["补贴应结算金额", SPData.amt(source.subsidyDue)],
  ] : [];

  return (
    <Modal
      title={mode === "activity" ? "活动明细" : "商户明细"}
      open={open}
      onCancel={onClose}
      width={1180}
      destroyOnClose
      centered
      data-screen-label="merchant-detail-modal"
      className="store-detail-modal"
      footer={
        <div className="store-detail-footer">
          <Button onClick={() => onExportOrders && onExportOrders(source)}>导出订单明细</Button>
          <Button type="primary" onClick={() => onDownload ? onDownload(source) : toast("下载成功")}>下 载</Button>
        </div>
      }
    >
      {source ? (
        <div className="store-detail-header detail-meta-header">
          <span>活动名称: {source.name}</span>
          <span>活动ID: {source.id}</span>
          <span>活动时间: {SPData.cycleDateOnly(source.cycleStart, source.cycleEnd)}</span>
        </div>
      ) : null}
      <Table
        rowKey={(r) => r.storeId + "-" + r.storeName}
        size="small"
        columns={columns}
        dataSource={rows}
        pagination={false}
        tableLayout="fixed"
        locale={{ emptyText: "暂无数据" }}
      />
      {source ? (
        <div className="store-detail-summary">
          {summaryItems.map(([label, value]) => (
            <div className="summary-row" key={label}>
              <div className="summary-label">{label}</div>
              <div className="summary-value">{value}</div>
            </div>
          ))}
        </div>
      ) : null}
    </Modal>
  );
}

/** 结算单明细弹窗（列表操作「下载结算单」打开） */
function SettleDetailModal({ open, row, onClose, toast, onExportOrders, onDownload }) {
  if (!row) return null;
  const fee = SPData.settleFee(row);
  const columns = [
    { title: "门店ID", dataIndex: "storeId", key: "storeId", width: 110 },
    { title: "门店名称", dataIndex: "storeName", key: "storeName", ellipsis: true },
    { title: "补贴订单数", dataIndex: "orderCount", key: "orderCount", width: 96 },
    { title: "订单金额", dataIndex: "orderAmount", key: "orderAmount", width: 96, render: (v) => SPData.amt(v) },
    { title: "实付金额", dataIndex: "payAmount", key: "payAmount", width: 96, render: (v) => SPData.amt(v) },
    { title: "积分抵扣金额", dataIndex: "pointDeduct", key: "pointDeduct", width: 110, render: (v) => SPData.amt(v) },
    { title: "补贴应结算金额", dataIndex: "subsidyDue", key: "subsidyDue", width: 120, render: (v) => SPData.amt(v) },
    { title: "补贴实际结算金额", dataIndex: "subsidyActual", key: "subsidyActual", width: 130, render: (v) => SPData.amt(v) },
    { title: "状态", dataIndex: "status", key: "status", width: 88 },
  ];

  return (
    <Modal
      title="结算单明细"
      open={open}
      onCancel={onClose}
      width={1180}
      destroyOnClose
      data-screen-label="settle-detail-modal"
      className="store-detail-modal"
      footer={
        <div className="store-detail-footer">
          <Button onClick={() => onExportOrders && onExportOrders(row)}>导出订单明细</Button>
          <Button type="primary" onClick={() => onDownload ? onDownload(row) : toast("下载成功")}>下 载</Button>
        </div>
      }
    >
      <div className="store-detail-header">
        <span>广场名称: {row.plazaName}</span>
        <span>结算单号: {row.billNo}</span>
        <span>结算周期: {row.cycle}</span>
      </div>
      <Table
        rowKey={(r) => r.storeId}
        size="small"
        columns={columns}
        dataSource={row.merchants || []}
        pagination={false}
        tableLayout="fixed"
        locale={{ emptyText: "暂无数据" }}
      />
      <table className="settle-fee-table">
        <tbody>
          <tr><td>订单金额</td><td>{SPData.amt(row.orderAmount)}</td></tr>
          <tr><td>实付金额</td><td>{SPData.amt(row.payAmount)}</td></tr>
          <tr><td>积分抵扣金额</td><td>{SPData.amt(row.pointDeduct)}</td></tr>
          <tr><td>补贴应结算金额</td><td>{SPData.amt(row.subsidyDue)}</td></tr>
          <tr><td>补贴实际结算金额</td><td>{SPData.amt(row.subsidyActual)}</td></tr>
          <tr><td>扣款金额</td><td>{SPData.amt(fee.deductAmount)}</td></tr>
          <tr><td>服务费率</td><td>{(fee.rate * 100).toFixed(0)}%</td></tr>
          <tr><td>服务费</td><td>{SPData.amt(fee.serviceFee)}</td></tr>
          <tr><td>最终应付款金额</td><td>{SPData.amt(fee.finalPay)}</td></tr>
        </tbody>
      </table>
    </Modal>
  );
}

function activityListColumns(onBoard) {
  return [
    { title: "活动ID", dataIndex: "id", key: "id", width: 180 },
    { title: "活动名称", dataIndex: "name", key: "name", width: 180, ellipsis: true },
    { title: "活动状态", dataIndex: "status", key: "status", width: 100, render: (s) => <StatusTag status={s} /> },
    { title: "广场ID", dataIndex: "plazaId", key: "plazaId", width: 100 },
    { title: "广场名称", dataIndex: "plazaName", key: "plazaName", width: 150, ellipsis: true },
    {
      title: "活动时间",
      key: "cycle",
      width: 340,
      render: (_, r) => SPData.cycleText(r.cycleStart, r.cycleEnd),
    },
    { title: "参与商户数", dataIndex: "merchantCount", key: "merchantCount", width: 100 },
    { title: "参与订单数", dataIndex: "orderCount", key: "orderCount", width: 100 },
    { title: "订单金额", dataIndex: "orderAmount", key: "orderAmount", width: 110, render: (v) => SPData.amt(v) },
    { title: "实付金额", dataIndex: "payAmount", key: "payAmount", width: 110, render: (v) => SPData.amt(v) },
    { title: "积分抵扣金额", dataIndex: "pointDeduct", key: "pointDeduct", width: 120, render: (v) => SPData.amt(v) },
    { title: "补贴应结算金额", dataIndex: "subsidyDue", key: "subsidyDue", width: 130, render: (v) => SPData.amt(v) },
    {
      title: "操作",
      key: "ops",
      fixed: "right",
      width: 110,
      render: (_, row) => (
        <Button type="link" onClick={() => onBoard(row)}>活动数据</Button>
      ),
    },
  ];
}

function billListColumns(onMerchants) {
  return [
    { title: "活动ID", dataIndex: "id", key: "id", width: 180 },
    { title: "活动名称", dataIndex: "name", key: "name", width: 180, ellipsis: true },
    { title: "活动状态", dataIndex: "status", key: "status", width: 100, render: (s) => <StatusTag status={s} /> },
    { title: "广场ID", dataIndex: "plazaId", key: "plazaId", width: 100 },
    { title: "广场名称", dataIndex: "plazaName", key: "plazaName", width: 150, ellipsis: true },
    {
      title: "活动时间",
      key: "cycle",
      width: 340,
      render: (_, r) => SPData.cycleText(r.cycleStart, r.cycleEnd),
    },
    { title: "参与商户数", dataIndex: "merchantCount", key: "merchantCount", width: 100 },
    { title: "参与订单数", dataIndex: "orderCount", key: "orderCount", width: 100 },
    { title: "订单金额", dataIndex: "orderAmount", key: "orderAmount", width: 110, render: (v) => SPData.amt(v) },
    { title: "实付金额", dataIndex: "payAmount", key: "payAmount", width: 110, render: (v) => SPData.amt(v) },
    { title: "积分抵扣金额", dataIndex: "pointDeduct", key: "pointDeduct", width: 120, render: (v) => SPData.amt(v) },
    { title: "补贴应结算金额", dataIndex: "subsidyDue", key: "subsidyDue", width: 130, render: (v) => SPData.amt(v) },
    { title: "补贴消耗占比", dataIndex: "subsidyConsumeRate", key: "subsidyConsumeRate", width: 120, render: (v) => SPData.pct(v) },
    { title: "对账单确认率", dataIndex: "billConfirmRate", key: "billConfirmRate", width: 120, render: (v) => SPData.pct(v) },
    { title: "发票收齐率", dataIndex: "invoiceCollectRate", key: "invoiceCollectRate", width: 110, render: (v) => SPData.pct(v) },
    { title: "补贴付款率", dataIndex: "subsidyPayRate", key: "subsidyPayRate", width: 110, render: (v) => SPData.pct(v) },
    { title: "补贴打款金额累计", dataIndex: "subsidyPaidTotal", key: "subsidyPaidTotal", width: 150, render: (v) => SPData.amt(v) },
    {
      title: "操作",
      key: "ops",
      fixed: "right",
      width: 110,
      render: (_, row) => (
        <Button type="link" onClick={() => onMerchants(row)}>商户明细</Button>
      ),
    },
  ];
}

function ActivityDataBoardPage({ activityId, state, update, toast }) {
  const [detailOpen, setDetailOpen] = useState(false);
  const board = useMemo(
    () => SPData.getActivityDashboard(activityId, state),
    [activityId, state]
  );
  const metricGroups = [
    {
      key: "merchant",
      title: "商户参与",
      desc: "有积分抵扣订单的门店",
      items: [
        { label: "参活商户数", value: board.merchantCount, unit: "家" },
        { label: "参活商户占比", value: (board.merchantRate * 100).toFixed(2), unit: "%" },
      ],
    },
    {
      key: "subsidy",
      title: "补贴金额",
      desc: "应结算与待付补贴",
      items: [
        { label: "补贴总额", value: SPData.amt(board.subsidyTotal), unit: "元" },
        { label: "已产生待付补贴额", value: SPData.amt(board.subsidyPending), unit: "元" },
      ],
    },
    {
      key: "order",
      title: "订单情况",
      desc: "补贴订单与退款",
      items: [
        { label: "订单笔数", value: board.orderCount, unit: "笔" },
        { label: "退款笔数", value: board.refundCount, unit: "笔" },
      ],
    },
    {
      key: "point",
      title: "积分抵扣",
      desc: "活动积分抵扣汇总",
      items: [
        { label: "积分抵扣累计", value: SPData.amt(board.pointDeduct), unit: "元" },
        { label: "活动门店数", value: board.storeCount || 0, unit: "家" },
      ],
    },
  ];

  const exportOrders = (row) => {
    pushDownloadTask(update, {
      name: "【" + (row.name || row.id) + "】活动数据-订单明细.xlsx",
      from: "activity",
    });
    setDetailOpen(false);
    toast("导出成功,请前往我的任务下载");
    navigate("sp/activity-data/tasks");
  };

  if (!board.data && !board.activity) {
    return (
      <div className="panel" data-screen-label="page-activity-board-empty">
        <p>未找到活动数据：{activityId}</p>
        <Button type="primary" onClick={() => navigate("sp/activity")}>返回</Button>
      </div>
    );
  }

  return (
    <div className="board-page" data-screen-label="page-activity-board">
      <div className="panel board-meta-panel">
        <div className="board-meta-hd">
          <div className="board-title-wrap">
            <div className="board-title">{board.name}</div>
            <StatusTag status={board.status} />
          </div>
        </div>
        <div className="board-meta-inline">
          <span><em>活动ID</em>{board.id}</span>
          <span><em>广场</em>{board.plazaName || "-"}（{board.plazaId || "-"}）</span>
          <span><em>活动时间</em>{SPData.cycleDateOnly(board.cycleStart, board.cycleEnd)}</span>
        </div>
      </div>
      <div className="panel board-metrics-panel">
        <div className="board-metric-grid">
          {metricGroups.map((group) => (
            <div className="board-metric-card" key={group.key}>
              <div className="board-metric-card-hd">
                <div className="board-metric-card-title">{group.title}</div>
                <div className="board-metric-card-desc">{group.desc}</div>
              </div>
              <div className="board-metric-pair">
                {group.items.map((item) => (
                  <div className="board-metric-block" key={item.label}>
                    <div className="board-metric-label">{item.label}</div>
                    <div className="board-metric-value">
                      <span className="board-metric-num">{item.value}</span>
                      {item.unit ? <span className="board-metric-unit">{item.unit}</span> : null}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="board-page-footer">
        <Button onClick={() => navigate("sp/activity")}>返回</Button>
        <Button type="primary" onClick={() => setDetailOpen(true)} disabled={!board.data}>查看活动明细</Button>
      </div>
      <MerchantDetailModal
        open={detailOpen}
        source={board.data}
        mode="activity"
        onClose={() => setDetailOpen(false)}
        toast={toast}
        onExportOrders={exportOrders}
        onDownload={() => toast("下载成功")}
      />
    </div>
  );
}

function ActivityBillFilters({ draft, setDraft, onReset, onQuery }) {
  return (
    <div className="panel">
      <div className="filters">
        <div className="field">
          <label>活动ID</label>
          <Input value={draft.id} placeholder="请输入活动ID" onChange={(e) => setDraft({ ...draft, id: e.target.value })} />
        </div>
        <div className="field">
          <label>活动名称</label>
          <Input value={draft.name} placeholder="请输入活动名称" onChange={(e) => setDraft({ ...draft, name: e.target.value })} />
        </div>
        <div className="field">
          <label>活动状态</label>
          <Select
            style={{ width: "100%" }}
            value={draft.status || undefined}
            allowClear
            placeholder="请选择活动状态"
            onChange={(v) => setDraft({ ...draft, status: v || "" })}
            options={[
              { value: "active", label: "进行中" },
              { value: "ended", label: "已结束" },
              { value: "archived", label: "已归档" },
            ]}
          />
        </div>
        <div className="field">
          <label>广场ID</label>
          <Input value={draft.plazaId} placeholder="请输入广场ID" onChange={(e) => setDraft({ ...draft, plazaId: e.target.value })} />
        </div>
        <div className="field">
          <label>广场名称</label>
          <Select
            style={{ width: "100%" }}
            value={draft.plazaName || undefined}
            allowClear
            showSearch
            optionFilterProp="label"
            placeholder="请选择"
            onChange={(v) => setDraft({ ...draft, plazaName: v || "" })}
            options={SPData.PLAZAS.map((p) => ({ value: p.name, label: p.name }))}
          />
        </div>
        <div className="field">
          <label>活动时间</label>
          <RangePicker
            style={{ width: "100%" }}
            value={[draft.start ? dayjs(draft.start) : null, draft.end ? dayjs(draft.end) : null]}
            onChange={(dates) => setDraft({
              ...draft,
              start: dates && dates[0] ? dates[0].format("YYYY-MM-DD") : "",
              end: dates && dates[1] ? dates[1].format("YYYY-MM-DD") : "",
            })}
          />
        </div>
        <FilterActions onReset={onReset} onQuery={onQuery} />
      </div>
    </div>
  );
}

function filterActivityRows(list, q) {
  return (list || []).filter((a) => {
    if (q.id && !a.id.includes(q.id.trim())) return false;
    if (q.name && !a.name.includes(q.name.trim())) return false;
    if (q.plazaId && !a.plazaId.includes(q.plazaId.trim())) return false;
    if (q.plazaName && a.plazaName !== q.plazaName) return false;
    if (q.status && a.status !== q.status) return false;
    if (q.start && a.cycleEnd && a.cycleEnd.slice(0, 10) < q.start) return false;
    if (q.end && a.cycleStart && a.cycleStart.slice(0, 10) > q.end) return false;
    return true;
  });
}

function ActivityDataPage({ state, update, toast }) {
  const empty = { id: "", name: "", plazaId: "", plazaName: "", status: "", start: "", end: "" };
  const [draft, setDraft] = useState(empty);
  const [q, setQ] = useState(empty);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const filtered = useMemo(() => filterActivityRows(state.activityData, q), [state.activityData, q]);
  const rows = filtered.slice((page - 1) * pageSize, page * pageSize);

  return (
    <div data-screen-label="page-activity-data">
      <ActivityBillFilters
        draft={draft}
        setDraft={setDraft}
        onReset={() => { setDraft(empty); setQ(empty); setPage(1); }}
        onQuery={() => { setQ(draft); setPage(1); }}
      />
      <div className="table-panel">
        <div className="table-toolbar">
          <Button onClick={() => navigate("sp/activity-data/tasks")}>我的任务</Button>
        </div>
        <Table
          rowKey="id"
          size="middle"
          columns={activityListColumns((row) => navigate("sp/activity-data/board/" + row.id))}
          dataSource={rows}
          pagination={false}
          scroll={{ x: 1700 }}
          className="nowrap-table"
          locale={{ emptyText: "暂无数据" }}
        />
        <ListPager
          total={filtered.length}
          page={page}
          pageSize={pageSize}
          onChange={setPage}
          onPageSize={(n) => { setPageSize(n); setPage(1); }}
        />
      </div>
    </div>
  );
}

function RulesPage({ state, update, toast }) {
  const defaults = { pointValue: 1, threshold: 1, deductMode: "mutex", pushDays: 7 };
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({ ...defaults, ...(state.rules || {}) });
  }, [state.rules]);

  const save = () => {
    form.validateFields().then((values) => {
      update((s) => ({ ...s, rules: values }));
      toast("全局规则已保存");
    });
  };

  return (
    <div className="rules-page" data-screen-label="page-rules">
      <div className="rules-panel">
        <div className="rules-panel-title">全局规则配置：</div>
        <Form
          form={form}
          layout="horizontal"
          labelCol={{ flex: "160px" }}
          wrapperCol={{ flex: "auto" }}
          initialValues={{ ...defaults, ...(state.rules || {}) }}
          className="rules-form"
          requiredMark
        >
          <Form.Item label="积分币值" required>
            <Space>
              <Form.Item name="pointValue" noStyle rules={[{ required: true, message: "请输入积分币值" }]}>
                <InputNumber min={0} style={{ width: 160 }} addonAfter="积分" />
              </Form.Item>
              <span className="rules-hint">等于0.01元，100积分等于1.00元</span>
            </Space>
          </Form.Item>
          <Form.Item label="起用门槛" required>
            <Space>
              <Form.Item name="threshold" noStyle rules={[{ required: true, message: "请输入起用门槛" }]}>
                <InputNumber min={0} style={{ width: 160 }} addonAfter="积分" />
              </Form.Item>
              <span className="rules-hint">说明：用户低于此值，无法参与活动</span>
            </Space>
          </Form.Item>
          <Form.Item label="券/积分抵扣方式" name="deductMode" rules={[{ required: true }]}>
            <Radio.Group>
              <Space direction="vertical">
                <Radio value="both">积分补贴+券补贴</Radio>
                <Radio value="mutex">积分补贴/券补贴（使用积分则不可用券，使用券则不可用积分）</Radio>
              </Space>
            </Radio.Group>
          </Form.Item>
          <Form.Item label=" " colon={false}>
            <div className="rules-hint rules-hint-block">说明：小程序下单优惠抵扣页面是否使用券/积分的模块</div>
          </Form.Item>
          <Form.Item label="对账单推送规则" required>
            <Space>
              <span className="rules-inline-text">活动结束时间后D+</span>
              <Form.Item name="pushDays" noStyle rules={[{ required: true, message: "请输入天数" }]}>
                <InputNumber min={0} style={{ width: 100 }} addonAfter="天" />
              </Form.Item>
              <span className="rules-hint">说明：设置活动时间结束后几天将对账单推送付呗</span>
            </Space>
          </Form.Item>
        </Form>
      </div>
      <div className="rules-footer">
        <Button type="primary" onClick={save}>保 存</Button>
      </div>
    </div>
  );
}

function ReconPage({ state, update, toast }) {
  const empty = { id: "", name: "", plazaId: "", plazaName: "", status: "", start: "", end: "" };
  const [draft, setDraft] = useState(empty);
  const [q, setQ] = useState(empty);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [merchants, setMerchants] = useState(null);

  const filtered = useMemo(
    () => filterActivityRows(state.activityData, q).map((row) => SPData.enrichBillMetrics(row)),
    [state.activityData, q]
  );
  const rows = filtered.slice((page - 1) * pageSize, page * pageSize);

  const exportOrders = (row) => {
    pushDownloadTask(update, {
      name: "【" + (row.name || row.id) + "】对账单-订单明细.xlsx",
      from: "bill",
    });
    setMerchants(null);
    toast("导出成功,请前往我的任务下载");
    navigate("sp/recon/tasks");
  };

  return (
    <div data-screen-label="page-recon">
      <ActivityBillFilters
        draft={draft}
        setDraft={setDraft}
        onReset={() => { setDraft(empty); setQ(empty); setPage(1); }}
        onQuery={() => { setQ(draft); setPage(1); }}
      />
      <div className="table-panel">
        <div className="table-toolbar">
          <Button onClick={() => navigate("sp/recon/tasks")}>我的任务</Button>
        </div>
        <Table
          rowKey="id"
          size="middle"
          columns={billListColumns(setMerchants)}
          dataSource={rows}
          pagination={false}
          scroll={{ x: 2500 }}
          className="nowrap-table"
          locale={{ emptyText: "暂无数据" }}
        />
        <ListPager
          total={filtered.length}
          page={page}
          pageSize={pageSize}
          onChange={setPage}
          onPageSize={(n) => { setPageSize(n); setPage(1); }}
        />
      </div>
      <MerchantDetailModal
        open={!!merchants}
        source={merchants}
        mode="bill"
        onClose={() => setMerchants(null)}
        toast={toast}
        onExportOrders={exportOrders}
        onDownload={() => toast("下载成功")}
      />
    </div>
  );
}

function SettlePage({ state, update, toast }) {
  const empty = { start: "", end: "", id: "", status: "", plazaId: "", plazaName: "" };
  const [draft, setDraft] = useState(empty);
  const [q, setQ] = useState(empty);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [detail, setDetail] = useState(null);

  const filtered = useMemo(() => {
    return (state.settles || []).filter((s) => {
      if (q.id && !(s.billNo || "").includes(q.id.trim())) return false;
      if (q.plazaId && !(s.plazaId || "").includes(q.plazaId.trim())) return false;
      if (q.plazaName && s.plazaName !== q.plazaName) return false;
      if (q.status && s.status !== q.status) return false;
      if (q.start && s.cycleEnd && s.cycleEnd < q.start) return false;
      if (q.end && s.cycleStart && s.cycleStart > q.end) return false;
      return true;
    });
  }, [state.settles, q]);

  const rows = filtered.slice((page - 1) * pageSize, page * pageSize);

  const exportOrders = (row) => {
    pushDownloadTask(update, {
      name: "【" + row.cycle + "】结算单-订单明细.xlsx",
      from: "settle",
    });
    setDetail(null);
    toast("导出成功,请前往我的任务下载");
    navigate("sp/settle/tasks");
  };

  const columns = [
    { title: "结算单号", dataIndex: "billNo", key: "billNo", width: 240, ellipsis: true },
    { title: "结算周期", dataIndex: "cycle", key: "cycle", width: 200 },
    { title: "广场ID", dataIndex: "plazaId", key: "plazaId", width: 100 },
    { title: "广场名称", dataIndex: "plazaName", key: "plazaName", width: 150, ellipsis: true },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 90,
      render: (s) => (SPData.SETTLE_STATUS[s] || {}).label || s,
    },
    { title: "补贴商户数", dataIndex: "merchantCount", key: "merchantCount", width: 100 },
    { title: "补贴订单数", dataIndex: "orderCount", key: "orderCount", width: 100 },
    { title: "订单金额", dataIndex: "orderAmount", key: "orderAmount", width: 100, render: (v) => SPData.amt(v) },
    { title: "实付金额", dataIndex: "payAmount", key: "payAmount", width: 100, render: (v) => SPData.amt(v) },
    { title: "积分抵扣金额", dataIndex: "pointDeduct", key: "pointDeduct", width: 120, render: (v) => SPData.amt(v) },
    { title: "补贴应结算金额", dataIndex: "subsidyDue", key: "subsidyDue", width: 130, render: (v) => SPData.amt(v) },
    { title: "补贴实际结算金额", dataIndex: "subsidyActual", key: "subsidyActual", width: 140, render: (v) => SPData.amt(v) },
    { title: "创建时间", dataIndex: "createdAt", key: "createdAt", width: 170 },
    {
      title: "操作",
      key: "ops",
      fixed: "right",
      width: 110,
      render: (_, row) => (
        <Button type="link" onClick={() => setDetail(row)}>下载结算单</Button>
      ),
    },
  ];

  return (
    <div data-screen-label="page-settle">
      <div className="panel">
        <div className="filters">
          <div className="field">
            <label>结算周期</label>
            <RangePicker
              style={{ width: "100%" }}
              value={[draft.start ? dayjs(draft.start) : null, draft.end ? dayjs(draft.end) : null]}
              onChange={(dates) => setDraft({
                ...draft,
                start: dates && dates[0] ? dates[0].format("YYYY-MM-DD") : "",
                end: dates && dates[1] ? dates[1].format("YYYY-MM-DD") : "",
              })}
            />
          </div>
          <div className="field">
            <label>结算单号</label>
            <Input value={draft.id} placeholder="请输入结算单号" onChange={(e) => setDraft({ ...draft, id: e.target.value })} />
          </div>
          <div className="field">
            <label>状态</label>
            <Select
              style={{ width: "100%" }}
              value={draft.status || undefined}
              allowClear
              placeholder="请选择状态"
              onChange={(v) => setDraft({ ...draft, status: v || "" })}
              options={Object.entries(SPData.SETTLE_STATUS).map(([k, v]) => ({ value: k, label: v.label }))}
            />
          </div>
          <div className="field">
            <label>广场ID</label>
            <Input value={draft.plazaId} placeholder="请输入广场ID" onChange={(e) => setDraft({ ...draft, plazaId: e.target.value })} />
          </div>
          <div className="field">
            <label>广场名称</label>
            <Select
              style={{ width: "100%" }}
              value={draft.plazaName || undefined}
              allowClear
              showSearch
              optionFilterProp="label"
              placeholder="请选择"
              onChange={(v) => setDraft({ ...draft, plazaName: v || "" })}
              options={SPData.PLAZAS.map((p) => ({ value: p.name, label: p.name }))}
            />
          </div>
          <FilterActions
            onReset={() => { setDraft(empty); setQ(empty); setPage(1); }}
            onQuery={() => { setQ(draft); setPage(1); }}
          />
        </div>
      </div>

      <div className="table-panel">
        <div className="table-toolbar">
          <Button onClick={() => navigate("sp/settle/tasks")}>我的任务</Button>
        </div>
        <Table
          rowKey="billNo"
          size="middle"
          columns={columns}
          dataSource={rows}
          pagination={false}
          scroll={{ x: 1900 }}
          className="nowrap-table"
          locale={{ emptyText: "暂无数据" }}
        />
        <ListPager
          total={filtered.length}
          page={page}
          pageSize={pageSize}
          onChange={setPage}
          onPageSize={(n) => { setPageSize(n); setPage(1); }}
        />
      </div>

      <SettleDetailModal
        open={!!detail}
        row={detail}
        onClose={() => setDetail(null)}
        toast={toast}
        onExportOrders={exportOrders}
        onDownload={() => toast("下载成功")}
      />
    </div>
  );
}

function AppRouter({ route, state, update, toast }) {
  if (!route.startsWith("sp/")) {
    const item = PRIMARY_MENUS.find((m) => m.id === route) || { label: "工作台" };
    return <ModulePlaceholder title={item.label}></ModulePlaceholder>;
  }
  if (route === "sp/activity") {
    return <ActivityListPage state={state} update={update} toast={toast}></ActivityListPage>;
  }
  if (route === "sp/activity/create") {
    return <ActivityFormPage mode="create" state={state} update={update} toast={toast}></ActivityFormPage>;
  }
  if (route.startsWith("sp/activity/view/")) {
    return <ActivityFormPage mode="view" activityId={route.split("/").pop()} state={state} update={update} toast={toast}></ActivityFormPage>;
  }
  if (route.startsWith("sp/activity/edit/")) {
    return <ActivityFormPage mode="edit" activityId={route.split("/").pop()} state={state} update={update} toast={toast}></ActivityFormPage>;
  }
  if (route === "sp/activity-data") return <ActivityDataPage state={state} update={update} toast={toast}></ActivityDataPage>;
  if (route === "sp/activity-data/tasks") return <MyTasksPage state={state} toast={toast} from="activity"></MyTasksPage>;
  if (route.startsWith("sp/activity-data/board/")) {
    return <ActivityDataBoardPage activityId={route.split("/").pop()} state={state} update={update} toast={toast}></ActivityDataBoardPage>;
  }
  if (route === "sp/rules") return <RulesPage state={state} update={update} toast={toast}></RulesPage>;
  if (route === "sp/recon") return <ReconPage state={state} update={update} toast={toast}></ReconPage>;
  if (route === "sp/recon/tasks") return <MyTasksPage state={state} toast={toast} from="bill"></MyTasksPage>;
  if (route === "sp/settle") return <SettlePage state={state} update={update} toast={toast}></SettlePage>;
  if (route === "sp/settle/tasks") return <MyTasksPage state={state} toast={toast} from="settle"></MyTasksPage>;
  return <ModulePlaceholder title="SP营销"></ModulePlaceholder>;
}

Object.assign(window, {
  ModulePlaceholder,
  ActivityDataPage,
  ActivityDataBoardPage,
  RulesPage,
  ReconPage,
  SettlePage,
  MyTasksPage,
  AppRouter,
});