web/src/components/table/model-deployments/modals/ViewLogsModal.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, useRef } from 'react';
import {
  Modal,
  Button,
  Typography,
  Select,
  Input,
  Space,
  Spin,
  Card,
  Tag,
  Empty,
  Switch,
  Divider,
  Tooltip,
  Radio,
} from '@douyinfe/semi-ui';
import {
  FaCopy,
  FaSearch,
  FaClock,
  FaTerminal,
  FaServer,
  FaInfoCircle,
  FaLink,
} from 'react-icons/fa';
import { IconRefresh, IconDownload } from '@douyinfe/semi-icons';
import {
  API,
  showError,
  showSuccess,
  copy,
  timestamp2string,
} from '../../../../helpers';

const { Text } = Typography;

const ALL_CONTAINERS = '__all__';

const ViewLogsModal = ({ visible, onCancel, deployment, t }) => {
  const [logLines, setLogLines] = useState([]);
  const [loading, setLoading] = useState(false);
  const [autoRefresh, setAutoRefresh] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [following, setFollowing] = useState(false);
  const [containers, setContainers] = useState([]);
  const [containersLoading, setContainersLoading] = useState(false);
  const [selectedContainerId, setSelectedContainerId] =
    useState(ALL_CONTAINERS);
  const [containerDetails, setContainerDetails] = useState(null);
  const [containerDetailsLoading, setContainerDetailsLoading] = useState(false);
  const [streamFilter, setStreamFilter] = useState('stdout');
  const [lastUpdatedAt, setLastUpdatedAt] = useState(null);

  const logContainerRef = useRef(null);
  const autoRefreshRef = useRef(null);

  // Auto scroll to bottom when new logs arrive
  const scrollToBottom = () => {
    if (logContainerRef.current) {
      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
    }
  };

  const resolveStreamValue = (value) => {
    if (typeof value === 'string') {
      return value;
    }
    if (value && typeof value.value === 'string') {
      return value.value;
    }
    if (value && value.target && typeof value.target.value === 'string') {
      return value.target.value;
    }
    return '';
  };

  const handleStreamChange = (value) => {
    const next = resolveStreamValue(value) || 'stdout';
    setStreamFilter(next);
  };

  const fetchLogs = async (containerIdOverride = undefined) => {
    if (!deployment?.id) return;

    const containerId =
      typeof containerIdOverride === 'string'
        ? containerIdOverride
        : selectedContainerId;

    if (!containerId || containerId === ALL_CONTAINERS) {
      setLogLines([]);
      setLastUpdatedAt(null);
      setLoading(false);
      return;
    }

    setLoading(true);
    try {
      const params = new URLSearchParams();
      params.append('container_id', containerId);

      const streamValue = resolveStreamValue(streamFilter) || 'stdout';
      if (streamValue && streamValue !== 'all') {
        params.append('stream', streamValue);
      }
      if (following) params.append('follow', 'true');

      const response = await API.get(
        `/api/deployments/${deployment.id}/logs?${params}`,
      );

      if (response.data.success) {
        const rawContent =
          typeof response.data.data === 'string' ? response.data.data : '';
        const normalized = rawContent.replace(/\r\n?/g, '\n');
        const lines = normalized ? normalized.split('\n') : [];

        setLogLines(lines);
        setLastUpdatedAt(new Date());

        setTimeout(scrollToBottom, 100);
      }
    } 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) {
        const list = response.data.data?.containers || [];
        setContainers(list);

        setSelectedContainerId((current) => {
          if (
            current !== ALL_CONTAINERS &&
            list.some((item) => item.container_id === current)
          ) {
            return current;
          }

          return list.length > 0 ? list[0].container_id : ALL_CONTAINERS;
        });

        if (list.length === 0) {
          setContainerDetails(null);
        }
      }
    } catch (error) {
      showError(
        t('获取容器列表失败') +
          ': ' +
          (error.response?.data?.message || error.message),
      );
    } finally {
      setContainersLoading(false);
    }
  };

  const fetchContainerDetails = async (containerId) => {
    if (!deployment?.id || !containerId || containerId === ALL_CONTAINERS) {
      setContainerDetails(null);
      return;
    }

    setContainerDetailsLoading(true);
    try {
      const response = await API.get(
        `/api/deployments/${deployment.id}/containers/${containerId}`,
      );

      if (response.data.success) {
        setContainerDetails(response.data.data || null);
      }
    } catch (error) {
      showError(
        t('获取容器详情失败') +
          ': ' +
          (error.response?.data?.message || error.message),
      );
    } finally {
      setContainerDetailsLoading(false);
    }
  };

  const handleContainerChange = (value) => {
    const newValue = value || ALL_CONTAINERS;
    setSelectedContainerId(newValue);
    setLogLines([]);
    setLastUpdatedAt(null);
  };

  const refreshContainerDetails = () => {
    if (selectedContainerId && selectedContainerId !== ALL_CONTAINERS) {
      fetchContainerDetails(selectedContainerId);
    }
  };

  const renderContainerStatusTag = (status) => {
    if (!status) {
      return (
        <Tag color='grey' size='small'>
          {t('未知状态')}
        </Tag>
      );
    }

    const normalized =
      typeof status === 'string' ? status.trim().toLowerCase() : '';
    const statusMap = {
      running: { color: 'green', label: '运行中' },
      pending: { color: 'orange', label: '准备中' },
      deployed: { color: 'blue', label: '已部署' },
      failed: { color: 'red', label: '失败' },
      destroyed: { color: 'red', label: '已销毁' },
      stopping: { color: 'orange', label: '停止中' },
      terminated: { color: 'grey', label: '已终止' },
    };

    const config = statusMap[normalized] || { color: 'grey', label: status };

    return (
      <Tag color={config.color} size='small'>
        {t(config.label)}
      </Tag>
    );
  };

  const currentContainer =
    selectedContainerId !== ALL_CONTAINERS
      ? containers.find((ctr) => ctr.container_id === selectedContainerId)
      : null;

  const refreshLogs = () => {
    if (selectedContainerId && selectedContainerId !== ALL_CONTAINERS) {
      fetchContainerDetails(selectedContainerId);
    }
    fetchLogs();
  };

  const downloadLogs = () => {
    const sourceLogs = filteredLogs.length > 0 ? filteredLogs : logLines;
    if (sourceLogs.length === 0) {
      showError(t('暂无日志可下载'));
      return;
    }
    const logText = sourceLogs.join('\n');

    const blob = new Blob([logText], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    const safeContainerId =
      selectedContainerId && selectedContainerId !== ALL_CONTAINERS
        ? selectedContainerId.replace(/[^a-zA-Z0-9_-]/g, '-')
        : '';
    const fileName = safeContainerId
      ? `deployment-${deployment.id}-container-${safeContainerId}-logs.txt`
      : `deployment-${deployment.id}-logs.txt`;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);

    showSuccess(t('日志已下载'));
  };

  const copyAllLogs = async () => {
    const sourceLogs = filteredLogs.length > 0 ? filteredLogs : logLines;
    if (sourceLogs.length === 0) {
      showError(t('暂无日志可复制'));
      return;
    }
    const logText = sourceLogs.join('\n');

    const copied = await copy(logText);
    if (copied) {
      showSuccess(t('日志已复制到剪贴板'));
    } else {
      showError(t('复制失败，请手动选择文本复制'));
    }
  };

  // Auto refresh functionality
  useEffect(() => {
    if (autoRefresh && visible) {
      autoRefreshRef.current = setInterval(() => {
        fetchLogs();
      }, 5000);
    } else {
      if (autoRefreshRef.current) {
        clearInterval(autoRefreshRef.current);
        autoRefreshRef.current = null;
      }
    }

    return () => {
      if (autoRefreshRef.current) {
        clearInterval(autoRefreshRef.current);
      }
    };
  }, [autoRefresh, visible, selectedContainerId, streamFilter, following]);

  useEffect(() => {
    if (visible && deployment?.id) {
      fetchContainers();
    } else if (!visible) {
      setContainers([]);
      setSelectedContainerId(ALL_CONTAINERS);
      setContainerDetails(null);
      setStreamFilter('stdout');
      setLogLines([]);
      setLastUpdatedAt(null);
    }
  }, [visible, deployment?.id]);

  useEffect(() => {
    if (visible) {
      setStreamFilter('stdout');
    }
  }, [selectedContainerId, visible]);

  useEffect(() => {
    if (visible && deployment?.id) {
      fetchContainerDetails(selectedContainerId);
    }
  }, [visible, deployment?.id, selectedContainerId]);

  // Initial load and cleanup
  useEffect(() => {
    if (visible && deployment?.id) {
      fetchLogs();
    }

    return () => {
      if (autoRefreshRef.current) {
        clearInterval(autoRefreshRef.current);
      }
    };
  }, [visible, deployment?.id, streamFilter, selectedContainerId, following]);

  // Filter logs based on search term
  const filteredLogs = logLines
    .map((line) => line ?? '')
    .filter(
      (line) =>
        !searchTerm || line.toLowerCase().includes(searchTerm.toLowerCase()),
    );

  const renderLogEntry = (line, index) => (
    <div
      key={`${index}-${line.slice(0, 20)}`}
      className='py-1 px-3 hover:bg-gray-50 font-mono text-sm border-b border-gray-100 whitespace-pre-wrap break-words'
    >
      {line}
    </div>
  );

  return (
    <Modal
      title={
        <div className='flex items-center gap-2'>
          <FaTerminal className='text-blue-500' />
          <span>{t('容器日志')}</span>
          <Text type='secondary' size='small'>
            - {deployment?.container_name || deployment?.id}
          </Text>
        </div>
      }
      visible={visible}
      onCancel={onCancel}
      footer={null}
      width={1000}
      height={700}
      className='logs-modal'
      style={{ top: 20 }}
    >
      <div className='flex flex-col h-full max-h-[600px]'>
        {/* Controls */}
        <Card className='mb-4 border-0 shadow-sm'>
          <div className='flex items-center justify-between flex-wrap gap-3'>
            <Space wrap>
              <Select
                prefix={<FaServer />}
                placeholder={t('选择容器')}
                value={selectedContainerId}
                onChange={handleContainerChange}
                style={{ width: 240 }}
                size='small'
                loading={containersLoading}
                dropdownStyle={{ maxHeight: 320, overflowY: 'auto' }}
              >
                <Select.Option value={ALL_CONTAINERS}>
                  {t('全部容器')}
                </Select.Option>
                {containers.map((ctr) => (
                  <Select.Option
                    key={ctr.container_id}
                    value={ctr.container_id}
                  >
                    <div className='flex flex-col'>
                      <span className='font-mono text-xs'>
                        {ctr.container_id}
                      </span>
                      <span className='text-xs text-gray-500'>
                        {ctr.brand_name || 'IO.NET'}
                        {ctr.hardware ? ` · ${ctr.hardware}` : ''}
                      </span>
                    </div>
                  </Select.Option>
                ))}
              </Select>

              <Input
                prefix={<FaSearch />}
                placeholder={t('搜索日志内容')}
                value={searchTerm}
                onChange={setSearchTerm}
                style={{ width: 200 }}
                size='small'
              />

              <Space align='center' className='ml-2'>
                <Text size='small' type='secondary'>
                  {t('日志流')}
                </Text>
                <Radio.Group
                  type='button'
                  size='small'
                  value={streamFilter}
                  onChange={handleStreamChange}
                >
                  <Radio value='stdout'>STDOUT</Radio>
                  <Radio value='stderr'>STDERR</Radio>
                </Radio.Group>
              </Space>

              <div className='flex items-center gap-2'>
                <Switch
                  checked={autoRefresh}
                  onChange={setAutoRefresh}
                  size='small'
                />
                <Text size='small'>{t('自动刷新')}</Text>
              </div>

              <div className='flex items-center gap-2'>
                <Switch
                  checked={following}
                  onChange={setFollowing}
                  size='small'
                />
                <Text size='small'>{t('跟随日志')}</Text>
              </div>
            </Space>

            <Space>
              <Tooltip content={t('刷新日志')}>
                <Button
                  icon={<IconRefresh />}
                  onClick={refreshLogs}
                  loading={loading}
                  size='small'
                  theme='borderless'
                />
              </Tooltip>

              <Tooltip content={t('复制日志')}>
                <Button
                  icon={<FaCopy />}
                  onClick={copyAllLogs}
                  size='small'
                  theme='borderless'
                  disabled={logLines.length === 0}
                />
              </Tooltip>

              <Tooltip content={t('下载日志')}>
                <Button
                  icon={<IconDownload />}
                  onClick={downloadLogs}
                  size='small'
                  theme='borderless'
                  disabled={logLines.length === 0}
                />
              </Tooltip>
            </Space>
          </div>

          {/* Status Info */}
          <Divider margin='12px' />
          <div className='flex items-center justify-between'>
            <Space size='large'>
              <Text size='small' type='secondary'>
                {t('共 {{count}} 条日志', { count: logLines.length })}
              </Text>
              {searchTerm && (
                <Text size='small' type='secondary'>
                  {t('(筛选后显示 {{count}} 条)', {
                    count: filteredLogs.length,
                  })}
                </Text>
              )}
              {autoRefresh && (
                <Tag color='green' size='small'>
                  <FaClock className='mr-1' />
                  {t('自动刷新中')}
                </Tag>
              )}
            </Space>

            <Text size='small' type='secondary'>
              {t('状态')}: {deployment?.status || 'unknown'}
            </Text>
          </div>

          {selectedContainerId !== ALL_CONTAINERS && (
            <>
              <Divider margin='12px' />
              <div className='flex flex-col gap-3'>
                <div className='flex items-center justify-between flex-wrap gap-2'>
                  <Space>
                    <Tag color='blue' size='small'>
                      {t('容器')}
                    </Tag>
                    <Text className='font-mono text-xs'>
                      {selectedContainerId}
                    </Text>
                    {renderContainerStatusTag(
                      containerDetails?.status || currentContainer?.status,
                    )}
                  </Space>

                  <Space>
                    {containerDetails?.public_url && (
                      <Tooltip content={containerDetails.public_url}>
                        <Button
                          icon={<FaLink />}
                          size='small'
                          theme='borderless'
                          onClick={() =>
                            window.open(containerDetails.public_url, '_blank')
                          }
                        />
                      </Tooltip>
                    )}
                    <Tooltip content={t('刷新容器信息')}>
                      <Button
                        icon={<IconRefresh />}
                        onClick={refreshContainerDetails}
                        size='small'
                        theme='borderless'
                        loading={containerDetailsLoading}
                      />
                    </Tooltip>
                  </Space>
                </div>

                {containerDetailsLoading ? (
                  <div className='flex items-center justify-center py-6'>
                    <Spin tip={t('加载容器详情中...')} />
                  </div>
                ) : containerDetails ? (
                  <div className='grid gap-4 md:grid-cols-2 text-sm'>
                    <div className='flex items-center gap-2'>
                      <FaInfoCircle className='text-blue-500' />
                      <Text type='secondary'>{t('硬件')}</Text>
                      <Text>
                        {containerDetails?.brand_name ||
                          currentContainer?.brand_name ||
                          t('未知品牌')}
                        {containerDetails?.hardware ||
                        currentContainer?.hardware
                          ? ` · ${containerDetails?.hardware || currentContainer?.hardware}`
                          : ''}
                      </Text>
                    </div>
                    <div className='flex items-center gap-2'>
                      <FaServer className='text-purple-500' />
                      <Text type='secondary'>{t('GPU/容器')}</Text>
                      <Text>
                        {containerDetails?.gpus_per_container ??
                          currentContainer?.gpus_per_container ??
                          0}
                      </Text>
                    </div>
                    <div className='flex items-center gap-2'>
                      <FaClock className='text-orange-500' />
                      <Text type='secondary'>{t('创建时间')}</Text>
                      <Text>
                        {containerDetails?.created_at
                          ? timestamp2string(containerDetails.created_at)
                          : currentContainer?.created_at
                            ? timestamp2string(currentContainer.created_at)
                            : t('未知')}
                      </Text>
                    </div>
                    <div className='flex items-center gap-2'>
                      <FaInfoCircle className='text-green-500' />
                      <Text type='secondary'>{t('运行时长')}</Text>
                      <Text>
                        {containerDetails?.uptime_percent ??
                          currentContainer?.uptime_percent ??
                          0}
                        %
                      </Text>
                    </div>
                  </div>
                ) : (
                  <Text size='small' type='secondary'>
                    {t('暂无容器详情')}
                  </Text>
                )}

                {containerDetails?.events &&
                  containerDetails.events.length > 0 && (
                    <div className='bg-gray-50 rounded-lg p-3'>
                      <Text size='small' type='secondary'>
                        {t('最近事件')}
                      </Text>
                      <div className='mt-2 space-y-2 max-h-32 overflow-y-auto'>
                        {containerDetails.events
                          .slice(0, 5)
                          .map((event, index) => (
                            <div
                              key={`${event.time}-${index}`}
                              className='flex gap-3 text-xs font-mono'
                            >
                              <span className='text-gray-500'>
                                {event.time
                                  ? timestamp2string(event.time)
                                  : '--'}
                              </span>
                              <span className='text-gray-700 break-all flex-1'>
                                {event.message}
                              </span>
                            </div>
                          ))}
                      </div>
                    </div>
                  )}
              </div>
            </>
          )}
        </Card>

        {/* Log Content */}
        <div className='flex-1 flex flex-col border rounded-lg bg-gray-50 overflow-hidden'>
          <div
            ref={logContainerRef}
            className='flex-1 overflow-y-auto bg-white'
            style={{ maxHeight: '400px' }}
          >
            {loading && logLines.length === 0 ? (
              <div className='flex items-center justify-center p-8'>
                <Spin tip={t('加载日志中...')} />
              </div>
            ) : filteredLogs.length === 0 ? (
              <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description={
                  searchTerm ? t('没有匹配的日志条目') : t('暂无日志')
                }
                style={{ padding: '60px 20px' }}
              />
            ) : (
              <div>
                {filteredLogs.map((log, index) => renderLogEntry(log, index))}
              </div>
            )}
          </div>

          {/* Footer status */}
          {logLines.length > 0 && (
            <div className='flex items-center justify-between px-3 py-2 bg-gray-50 border-t text-xs text-gray-500'>
              <span>{following ? t('正在跟随最新日志') : t('日志已加载')}</span>
              <span>
                {t('最后更新')}:{' '}
                {lastUpdatedAt ? lastUpdatedAt.toLocaleTimeString() : '--'}
              </span>
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
};

export default ViewLogsModal;