imeeting/frontend/src/pages/business/MeetingPointsManagement.tsx

import { EyeOutlined, PlusOutlined, ReloadOutlined, SearchOutlined } from "@ant-design/icons";
import { listUsers } from "@/api";
import {
  Button,
  Card,
  Col,
  Descriptions,
  Form,
  Input,
  InputNumber,
  message,
  Modal,
  Row,
  Select,
  Space,
  Statistic,
  Table,
  Tag,
  Typography,
} from "antd";
import { useEffect, useMemo, useState } from "react";
import PageContainer from "@/components/shared/PageContainer";
import ListTable from "@/components/shared/ListTable/ListTable";
import AppPagination from "@/components/shared/AppPagination";
import {
  getMeetingPointsLedgerDetail,
  getMeetingPointsLedgerPage,
  getMeetingPointsOverview,
  transferMeetingPoints,
  type MeetingPointsChargeItemVO,
  type MeetingPointsLedgerDetailVO,
  type MeetingPointsLedgerListItemVO,
  type MeetingPointsOverviewVO,
} from "@/api/business/meetingPoints";
import type { SysUser } from "@/types";

const { Text } = Typography;

const POINTS_TYPE_OPTIONS = [
  { label: "全部类型", value: "" },
  { label: "转录", value: "ASR" },
  { label: "总结", value: "LLM" },
];

function getAccountModeLabel(mode?: string) {
  if (mode === "PERSONAL") return "个人账户";
  if (mode === "BOTH") return "公共和个人共存";
  return "公共账户";
}

function getChargePriorityLabel(priority?: string) {
  return priority === "PUBLIC_FIRST" ? "公共优先" : "个人优先";
}

function getAccountTypeLabel(type?: string) {
  return type === "PERSONAL" ? "个人账户" : "公共账户";
}

function getPointsTypeLabel(value?: string) {
  if (value === "ASR") return "转录";
  if (value === "LLM") return "总结";
  if (value === "TRANSFER_OUT") return "转出";
  if (value === "TRANSFER_IN") return "转入";
  if (value === "INIT") return "初始化";
  return value || "-";
}

function getPointsTypeColor(value?: string) {
  if (value === "ASR") return "blue";
  if (value === "LLM") return "purple";
  if (value === "TRANSFER_IN") return "green";
  if (value === "TRANSFER_OUT") return "orange";
  return "default";
}

function getChargeTriggerLabel(value?: string) {
  if (value === "RESUMMARY") return "重新总结";
  if (value === "AUTO_SUMMARY") return "自动总结";
  return "-";
}

function formatDateTime(value?: string) {
  return value ? value.replace("T", " ").substring(0, 19) : "-";
}

export default function MeetingPointsManagement() {
  const [overview, setOverview] = useState<MeetingPointsOverviewVO | null>(null);
  const [loading, setLoading] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);
  const [transferLoading, setTransferLoading] = useState(false);
  const [records, setRecords] = useState<MeetingPointsLedgerListItemVO[]>([]);
  const [total, setTotal] = useState(0);
  const [detailOpen, setDetailOpen] = useState(false);
  const [transferOpen, setTransferOpen] = useState(false);
  const [detail, setDetail] = useState<MeetingPointsLedgerDetailVO | null>(null);
  const [users, setUsers] = useState<SysUser[]>([]);
  const [params, setParams] = useState({
    current: 1,
    size: 20,
    username: "",
    pointsType: "",
  });
  const [transferForm] = Form.useForm();

  const loadOverview = async () => {
    const data = await getMeetingPointsOverview();
    setOverview(data);
  };

  const loadUsers = async () => {
    const data = await listUsers();
    setUsers(data || []);
  };

  const loadPage = async (nextParams = params) => {
    setLoading(true);
    try {
      const result = await getMeetingPointsLedgerPage(nextParams);
      setRecords(result.records || []);
      setTotal(result.total || 0);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void Promise.all([loadOverview(), loadPage(), loadUsers()]);
  }, []);

  const handleSearch = () => {
    const nextParams = { ...params, current: 1 };
    setParams(nextParams);
    void loadPage(nextParams);
  };

  const handleReset = () => {
    const nextParams = {
      current: 1,
      size: 20,
      username: "",
      pointsType: "",
    };
    setParams(nextParams);
    void loadPage(nextParams);
  };

  const handleRefresh = async () => {
    await Promise.all([loadOverview(), loadPage(), loadUsers()]);
    message.success("已刷新积分数据");
  };

  const handleOpenDetail = async (ledgerId: number) => {
    setDetailLoading(true);
    setDetailOpen(true);
    try {
      const data = await getMeetingPointsLedgerDetail(ledgerId);
      setDetail(data);
    } finally {
      setDetailLoading(false);
    }
  };

  const handleTransferSubmit = async () => {
    const values = await transferForm.validateFields();
    setTransferLoading(true);
    try {
      await transferMeetingPoints(values);
      message.success("积分分配成功");
      setTransferOpen(false);
      transferForm.resetFields();
      await Promise.all([loadOverview(), loadPage()]);
    } finally {
      setTransferLoading(false);
    }
  };

  const columns = useMemo(
    () => [
      {
        title: "用户",
        dataIndex: "ownerUserName",
        key: "ownerUserName",
        width: 140,
        render: (value: string) => <Text strong>{value || "-"}</Text>,
      },
      {
        title: "扣费账户",
        dataIndex: "chargeAccountType",
        key: "chargeAccountType",
        width: 120,
        render: (value: string) => <Tag>{getAccountTypeLabel(value)}</Tag>,
      },
      {
        title: "消耗类型",
        dataIndex: "pointsType",
        key: "pointsType",
        width: 100,
        render: (value: string) => <Tag color={getPointsTypeColor(value)}>{getPointsTypeLabel(value)}</Tag>,
      },
      {
        title: "消耗积分",
        dataIndex: "consumedPoints",
        key: "consumedPoints",
        width: 110,
        render: (value: number) => <Text>{value ?? 0}</Text>,
      },
      {
        title: "会议标题",
        dataIndex: "meetingTitle",
        key: "meetingTitle",
        ellipsis: true,
        render: (value: string) => <Text>{value || "-"}</Text>,
      },
      {
        title: "触发类型",
        dataIndex: "chargeTriggerType",
        key: "chargeTriggerType",
        width: 130,
        render: (value: string) => <Tag>{getChargeTriggerLabel(value)}</Tag>,
      },
      {
        title: "消耗时间",
        dataIndex: "createdAt",
        key: "createdAt",
        width: 180,
        render: (value: string) => <Text>{formatDateTime(value)}</Text>,
      },
      {
        title: "操作",
        key: "action",
        width: 88,
        fixed: "right" as const,
        render: (_: unknown, record: MeetingPointsLedgerListItemVO) => (
          <Button type="text" size="small" icon={<EyeOutlined />} onClick={() => void handleOpenDetail(record.id)}>
            详情
          </Button>
        ),
      },
    ],
    [],
  );

  const chargeItemColumns = useMemo(
    () => [
      {
        title: "阶段",
        dataIndex: "chargeStage",
        key: "chargeStage",
        render: (value: string) => <Tag color={getPointsTypeColor(value)}>{getPointsTypeLabel(value)}</Tag>,
      },
      {
        title: "扣费账户",
        dataIndex: "accountType",
        key: "accountType",
        render: (value: string) => getAccountTypeLabel(value),
      },
      {
        title: "账户用户ID",
        dataIndex: "accountUserId",
        key: "accountUserId",
      },
      {
        title: "扣费积分",
        dataIndex: "chargedPoints",
        key: "chargedPoints",
      },
      {
        title: "扣费前余额",
        dataIndex: "balanceBefore",
        key: "balanceBefore",
      },
      {
        title: "扣费后余额",
        dataIndex: "balanceAfter",
        key: "balanceAfter",
      },
    ],
    [],
  );

  return (
    <PageContainer
      title="积分管理"
      subtitle="查看公共账户、个人账户和总结扣费流水"
      headerExtra={
        <Space>
          <Tag color="processing">当前模式：{getAccountModeLabel(overview?.accountMode)}</Tag>
          <Tag color="blue">优先级：{getChargePriorityLabel(overview?.chargePriority)}</Tag>
          <Button icon={<PlusOutlined />} onClick={() => setTransferOpen(true)}>
            分配积分
          </Button>
          <Button icon={<ReloadOutlined />} onClick={() => void handleRefresh()}>
            刷新
          </Button>
        </Space>
      }
      toolbar={
        <Space wrap size="middle">
          <Input
            placeholder="按用户名搜索"
            value={params.username}
            onChange={(event) => setParams((prev) => ({ ...prev, username: event.target.value }))}
            style={{ width: 220 }}
            prefix={<SearchOutlined className="text-gray-400" />}
            allowClear
          />
          <Select
            style={{ width: 140 }}
            value={params.pointsType}
            onChange={(value) => setParams((prev) => ({ ...prev, pointsType: value }))}
            options={POINTS_TYPE_OPTIONS}
          />
          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
            查询
          </Button>
          <Button onClick={handleReset}>重置</Button>
        </Space>
      }
    >
      <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
        <Col xs={24} md={6}>
          <Card>
            <Statistic title="当前模式可用总积分" value={overview?.totalAvailableBalance ?? 0} />
          </Card>
        </Col>
        <Col xs={24} md={6}>
          <Card>
            <Statistic title="公共账户余额" value={overview?.publicBalance ?? 0} />
          </Card>
        </Col>
        <Col xs={24} md={6}>
          <Card>
            <Statistic title="个人账户余额汇总" value={overview?.personalBalance ?? 0} />
          </Card>
        </Col>
        <Col xs={24} md={6}>
          <Card>
            <Statistic title="累计消耗次数" value={overview?.totalChargeCount ?? 0} />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
        <Col xs={24} md={12}>
          <Card>
            <Statistic title="公共账户累计消耗积分" value={overview?.publicTotalPointsUsed ?? 0} />
          </Card>
        </Col>
        <Col xs={24} md={12}>
          <Card>
            <Statistic title="个人账户累计消耗积分汇总" value={overview?.personalTotalPointsUsed ?? 0} />
          </Card>
        </Col>
      </Row>

      <Card
        className="app-page__content-card"
        style={{ flex: 1, minHeight: 0 }}
        styles={{ body: { padding: 0, display: "flex", flexDirection: "column", minHeight: 0 } }}
      >
        <div className="app-page__table-wrap" style={{ flex: 1, minHeight: 0, overflow: "auto", padding: "0 24px" }}>
          <ListTable
            rowKey="id"
            columns={columns as never}
            dataSource={records}
            loading={loading}
            totalCount={total}
            scroll={{ y: "calc(100vh - 470px)", x: 1200 }}
            pagination={false}
          />
        </div>
        <AppPagination
          current={params.current}
          pageSize={params.size}
          total={total}
          onChange={(page, pageSize) => {
            const nextParams = { ...params, current: page, size: pageSize };
            setParams(nextParams);
            void loadPage(nextParams);
          }}
        />
      </Card>

      <Modal
        title="积分流水详情"
        open={detailOpen}
        onCancel={() => {
          setDetailOpen(false);
          setDetail(null);
        }}
        footer={[
          <Button
            key="close"
            onClick={() => {
              setDetailOpen(false);
              setDetail(null);
            }}
          >
            关闭
          </Button>,
        ]}
        width={900}
        confirmLoading={detailLoading}
      >
        {detail && (
          <Space direction="vertical" size="middle" style={{ width: "100%" }}>
            <Descriptions bordered column={2} size="small">
              <Descriptions.Item label="用户">{detail.ownerUserName || "-"}</Descriptions.Item>
              <Descriptions.Item label="当前流水账户">{getAccountTypeLabel(detail.chargeAccountType)}</Descriptions.Item>
              <Descriptions.Item label="消耗类型">{getPointsTypeLabel(detail.pointsType)}</Descriptions.Item>
              <Descriptions.Item label="消耗积分">{detail.consumedPoints ?? 0}</Descriptions.Item>
              <Descriptions.Item label="消耗时间">{formatDateTime(detail.createdAt)}</Descriptions.Item>
              <Descriptions.Item label="会议标题">{detail.meetingTitle || "-"}</Descriptions.Item>
              <Descriptions.Item label="触发类型">{getChargeTriggerLabel(detail.chargeTriggerType)}</Descriptions.Item>
              <Descriptions.Item label="录音时长（秒）">{detail.audioDurationSeconds ?? "-"}</Descriptions.Item>
              <Descriptions.Item label="计费分钟数">{detail.chargedMinutes ?? "-"}</Descriptions.Item>
              <Descriptions.Item label="应计总积分">{detail.totalPoints ?? 0}</Descriptions.Item>
              <Descriptions.Item label="已扣总积分">{detail.chargedTotalPoints ?? 0}</Descriptions.Item>
              <Descriptions.Item label="扣费前余额">{detail.balanceBefore ?? "-"}</Descriptions.Item>
              <Descriptions.Item label="扣费后余额">{detail.balanceAfter ?? "-"}</Descriptions.Item>
            </Descriptions>

            <Card title="本次总结扣费明细" size="small">
              <Table<MeetingPointsChargeItemVO>
                rowKey="id"
                size="small"
                pagination={false}
                columns={chargeItemColumns as never}
                dataSource={detail.chargeItems || []}
              />
            </Card>
          </Space>
        )}
      </Modal>

      <Modal
        title="从公共账户分配积分"
        open={transferOpen}
        onCancel={() => {
          setTransferOpen(false);
          transferForm.resetFields();
        }}
        onOk={() => void handleTransferSubmit()}
        confirmLoading={transferLoading}
      >
        <Form form={transferForm} layout="vertical">
          <Form.Item name="targetUserId" label="目标用户" rules={[{ required: true, message: "请选择目标用户" }]}>
            <Select
              showSearch
              optionFilterProp="label"
              placeholder="请选择用户"
              options={users
                .filter((user) => user.userId && user.userId > 0)
                .map((user) => ({
                  label: `${user.displayName || user.username} (#${user.userId})`,
                  value: user.userId,
                }))}
            />
          </Form.Item>
          <Form.Item name="points" label="分配积分" rules={[{ required: true, message: "请输入分配积分" }]}>
            <InputNumber min={1} precision={0} style={{ width: "100%" }} placeholder="请输入正整数积分" />
          </Form.Item>
          <Form.Item name="remark" label="备注">
            <Input placeholder="可选，默认记为管理员从公共账户分配积分" maxLength={200} />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
}