fund-tracer/frontend/src/pages/transactions/Transactions.tsx

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import {
  Card,
  Table,
  Tag,
  Typography,
  Space,
  Select,
  Tooltip,
  Badge,
  Drawer,
  Descriptions,
  Button,
  Alert,
  Row,
  Col,
  Statistic,
  Input,
  InputNumber,
  Dropdown,
} from 'antd';
import {
  SwapOutlined,
  WarningOutlined,
  LinkOutlined,
  EyeOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { TransactionRecord, SourceApp } from '../../types';
import { fetchImageDetail, fetchTransactions } from '../../services/api';

const appTag: Record<SourceApp, { label: string; color: string }> = {
  wechat: { label: '微信', color: 'green' },
  alipay: { label: '支付宝', color: 'blue' },
  bank: { label: '银行', color: 'purple' },
  digital_wallet: { label: '数字钱包', color: 'orange' },
  other: { label: '其他', color: 'default' },
};

const splitDateTime = (raw: string): { date: string; time: string } => {
  if (!raw) return { date: '-', time: '-' };
  const normalized = raw.trim().replace(' ', 'T');
  if (!normalized.includes('T')) return { date: normalized, time: '-' };
  const [datePart, timePartRaw = ''] = normalized.split('T');
  const cleanedTime = timePartRaw.replace('Z', '').split('.')[0] || '-';
  return { date: datePart || '-', time: cleanedTime };
};

const Transactions: React.FC = () => {
  const { id = '1' } = useParams();
  const [filterDuplicate, setFilterDuplicate] = useState<string>('all');
  const [detail, setDetail] = useState<TransactionRecord | null>(null);
  const [editableDetail, setEditableDetail] = useState<TransactionRecord | null>(null);
  const [markOverrides, setMarkOverrides] = useState<Record<string, 'duplicate' | 'transit' | 'valid'>>({});

  const { data: txData } = useQuery({
    queryKey: ['transactions', id],
    queryFn: () => fetchTransactions(id),
  });
  const allTransactions = txData?.items ?? [];
  const { data: detailImage, isFetching: detailImageFetching } = useQuery({
    queryKey: ['image-detail', detail?.evidenceImageId],
    queryFn: () => fetchImageDetail(detail!.evidenceImageId),
    enabled: !!detail?.evidenceImageId,
  });

  useEffect(() => {
    setEditableDetail(detail ? { ...detail } : null);
  }, [detail]);

  const getEffectiveMark = (tx: TransactionRecord): 'duplicate' | 'transit' | 'valid' => {
    if (markOverrides[tx.id]) return markOverrides[tx.id];
    if (tx.isDuplicate) return 'duplicate';
    if (tx.isTransit) return 'transit';
    return 'valid';
  };

  const data =
    filterDuplicate === 'all'
      ? allTransactions
      : filterDuplicate === 'unique'
      ? allTransactions.filter((t) => getEffectiveMark(t) !== 'duplicate')
      : allTransactions.filter((t) => getEffectiveMark(t) === 'duplicate');

  const totalOut = allTransactions
    .filter((t) => t.direction === 'out' && getEffectiveMark(t) !== 'duplicate')
    .reduce((s, t) => s + t.amount, 0);
  const totalIn = allTransactions
    .filter((t) => t.direction === 'in' && getEffectiveMark(t) !== 'duplicate')
    .reduce((s, t) => s + t.amount, 0);
  const duplicateCount = allTransactions.filter((t) => getEffectiveMark(t) === 'duplicate').length;
  const transitCount = allTransactions.filter((t) => getEffectiveMark(t) === 'transit').length;

  const columns: ColumnsType<TransactionRecord> = [
    {
      title: '交易时间',
      dataIndex: 'tradeTime',
      width: 96,
      render: (raw: string) => {
        const { date, time } = splitDateTime(raw);
        return (
          <div style={{ lineHeight: 1.2 }}>
            <Typography.Text style={{ fontSize: 12 }}>{date}</Typography.Text>
            <br />
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
              {time}
            </Typography.Text>
          </div>
        );
      },
      sorter: (a, b) => a.tradeTime.localeCompare(b.tradeTime),
      defaultSortOrder: 'ascend',
    },
    {
      title: '来源',
      dataIndex: 'sourceApp',
      width: 80,
      render: (app: SourceApp) => (
        <Tag color={appTag[app].color}>{appTag[app].label}</Tag>
      ),
    },
    {
      title: '金额(元)',
      dataIndex: 'amount',
      width: 140,
      align: 'right',
      render: (v: number, r) => (
        <Typography.Text
          strong
          style={{ color: r.direction === 'out' ? '#cf1322' : '#389e0d' }}
        >
          {r.direction === 'out' ? '-' : '+'}¥{v.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
        </Typography.Text>
      ),
    },
    {
      title: '方向',
      dataIndex: 'direction',
      width: 70,
      align: 'center',
      render: (d: string) =>
        d === 'out' ? (
          <ArrowUpOutlined style={{ color: '#cf1322' }} />
        ) : (
          <ArrowDownOutlined style={{ color: '#389e0d' }} />
        ),
    },
    {
      title: '对方',
      dataIndex: 'counterpartyName',
      width: 120,
      ellipsis: true,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      width: 120,
      ellipsis: true,
    },
    {
      title: '标记',
      width: 73,
      render: (_, r) => (
        (() => {
          const mark = getEffectiveMark(r);
          const styleByMark: Record<'duplicate' | 'transit' | 'valid', { bg: string; border: string; color: string; label: string }> = {
            duplicate: { bg: '#fff2e8', border: '#ffbb96', color: '#cf1322', label: '重复' },
            transit: { bg: '#fff7e6', border: '#ffd591', color: '#d46b08', label: '中转' },
            valid: { bg: '#f6ffed', border: '#b7eb8f', color: '#389e0d', label: '有效' },
          };
          const cfg = styleByMark[mark];
          const options: Array<'duplicate' | 'transit' | 'valid'> = ['duplicate', 'transit', 'valid'];
          return (
            <Space.Compact size="small" style={{ width: '100%' }}>
              <Tooltip
                title={
                  mark === 'duplicate'
                    ? '该笔与其他记录订单号一致，判定为同一笔展示记录并已归并'
                    : mark === 'transit'
                    ? '该笔为本人账户间中转，不直接计入被骗金额'
                    : '该笔为有效交易'
                }
              >
                <Button
                  size="small"
                  style={{
                    flex: 1,
                    background: cfg.bg,
                    color: cfg.color,
                    border: `1px solid ${cfg.border}`,
                    borderRight: 'none',
                    borderRadius: '6px 0 0 6px',
                    fontWeight: 600,
                    cursor: 'default',
                  }}
                >
                  {cfg.label}
                </Button>
              </Tooltip>
              <Dropdown
                menu={{
                  items: options
                    .filter((v) => v !== mark)
                    .map((v) => ({
                      key: v,
                      label: v === 'duplicate' ? '重复' : v === 'transit' ? '中转' : '有效',
                    })),
                  onClick: ({ key }) =>
                    setMarkOverrides((prev) => ({ ...prev, [r.id]: key as 'duplicate' | 'transit' | 'valid' })),
                }}
                trigger={['click']}
              >
                <Button
                  size="small"
                  style={{
                    background: cfg.bg,
                    color: cfg.color,
                    border: `1px solid ${cfg.border}`,
                    borderLeft: 'none',
                    borderRadius: '0 6px 6px 0',
                    padding: '0 6px',
                  }}
                >
                  ▼
                </Button>
              </Dropdown>
            </Space.Compact>
          );
        })()
      ),
    },
    {
      title: '置信度',
      dataIndex: 'confidence',
      width: 80,
      align: 'center',
      render: (v: number) => (
        <Badge
          color={v >= 0.9 ? '#52c41a' : v >= 0.8 ? '#faad14' : '#ff4d4f'}
          text={`${(v * 100).toFixed(0)}%`}
        />
      ),
    },
    {
      title: '操作',
      width: 80,
      render: (_, r) => (
        <Button
          type="link"
          size="small"
          icon={<EyeOutlined />}
          onClick={() => setDetail(r)}
        >
          详情
        </Button>
      ),
    },
  ];

  return (
    <div>
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card variant="borderless">
            <Statistic
              title="总支出(去重后)"
              value={totalOut}
              precision={2}
              prefix="¥"
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card variant="borderless">
            <Statistic
              title="总收入(去重后)"
              value={totalIn}
              precision={2}
              prefix="¥"
              valueStyle={{ color: '#389e0d' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card variant="borderless">
            <Statistic
              title="重复记录"
              value={duplicateCount}
              suffix="笔"
              valueStyle={{ color: '#cf1322' }}
              prefix={<WarningOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card variant="borderless">
            <Statistic
              title="中转记录"
              value={transitCount}
              suffix="笔"
              valueStyle={{ color: '#fa8c16' }}
              prefix={<LinkOutlined />}
            />
          </Card>
        </Col>
      </Row>

      {duplicateCount > 0 && (
        <Alert
          message={`系统识别出 ${duplicateCount} 笔重复展示记录`}
          description={'当前仅对“订单号一致”的记录做归并。金额/时间高度相似但订单号不同的交易不会自动排除，将在认定复核中由民警进一步确认。'}
          type="info"
          showIcon
          closable
          style={{ marginBottom: 16 }}
        />
      )}

      <Card
        title={
          <Space>
            <SwapOutlined />
            <span>交易明细</span>
            <Tag>{allTransactions.length} 笔</Tag>
          </Space>
        }
        extra={
          <Select
            value={filterDuplicate}
            onChange={setFilterDuplicate}
            style={{ width: 160 }}
            options={[
              { label: '全部交易', value: 'all' },
              { label: '仅有效交易', value: 'unique' },
              { label: '仅重复交易', value: 'duplicate' },
            ]}
          />
        }
      >
        <Table
          rowKey="id"
          columns={columns}
          dataSource={data}
          scroll={{ x: 'max-content' }}
          pagination={false}
          rowClassName={(r) =>
            getEffectiveMark(r) === 'duplicate'
              ? 'row-duplicate'
              : getEffectiveMark(r) === 'transit'
              ? 'row-transit'
              : ''
          }
          size="middle"
        />
      </Card>

      <Drawer
        title="交易详情"
        placement="right"
        width={780}
        open={!!detail}
        onClose={() => setDetail(null)}
      >
        {detail && editableDetail && (
          <Row gutter={16} align="top">
            <Col span={10}>
              <Card size="small" loading={detailImageFetching}>
                <Typography.Text strong>金额来源截图</Typography.Text>
                <div
                  style={{
                    marginTop: 10,
                    height: 430,
                    background: '#fafafa',
                    border: '1px dashed #d9d9d9',
                    borderRadius: 6,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    overflow: 'hidden',
                  }}
                >
                  {detailImage?.url ? (
                    <img
                      src={detailImage.url}
                      alt="来源截图"
                      style={{ width: '100%', height: '100%', objectFit: 'contain' }}
                    />
                  ) : (
                    <Typography.Text type="secondary">暂无来源截图</Typography.Text>
                  )}
                </div>
              </Card>
            </Col>
            <Col span={14}>
              <Descriptions column={1} bordered size="small">
                <Descriptions.Item label="交易时间">
                  <Input
                    value={editableDetail.tradeTime ?? ''}
                    onChange={(e) =>
                      setEditableDetail((prev) => (prev ? { ...prev, tradeTime: e.target.value } : prev))
                    }
                  />
                </Descriptions.Item>
                <Descriptions.Item label="来源APP">
                  <Select
                    style={{ width: '100%' }}
                    value={editableDetail.sourceApp}
                    onChange={(val) =>
                      setEditableDetail((prev) => (prev ? { ...prev, sourceApp: val } : prev))
                    }
                    options={[
                      { label: '微信', value: 'wechat' },
                      { label: '支付宝', value: 'alipay' },
                      { label: '银行', value: 'bank' },
                      { label: '数字钱包', value: 'digital_wallet' },
                      { label: '其他', value: 'other' },
                    ]}
                  />
                </Descriptions.Item>
                <Descriptions.Item label="金额">
                  <InputNumber
                    style={{ width: '100%' }}
                    value={editableDetail.amount}
                    onChange={(val) =>
                      setEditableDetail((prev) => (prev ? { ...prev, amount: Number(val ?? 0) } : prev))
                    }
                  />
                </Descriptions.Item>
                <Descriptions.Item label="方向">
                  <Select
                    style={{ width: '100%' }}
                    value={editableDetail.direction}
                    onChange={(val) =>
                      setEditableDetail((prev) => (prev ? { ...prev, direction: val } : prev))
                    }
                    options={[
                      { label: '转入', value: 'in' },
                      { label: '转出', value: 'out' },
                    ]}
                  />
                </Descriptions.Item>
                <Descriptions.Item label="对方">
                  <Input
                    value={editableDetail.counterpartyName ?? ''}
                    onChange={(e) =>
                      setEditableDetail((prev) => (prev ? { ...prev, counterpartyName: e.target.value } : prev))
                    }
                  />
                </Descriptions.Item>
                <Descriptions.Item label="对方账号">
                  <Input
                    value={editableDetail.counterpartyAccount ?? ''}
                    onChange={(e) =>
                      setEditableDetail((prev) => (prev ? { ...prev, counterpartyAccount: e.target.value } : prev))
                    }
                  />
                </Descriptions.Item>
                <Descriptions.Item label="本方账户尾号">
                  <Input
                    value={editableDetail.selfAccountTailNo ?? ''}
                    onChange={(e) =>
                      setEditableDetail((prev) => (prev ? { ...prev, selfAccountTailNo: e.target.value } : prev))
                    }
                  />
                </Descriptions.Item>
                <Descriptions.Item label="订单号">
                  <Input
                    value={editableDetail.orderNo ?? ''}
                    onChange={(e) =>
                      setEditableDetail((prev) => (prev ? { ...prev, orderNo: e.target.value } : prev))
                    }
                  />
                </Descriptions.Item>
                <Descriptions.Item label="备注">
                  <Input.TextArea
                    rows={2}
                    value={editableDetail.remark ?? ''}
                    onChange={(e) =>
                      setEditableDetail((prev) => (prev ? { ...prev, remark: e.target.value } : prev))
                    }
                  />
                </Descriptions.Item>
                <Descriptions.Item label="置信度">
                  <InputNumber
                    style={{ width: '100%' }}
                    min={0}
                    max={1}
                    step={0.01}
                    value={editableDetail.confidence}
                    onChange={(val) =>
                      setEditableDetail((prev) => (prev ? { ...prev, confidence: Number(val ?? 0) } : prev))
                    }
                  />
                </Descriptions.Item>
                <Descriptions.Item label="归并簇">
                  <Input value={editableDetail.clusterId || ''} readOnly />
                </Descriptions.Item>
                <Descriptions.Item label="标记">
                  <Space>
                    {getEffectiveMark(detail) === 'duplicate' && <Tag color="red">重复</Tag>}
                    {getEffectiveMark(detail) === 'transit' && <Tag color="orange">中转</Tag>}
                    {getEffectiveMark(detail) === 'valid' && (
                      <Tag color="green">有效</Tag>
                    )}
                  </Space>
                </Descriptions.Item>
              </Descriptions>
            </Col>
          </Row>
        )}
      </Drawer>
    </div>
  );
};

export default Transactions;