"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { RefreshCw, Shield, AlertTriangle, CheckCircle, Info, Cloud, Server } from "lucide-react"

interface DiagnosticData {
  timestamp: string
  environment: string
  url: string
  ipAnalysis: {
    xForwardedFor: string | null
    xRealIp: string | null
    xClientIp: string | null
    cfConnectingIp: string | null
    forwarded: string | null
    xOriginalForwardedFor: string | null
    analysis: {
      hasCloudflare: boolean
      hasXForwardedFor: boolean
      hasXRealIp: boolean
      hasForwarded: boolean
      recommendedIpSource: string
      recommendedIp: string
    }
  }
  isCloudflare: {
    hasCfConnectingIp: boolean
    hasCfRay: boolean
    hasCfVisitor: boolean
    hasCfIpCountry: boolean
    cfRay: string | null
    cfCountry: string | null
    cfVisitor: string | null
  }
  proxyInfo: {
    hasNginxProxy: boolean
    has1Panel: boolean
    nginxProxyIp: string | null
    panelClientIp: string | null
  }
  ipChain: {
    xForwardedForChain: string[]
    recommendedClientIp: string
  }
  ipHeaders: Record<string, string | null>
  otherHeaders: Record<string, string | null>
  allHeaders: Record<string, string>
  recommendations: {
    primaryIpSource: string
    primaryIp: string
    isCloudflareSetup: boolean
    isProxySetup: boolean
    suggestedConfig: string[]
  }
}

export default function IpDiagnosticPage() {
  const [diagnosticData, setDiagnosticData] = useState<DiagnosticData | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  const fetchDiagnosticData = async () => {
    setLoading(true)
    setError(null)
    try {
      const response = await fetch('/api/ip-diagnostic')
      if (!response.ok) {
        throw new Error('無法獲取診斷數據')
      }
      const data = await response.json()
      setDiagnosticData(data)
    } catch (error) {
      console.error("無法獲取診斷數據:", error)
      setError("無法獲取診斷數據")
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchDiagnosticData()
  }, [])

  if (loading) {
    return (
      <div className="container mx-auto p-6">
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="flex items-center gap-2">
            <RefreshCw className="w-4 h-4 animate-spin" />
            <span>載入診斷數據中...</span>
          </div>
        </div>
      </div>
    )
  }

  if (error || !diagnosticData) {
    return (
      <div className="container mx-auto p-6">
        <Card className="border-red-200 bg-red-50">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-red-600">
              <AlertTriangle className="w-5 h-5" />
              診斷失敗
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-red-600">{error}</p>
            <Button onClick={fetchDiagnosticData} className="mt-4">
              <RefreshCw className="w-4 h-4 mr-2" />
              重試
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold">IP 診斷工具</h1>
        <Button onClick={fetchDiagnosticData} variant="outline">
          <RefreshCw className="w-4 h-4 mr-2" />
          刷新診斷
        </Button>
      </div>

      {/* 環境檢測結果 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Info className="w-5 h-5" />
            環境檢測結果
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="flex items-center gap-2">
              <Cloud className="w-4 h-4" />
              <span className="text-sm font-medium">Cloudflare:</span>
              <Badge variant={diagnosticData.isCloudflare.hasCfConnectingIp ? "default" : "secondary"}>
                {diagnosticData.isCloudflare.hasCfConnectingIp ? "檢測到" : "未檢測到"}
              </Badge>
            </div>
            <div className="flex items-center gap-2">
              <Server className="w-4 h-4" />
              <span className="text-sm font-medium">代理服務器:</span>
              <Badge variant={diagnosticData.proxyInfo.hasNginxProxy || diagnosticData.proxyInfo.has1Panel ? "default" : "secondary"}>
                {diagnosticData.proxyInfo.hasNginxProxy || diagnosticData.proxyInfo.has1Panel ? "檢測到" : "未檢測到"}
              </Badge>
            </div>
            <div className="flex items-center gap-2">
              <Shield className="w-4 h-4" />
              <span className="text-sm font-medium">IP來源:</span>
              <Badge variant="default">
                {diagnosticData.recommendations.primaryIpSource}
              </Badge>
            </div>
          </div>

          {/* 推薦的IP */}
          <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
            <h3 className="font-medium text-blue-900 mb-2">推薦使用的客戶端IP</h3>
            <p className="text-lg font-mono text-blue-800">
              {diagnosticData.recommendations.primaryIp}
            </p>
            <p className="text-sm text-blue-600 mt-1">
              來源: {diagnosticData.recommendations.primaryIpSource}
            </p>
          </div>
        </CardContent>
      </Card>

      {/* Cloudflare 信息 */}
      {diagnosticData.isCloudflare.hasCfConnectingIp && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Cloud className="w-5 h-5 text-blue-500" />
              Cloudflare 信息
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="text-sm font-medium text-gray-500">CF-Connecting-IP</label>
                <p className="text-sm bg-gray-100 p-2 rounded font-mono">
                  {diagnosticData.ipAnalysis.cfConnectingIp || 'null'}
                </p>
              </div>
              <div>
                <label className="text-sm font-medium text-gray-500">CF-Ray</label>
                <p className="text-sm bg-gray-100 p-2 rounded">
                  {diagnosticData.isCloudflare.cfRay || 'null'}
                </p>
              </div>
              <div>
                <label className="text-sm font-medium text-gray-500">CF-Country</label>
                <p className="text-sm bg-gray-100 p-2 rounded">
                  {diagnosticData.isCloudflare.cfCountry || 'null'}
                </p>
              </div>
              <div>
                <label className="text-sm font-medium text-gray-500">CF-Visitor</label>
                <p className="text-sm bg-gray-100 p-2 rounded">
                  {diagnosticData.isCloudflare.cfVisitor || 'null'}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 代理信息 */}
      {(diagnosticData.proxyInfo.hasNginxProxy || diagnosticData.proxyInfo.has1Panel) && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Server className="w-5 h-5 text-green-500" />
              代理服務器信息
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {diagnosticData.proxyInfo.hasNginxProxy && (
              <div>
                <label className="text-sm font-medium text-gray-500">Nginx Proxy Real IP</label>
                <p className="text-sm bg-gray-100 p-2 rounded font-mono">
                  {diagnosticData.proxyInfo.nginxProxyIp || 'null'}
                </p>
              </div>
            )}
            {diagnosticData.proxyInfo.has1Panel && (
              <div>
                <label className="text-sm font-medium text-gray-500">1Panel Client IP</label>
                <p className="text-sm bg-gray-100 p-2 rounded font-mono">
                  {diagnosticData.proxyInfo.panelClientIp || 'null'}
                </p>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* IP鏈分析 */}
      <Card>
        <CardHeader>
          <CardTitle>IP 鏈分析</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <label className="text-sm font-medium text-gray-500">X-Forwarded-For 鏈</label>
            {diagnosticData.ipChain.xForwardedForChain.length > 0 ? (
              <div className="mt-1 space-y-1">
                {diagnosticData.ipChain.xForwardedForChain.map((ip, index) => (
                  <div key={index} className="flex items-center gap-2 text-sm bg-gray-100 p-2 rounded">
                    <Badge variant={index === 0 ? "default" : "outline"}>
                      {index === 0 ? "客戶端" : `代理${index}`}
                    </Badge>
                    <span className="font-mono">{ip}</span>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-sm text-gray-500 mt-1">無 X-Forwarded-For 頭部</p>
            )}
          </div>
        </CardContent>
      </Card>

      {/* 所有IP相關頭部 */}
      <Card>
        <CardHeader>
          <CardTitle>所有 IP 相關頭部</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2 max-h-80 overflow-y-auto">
            {Object.entries(diagnosticData.ipHeaders).map(([key, value]) => (
              <div key={key} className="flex items-start gap-2 text-sm bg-gray-100 p-2 rounded">
                <span className="font-medium text-blue-600 min-w-32">{key}:</span>
                <span className="font-mono text-gray-800 flex-1">{value || 'null'}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 配置建議 */}
      <Card>
        <CardHeader>
          <CardTitle>配置建議</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {diagnosticData.recommendations.suggestedConfig.map((suggestion, index) => (
              <div key={index} className="flex items-start gap-2 p-3 bg-yellow-50 border border-yellow-200 rounded">
                <Info className="w-4 h-4 text-yellow-600 mt-0.5 flex-shrink-0" />
                <p className="text-sm text-yellow-800">{suggestion}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 完整頭部列表 */}
      <Card>
        <CardHeader>
          <CardTitle>完整 HTTP 頭部列表</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2 max-h-96 overflow-y-auto">
            {Object.entries(diagnosticData.allHeaders).map(([key, value]) => (
              <div key={key} className="flex items-start gap-2 text-sm bg-gray-100 p-2 rounded">
                <span className="font-medium text-blue-600 min-w-40">{key}:</span>
                <span className="text-gray-800 flex-1 break-all">{value}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 使用說明 */}
      <Card>
        <CardHeader>
          <CardTitle>使用說明</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-sm text-gray-600">
          <p>1. 查看上面的診斷結果，確認你的環境類型（Cloudflare、代理、直接連接）</p>
          <p>2. 檢查「推薦使用的客戶端IP」是否為你的真實IP (114.33.18.13)</p>
          <p>3. 如果不是，請將診斷結果截圖發給我，我會根據實際的頭部信息調整IP檢測邏輯</p>
          <p>4. 特別注意 X-Forwarded-For 鏈和 Cloudflare 相關頭部</p>
        </CardContent>
      </Card>
    </div>
  )
}