web/src/components/table/model-deployments/modals/ViewDetailsModal.jsx

/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useState, useEffect } from 'react';
import {
  Modal,
  Typography,
  Card,
  Tag,
  Progress,
  Descriptions,
  Spin,
  Empty,
  Button,
  Badge,
  Tooltip,
} from '@douyinfe/semi-ui';
import { 
  FaInfoCircle, 
  FaServer,
  FaClock,
  FaMapMarkerAlt,
  FaDocker,
  FaMoneyBillWave,
  FaChartLine,
  FaCopy,
  FaLink,
} from 'react-icons/fa';
import { IconRefresh } from '@douyinfe/semi-icons';
import { API, showError, showSuccess, timestamp2string } from '../../../../helpers';

const { Text, Title } = Typography;

const ViewDetailsModal = ({ 
  visible, 
  onCancel, 
  deployment, 
  t 
}) => {
  const [details, setDetails] = useState(null);
  const [loading, setLoading] = useState(false);
  const [containers, setContainers] = useState([]);
  const [containersLoading, setContainersLoading] = useState(false);

  const fetchDetails = async () => {
    if (!deployment?.id) return;
    
    setLoading(true);
    try {
      const response = await API.get(`/api/deployments/${deployment.id}`);
      if (response.data.success) {
        setDetails(response.data.data);
      }
    } catch (error) {
      showError(t('获取详情失败') + ': ' + (error.response?.data?.message || error.message));
    } finally {
      setLoading(false);
    }
  };

  const fetchContainers = async () => {
    if (!deployment?.id) return;

    setContainersLoading(true);
    try {
      const response = await API.get(`/api/deployments/${deployment.id}/containers`);
      if (response.data.success) {
        setContainers(response.data.data?.containers || []);
      }
    } catch (error) {
      showError(t('获取容器信息失败') + ': ' + (error.response?.data?.message || error.message));
    } finally {
      setContainersLoading(false);
    }
  };

  useEffect(() => {
    if (visible && deployment?.id) {
      fetchDetails();
      fetchContainers();
    } else if (!visible) {
      setDetails(null);
      setContainers([]);
    }
  }, [visible, deployment?.id]);

  const handleCopyId = () => {
    navigator.clipboard.writeText(deployment?.id);
    showSuccess(t('ID已复制到剪贴板'));
  };

  const handleRefresh = () => {
    fetchDetails();
    fetchContainers();
  };

  const getStatusConfig = (status) => {
    const statusConfig = {
      'running': { color: 'green', text: '运行中', icon: '🟢' },
      'completed': { color: 'green', text: '已完成', icon: '✅' },
      'deployment requested': { color: 'blue', text: '部署请求中', icon: '🔄' },
      'termination requested': { color: 'orange', text: '终止请求中', icon: '⏸️' },
      'destroyed': { color: 'red', text: '已销毁', icon: '🔴' },
      'failed': { color: 'red', text: '失败', icon: '❌' }
    };
    return statusConfig[status] || { color: 'grey', text: status, icon: '❓' };
  };

  const statusConfig = getStatusConfig(deployment?.status);

  return (
    <Modal
      title={
        <div className="flex items-center gap-2">
          <FaInfoCircle className="text-blue-500" />
          <span>{t('容器详情')}</span>
        </div>
      }
      visible={visible}
      onCancel={onCancel}
      footer={
        <div className="flex justify-between">
          <Button 
            icon={<IconRefresh />} 
            onClick={handleRefresh}
            loading={loading || containersLoading}
            theme="borderless"
          >
            {t('刷新')}
          </Button>
          <Button onClick={onCancel}>
            {t('关闭')}
          </Button>
        </div>
      }
      width={800}
      className="deployment-details-modal"
    >
      {loading && !details ? (
        <div className="flex items-center justify-center py-12">
          <Spin size="large" tip={t('加载详情中...')} />
        </div>
      ) : details ? (
        <div className="space-y-4 max-h-[600px] overflow-y-auto">
          {/* Basic Info */}
          <Card 
            title={
              <div className="flex items-center gap-2">
                <FaServer className="text-blue-500" />
                <span>{t('基本信息')}</span>
              </div>
            }
            className="border-0 shadow-sm"
          >
            <Descriptions data={[
              {
                key: t('容器名称'),
                value: (
                  <div className="flex items-center gap-2">
                    <Text strong className="text-base">
                      {details.deployment_name || details.id}
                    </Text>
                    <Button
                      size="small"
                      theme="borderless"
                      icon={<FaCopy />}
                      onClick={handleCopyId}
                      className="opacity-70 hover:opacity-100"
                    />
                  </div>
                )
              },
              {
                key: t('容器ID'),
                value: (
                  <Text type="secondary" className="font-mono text-sm">
                    {details.id}
                  </Text>
                )
              },
              {
                key: t('状态'),
                value: (
                  <div className="flex items-center gap-2">
                    <span>{statusConfig.icon}</span>
                    <Tag color={statusConfig.color}>
                      {t(statusConfig.text)}
                    </Tag>
                  </div>
                )
              },
              {
                key: t('创建时间'),
                value: timestamp2string(details.created_at)
              }
            ]} />
          </Card>

          {/* Hardware & Performance */}
          <Card 
            title={
              <div className="flex items-center gap-2">
                <FaChartLine className="text-green-500" />
                <span>{t('硬件与性能')}</span>
              </div>
            }
            className="border-0 shadow-sm"
          >
            <div className="space-y-4">
              <Descriptions data={[
                {
                  key: t('硬件类型'),
                  value: (
                    <div className="flex items-center gap-2">
                      <Tag color="blue">{details.brand_name}</Tag>
                      <Text strong>{details.hardware_name}</Text>
                    </div>
                  )
                },
                {
                  key: t('GPU数量'),
                  value: (
                    <div className="flex items-center gap-2">
                      <Badge count={details.total_gpus} theme="solid" type="primary">
                        <FaServer className="text-purple-500" />
                      </Badge>
                      <Text>{t('总计')} {details.total_gpus} {t('个GPU')}</Text>
                    </div>
                  )
                },
                {
                  key: t('容器配置'),
                  value: (
                    <div className="space-y-1">
                      <div>{t('每容器GPU数')}: {details.gpus_per_container}</div>
                      <div>{t('容器总数')}: {details.total_containers}</div>
                    </div>
                  )
                }
              ]} />

              {/* Progress Bar */}
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Text strong>{t('完成进度')}</Text>
                  <Text>{details.completed_percent}%</Text>
                </div>
                <Progress
                  percent={details.completed_percent}
                  status={details.completed_percent === 100 ? 'success' : 'normal'}
                  strokeWidth={8}
                  showInfo={false}
                />
                <div className="flex justify-between text-xs text-gray-500">
                  <span>{t('已服务')}: {details.compute_minutes_served} {t('分钟')}</span>
                  <span>{t('剩余')}: {details.compute_minutes_remaining} {t('分钟')}</span>
                </div>
              </div>
            </div>
          </Card>

          {/* Container Configuration */}
          {details.container_config && (
            <Card 
              title={
                <div className="flex items-center gap-2">
                  <FaDocker className="text-blue-600" />
                  <span>{t('容器配置')}</span>
                </div>
              }
              className="border-0 shadow-sm"
            >
              <div className="space-y-3">
                <Descriptions data={[
                  {
                    key: t('镜像地址'),
                    value: (
                      <Text className="font-mono text-sm break-all">
                        {details.container_config.image_url || 'N/A'}
                      </Text>
                    )
                  },
                  {
                    key: t('流量端口'),
                    value: details.container_config.traffic_port || 'N/A'
                  },
                  {
                    key: t('启动命令'),
                    value: (
                      <Text className="font-mono text-sm">
                        {details.container_config.entrypoint ? 
                          details.container_config.entrypoint.join(' ') : 'N/A'
                        }
                      </Text>
                    )
                  }
                ]} />

                {/* Environment Variables */}
                {details.container_config.env_variables && 
                 Object.keys(details.container_config.env_variables).length > 0 && (
                  <div className="mt-4">
                    <Text strong className="block mb-2">{t('环境变量')}:</Text>
                    <div className="bg-gray-50 p-3 rounded-lg max-h-32 overflow-y-auto">
                      {Object.entries(details.container_config.env_variables).map(([key, value]) => (
                        <div key={key} className="flex gap-2 text-sm font-mono mb-1">
                          <span className="text-blue-600 font-medium">{key}=</span>
                          <span className="text-gray-700 break-all">{String(value)}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </Card>
          )}

          {/* Containers List */}
          <Card
            title={
              <div className="flex items-center gap-2">
                <FaServer className="text-indigo-500" />
                <span>{t('容器实例')}</span>
              </div>
            }
            className="border-0 shadow-sm"
          >
            {containersLoading ? (
              <div className="flex items-center justify-center py-6">
                <Spin tip={t('加载容器信息中...')} />
              </div>
            ) : containers.length === 0 ? (
              <Empty description={t('暂无容器信息')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
              <div className="space-y-3">
                {containers.map((ctr) => (
                  <Card
                    key={ctr.container_id}
                    className="bg-gray-50 border border-gray-100"
                    bodyStyle={{ padding: '12px 16px' }}
                  >
                    <div className="flex flex-wrap items-center justify-between gap-3">
                      <div className="flex flex-col gap-1">
                        <Text strong className="font-mono text-sm">
                          {ctr.container_id}
                        </Text>
                        <Text size="small" type="secondary">
                          {t('设备')} {ctr.device_id || '--'} · {t('状态')} {ctr.status || '--'}
                        </Text>
                        <Text size="small" type="secondary">
                          {t('创建时间')}: {ctr.created_at ? timestamp2string(ctr.created_at) : '--'}
                        </Text>
                      </div>
                      <div className="flex flex-col items-end gap-2">
                        <Tag color="blue" size="small">
                          {t('GPU/容器')}: {ctr.gpus_per_container ?? '--'}
                        </Tag>
                        {ctr.public_url && (
                          <Tooltip content={ctr.public_url}>
                            <Button
                              icon={<FaLink />}
                              size="small"
                              theme="light"
                              onClick={() => window.open(ctr.public_url, '_blank', 'noopener,noreferrer')}
                            >
                              {t('访问容器')}
                            </Button>
                          </Tooltip>
                        )}
                      </div>
                    </div>

                    {ctr.events && ctr.events.length > 0 && (
                      <div className="mt-3 bg-white rounded-md border border-gray-100 p-3">
                        <Text size="small" type="secondary" className="block mb-2">
                          {t('最近事件')}
                        </Text>
                        <div className="space-y-2 max-h-32 overflow-y-auto">
                          {ctr.events.map((event, index) => (
                            <div key={`${ctr.container_id}-${event.time}-${index}`} className="flex gap-3 text-xs font-mono">
                              <span className="text-gray-500 min-w-[140px]">
                                {event.time ? timestamp2string(event.time) : '--'}
                              </span>
                              <span className="text-gray-700 break-all flex-1">
                                {event.message || '--'}
                              </span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </Card>
                ))}
              </div>
            )}
          </Card>

          {/* Location Information */}
          {details.locations && details.locations.length > 0 && (
            <Card 
              title={
                <div className="flex items-center gap-2">
                  <FaMapMarkerAlt className="text-orange-500" />
                  <span>{t('部署位置')}</span>
                </div>
              }
              className="border-0 shadow-sm"
            >
              <div className="flex flex-wrap gap-2">
                {details.locations.map((location) => (
                  <Tag key={location.id} color="orange" size="large">
                    <div className="flex items-center gap-1">
                      <span>🌍</span>
                      <span>{location.name} ({location.iso2})</span>
                    </div>
                  </Tag>
                ))}
              </div>
            </Card>
          )}

          {/* Cost Information */}
          <Card 
            title={
              <div className="flex items-center gap-2">
                <FaMoneyBillWave className="text-green-500" />
                <span>{t('费用信息')}</span>
              </div>
            }
            className="border-0 shadow-sm"
          >
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <Text>{t('已支付金额')}</Text>
                <Text strong className="text-lg text-green-600">
                  ${details.amount_paid ? details.amount_paid.toFixed(2) : '0.00'} USDC
                </Text>
              </div>
              
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div className="flex justify-between">
                  <Text type="secondary">{t('计费开始')}:</Text>
                  <Text>{details.started_at ? timestamp2string(details.started_at) : 'N/A'}</Text>
                </div>
                <div className="flex justify-between">
                  <Text type="secondary">{t('预计结束')}:</Text>
                  <Text>{details.finished_at ? timestamp2string(details.finished_at) : 'N/A'}</Text>
                </div>
              </div>
            </div>
          </Card>

          {/* Time Information */}
          <Card 
            title={
              <div className="flex items-center gap-2">
                <FaClock className="text-purple-500" />
                <span>{t('时间信息')}</span>
              </div>
            }
            className="border-0 shadow-sm"
          >
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Text type="secondary">{t('已运行时间')}:</Text>
                  <Text strong>
                    {Math.floor(details.compute_minutes_served / 60)}h {details.compute_minutes_served % 60}m
                  </Text>
                </div>
                <div className="flex items-center justify-between">
                  <Text type="secondary">{t('剩余时间')}:</Text>
                  <Text strong className="text-orange-600">
                    {Math.floor(details.compute_minutes_remaining / 60)}h {details.compute_minutes_remaining % 60}m
                  </Text>
                </div>
              </div>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Text type="secondary">{t('创建时间')}:</Text>
                  <Text>{timestamp2string(details.created_at)}</Text>
                </div>
                <div className="flex items-center justify-between">
                  <Text type="secondary">{t('最后更新')}:</Text>
                  <Text>{timestamp2string(details.updated_at)}</Text>
                </div>
              </div>
            </div>
          </Card>
        </div>
      ) : (
        <Empty 
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={t('无法获取容器详情')}
        />
      )}
    </Modal>
  );
};

export default ViewDetailsModal;