'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 { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Loader2, Database, AlertTriangle, Trash2, Eye, Zap, Globe } from 'lucide-react';

interface ConnectionDetail {
  ID: number;
  USER: string;
  HOST: string;
  DB: string;
  COMMAND: string;
  TIME: number;
  STATE: string;
  INFO?: string;
}

interface ConnectionStatus {
  ip: string;
  connectionCount: number;
  connections: ConnectionDetail[];
}

interface LocalStats {
  clientIP: string;
  trackedConnections: number;
  connections: Array<{
    connectionId: string;
    createdAt: string;
    lastUsed: string;
    userAgent?: string;
  }>;
}

export default function IPCleanupPage() {
  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus | null>(null);
  const [localStats, setLocalStats] = useState<LocalStats | null>(null);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<string>('');
  const [error, setError] = useState<string>('');
  const [targetIP, setTargetIP] = useState<string>('');

  // 獲取當前 IP 的連線狀態
  const fetchCurrentIPStatus = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/ip-cleanup?action=status');
      const data = await response.json();
      
      if (data.success) {
        setConnectionStatus(data.data);
        setMessage('當前 IP 連線狀態更新成功');
        setError('');
      } else {
        setError(data.error || '獲取當前 IP 連線狀態失敗');
      }
    } catch (err) {
      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
    } finally {
      setLoading(false);
    }
  };

  // 獲取指定 IP 的連線狀態
  const fetchSpecificIPStatus = async () => {
    if (!targetIP.trim()) {
      setError('請輸入目標 IP 地址');
      return;
    }

    try {
      setLoading(true);
      const response = await fetch(`/api/ip-cleanup?action=status-specific&ip=${encodeURIComponent(targetIP)}`);
      const data = await response.json();
      
      if (data.success) {
        setConnectionStatus(data.data);
        setMessage(`指定 IP ${targetIP} 的連線狀態更新成功`);
        setError('');
      } else {
        setError(data.error || '獲取指定 IP 連線狀態失敗');
      }
    } catch (err) {
      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
    } finally {
      setLoading(false);
    }
  };

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

  // 清理當前 IP 的連線
  const cleanupCurrentIP = async () => {
    if (!confirm('確定要清理當前 IP 的所有連線嗎？')) {
      return;
    }

    try {
      setLoading(true);
      const response = await fetch('/api/ip-cleanup', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ action: 'cleanup-current' }),
      });
      
      const data = await response.json();
      
      if (data.success) {
        setMessage(data.message || '當前 IP 連線清理完成');
        setError('');
        await fetchCurrentIPStatus(); // 重新獲取狀態
      } else {
        setError(data.error || '當前 IP 連線清理失敗');
      }
    } catch (err) {
      setError('當前 IP 連線清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
    } finally {
      setLoading(false);
    }
  };

  // 清理指定 IP 的連線
  const cleanupSpecificIP = async () => {
    if (!targetIP.trim()) {
      setError('請輸入目標 IP 地址');
      return;
    }

    if (!confirm(`確定要清理 IP ${targetIP} 的所有連線嗎？`)) {
      return;
    }

    try {
      setLoading(true);
      const response = await fetch('/api/ip-cleanup', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ 
          action: 'cleanup-specific',
          targetIP: targetIP.trim()
        }),
      });
      
      const data = await response.json();
      
      if (data.success) {
        setMessage(data.message || `IP ${targetIP} 連線清理完成`);
        setError('');
        await fetchSpecificIPStatus(); // 重新獲取狀態
      } else {
        setError(data.error || `IP ${targetIP} 連線清理失敗`);
      }
    } catch (err) {
      setError(`IP ${targetIP} 連線清理錯誤: ` + (err instanceof Error ? err.message : '未知錯誤'));
    } finally {
      setLoading(false);
    }
  };

  // 清理本地追蹤的連線
  const cleanupLocalConnections = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/ip-cleanup', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ action: 'cleanup-local' }),
      });
      
      const data = await response.json();
      
      if (data.success) {
        setMessage(data.message || '本地連線清理完成');
        setError('');
        await fetchLocalStats(); // 重新獲取統計
      } else {
        setError(data.error || '本地連線清理失敗');
      }
    } catch (err) {
      setError('本地連線清理錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
    } finally {
      setLoading(false);
    }
  };

  // 組件載入時獲取狀態
  useEffect(() => {
    fetchCurrentIPStatus();
    fetchLocalStats();
  }, []);

  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">IP 連線管理</h1>
          <p className="text-muted-foreground">
            基於 IP 地址的智能連線清理和管理
          </p>
        </div>
        <div className="flex gap-2">
          <Button 
            onClick={fetchCurrentIPStatus} 
            disabled={loading}
            variant="outline"
          >
            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Eye className="h-4 w-4" />}
            當前 IP
          </Button>
          <Button 
            onClick={fetchLocalStats} 
            disabled={loading}
            variant="outline"
          >
            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
            本地統計
          </Button>
        </div>
      </div>

      {/* 當前 IP 連線狀態 */}
      {connectionStatus && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Globe className="h-5 w-5" />
              IP 連線狀態
            </CardTitle>
            <CardDescription>
              IP: {connectionStatus.ip} | 連線數: {connectionStatus.connectionCount}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center gap-4">
              <Badge variant="outline" className="text-lg px-3 py-1">
                連線數: {connectionStatus.connectionCount}
              </Badge>
              <Badge 
                variant={connectionStatus.connectionCount > 5 ? "destructive" : "default"}
                className="text-lg px-3 py-1"
              >
                狀態: {connectionStatus.connectionCount > 5 ? "異常" : "正常"}
              </Badge>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 本地連線統計 */}
      {localStats && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Database className="h-5 w-5" />
              本地連線統計
            </CardTitle>
            <CardDescription>
              客戶端 IP: {localStats.clientIP} | 追蹤連線數: {localStats.trackedConnections}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {localStats.connections.map((conn, index) => (
                <div key={index} className="flex items-center justify-between p-2 border rounded">
                  <div>
                    <p className="text-sm font-medium">連線 ID: {conn.connectionId}</p>
                    <p className="text-xs text-muted-foreground">
                      創建: {new Date(conn.createdAt).toLocaleString()} | 
                      最後使用: {new Date(conn.lastUsed).toLocaleString()}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* 操作按鈕 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Trash2 className="h-5 w-5" />
            IP 連線清理
          </CardTitle>
          <CardDescription>
            清理指定 IP 地址的資料庫連線
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Button 
              onClick={cleanupCurrentIP} 
              disabled={loading}
              variant="destructive"
              className="w-full"
            >
              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
              清理當前 IP 連線
            </Button>
            
            <Button 
              onClick={cleanupLocalConnections} 
              disabled={loading}
              variant="outline"
              className="w-full"
            >
              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
              清理本地追蹤連線
            </Button>
          </div>

          {/* 指定 IP 清理 */}
          <div className="space-y-2">
            <Label htmlFor="targetIP">指定 IP 地址</Label>
            <div className="flex gap-2">
              <Input
                id="targetIP"
                value={targetIP}
                onChange={(e) => setTargetIP(e.target.value)}
                placeholder="例如: 192.168.1.100"
                className="flex-1"
              />
              <Button 
                onClick={fetchSpecificIPStatus} 
                disabled={loading || !targetIP.trim()}
                variant="outline"
              >
                <Eye className="h-4 w-4" />
              </Button>
              <Button 
                onClick={cleanupSpecificIP} 
                disabled={loading || !targetIP.trim()}
                variant="destructive"
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 連線詳情列表 */}
      {connectionStatus && connectionStatus.connections.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>連線詳情列表</CardTitle>
            <CardDescription>
              IP {connectionStatus.ip} 的所有資料庫連線
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 max-h-96 overflow-y-auto">
              {connectionStatus.connections.map((conn, index) => (
                <div key={conn.ID} className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-4">
                    <Badge variant="outline">#{conn.ID}</Badge>
                    <div>
                      <p className="text-sm font-medium">
                        用戶: {conn.USER} | 主機: {conn.HOST}
                      </p>
                      <p className="text-sm text-muted-foreground">
                        資料庫: {conn.DB} | 命令: {conn.COMMAND}
                      </p>
                      <p className="text-sm text-muted-foreground">
                        時間: {conn.TIME}s | 狀態: {conn.STATE}
                      </p>
                      {conn.INFO && (
                        <p className="text-xs text-muted-foreground mt-1">
                          查詢: {conn.INFO.length > 100 ? conn.INFO.substring(0, 100) + '...' : conn.INFO}
                        </p>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

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

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

      {/* 使用說明 */}
      <Card>
        <CardHeader>
          <CardTitle>IP 連線管理說明</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-sm text-muted-foreground">
          <p>• <strong>當前 IP 連線:</strong> 顯示和清理當前訪問者的所有資料庫連線</p>
          <p>• <strong>指定 IP 連線:</strong> 輸入特定 IP 地址來查看和清理該 IP 的連線</p>
          <p>• <strong>本地追蹤連線:</strong> 清理應用程式內部追蹤的連線記錄</p>
          <p>• <strong>智能清理:</strong> 只清理指定 IP 的連線，不影響其他用戶</p>
          <p>• <strong>關閉網站時:</strong> 系統會自動清理當前 IP 的所有連線</p>
        </CardContent>
      </Card>
    </div>
  );
}