"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"

export default function DebugMockPage() {
  const [testResults, setTestResults] = useState<string[]>([])

  const addResult = (message: string) => {
    setTestResults(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`])
  }

  const testDirectRequest = async () => {
    try {
      addResult("🔥 开始测试直接请求...")
      
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: 'user@example.com',
          password: 'password'
        })
      })
      
      const result = await response.json()
      addResult(`✅ 直接请求成功: ${JSON.stringify(result)}`)
    } catch (error) {
      addResult(`❌ 直接请求失败: ${error}`)
    }
  }

  const testMockRequest = async () => {
    try {
      addResult("🎭 开始测试 Mock 请求...")
      
      // 这里使用你定义的服务 URL
      const baseUrl = process.env.NEXT_PUBLIC_AUTH_API_URL || 'http://localhost:3000/api/auth'
      
      const response = await fetch(`${baseUrl}/login`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: 'user@example.com',
          password: 'password'
        })
      })
      
      const result = await response.json()
      addResult(`✅ Mock 请求成功: ${JSON.stringify(result)}`)
    } catch (error) {
      addResult(`❌ Mock 请求失败: ${error}`)
    }
  }

  const testServiceWorker = () => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(registrations => {
        const mswWorker = registrations.find(reg => 
          reg.active?.scriptURL.includes('mockServiceWorker')
        )
        
        if (mswWorker) {
          addResult("✅ MSW Service Worker 已注册")
          addResult(`📍 Worker URL: ${mswWorker.active?.scriptURL}`)
        } else {
          addResult("❌ MSW Service Worker 未找到")
        }
      })
    } else {
      addResult("❌ 浏览器不支持 Service Worker")
    }
  }

  const clearResults = () => {
    setTestResults([])
  }

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">🔧 Mock API 调试页面</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* 测试按钮 */}
        <div className="space-y-4">
          <h2 className="text-lg font-semibold">test options</h2>
          
          <Button onClick={testServiceWorker} className="w-full">
            检查 Service Worker
          </Button>
          
          <Button onClick={testDirectRequest} className="w-full">
            Testing direct API requests Testing direct API requests Testing direct API requests
                                </Button>
          
          <Button onClick={testMockRequest} className="w-full">
            Testing Mock API Requests Testing Mock API Requests Testing Mock API Requests Testing Mock API Requests
                                </Button>
          
          <Button onClick={clearResults} variant="secondary" className="w-full">
            Clear result
                                </Button>
        </div>

        {/* 环境信息 */}
        <div className="space-y-4">
          <h2 className="text-lg font-semibold">Environmental information</h2>
          <div className="bg-gray-100 p-4 rounded text-sm space-y-2">
            <div>
              <strong>NODE_ENV:</strong> {process.env.NODE_ENV}
            </div>
            <div>
              <strong>ENABLE_MOCK:</strong> {process.env.NEXT_PUBLIC_ENABLE_MOCK}
            </div>
            <div>
              <strong>AUTH_API_URL:</strong> {process.env.NEXT_PUBLIC_AUTH_API_URL || '未设置'}
            </div>
            <div>
              <strong>Service Worker支持:</strong> {'serviceWorker' in navigator ? '是' : '否'}
            </div>
          </div>
        </div>
      </div>

      {/* 测试结果 */}
      <div className="mt-8">
        <h2 className="text-lg font-semibold mb-4">Test Results</h2>
        <div className="bg-black text-green-400 p-4 rounded h-96 overflow-y-auto font-mono text-sm">
          {testResults.length === 0 ? (
            <div className="text-gray-500">Waiting for the test results...</div>
          ) : (
            testResults.map((result, index) => (
              <div key={index} className="mb-1">
                {result}
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  )
}