import React from "react";
import { Link } from "react-router-dom";
import { ArrowRight, Shield } from "lucide-react";

interface TestResultProps {
  testResults: {
    url?: string;
    usingProxy?: boolean;
    proxyUrl?: string;
    client?: boolean;
    restApi?: boolean;
    auth?: boolean;
    database?: boolean;
    errors: string[];
  } | null;
}

const SupabaseConnectionStatus: React.FC<TestResultProps> = ({ testResults }) => {
  if (!testResults) {
    return null;
  }

  return (
    <details className="neuro-flat p-3 text-xs mb-4">
      <summary className="cursor-pointer text-gray-500 font-medium">고급 진단 정보</summary>
      <div className="mt-2 space-y-2">
        <div>
          <p className="font-medium">Supabase URL:</p>
          <p className="break-all bg-gray-100 p-1 rounded">{testResults?.url || '알 수 없음'}</p>
        </div>
        {testResults?.usingProxy && (
          <div>
            <p className="font-medium">CORS 프록시:</p>
            <div className="flex items-center gap-1">
              <Shield className="h-3 w-3 text-blue-500" />
              <p className="break-all text-blue-500">활성화됨 - {testResults.proxyUrl}</p>
            </div>
          </div>
        )}
        <div>
          <p className="font-medium">클라이언트 초기화:</p>
          <p>{testResults?.client ? '성공' : '실패'}</p>
        </div>
        <div>
          <p className="font-medium">브라우저 정보:</p>
          <p className="break-all">{navigator.userAgent}</p>
        </div>
        <div>
          <p className="font-medium">앱 버전:</p>
          <p>1.0.0</p>
        </div>
        {testResults && (
          <div className="border-t pt-2 mt-2">
            <p>REST API: {testResults.restApi ? '✅' : '❌'}</p>
            <p>인증: {testResults.auth ? '✅' : '❌'}</p>
            <p>데이터베이스: {testResults.database ? '✅' : '❌'}</p>
          </div>
        )}
        <div className="text-right pt-1">
          <Link 
            to="/supabase-settings" 
            className="inline-flex items-center text-neuro-income hover:underline"
          >
            <span>Supabase 설정 변경</span>
            <ArrowRight className="h-3 w-3 ml-1" />
          </Link>
        </div>
      </div>
    </details>
  );
};

export default SupabaseConnectionStatus;