imetting_frontend/src/pages/ClientManagement.jsx

import React, { useState, useEffect } from 'react';
import {
  Download,
  Plus,
  Edit,
  Trash2,
  Smartphone,
  Monitor,
  Apple,
  Search,
  X,
  ChevronDown,
  ChevronUp
} from 'lucide-react';
import apiClient from '../utils/apiClient';
import { buildApiUrl, API_ENDPOINTS } from '../config/api';
import ConfirmDialog from '../components/ConfirmDialog';
import Toast from '../components/Toast';
import './ClientManagement.css';

const ClientManagement = ({ user }) => {
  const [clients, setClients] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [deleteConfirmInfo, setDeleteConfirmInfo] = useState(null);
  const [selectedClient, setSelectedClient] = useState(null);
  const [filterPlatformType, setFilterPlatformType] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [expandedNotes, setExpandedNotes] = useState({});
  const [toasts, setToasts] = useState([]);

  const [formData, setFormData] = useState({
    platform_type: 'mobile',
    platform_name: 'ios',
    version: '',
    version_code: '',
    download_url: '',
    file_size: '',
    release_notes: '',
    is_active: true,
    is_latest: false,
    min_system_version: ''
  });

  const platformOptions = {
    mobile: [
      { value: 'ios', label: 'iOS', icon: <Apple size={16} /> },
      { value: 'android', label: 'Android', icon: <Smartphone size={16} /> }
    ],
    desktop: [
      { value: 'windows', label: 'Windows', icon: <Monitor size={16} /> },
      { value: 'mac_intel', label: 'Mac (Intel)', icon: <Apple size={16} /> },
      { value: 'mac_m', label: 'Mac (M系列)', icon: <Apple size={16} /> },
      { value: 'linux', label: 'Linux', icon: <Monitor size={16} /> }
    ]
  };

  // Toast helper functions
  const showToast = (message, type = 'info') => {
    const id = Date.now();
    setToasts(prev => [...prev, { id, message, type }]);
  };

  const removeToast = (id) => {
    setToasts(prev => prev.filter(toast => toast.id !== id));
  };

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

  const fetchClients = async () => {
    setLoading(true);
    try {
      const response = await apiClient.get(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.LIST));
      console.log('Client downloads response:', response);
      setClients(response.data.clients || []);
    } catch (error) {
      console.error('获取客户端列表失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleCreate = async () => {
    try {
      // 验证必填字段
      if (!formData.version_code || !formData.version || !formData.download_url) {
        showToast('请填写所有必填字段', 'warning');
        return;
      }

      const payload = {
        ...formData,
        version_code: parseInt(formData.version_code, 10),
        file_size: formData.file_size ? parseInt(formData.file_size, 10) : null
      };

      // 验证转换后的数字
      if (isNaN(payload.version_code)) {
        showToast('版本代码必须是有效的数字', 'warning');
        return;
      }

      if (formData.file_size && isNaN(payload.file_size)) {
        showToast('文件大小必须是有效的数字', 'warning');
        return;
      }

      await apiClient.post(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.CREATE), payload);
      setShowCreateModal(false);
      resetForm();
      fetchClients();
    } catch (error) {
      console.error('创建客户端失败:', error);
      showToast(error.response?.data?.message || '创建失败,请重试', 'error');
    }
  };

  const handleUpdate = async () => {
    try {
      // 验证必填字段
      if (!formData.version_code || !formData.version || !formData.download_url) {
        showToast('请填写所有必填字段', 'warning');
        return;
      }

      const payload = {
        version: formData.version,
        version_code: parseInt(formData.version_code, 10),
        download_url: formData.download_url,
        file_size: formData.file_size ? parseInt(formData.file_size, 10) : null,
        release_notes: formData.release_notes,
        is_active: formData.is_active,
        is_latest: formData.is_latest,
        min_system_version: formData.min_system_version
      };

      // 验证转换后的数字
      if (isNaN(payload.version_code)) {
        showToast('版本代码必须是有效的数字', 'warning');
        return;
      }

      if (formData.file_size && isNaN(payload.file_size)) {
        showToast('文件大小必须是有效的数字', 'warning');
        return;
      }

      await apiClient.put(
        buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.UPDATE(selectedClient.id)),
        payload
      );
      setShowEditModal(false);
      resetForm();
      fetchClients();
    } catch (error) {
      console.error('更新客户端失败:', error);
      showToast(error.response?.data?.message || '更新失败,请重试', 'error');
    }
  };

  const handleDelete = async () => {
    try {
      await apiClient.delete(buildApiUrl(API_ENDPOINTS.CLIENT_DOWNLOADS.DELETE(deleteConfirmInfo.id)));
      setDeleteConfirmInfo(null);
      setSelectedClient(null);
      showToast('删除成功', 'success');
      fetchClients();
    } catch (error) {
      console.error('删除客户端失败:', error);
      showToast('删除失败,请重试', 'error');
      setDeleteConfirmInfo(null);
    }
  };

  const openEditModal = (client) => {
    setSelectedClient(client);
    setFormData({
      platform_type: client.platform_type,
      platform_name: client.platform_name,
      version: client.version,
      version_code: String(client.version_code),
      download_url: client.download_url,
      file_size: client.file_size ? String(client.file_size) : '',
      release_notes: client.release_notes || '',
      is_active: client.is_active,
      is_latest: client.is_latest,
      min_system_version: client.min_system_version || ''
    });
    setShowEditModal(true);
  };

  const openDeleteModal = (client) => {
    setDeleteConfirmInfo({
      id: client.id,
      platform_name: getPlatformLabel(client.platform_name),
      version: client.version
    });
  };

  const resetForm = () => {
    setFormData({
      platform_type: 'mobile',
      platform_name: 'ios',
      version: '',
      version_code: '',
      download_url: '',
      file_size: '',
      release_notes: '',
      is_active: true,
      is_latest: false,
      min_system_version: ''
    });
    setSelectedClient(null);
  };

  const getPlatformLabel = (platformName) => {
    const allOptions = [...platformOptions.mobile, ...platformOptions.desktop];
    const option = allOptions.find(opt => opt.value === platformName);
    return option ? option.label : platformName;
  };

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

  const toggleNotes = (clientId) => {
    setExpandedNotes(prev => ({
      ...prev,
      [clientId]: !prev[clientId]
    }));
  };

  const filteredClients = clients.filter(client => {
    if (filterPlatformType && client.platform_type !== filterPlatformType) {
      return false;
    }
    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      return (
        client.version.toLowerCase().includes(query) ||
        getPlatformLabel(client.platform_name).toLowerCase().includes(query) ||
        (client.release_notes && client.release_notes.toLowerCase().includes(query))
      );
    }
    return true;
  });

  const groupedClients = {
    mobile: filteredClients.filter(c => c.platform_type === 'mobile'),
    desktop: filteredClients.filter(c => c.platform_type === 'desktop')
  };

  if (loading) {
    return <div className="client-management-loading">加载中...</div>;
  }

  return (
    <div className="client-management-page">
      <div className="client-management-header">
        <h1>客户端下载管理</h1>
        <button className="btn-create" onClick={() => setShowCreateModal(true)}>
          <Plus size={18} />
          <span>新增客户端</span>
        </button>
      </div>

      <div className="client-filters">
        <div className="search-box">
          <Search size={18} />
          <input
            type="text"
            placeholder="搜索版本号、平台或更新说明..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
          {searchQuery && (
            <button className="clear-search" onClick={() => setSearchQuery('')}>
              <X size={16} />
            </button>
          )}
        </div>

        <div className="platform-filters">
          <button
            className={`filter-btn ${filterPlatformType === '' ? 'active' : ''}`}
            onClick={() => setFilterPlatformType('')}
          >
            全部
          </button>
          <button
            className={`filter-btn ${filterPlatformType === 'mobile' ? 'active' : ''}`}
            onClick={() => setFilterPlatformType('mobile')}
          >
            <Smartphone size={16} />
            <span>移动端</span>
          </button>
          <button
            className={`filter-btn ${filterPlatformType === 'desktop' ? 'active' : ''}`}
            onClick={() => setFilterPlatformType('desktop')}
          >
            <Monitor size={16} />
            <span>桌面端</span>
          </button>
        </div>
      </div>

      <div className="clients-sections">
        {['mobile', 'desktop'].map(type => {
          const typeClients = groupedClients[type];
          if (typeClients.length === 0 && filterPlatformType && filterPlatformType !== type) {
            return null;
          }

          return (
            <div key={type} className="client-section">
              <h2 className="section-title">
                {type === 'mobile' ? <Smartphone size={20} /> : <Monitor size={20} />}
                <span>{type === 'mobile' ? '移动端' : '桌面端'}</span>
                <span className="count">({typeClients.length})</span>
              </h2>

              {typeClients.length === 0 ? (
                <div className="empty-state">暂无客户端</div>
              ) : (
                <div className="clients-grid">
                  {typeClients.map(client => (
                    <div key={client.id} className={`client-card ${!client.is_active ? 'inactive' : ''}`}>
                      <div className="card-header">
                        <div className="platform-info">
                          <h3>{getPlatformLabel(client.platform_name)}</h3>
                          {client.is_latest && <span className="badge-latest">最新</span>}
                          {!client.is_active && <span className="badge-inactive">未启用</span>}
                        </div>
                        <div className="card-actions">
                          <button
                            className="btn-icon btn-edit"
                            onClick={() => openEditModal(client)}
                            title="编辑"
                          >
                            <Edit size={16} />
                          </button>
                          <button
                            className="btn-icon btn-delete"
                            onClick={() => openDeleteModal(client)}
                            title="删除"
                          >
                            <Trash2 size={16} />
                          </button>
                        </div>
                      </div>

                      <div className="card-body">
                        <div className="info-row">
                          <span className="label">版本:</span>
                          <span className="value">{client.version}</span>
                        </div>
                        <div className="info-row">
                          <span className="label">版本代码:</span>
                          <span className="value">{client.version_code}</span>
                        </div>
                        <div className="info-row">
                          <span className="label">文件大小:</span>
                          <span className="value">{formatFileSize(client.file_size)}</span>
                        </div>
                        {client.min_system_version && (
                          <div className="info-row">
                            <span className="label">系统要求:</span>
                            <span className="value">{client.min_system_version}</span>
                          </div>
                        )}
                        {client.release_notes && (
                          <div className="release-notes">
                            <div
                              className="notes-header"
                              onClick={() => toggleNotes(client.id)}
                              style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
                            >
                              <span className="label">更新说明</span>
                              {expandedNotes[client.id] ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                            </div>
                            {expandedNotes[client.id] && (
                              <p>{client.release_notes}</p>
                            )}
                          </div>
                        )}
                        <div className="download-link">
                          <a href={client.download_url} target="_blank" rel="noopener noreferrer">
                            <Download size={14} />
                            <span>查看下载链接</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* 创建/编辑模态框 */}
      {(showCreateModal || showEditModal) && (
        <div className="modal-overlay" onClick={() => {
          setShowCreateModal(false);
          setShowEditModal(false);
          resetForm();
        }}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <div className="modal-header">
              <h2>{showEditModal ? '编辑客户端' : '新增客户端'}</h2>
              <button
                className="close-btn"
                onClick={() => {
                  setShowCreateModal(false);
                  setShowEditModal(false);
                  resetForm();
                }}
              >
                ×
              </button>
            </div>

            <div className="modal-body">
              <div className="form-row">
                <div className="form-group">
                  <label>平台类型 *</label>
                  <select
                    value={formData.platform_type}
                    onChange={(e) => {
                      const newType = e.target.value;
                      setFormData({
                        ...formData,
                        platform_type: newType,
                        platform_name: platformOptions[newType][0].value
                      });
                    }}
                    disabled={showEditModal}
                  >
                    <option value="mobile">移动端</option>
                    <option value="desktop">桌面端</option>
                  </select>
                </div>

                <div className="form-group">
                  <label>具体平台 *</label>
                  <select
                    value={formData.platform_name}
                    onChange={(e) => setFormData({ ...formData, platform_name: e.target.value })}
                    disabled={showEditModal}
                  >
                    {platformOptions[formData.platform_type].map(option => (
                      <option key={option.value} value={option.value}>
                        {option.label}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              <div className="form-row">
                <div className="form-group">
                  <label>版本号 *</label>
                  <input
                    type="text"
                    placeholder="例如: 1.0.0"
                    value={formData.version}
                    onChange={(e) => setFormData({ ...formData, version: e.target.value })}
                  />
                </div>

                <div className="form-group">
                  <label>版本代码 *</label>
                  <input
                    type="number"
                    placeholder="例如: 1000"
                    value={formData.version_code}
                    onChange={(e) => {
                      const value = e.target.value;
                      // 只允许空字符串或正整数
                      if (value === '' || /^\d+$/.test(value)) {
                        setFormData({ ...formData, version_code: value });
                      }
                    }}
                    min="0"
                    step="1"
                  />
                </div>
              </div>

              <div className="form-group">
                <label>下载链接 *</label>
                <input
                  type="url"
                  placeholder="https://..."
                  value={formData.download_url}
                  onChange={(e) => setFormData({ ...formData, download_url: e.target.value })}
                />
              </div>

              <div className="form-row">
                <div className="form-group">
                  <label>文件大小 (字节)</label>
                  <input
                    type="number"
                    placeholder="例如: 52428800"
                    value={formData.file_size}
                    onChange={(e) => {
                      const value = e.target.value;
                      // 只允许空字符串或正整数
                      if (value === '' || /^\d+$/.test(value)) {
                        setFormData({ ...formData, file_size: value });
                      }
                    }}
                    min="0"
                    step="1"
                  />
                </div>

                <div className="form-group">
                  <label>最低系统版本</label>
                  <input
                    type="text"
                    placeholder="例如: iOS 13.0"
                    value={formData.min_system_version}
                    onChange={(e) => setFormData({ ...formData, min_system_version: e.target.value })}
                  />
                </div>
              </div>

              <div className="form-group">
                <label>更新说明</label>
                <textarea
                  rows={6}
                  placeholder="请输入更新说明..."
                  value={formData.release_notes}
                  onChange={(e) => setFormData({ ...formData, release_notes: e.target.value })}
                />
              </div>

              <div className="form-row">
                <div className="form-group checkbox-group">
                  <label>
                    <input
                      type="checkbox"
                      checked={formData.is_active}
                      onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
                    />
                    <span>启用</span>
                  </label>
                </div>

                <div className="form-group checkbox-group">
                  <label>
                    <input
                      type="checkbox"
                      checked={formData.is_latest}
                      onChange={(e) => setFormData({ ...formData, is_latest: e.target.checked })}
                    />
                    <span>设为最新版本</span>
                  </label>
                </div>
              </div>
            </div>

            <div className="modal-actions">
              <button
                className="btn-cancel"
                onClick={() => {
                  setShowCreateModal(false);
                  setShowEditModal(false);
                  resetForm();
                }}
              >
                取消
              </button>
              <button
                className="btn-submit"
                onClick={showEditModal ? handleUpdate : handleCreate}
              >
                {showEditModal ? '保存' : '创建'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 删除确认对话框 */}
      <ConfirmDialog
        isOpen={!!deleteConfirmInfo}
        onClose={() => setDeleteConfirmInfo(null)}
        onConfirm={handleDelete}
        title="删除客户端"
        message={`确定要删除 ${deleteConfirmInfo?.platform_name} 版本 ${deleteConfirmInfo?.version} 吗？此操作无法撤销。`}
        confirmText="确定删除"
        cancelText="取消"
        type="danger"
      />

      {/* Toast notifications */}
      {toasts.map(toast => (
        <Toast
          key={toast.id}
          message={toast.message}
          type={toast.type}
          onClose={() => removeToast(toast.id)}
        />
      ))}
    </div>
  );
};

export default ClientManagement;