
import React from 'react';
import { Info } from "lucide-react";
import { Button } from "@/components/ui/button";
import { TestResults } from '@/lib/supabase/tests/types';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger
} from "@/components/ui/collapsible";

interface DebugInfoCollapsibleProps {
  testResults: TestResults;
  showDebug: boolean;
  setShowDebug: (show: boolean) => void;
}

const DebugInfoCollapsible: React.FC<DebugInfoCollapsibleProps> = ({
  testResults,
  showDebug,
  setShowDebug
}) => {
  if (!testResults.debugInfo) return null;
  
  return (
    <Collapsible
      open={showDebug}
      onOpenChange={setShowDebug}
      className="border border-gray-200 rounded-md mt-4"
    >
      <div className="flex items-center justify-between px-4 py-2 bg-gray-50">
        <h4 className="text-sm font-medium">고급 진단 정보</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm" className="h-7 w-7 p-0">
            <Info className="h-4 w-4" />
            <span className="sr-only">
              {showDebug ? '진단 정보 숨기기' : '진단 정보 표시'}
            </span>
          </Button>
        </CollapsibleTrigger>
      </div>
      
      <CollapsibleContent className="px-4 py-2 text-xs">
        <div className="space-y-2">
          <div>
            <span className="font-medium">Supabase URL:</span>
            <div className="mt-1 bg-gray-100 p-1 rounded break-all">
              {testResults.url}
            </div>
          </div>
          
          {testResults.usingProxy && (
            <div>
              <span className="font-medium">프록시 URL:</span>
              <div className="mt-1 bg-gray-100 p-1 rounded break-all">
                {testResults.proxyUrl}
              </div>
              <div className="mt-1">
                프록시 유형: {testResults.proxyType || 'corsproxy.io'}
              </div>
            </div>
          )}
          
          <div>
            <span className="font-medium">클라이언트 초기화:</span>
            <div className="mt-1 text-green-600">
              {testResults.client ? '성공' : '실패'}
            </div>
          </div>
          
          {testResults.debugInfo.lastErrorDetails && (
            <div>
              <span className="font-medium">마지막 오류 상세:</span>
              <div className="mt-1 bg-red-50 p-1 rounded break-all text-red-600">
                {testResults.debugInfo.lastErrorDetails}
              </div>
            </div>
          )}
          
          <div>
            <span className="font-medium">브라우저 정보:</span>
            <div className="mt-1 bg-gray-100 p-1 rounded break-all">
              {testResults.debugInfo.browserInfo}
            </div>
          </div>
          
          <div>
            <span className="font-medium">테스트 시간:</span>
            <div className="mt-1">
              {new Date(testResults.debugInfo.timestamp).toLocaleString()}
            </div>
          </div>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
};

export default DebugInfoCollapsible;
