const { useState, useEffect } = React;

// --- SVG Icons ---
function Icon({ name, size = 24, color = "currentColor", className = "" }) {
  const icons = {
    leaf: (
      <svg viewBox="0 0 24 24" width={size} height={size} fill={color} className={`svg-icon ${className}`}>
        <path d="M17.5,2C15.5,2 13.5,3 12,4.5C10.5,3 8.5,2 6.5,2C3.5,2 1,4.5 1,7.5C1,12 12,22 12,22C12,22 23,12 23,7.5C23,4.5 20.5,2 17.5,2Z" />
      </svg>
    ),
    check: (
      <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className={`svg-icon ${className}`}>
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    ),
    loader: (
      <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className={`svg-icon spinner ${className}`}>
        <line x1="12" y1="2" x2="12" y2="6"></line>
        <line x1="12" y1="18" x2="12" y2="22"></line>
        <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
        <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
        <line x1="2" y1="12" x2="6" y2="12"></line>
        <line x1="18" y1="12" x2="22" y2="12"></line>
        <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
        <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
      </svg>
    ),
    error: (
      <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className={`svg-icon ${className}`}>
        <circle cx="12" cy="12" r="10"></circle>
        <line x1="15" y1="9" x2="9" y2="15"></line>
        <line x1="9" y1="9" x2="15" y2="15"></line>
      </svg>
    )
  };
  return icons[name] || null;
}

// --- Components ---

function Button({ type = 'default', size = 'middle', loading, disabled, block, children, onClick }) {
  const classNames = [
    'ai-btn',
    `ai-btn-${type}`,
    `ai-btn-${size}`,
    block ? 'ai-btn-block' : ''
  ].filter(Boolean).join(' ');

  return (
    <button className={classNames} disabled={disabled || loading} onClick={onClick}>
      {loading ? <Icon name="loader" size={size === 'small' ? 14 : 18} className="mr-2" /> : null}
      <span style={{ marginLeft: loading ? '8px' : '0' }}>{children}</span>
    </button>
  );
}

function Card({ pattern = 'none', children }) {
  return (
    <div className={`ai-card ai-card-hoverable ai-card-pattern-${pattern}`}>
      {children}
    </div>
  );
}

function Title({ color = 'app-teal', size = 'middle', children }) {
  return (
    <div className={`ai-title ai-title-size-${size} ai-title-color-${color}`}>
      <div className="ai-title-back ai-title-back-left"></div>
      <div className="ai-title-back ai-title-back-right"></div>
      <div className="ai-title-fold ai-title-fold-left"></div>
      <div className="ai-title-fold ai-title-fold-right"></div>
      <div className="ai-title-front"></div>
      <div className="ai-title-text">{children}</div>
    </div>
  );
}

// --- Main App ---

function App() {
  const [testStatus, setTestStatus] = useState('idle'); // idle, testing, success, error
  const [latency, setLatency] = useState(null);

  const runTest = () => {
    setTestStatus('testing');
    setLatency(null);
    
    // Simulate a network test
    const startTime = Date.now();
    
    // Using a simple fetch to a reliable public endpoint to check connectivity
    // Using https://httpbin.org/get or similar, here we just use a timeout to simulate
    setTimeout(() => {
      // 90% chance of success for demonstration
      if (Math.random() > 0.1) {
        setLatency(Date.now() - startTime);
        setTestStatus('success');
      } else {
        setTestStatus('error');
      }
    }, 800 + Math.random() * 1000);
  };

  return (
    <div className="page-container">
      <Title size="middle" color="app-teal">欢迎来到网络测试中心</Title>
      
      <div className="content-wrapper" style={{ position: 'relative', marginTop: '20px' }}>
        {/* Floating leaf decorations */}
        <Icon name="leaf" color="#82d5bb" className="floating-leaf" style={{ position: 'absolute', top: '-15px', left: '-15px', transform: 'rotate(-25deg)', zIndex: 10, width: 32, height: 32 }} />
        <Icon name="leaf" color="#8ac68a" className="floating-leaf" style={{ position: 'absolute', bottom: '-15px', right: '-15px', transform: 'rotate(115deg)', zIndex: 10, width: 32, height: 32 }} />

        <Card pattern="app-yellow">
          <div className="card-inner-dashed">
            <div style={{ textAlign: 'center', marginBottom: '12px' }}>
              <Icon name="leaf" size={40} color="#6fba2c" />
            </div>
            <h2 style={{ color: '#794f27', textAlign: 'center', marginTop: 0, marginBottom: '16px', fontSize: '22px' }}>网络连通性测试</h2>
            
            <div style={{ background: 'rgba(255, 255, 255, 0.5)', padding: '16px', borderRadius: '16px', marginBottom: '24px' }}>
              <p style={{ margin: 0, lineHeight: '1.7', fontSize: '15px', color: '#725d42', textAlign: 'center', fontWeight: 600 }}>
                哈喽！这里是一个专门用于测试网络连通性的网页。<br/>
                我正在确认用户是否可以顺畅地访问这个站点。如果你能看到这个页面，说明基础的文件加载已经成功啦！
              </p>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px', background: 'rgba(247, 243, 223, 0.6)', padding: '24px', borderRadius: '20px', border: '1.5px dashed #d4c9b4' }}>
              <div style={{ textAlign: 'center' }}>
                <strong style={{ fontSize: '16px', color: '#794f27' }}>网络延迟测试</strong>
                <p style={{ margin: '4px 0 0 0', color: '#9f927d', fontSize: '13px' }}>点击下方按钮测试连接速度</p>
              </div>
              
              <Button 
                type="primary" 
                size="large" 
                onClick={runTest}
                loading={testStatus === 'testing'}
              >
                {testStatus === 'testing' ? '正在测试中...' : '开始网络测试'}
              </Button>

              {testStatus === 'success' && (
                <div className="test-result-box" style={{ color: '#5a9e1e', background: '#e6f9f6', padding: '10px 20px', borderRadius: '50px', border: '2px solid #82d5bb' }}>
                  <Icon name="check" color="#5a9e1e" size={20} />
                  <span style={{ fontSize: '15px' }}>测试成功！延迟: {latency} ms</span>
                </div>
              )}

              {testStatus === 'error' && (
                <div className="test-result-box" style={{ color: '#c94444', background: '#faede9', padding: '10px 20px', borderRadius: '50px', border: '2px solid #fc736d' }}>
                  <Icon name="error" color="#c94444" size={20} />
                  <span style={{ fontSize: '15px' }}>测试失败，请重试。</span>
                </div>
              )}
            </div>
          </div>
        </Card>
      </div>

      <div className="footer-decor">
        <svg viewBox="0 0 1000 100" preserveAspectRatio="none">
          <path d="M0,50 Q250,100 500,50 T1000,50 L1000,100 L0,100 Z" fill="#82d5bb" opacity="0.3"></path>
          <path d="M0,70 Q300,120 600,70 T1000,70 L1000,100 L0,100 Z" fill="#82d5bb" opacity="0.5"></path>
        </svg>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);