'use client';

import React, { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Loader2, Database, Eye, RefreshCw, AlertTriangle, CheckCircle } from 'lucide-react';

interface VercelIPInfo {
  smartDetection: {
    detectedIP: string;
    confidence: 'high' | 'medium' | 'low';
    source: string;
    isPublicIP: boolean;
    allCandidates: string[];
    isInfrastructureIP?: boolean;
    isUserRealIP?: boolean;
    infrastructureIPs?: string[];
    userRealIPs?: string[];
  };
  headers: Record<string, string | null>;
  nextRequestIP: string | undefined;
  env: Record<string, string | undefined>;
  allHeaders: Record<string, string>;
}

export default function VercelIPDebugPage() {
  const [ipInfo, setIpInfo] = useState<VercelIPInfo | null>(null);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<string>('');
  const [error, setError] = useState<string>('');

  // 獲取 IP 調試信息
  const fetchIPInfo = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/debug-ip');
      const data = await response.json();
      
      if (data.success) {
        setIpInfo(data.data);
        
        if (data.data.smartDetection) {
          const smartDetection = data.data.smartDetection;
          setMessage(`Vercel IP 偵測結果: ${smartDetection.detectedIP} (可信度: ${smartDetection.confidence}, 來源: ${smartDetection.source})`);
        } else {
          setMessage('IP 調試信息更新成功');
        }
        setError('');
      } else {
        setError(data.error || '獲取 IP 調試信息失敗');
      }
    } catch (err) {
      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
    } finally {
      setLoading(false);
    }
  };

  // 組件載入時獲取 IP 信息
  useEffect(() => {
    fetchIPInfo();
  }, []);

  // 檢查是否為基礎設施 IP
  const isInfrastructureIP = (ip: string): boolean => {
    if (!ip) return false;
    return ip.includes('ec2-') && ip.includes('.amazonaws.com');
  };

  // 檢查是否為用戶真實 IP
  const isUserRealIP = (ip: string): boolean => {
    if (!ip || ip === 'unknown') return false;
    return !isInfrastructureIP(ip) && ip !== '::1' && ip !== '127.0.0.1';
  };

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Vercel IP 調試工具</h1>
          <p className="text-muted-foreground">
            專門用於調試 Vercel 部署環境中的 IP 偵測問題
          </p>
        </div>
        <Button 
          onClick={fetchIPInfo} 
          disabled={loading}
          variant="outline"
        >
          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
          重新整理
        </Button>
      </div>

      {/* 智能偵測結果 */}
      {ipInfo?.smartDetection && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Eye className="h-5 w-5" />
              智能 IP 偵測結果
            </CardTitle>
            <CardDescription>
              系統智能偵測的客戶端 IP 地址（已過濾基礎設施 IP）
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center gap-4">
              <Badge 
                variant={
                  isUserRealIP(ipInfo.smartDetection.detectedIP) ? "default" : 
                  isInfrastructureIP(ipInfo.smartDetection.detectedIP) ? "destructive" : "secondary"
                } 
                className="text-lg px-3 py-1"
              >
                {ipInfo.smartDetection.detectedIP}
              </Badge>
              <Badge 
                variant={
                  ipInfo.smartDetection.confidence === 'high' ? "default" :
                  ipInfo.smartDetection.confidence === 'medium' ? "secondary" : "destructive"
                }
                className="text-lg px-3 py-1"
              >
                可信度: {ipInfo.smartDetection.confidence}
              </Badge>
              <Badge variant="outline" className="text-lg px-3 py-1">
                來源: {ipInfo.smartDetection.source}
              </Badge>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <p className="text-sm font-medium mb-2">用戶真實 IP:</p>
                <div className="flex flex-wrap gap-2">
                  {ipInfo.smartDetection.userRealIPs?.map((ip, index) => (
                    <Badge 
                      key={index} 
                      variant="default"
                      className="text-sm"
                    >
                      {ip}
                    </Badge>
                  )) || <span className="text-muted-foreground text-sm">無</span>}
                </div>
              </div>
              
              <div>
                <p className="text-sm font-medium mb-2">基礎設施 IP (已過濾):</p>
                <div className="flex flex-wrap gap-2">
                  {ipInfo.smartDetection.infrastructureIPs?.map((ip, index) => (
                    <Badge 
                      key={index} 
                      variant="destructive"
                      className="text-sm"
                    >
                      {ip}
                    </Badge>
                  )) || <span className="text-muted-foreground text-sm">無</span>}
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 請求標頭分析 */}
      {ipInfo && (
        <Card>
          <CardHeader>
            <CardTitle>請求標頭分析</CardTitle>
            <CardDescription>
              分析各種 HTTP 標頭中的 IP 信息
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {Object.entries(ipInfo.headers).map(([key, value]) => {
                if (!value) return null;
                
                const isInfra = isInfrastructureIP(value);
                const isUser = isUserRealIP(value);
                
                return (
                  <div key={key} className="flex items-center justify-between p-3 border rounded">
                    <div className="flex-1">
                      <span className="font-medium text-sm">{key}:</span>
                      <div className="mt-1">
                        <Badge 
                          variant={
                            isUser ? "default" : 
                            isInfra ? "destructive" : "outline"
                          }
                          className="text-sm"
                        >
                          {value}
                        </Badge>
                        <div className="flex gap-2 mt-1">
                          {isUser && <Badge variant="default" className="text-xs">用戶真實 IP</Badge>}
                          {isInfra && <Badge variant="destructive" className="text-xs">基礎設施 IP</Badge>}
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>
      )}

      {/* 環境信息 */}
      {ipInfo && (
        <Card>
          <CardHeader>
            <CardTitle>部署環境信息</CardTitle>
            <CardDescription>
              Vercel 部署環境相關信息
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {Object.entries(ipInfo.env).map(([key, value]) => (
                <div key={key} className="flex items-center justify-between p-2 border rounded">
                  <span className="font-medium text-sm">{key}:</span>
                  <span className="text-sm text-muted-foreground">
                    {value || 'undefined'}
                  </span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* 問題診斷 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5" />
            問題診斷
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {ipInfo?.smartDetection && (
            <>
              {isInfrastructureIP(ipInfo.smartDetection.detectedIP) && (
                <Alert variant="destructive">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertDescription>
                    <strong>問題:</strong> 偵測到的是 Vercel/AWS 基礎設施 IP，不是用戶真實 IP。
                    <br />
                    <strong>解決方案:</strong> 檢查 x-forwarded-for 標頭中是否包含用戶真實 IP。
                  </AlertDescription>
                </Alert>
              )}
              
              {isUserRealIP(ipInfo.smartDetection.detectedIP) && (
                <Alert>
                  <CheckCircle className="h-4 w-4" />
                  <AlertDescription>
                    <strong>正常:</strong> 成功偵測到用戶真實 IP。
                  </AlertDescription>
                </Alert>
              )}
              
              {!isUserRealIP(ipInfo.smartDetection.detectedIP) && !isInfrastructureIP(ipInfo.smartDetection.detectedIP) && (
                <Alert variant="destructive">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertDescription>
                    <strong>問題:</strong> 無法偵測到有效的用戶 IP。
                    <br />
                    <strong>可能原因:</strong> 代理配置問題或網路環境限制。
                  </AlertDescription>
                </Alert>
              )}
            </>
          )}
        </CardContent>
      </Card>

      {/* 使用說明 */}
      <Card>
        <CardHeader>
          <CardTitle>使用說明</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-sm text-muted-foreground">
          <p>• <strong>基礎設施 IP:</strong> Vercel/AWS 的服務器 IP，不是用戶真實 IP</p>
          <p>• <strong>用戶真實 IP:</strong> 實際訪問網站的用戶 IP 地址</p>
          <p>• <strong>x-forwarded-for:</strong> 通常包含用戶真實 IP，格式為 "用戶IP,代理IP"</p>
          <p>• <strong>問題排查:</strong> 如果偵測到基礎設施 IP，檢查代理配置</p>
        </CardContent>
      </Card>

      {/* 訊息顯示 */}
      {message && (
        <Alert>
          <Database className="h-4 w-4" />
          <AlertDescription>{message}</AlertDescription>
        </Alert>
      )}

      {error && (
        <Alert variant="destructive">
          <Eye className="h-4 w-4" />
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}
    </div>
  );
}