'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, AlertTriangle, Trash2, Eye, Zap, Skull } from 'lucide-react';

interface ConnectionStatus {
  currentConnections: number;
  maxConnections: number;
  usagePercentage: number;
  connectionDetails: Array<{
    ID: number;
    USER: string;
    HOST: string;
    DB: string;
    COMMAND: string;
    TIME: number;
    STATE: string;
    INFO?: string;
  }>;
  connectionCount: number;
}

export default function UltimateKillPage() {
  const [status, setStatus] = useState<ConnectionStatus | null>(null);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<string>('');
  const [error, setError] = useState<string>('');

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

  // 終極清理 - 殺死所有連線
  const ultimateKill = async () => {
    if (!confirm('確定要執行終極清理嗎？這會強制殺死所有資料庫連線！')) {
      return;
    }

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

  // 強制重啟資料庫連線
  const forceRestart = async () => {
    if (!confirm('確定要強制重啟資料庫連線嗎？這會先殺死所有連線然後重新建立！')) {
      return;
    }

    try {
      setLoading(true);
      const response = await fetch('/api/ultimate-kill', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ action: 'restart' }),
      });
      
      const data = await response.json();
      
      if (data.success) {
        setMessage(data.message || '強制重啟完成');
        setError('');
        await fetchStatus(); // 重新獲取狀態
      } else {
        setError(data.error || '強制重啟失敗');
      }
    } catch (err) {
      setError('強制重啟錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
    } finally {
      setLoading(false);
    }
  };

  // 組件載入時獲取狀態
  useEffect(() => {
    fetchStatus();
    
    // 每10秒自動更新狀態
    const interval = setInterval(fetchStatus, 10000);
    return () => clearInterval(interval);
  }, []);

  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 text-red-600">終極連線清理</h1>
          <p className="text-muted-foreground">
            強制殺死所有資料庫連線 - 最後手段
          </p>
        </div>
        <Button 
          onClick={fetchStatus} 
          disabled={loading}
          variant="outline"
        >
          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Eye className="h-4 w-4" />}
          重新整理
        </Button>
      </div>

      {/* 嚴重警告 */}
      <Alert variant="destructive">
        <Skull className="h-4 w-4" />
        <AlertDescription>
          <strong>嚴重警告：</strong> 這些操作會立即強制殺死所有資料庫連線，可能導致正在運行的應用程式崩潰。請確保沒有重要操作正在進行！
        </AlertDescription>
      </Alert>

      {/* 連線狀態概覽 */}
      {status && (
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center gap-2">
                <Database className="h-5 w-5 text-blue-500" />
                <div>
                  <p className="text-sm font-medium text-muted-foreground">總連線數</p>
                  <p className="text-2xl font-bold">{status.currentConnections}</p>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center gap-2">
                <AlertTriangle className="h-5 w-5 text-yellow-500" />
                <div>
                  <p className="text-sm font-medium text-muted-foreground">最大連線數</p>
                  <p className="text-2xl font-bold">{status.maxConnections}</p>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center gap-2">
                <Zap className="h-5 w-5 text-red-500" />
                <div>
                  <p className="text-sm font-medium text-muted-foreground">使用率</p>
                  <p className="text-2xl font-bold">{status.usagePercentage.toFixed(1)}%</p>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center gap-2">
                <Trash2 className="h-5 w-5 text-green-500" />
                <div>
                  <p className="text-sm font-medium text-muted-foreground">狀態</p>
                  <p className="text-2xl font-bold">
                    {status.connectionCount <= 1 ? '正常' : '異常'}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      {/* 終極操作 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-red-600">
            <Skull className="h-5 w-5" />
            終極操作
          </CardTitle>
          <CardDescription>
            強制殺死所有資料庫連線 - 最後手段
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Button 
              onClick={ultimateKill} 
              disabled={loading}
              variant="destructive"
              className="w-full"
            >
              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Skull className="h-4 w-4" />}
              終極清理 - 殺死所有連線
            </Button>
            
            <Button 
              onClick={forceRestart} 
              disabled={loading}
              variant="destructive"
              className="w-full"
            >
              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Zap className="h-4 w-4" />}
              強制重啟資料庫連線
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 連線詳情列表 */}
      {status && status.connectionDetails.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>連線詳情列表</CardTitle>
            <CardDescription>
              當前所有資料庫連線的詳細信息
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 max-h-96 overflow-y-auto">
              {status.connectionDetails.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>終極清理說明</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-sm text-muted-foreground">
          <p>• <strong>終極清理:</strong> 直接殺死資料庫中的所有連線，立即生效</p>
          <p>• <strong>強制重啟:</strong> 先殺死所有連線，等待系統穩定，然後重新建立連線</p>
          <p>• <strong>自動更新:</strong> 頁面每10秒自動更新連線狀態</p>
          <p>• <strong>最後手段:</strong> 這些操作是最後的手段，會立即終止所有連線</p>
          <p>• 建議先嘗試「終極清理」，如果問題持續再使用「強制重啟」</p>
        </CardContent>
      </Card>
    </div>
  );
}
