'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="mx-auto max-w-4xl p-6">
      <h1 className="mb-6 text-2xl font-bold">🔧 Mock API 调试页面</h1>

      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
        {/* 测试按钮 */}
        <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="space-y-2 rounded bg-gray-100 p-4 text-sm">
            <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="mb-4 text-lg font-semibold">Test Results</h2>
        <div className="h-96 overflow-y-auto rounded bg-black p-4 font-mono text-sm text-green-400">
          {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>
  )
}