imetting/frontend/src/pages/ClientManagement.jsx

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
  Table,
  Button,
  Input,
  Space,
  Drawer,
  Form,
  Select,
  App,
  Tooltip,
  Switch,
  InputNumber,
  Badge,
  Typography,
  Upload,
  Tabs,
  Tag,
  Row,
  Col,
} from 'antd';
import {
  PlusOutlined,
  DownloadOutlined,
  DeleteOutlined,
  EditOutlined,
  SearchOutlined,
  MobileOutlined,
  DesktopOutlined,
  PartitionOutlined,
  UploadOutlined,
  InfoCircleOutlined,
  ReloadOutlined,
  CloudUploadOutlined,
  CheckCircleOutlined,
  RocketOutlined,
  SaveOutlined,
} from '@ant-design/icons';
import httpService from '../services/httpService';
import { buildApiUrl, API_ENDPOINTS } from '../config/api';
import AdminModuleShell from '../components/AdminModuleShell';
import ActionButton from '../components/ActionButton';
import useSystemPageSize from '../hooks/useSystemPageSize';

const { Text } = Typography;
const { TextArea } = Input;

const CLIENT_TABS = [
  { key: 'all', label: '全部' },
  { key: 'mobile', label: <Space><MobileOutlined />移动端</Space> },
  { key: 'desktop', label: <Space><DesktopOutlined />桌面端</Space> },
  { key: 'terminal', label: <Space><PartitionOutlined />专用终端</Space> },
];

const STATUS_OPTIONS = [
  { label: '全部状态', value: 'all' },
  { label: '已启用', value: 'active' },
  { label: '已停用', value: 'inactive' },
  { label: '最新版本', value: 'latest' },
];

const isTruthy = (value) => value === true || value === 1 || value === '1';

const ClientManagement = () => {
  const { message, modal } = App.useApp();
  const [form] = Form.useForm();

  const [clients, setClients] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showDrawer, setShowDrawer] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [selectedClient, setSelectedClient] = useState(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [activeTab, setActiveTab] = useState('all');
  const [uploadingFile, setUploadingFile] = useState(false);
  const [updatingStatusId, setUpdatingStatusId] = useState(null);
  const pageSize = useSystemPageSize(10);

  const [platforms, setPlatforms] = useState({ tree: [], items: [] });
  const [platformsMap, setPlatformsMap] = useState({});

  const fetchPlatforms = useCallback(async () => {
    try {
      const response = await httpService.get(buildApiUrl(API_ENDPOINTS.DICT_DATA.BY_TYPE('client_platform')));
      if (response.code === '200') {
        const { tree = [], items = [] } = response.data || {};
        setPlatforms({ tree, items });

        const nextMap = {};
        items.forEach((item) => {
          nextMap[item.dict_code] = item;
        });
        setPlatformsMap(nextMap);
      }
    } catch {
      message.error('获取平台列表失败');
    }
  }, [message]);

  const fetchClients = useCallback(async () => {
    setLoading(true);
    try {
      const response = await httpService.get(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.LIST));
      if (response.code === '200') {
        setClients(response.data.clients || []);
      }
    } catch {
      message.error('获取客户端列表失败');
    } finally {
      setLoading(false);
    }
  }, [message]);

  const getPlatformLabel = useCallback(
    (platformCode) => platformsMap[platformCode]?.label_cn || platformCode || '-',
    [platformsMap],
  );

  useEffect(() => {
    fetchPlatforms();
    fetchClients();
  }, [fetchClients, fetchPlatforms]);

  const openModal = (client = null) => {
    if (client) {
      setIsEditing(true);
      setSelectedClient(client);
      form.setFieldsValue({
        ...client,
        version_code: client.version_code,
        file_size: client.file_size,
        is_active: isTruthy(client.is_active),
        is_latest: isTruthy(client.is_latest),
      });
    } else {
      setIsEditing(false);
      setSelectedClient(null);
      form.resetFields();
      form.setFieldsValue({
        is_active: true,
        is_latest: false,
      });
    }
    setShowDrawer(true);
  };

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      const platformInfo = platformsMap[values.platform_code];
      const parentCode = platformInfo?.parent_code;

      let platformType = 'desktop';
      if (parentCode === 'MOBILE') {
        platformType = 'mobile';
      } else if (parentCode === 'TERMINAL') {
        platformType = 'terminal';
      }

      const payload = {
        ...values,
        platform_type: platformType,
        platform_name: String(values.platform_code || '').toLowerCase(),
      };

      if (isEditing) {
        await httpService.put(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.UPDATE(selectedClient.id)), payload);
        message.success('版本更新成功');
      } else {
        await httpService.post(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.CREATE), payload);
        message.success('版本创建成功');
      }

      setShowDrawer(false);
      fetchClients();
    } catch (error) {
      if (!error?.errorFields) {
        message.error('保存失败');
      }
    }
  };

  const handleDelete = (item) => {
    modal.confirm({
      title: '删除客户端版本',
      content: `确定要删除 ${getPlatformLabel(item.platform_code)} ${item.version} 吗？`,
      okText: '确定',
      okType: 'danger',
      onOk: async () => {
        try {
          await httpService.delete(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.DELETE(item.id)));
          message.success('删除成功');
          fetchClients();
        } catch {
          message.error('删除失败');
        }
      },
    });
  };

  const handleToggleActive = async (item, checked) => {
    setUpdatingStatusId(item.id);
    try {
      await httpService.put(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.UPDATE(item.id)), {
        is_active: checked,
      });
      setClients((prev) => prev.map((client) => (
        client.id === item.id ? { ...client, is_active: checked } : client
      )));
      message.success(`已${checked ? '启用' : '停用'}版本`);
    } catch {
      message.error('状态更新失败');
    } finally {
      setUpdatingStatusId(null);
    }
  };

  const handleFileUpload = async (options) => {
    const { file, onSuccess, onError } = options;
    const platformCode = form.getFieldValue('platform_code');

    if (!platformCode) {
      message.warning('请先选择发布平台');
      onError(new Error('No platform selected'));
      return;
    }

    setUploadingFile(true);
    const uploadFormData = new FormData();
    uploadFormData.append('file', file);
    uploadFormData.append('platform_code', platformCode);

    try {
      const response = await httpService.post(
        buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.UPLOAD),
        uploadFormData,
        { headers: { 'Content-Type': 'multipart/form-data' } },
      );

      if (response.code === '200') {
        const {
          file_size: fileSize,
          download_url: downloadUrl,
          version_code: versionCode,
          version_name: versionName,
        } = response.data;

        form.setFieldsValue({
          file_size: fileSize,
          download_url: downloadUrl,
          version_code: versionCode,
          version: versionName,
        });

        message.success('安装包上传成功，已自动填充版本信息');
        onSuccess(response.data);
      }
    } catch (error) {
      message.error('文件上传失败');
      onError(error);
    } finally {
      setUploadingFile(false);
    }
  };

  const formatFileSize = (bytes) => {
    if (!bytes) return '-';
    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
  };

  const filteredClients = useMemo(() => clients.filter((client) => {
    if (activeTab !== 'all' && client.platform_type !== activeTab) {
      return false;
    }

    const enabled = isTruthy(client.is_active);
    const latest = isTruthy(client.is_latest);

    if (statusFilter === 'active' && !enabled) {
      return false;
    }
    if (statusFilter === 'inactive' && enabled) {
      return false;
    }
    if (statusFilter === 'latest' && !latest) {
      return false;
    }

    if (!searchQuery) {
      return true;
    }

    const query = searchQuery.toLowerCase();
    return [
      client.version,
      client.platform_code,
      getPlatformLabel(client.platform_code),
      client.min_system_version,
      client.download_url,
      client.release_notes,
    ].some((field) => String(field || '').toLowerCase().includes(query));
  }), [activeTab, clients, getPlatformLabel, searchQuery, statusFilter]);

  const publishedCount = clients.length;
  const activeCount = clients.filter((item) => isTruthy(item.is_active)).length;
  const latestCount = clients.filter((item) => isTruthy(item.is_latest)).length;
  const terminalCount = clients.filter((item) => item.platform_type === 'terminal').length;

  const columns = [
    {
      title: '平台',
      dataIndex: 'platform_code',
      key: 'platform_code',
      width: 140,
      render: (code) => <Tag color="blue">{getPlatformLabel(code)}</Tag>,
    },
    {
      title: '版本信息',
      key: 'version',
      width: 200,
      render: (_, record) => (
        <Space direction="vertical" size={0}>
          <Text strong>{record.version}</Text>
          <Text type="secondary">版本码：{record.version_code}</Text>
        </Space>
      ),
    },
    {
      title: '安装包信息',
      key: 'package',
      width: 220,
      render: (_, record) => (
        <Space direction="vertical" size={0}>
          <Text type="secondary">大小：{formatFileSize(record.file_size)}</Text>
          <Text type="secondary" ellipsis style={{ maxWidth: 200 }}>
            系统要求：{record.min_system_version || '-'}
          </Text>
        </Space>
      ),
    },
    {
      title: '发布状态',
      key: 'status',
      width: 140,
      render: (_, record) => (
        <Space direction="vertical" size={4}>
          <Switch
            size="small"
            checked={isTruthy(record.is_active)}
            loading={updatingStatusId === record.id}
            onChange={(checked) => handleToggleActive(record, checked)}
          />
          {isTruthy(record.is_latest) ? <Badge status="success" text="最新版本" /> : <Badge status="default" text="历史版本" />}
        </Space>
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'updated_at',
      key: 'updated_at',
      width: 180,
      render: (value) => (value ? new Date(value).toLocaleString() : '-'),
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 140,
      render: (_, record) => (
        <Space size={6}>
          <ActionButton tone="edit" variant="iconSm" tooltip="编辑" icon={<EditOutlined />} onClick={() => openModal(record)} />
          <ActionButton tone="view" variant="iconSm" tooltip="下载" icon={<DownloadOutlined />} href={record.download_url} target="_blank" />
          <ActionButton tone="delete" variant="iconSm" tooltip="删除" icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
        </Space>
      ),
    },
  ];

  return (
    <div className="client-management">
      <AdminModuleShell
        icon={<DesktopOutlined style={{ fontSize: 18, color: '#1d4ed8' }} />}
        title="客户端管理"
        subtitle="统一维护移动端、桌面端与专用终端的版本发布、安装包上传、启停控制与最新版本标记。"
        rightActions={(
          <Space>
            <Button icon={<ReloadOutlined />} className="btn-soft-blue" onClick={fetchClients} loading={loading}>刷新</Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={() => openModal()}>新增发布</Button>
          </Space>
        )}
        stats={[
          {
            label: '发布总数',
            value: publishedCount,
            icon: <CloudUploadOutlined />,
            tone: 'blue',
            desc: '当前系统登记的全部客户端版本',
          },
          {
            label: '启用版本',
            value: activeCount,
            icon: <CheckCircleOutlined />,
            tone: 'green',
            desc: '对外可见、允许分发的版本数量',
          },
          {
            label: '最新版本',
            value: latestCount,
            icon: <RocketOutlined />,
            tone: 'violet',
            desc: '被标记为最新的各平台主推版本',
          },
          {
            label: '终端发布',
            value: terminalCount,
            icon: <PartitionOutlined />,
            tone: 'amber',
            desc: '面向专用终端设备的独立发布包数量',
          },
        ]}
        toolbar={(
          <Space wrap>
            <Input
              placeholder="搜索平台、版本、系统要求或下载地址..."
              prefix={<SearchOutlined />}
              value={searchQuery}
              onChange={(event) => setSearchQuery(event.target.value)}
              style={{ width: 300 }}
              allowClear
            />
            <Select
              value={statusFilter}
              onChange={setStatusFilter}
              options={STATUS_OPTIONS}
              style={{ width: 150 }}
            />
          </Space>
        )}
      >
        <Tabs
          className="console-tabs"
          activeKey={activeTab}
          onChange={setActiveTab}
          items={CLIENT_TABS.map((tab) => ({ ...tab, children: null }))}
        />

        <div className="console-table">
          <Table
            columns={columns}
            dataSource={filteredClients}
            loading={loading}
            rowKey="id"
            size="small"
            scroll={{ x: 1040 }}
            pagination={{ pageSize, showTotal: (total) => `共 ${total} 条记录` }}
          />
        </div>
      </AdminModuleShell>

      <Drawer
        open={showDrawer}
        title={isEditing ? '编辑客户端版本' : '发布新版本'}
        placement="right"
        width={760}
        onClose={() => setShowDrawer(false)}
        destroyOnClose
        extra={(
          <Space>
            <Button type="primary" icon={<SaveOutlined />} onClick={handleSave}>
              {isEditing ? '保存修改' : '发布版本'}
            </Button>
          </Space>
        )}
      >
        <Form form={form} layout="vertical" style={{ marginTop: 20 }}>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="platform_code" label="发布平台" rules={[{ required: true, message: '请选择发布平台' }]}>
                <Select placeholder="选择平台" disabled={isEditing}>
                  {platforms.tree.map((parentNode) => (
                    <Select.OptGroup key={parentNode.dict_code} label={parentNode.label_cn}>
                      {parentNode.children?.map((childNode) => (
                        <Select.Option key={childNode.dict_code} value={childNode.dict_code}>
                          {childNode.label_cn}
                        </Select.Option>
                      ))}
                    </Select.OptGroup>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="安装包上传">
                <Upload customRequest={handleFileUpload} showUploadList={false} disabled={uploadingFile}>
                  <Button icon={<UploadOutlined />} loading={uploadingFile} style={{ width: '100%' }}>
                    {uploadingFile ? '上传中...' : '点击上传安装包'}
                  </Button>
                </Upload>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="version" label="版本号" rules={[{ required: true, message: '请输入版本号' }]}>
                <Input placeholder="例如 1.0.0" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="version_code" label="版本代码" rules={[{ required: true, message: '请输入版本代码' }]}>
                <InputNumber style={{ width: '100%' }} min={0} placeholder="例如 100" />
              </Form.Item>
            </Col>
          </Row>

          <Form.Item name="download_url" label="下载链接" rules={[{ required: true, message: '请输入下载链接' }]}>
            <Input placeholder="https://..." />
          </Form.Item>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="file_size" label="文件大小（Bytes）">
                <InputNumber style={{ width: '100%' }} min={0} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="min_system_version" label="最低系统要求">
                <Input placeholder="例如 Android 8.0 / macOS 11" />
              </Form.Item>
            </Col>
          </Row>

          <Form.Item name="release_notes" label="更新说明">
            <TextArea rows={4} placeholder="请输入本次版本更新内容..." />
          </Form.Item>

          <Space size="large">
            <Form.Item name="is_active" label="立即启用" valuePropName="checked">
              <Switch />
            </Form.Item>
            <Form.Item name="is_latest" label="设为最新版本" valuePropName="checked">
              <Switch />
            </Form.Item>
          </Space>

          <div style={{ backgroundColor: '#fffbe6', padding: '8px 12px', borderRadius: 8, marginTop: 8 }}>
            <Space align="start">
              <InfoCircleOutlined style={{ color: '#faad14', marginTop: 2 }} />
              <Text type="secondary">
                上传 APK 会自动提取版本信息；设为“最新版本”后，同平台其他版本会自动取消最新标记。
              </Text>
            </Space>
          </div>
        </Form>
      </Drawer>
    </div>
  );
};

export default ClientManagement;