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

interface ShutdownStatus {
  isShuttingDown: boolean;
  handlerCount: number;
  registeredHandlers: string[];
}

export default function DatabaseShutdownPage() {
  const [status, setStatus] = useState<ShutdownStatus | 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/test-shutdown?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 testShutdown = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/test-shutdown?action=test');
      const data = await response.json();
      
      if (data.success) {
        setMessage('關閉機制測試成功');
        setError('');
        await fetchStatus(); // 重新獲取狀態
      } else {
        setError(data.error || '測試失敗');
      }
    } catch (err) {
      setError('測試錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
    } finally {
      setLoading(false);
    }
  };

  // 強制關閉測試
  const forceShutdown = async () => {
    if (!confirm('確定要執行強制關閉測試嗎？這可能會影響應用程式運行！')) {
      return;
    }

    try {
      setLoading(true);
      const response = await fetch('/api/test-shutdown?action=force');
      const data = await response.json();
      
      if (data.success) {
        setMessage('強制關閉測試完成');
        setError('');
        await fetchStatus(); // 重新獲取狀態
      } else {
        setError(data.error || '強制關閉測試失敗');
      }
    } catch (err) {
      setError('強制關閉錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
    } finally {
      setLoading(false);
    }
  };

  // 優雅關閉測試
  const gracefulShutdown = async () => {
    if (!confirm('確定要執行優雅關閉測試嗎？這會關閉所有資料庫連線！')) {
      return;
    }

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

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

  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">
            監控和管理資料庫連線的關閉機制
          </p>
        </div>
        <Button 
          onClick={fetchStatus} 
          disabled={loading}
          variant="outline"
        >
          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Database className="h-4 w-4" />}
          重新整理狀態
        </Button>
      </div>

      {/* 狀態顯示 */}
      {status && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Database className="h-5 w-5" />
              關閉狀態
            </CardTitle>
            <CardDescription>
              當前資料庫關閉管理器的運行狀態
            </CardDescription>
          </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">
                <span className="text-sm font-medium">關閉狀態:</span>
                <Badge variant={status.isShuttingDown ? "destructive" : "default"}>
                  {status.isShuttingDown ? "關閉中" : "正常"}
                </Badge>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-sm font-medium">處理器數量:</span>
                <Badge variant="outline">{status.handlerCount}</Badge>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-sm font-medium">狀態:</span>
                <Badge variant={status.isShuttingDown ? "destructive" : "default"}>
                  {status.isShuttingDown ? "異常" : "正常"}
                </Badge>
              </div>
            </div>
            
            <div>
              <span className="text-sm font-medium">已註冊的處理器:</span>
              <div className="mt-2 flex flex-wrap gap-2">
                {status.registeredHandlers.map((handler, index) => (
                  <Badge key={index} variant="secondary">
                    {handler}
                  </Badge>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 操作按鈕 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Power className="h-5 w-5" />
            關閉操作
          </CardTitle>
          <CardDescription>
            測試和管理資料庫關閉機制
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Button 
              onClick={testShutdown} 
              disabled={loading}
              variant="outline"
              className="w-full"
            >
              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <CheckCircle className="h-4 w-4" />}
              測試關閉機制
            </Button>
            
            <Button 
              onClick={forceShutdown} 
              disabled={loading}
              variant="destructive"
              className="w-full"
            >
              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <AlertTriangle className="h-4 w-4" />}
              強制關閉測試
            </Button>
            
            <Button 
              onClick={gracefulShutdown} 
              disabled={loading}
              variant="destructive"
              className="w-full"
            >
              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Power className="h-4 w-4" />}
              優雅關閉測試
            </Button>
          </div>
        </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>
      )}

      {/* 說明資訊 */}
      <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> 執行完整的優雅關閉流程（會實際關閉連線）</p>
          <p>• 當應用程式收到 SIGINT 或 SIGTERM 信號時，會自動執行優雅關閉</p>
          <p>• 關閉管理器會確保所有資料庫連線池都被正確關閉</p>
        </CardContent>
      </Card>
    </div>
  );
}