import React, { useState, useEffect, useRef } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGlobe, faCopy, faCheck, faFileAlt, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
import styles from '../styles';
import { HttpResponse, HttpMethod, NetworkType } from '../types';
import JsonRenderer from './JsonRenderer';
import { generateMarkdownDoc } from '../utils';
import MarkdownPreview from './MarkdownPreview';
import { useLanguage } from '@/context/LanguageContext';

interface ResponseDisplayProps {
  response: HttpResponse | null;
  url: string;
  method: HttpMethod;
  headers: {key: string; value: string; id: string}[];
  body: string;
  bodyFormat: 'json' | 'text' | 'form';
  formFields: {key: string; value: string; id: string}[];
  networkType: NetworkType;
}

const ResponseDisplay: React.FC<ResponseDisplayProps> = ({ 
  response, 
  url, 
  method, 
  headers, 
  body, 
  bodyFormat, 
  formFields, 
  networkType
}) => {
  const { t } = useLanguage();
  const [responseTab, setResponseTab] = useState<'body' | 'headers' | 'info'>('body');
  const [copiedJson, setCopiedJson] = useState(false);
  const [markdownContent, setMarkdownContent] = useState<string>('');
  const [showMarkdownPreview, setShowMarkdownPreview] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  
  // 美化JSON
  const formatJson = (json: string): string => {
    try {
      return JSON.stringify(JSON.parse(json), null, 2);
    } catch {
      return json;
    }
  };
  
  // 检测内容是否为JSON
  const isJsonContent = (data: unknown): boolean => {
    // 检查响应头中的Content-Type
    if (response?.headers && response.headers['content-type']?.includes('application/json')) {
      return true;
    }
    
    // 对于对象类型的数据，直接判定为JSON
    if (typeof data === 'object' && data !== null) {
      return true;
    }
    
    // 尝试解析字符串
    if (typeof data === 'string') {
      try {
        JSON.parse(data);
        return true;
      } catch {
        return false;
      }
    }
    
    return false;
  };
  
  // 复制响应内容
  const copyResponse = () => {
    if (!response) return;
    
    const textToCopy = responseTab === 'body' 
      ? typeof response.data === 'string' 
        ? response.data 
        : JSON.stringify(response.data, null, 2)
      : Object.entries(response.headers)
          .map(([key, value]) => `${key}: ${value}`)
          .join('\n');
    
    navigator.clipboard.writeText(textToCopy)
      .then(() => {
        setCopiedJson(true);
        setTimeout(() => setCopiedJson(false), 2000);
      })
      .catch(err => console.error(t('tools.http_tester.copy_failed'), err));
  };

  // 生成并显示Markdown接口文档
  const handleGenerateMarkdown = () => {
    if (!response) return;
    
    const markdownDoc = generateMarkdownDoc(
      url,
      method, 
      headers, 
      body, 
      bodyFormat,
      formFields,
      response,
      networkType
    );
    
    setMarkdownContent(markdownDoc);
    setShowMarkdownPreview(true);
  };
  
  // 关闭Markdown预览窗口
  const handleCloseMarkdownPreview = () => {
    setShowMarkdownPreview(false);
  };

  // 调整响应区域高度以适应可用空间并跟随内容变化
  useEffect(() => {
    if (!response) return;
    
    const adjustHeight = () => {
      if (!containerRef.current || !contentRef.current) return;
      
      // 计算可用的视窗高度
      const viewportHeight = window.innerHeight;
      // 获取容器到视窗顶部的距离
      const containerTop = containerRef.current.getBoundingClientRect().top;
      // 设置底部边距
      const bottomMargin = 40;
      // 计算容器可用的最大高度（视口高度限制）
      const maxViewportHeight = viewportHeight - containerTop - bottomMargin;
      
      // 获取内容实际高度
      const contentHeight = contentRef.current.scrollHeight;
      
      // 设置容器初始高度为视口可用高度
      let targetHeight = Math.max(600, maxViewportHeight);
      
      // 如果内容高度超过初始高度，则让容器跟随内容增高
      // 最小高度600px，最大不超过内容高度+100px（为头部和边距预留空间）
      if (contentHeight > targetHeight - 100) {
        targetHeight = Math.min(contentHeight + 100, 2000); // 设置一个最大值2000px，防止过长
      }
      
      // 应用高度
      containerRef.current.style.minHeight = `${targetHeight}px`;
    };
    
    // 初始调整
    adjustHeight();
    
    // 设置一个延时调整，确保内容渲染完成后再次计算高度
    const timeoutId = setTimeout(adjustHeight, 100);
    
    // 监听窗口大小变化
    window.addEventListener('resize', adjustHeight);
    
    return () => {
      window.removeEventListener('resize', adjustHeight);
      clearTimeout(timeoutId);
    };
  }, [response, responseTab]);

  return (
    <div className={`${styles.card}`} ref={containerRef}>
      <h2 className="text-lg text-primary font-medium mb-4">{t('tools.http_tester.response_result')}</h2>
      
      {response ? (
        <div className="flex flex-col flex-grow w-full">
          {/* 响应头部 */}
          <div className={styles.responseHeader}>
            <div className="flex items-center gap-2">
              <span className={styles.statusBadge(response.status)}>
                {response.status}
              </span>
              <span className="text-sm text-secondary">
                {response.statusText}
              </span>
            </div>
            
            <div className="flex items-center gap-3">
              <div className={styles.statsText}>
                {response.size} bytes | {response.time}ms
              </div>
              
              <button 
                className={styles.copyButton}
                onClick={copyResponse}
                title={t('tools.http_tester.copy')}
              >
                <FontAwesomeIcon icon={copiedJson ? faCheck : faCopy} />
                {copiedJson ? t('tools.http_tester.copied') : t('tools.http_tester.copy')}
              </button>
              
              <button 
                className={styles.copyButton}
                onClick={handleGenerateMarkdown}
                title={t('tools.http_tester.generate_doc')}
              >
                <FontAwesomeIcon icon={faFileAlt} className="mr-1" />
                {t('tools.http_tester.generate_doc')}
              </button>
            </div>
          </div>
          
          {/* 响应标签页 */}
          <div className="border-b border-purple-glow/30 mb-4">
            <div className="flex">
              <button 
                className={styles.tabButton(responseTab === 'body')}
                onClick={() => setResponseTab('body')}
              >
                {t('tools.http_tester.response_body')}
              </button>
              <button 
                className={styles.tabButton(responseTab === 'headers')}
                onClick={() => setResponseTab('headers')}
              >
                {t('tools.http_tester.response_headers')}
              </button>
              <button 
                className={styles.tabButton(responseTab === 'info')}
                onClick={() => setResponseTab('info')}
              >
                {t('tools.http_tester.request_info')}
              </button>
            </div>
          </div>
          
          {/* 响应内容 */}
          <div className={`${styles.responseBox} flex-grow`} ref={contentRef}>
            {responseTab === 'body' && (
              <>
                {isJsonContent(response.data) 
                  ? <JsonRenderer data={response.data} />
                  : (typeof response.data === 'string' 
                    ? response.data
                    : formatJson(JSON.stringify(response.data)))}
                    
              </>
            )}
            
            {responseTab === 'headers' && (
              Object.entries(response.headers).map(([key, value]) => (
                <div key={key}>
                  <span className="text-purple">{key}</span>: {value}
                </div>
              ))
            )}
            
            {responseTab === 'info' && (
              <div className="space-y-2">
                <div className="text-sm">
                  <span className="text-purple font-medium">{t('tools.http_tester.network_mode')}:</span> {networkType === 'local' ? t('tools.http_tester.network_mode_local') : t('tools.http_tester.network_mode_public')}
                  {networkType === 'local' && (
                    <span className="ml-2 text-amber-400 text-xs">
                      <FontAwesomeIcon icon={faInfoCircle} className="mr-1" />
                      {t('tools.http_tester.cors_description')}
                    </span>
                  )}
                </div>
                <div className="text-sm">
                  <span className="text-purple font-medium">{t('tools.http_tester.request_url')}:</span> {url}
                </div>
                <div className="text-sm">
                  <span className="text-purple font-medium">{t('tools.http_tester.request_method')}:</span> {method}
                </div>
                <div className="text-sm">
                  <span className="text-purple font-medium">{t('tools.http_tester.response_result')}:</span> {response.time}ms
                </div>
                <div className="text-sm">
                  <span className="text-purple font-medium">{t('tools.http_tester.response_result')}:</span> {response.size} bytes
                </div>
                {Object.entries(headers).length > 0 && (
                  <div>
                    <div className="text-purple font-medium text-sm mt-4 mb-2">{t('tools.http_tester.request_headers')}</div>
                    <div className="bg-background/40 p-3 rounded text-xs">
                      {headers.filter(h => h.key && h.value).map((header, index) => (
                        <div key={header.id || index}>
                          {header.key}: {header.value}
                        </div>
                      ))}
                    </div>
                  </div>
                )}
                {['POST', 'PUT', 'PATCH'].includes(method) && (
                  <div>
                    <div className="text-purple font-medium text-sm mt-4 mb-2">{t('tools.http_tester.request_body')}</div>
                    <div className="bg-background/40 p-3 rounded text-xs break-all font-mono">
                      {bodyFormat === 'json' ? formatJson(body) : 
                       bodyFormat === 'form' ? 
                         formFields.filter(f => f.key && f.value)
                           .map((field, _index) => `${field.key}=${field.value}`)
                           .join('&') : 
                         body}
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      ) : (
        <div className="flex flex-col items-center justify-center py-20 text-tertiary">
          <FontAwesomeIcon icon={faGlobe} className="text-4xl mb-4 text-purple-glow" />
          <p>{t('tools.http_tester.enter_url')}</p>
        </div>
      )}
      
      {/* Markdown预览模态窗口 */}
      <MarkdownPreview 
        markdown={markdownContent}
        isOpen={showMarkdownPreview}
        onClose={handleCloseMarkdownPreview}
      />
    </div>
  );
};

export default ResponseDisplay;