import React, { useState } from 'react';
import styled from 'styled-components';
import { apiPost } from '../utils/request';

const TestContainer = styled.div`
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 15px;
  border-radius: 8px;
  font-size: 12px;
  z-index: 10000;
  min-width: 300px;
`;

const TestButton = styled.button`
  background: #4A90E2;
  color: white;
  border: none;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  
  &:hover {
    background: #357ABD;
  }
`;

const TestInfo = styled.div`
  margin: 10px 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  
  pre {
    margin: 0;
    white-space: pre-wrap;
    font-size: 11px;
  }
`;

const AuthTest: React.FC = () => {
  const [testResult, setTestResult] = useState<string>('');

  const testAuth = async () => {
    try {
      const response = await apiPost('/checkKeygen');
      const { status, msg, data } = response.data || {};
      
      let resultText = `鉴权接口响应:\n`;
      resultText += `status: ${status}\n`;
      resultText += `msg: "${msg || ''}"\n`;
      resultText += `data: ${data}\n\n`;
      
      if (status === 200 && (!msg || msg === '')) {
        resultText += `✅ 权限验证成功`;
      } else {
        resultText += `❌ 权限验证失败: ${msg || '未知错误'}`;
      }
      
      setTestResult(resultText);
    } catch (error: any) {
      setTestResult(`权限验证失败:\n${error.message}\n${JSON.stringify(error.response?.data || {}, null, 2)}`);
    }
  };

  const clearTest = () => {
    setTestResult('');
  };

  return (
    <TestContainer>
      <div>鉴权测试工具</div>
      <TestButton onClick={testAuth}>测试鉴权接口</TestButton>
      <TestButton onClick={clearTest}>清除结果</TestButton>
      {testResult && (
        <TestInfo>
          <pre>{testResult}</pre>
        </TestInfo>
      )}
    </TestContainer>
  );
};

export default AuthTest; 