'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, CheckCircle, AlertTriangle, RefreshCw, Trash2, BarChart3 } from 'lucide-react';

interface ConnectionStats {
  total: number;
  user: number;
  infrastructure: number;
  other: number;
  details: Array<{
    id: number;
    host: string;
    time: number;
    state: string;
    type: 'user' | 'infrastructure' | 'other';
  }>;
}

interface CleanupResult {
  success: boolean;
  message: string;
  data: {
    killedCount: number;
    details: {
      userRealIP?: string;
      infrastructureIPs?: string[];
      cleanedConnections: Array<{
        id: number;
        host: string;
        time: number;
        state: string;
      }>;
    };
  };
}

export default function SmartCleanupTestPage() {
  const [stats, setStats] = useState<ConnectionStats | null>(null);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<string>('');
  const [error, setError] = useState<string>('');

  // 獲取連線統計
  const fetchStats = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/smart-cleanup');
      const data = await response.json();
      
      if (data.success) {
        setStats(data.data.stats);
        setMessage('連線統計更新成功');
        setError('');
      } else {
        setError(data.error || '獲取連線統計失敗');
      }
    } catch (err) {
      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
    } finally {
      setLoading(false);
    }
  };

  // 執行智能清理
  const performSmartCleanup = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/smart-cleanup', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      
      const data: CleanupResult = await response.json();
      
      if (data.success) {
        setMessage(`智能清理完成: ${data.message}`);
        setError('');
        // 重新獲取統計
        await fetchStats();
      } else {
        setError(data.error || '智能清理失敗');
      }
    } catch (err) {
      setError('清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
    } finally {
      setLoading(false);
    }
  };

  // 組件載入時獲取統計
  useEffect(() => {
    fetchStats();
  }, []);

  // 獲取類型顏色
  const getTypeColor = (type: 'user' | 'infrastructure' | 'other') => {
    switch (type) {
      case 'user': return 'default';
      case 'infrastructure': return 'destructive';
      case 'other': return 'secondary';
      default: return 'outline';
    }
  };

  // 獲取類型標籤
  const getTypeLabel = (type: 'user' | 'infrastructure' | 'other') => {
    switch (type) {
      case 'user': return '用戶連線';
      case 'infrastructure': return '基礎設施';
      case 'other': return '其他';
      default: return '未知';
    }
  };

  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">智能連線清理測試</h1>
          <p className="text-muted-foreground">
            智能識別和清理用戶真實 IP 及基礎設施連線
          </p>
        </div>
        <div className="flex gap-2">
          <Button 
            onClick={fetchStats} 
            disabled={loading}
            variant="outline"
          >
            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
            刷新統計
          </Button>
          <Button 
            onClick={performSmartCleanup} 
            disabled={loading}
            variant="destructive"
          >
            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
            智能清理
          </Button>
        </div>
      </div>

      {/* 連線統計概覽 */}
      {stats && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <BarChart3 className="h-5 w-5" />
              連線統計概覽
            </CardTitle>
            <CardDescription>
              當前資料庫連線的分類統計
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="text-center">
                <div className="text-2xl font-bold">{stats.total}</div>
                <div className="text-sm text-muted-foreground">總連線數</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-blue-600">{stats.user}</div>
                <div className="text-sm text-muted-foreground">用戶連線</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-red-600">{stats.infrastructure}</div>
                <div className="text-sm text-muted-foreground">基礎設施</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-gray-600">{stats.other}</div>
                <div className="text-sm text-muted-foreground">其他</div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 連線詳情 */}
      {stats && stats.details.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>連線詳情</CardTitle>
            <CardDescription>
              所有連線的詳細信息
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 max-h-96 overflow-y-auto">
              {stats.details.map((conn, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded">
                  <div className="flex items-center gap-3">
                    <Badge variant={getTypeColor(conn.type)}>
                      {getTypeLabel(conn.type)}
                    </Badge>
                    <span className="font-mono text-sm">ID: {conn.id}</span>
                    <span className="text-sm text-muted-foreground">
                      {conn.host}
                    </span>
                  </div>
                  <div className="flex items-center gap-3">
                    <span className="text-sm">時間: {conn.time}s</span>
                    <span className="text-sm text-muted-foreground">
                      狀態: {conn.state}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* 功能說明 */}
      <Card>
        <CardHeader>
          <CardTitle>智能清理功能</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <h4 className="font-semibold text-blue-600 mb-2">用戶連線清理</h4>
              <ul className="text-sm text-muted-foreground space-y-1">
                <li>• 自動識別你的真實 IP (61-227-253-171)</li>
                <li>• 清理所有來自你 IP 的連線</li>
                <li>• 不影響其他用戶的連線</li>
                <li>• 關閉網站時自動觸發</li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-red-600 mb-2">基礎設施連線清理</h4>
              <ul className="text-sm text-muted-foreground space-y-1">
                <li>• 識別 AWS EC2 實例連線</li>
                <li>• 識別 Vercel 服務器連線</li>
                <li>• 可選清理基礎設施連線</li>
                <li>• 保護網站正常運行</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 使用說明 */}
      <Card>
        <CardHeader>
          <CardTitle>使用說明</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-sm text-muted-foreground">
          <p>• <strong>刷新統計:</strong> 查看當前所有連線的分類統計</p>
          <p>• <strong>智能清理:</strong> 自動識別並清理你的真實 IP 連線</p>
          <p>• <strong>用戶連線:</strong> 來自你真實 IP 的連線，會被優先清理</p>
          <p>• <strong>基礎設施連線:</strong> Vercel/AWS 服務器連線，通常不清理</p>
          <p>• <strong>自動觸發:</strong> 關閉網站時會自動執行智能清理</p>
        </CardContent>
      </Card>

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

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