import React, { useState } from 'react';
import { Button, Space } from '@arco-design/web-react';
import { downloadEnvConfigFile, testEnv } from '@/api/componentDeployEnv';

const EnvExtra = ({ currentEnvData }) => {
  const [testLoading, setTestLoading] = useState(false);

  // 模拟下载配置证书文件
  const handleDownloadConfig = () => {
    // 这里可以添加实际的下载逻辑
    downloadEnvConfigFile(currentEnvData.id);
  };

  // 模拟查看环境配置教程
  const handleViewTutorial = () => {
    console.log('查看环境配置教程');
    // 这里可以打开一个新的页面或弹窗显示教程内容
  };

  // 模拟点击测试环境可用性
  const handleTestAvailability = async () => {
    setTestLoading(true);
    const res = await testEnv(currentEnvData.id);
    console.log('res:', res);
    setTestLoading(false);
  };

  return (
    <div style={{ padding: '20px', borderRadius: 8 }}>
      <div style={{ marginBottom: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
          <span style={{ fontSize: 14, fontWeight: 500 }}>环境配置文件：</span>
          <Button
            type="text"
            onClick={handleDownloadConfig}
          >
            下载配置证书文件
          </Button>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', marginLeft: 15 }}>
          <span style={{ color: '#FFA500', marginRight: 8 }}>●</span>
          <span style={{ fontSize: 13, color: '#666' }}>可点击查看</span>
          <Button
            type="text"
            onClick={handleViewTutorial}
            style={{ marginLeft: 4 }}
          >
            环境配置教程
          </Button>
        </div>
      </div>

      <div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <span style={{ fontSize: 14, fontWeight: 500 }}>环境可用性：</span>
          <Button
            type="outline"
            onClick={handleTestAvailability}
            style={{ marginLeft: 16 }}
            loading={testLoading}
          >
            点击测试
          </Button>
        </div>
      </div>
    </div>
  );
};

export default EnvExtra;