'use client';

// =====================================================
// 資料庫監控組件
// =====================================================

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

interface DatabaseStatus {
  isEnabled: boolean;
  currentDatabase: 'master' | 'slave';
  masterHealthy: boolean;
  slaveHealthy: boolean;
  lastHealthCheck: string;
  consecutiveFailures: number;
  uptime: number;
  timestamp: string;
}

interface DatabaseMonitorProps {
  className?: string;
}

export function DatabaseMonitor({ className }: DatabaseMonitorProps) {
  const [status, setStatus] = useState<DatabaseStatus | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [switching, setSwitching] = useState(false);

  // 獲取資料庫狀態
  const fetchStatus = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const response = await fetch('/api/admin/database-status');
      const data = await response.json();
      
      if (data.success) {
        setStatus(data.data);
      } else {
        setError(data.message);
      }
    } catch (err) {
      setError('無法連接到監控服務');
      console.error('獲取資料庫狀態失敗:', err);
    } finally {
      setLoading(false);
    }
  };

  // 切換資料庫
  const switchDatabase = async (database: 'master' | 'slave') => {
    try {
      setSwitching(true);
      
      const response = await fetch('/api/admin/database-status', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          action: 'switch',
          database: database
        })
      });
      
      const data = await response.json();
      
      if (data.success) {
        // 重新獲取狀態
        await fetchStatus();
      } else {
        setError(data.message);
      }
    } catch (err) {
      setError('切換資料庫失敗');
      console.error('切換資料庫失敗:', err);
    } finally {
      setSwitching(false);
    }
  };

  // 格式化時間
  const formatTime = (timestamp: string) => {
    return new Date(timestamp).toLocaleString('zh-TW');
  };

  // 格式化運行時間
  const formatUptime = (seconds: number) => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = Math.floor(seconds % 60);
    return `${hours}時${minutes}分${secs}秒`;
  };

  // 組件掛載時獲取狀態
  useEffect(() => {
    fetchStatus();
    
    // 每30秒自動刷新
    const interval = setInterval(fetchStatus, 30000);
    
    return () => clearInterval(interval);
  }, []);

  if (loading) {
    return (
      <Card className={className}>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Database className="h-5 w-5" />
            資料庫監控
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-center py-8">
            <RefreshCw className="h-6 w-6 animate-spin" />
            <span className="ml-2">載入中...</span>
          </div>
        </CardContent>
      </Card>
    );
  }

  if (error) {
    return (
      <Card className={className}>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Database className="h-5 w-5" />
            資料庫監控
          </CardTitle>
        </CardHeader>
        <CardContent>
          <Alert variant="destructive">
            <AlertTriangle className="h-4 w-4" />
            <AlertDescription>{error}</AlertDescription>
          </Alert>
          <Button 
            onClick={fetchStatus} 
            variant="outline" 
            className="mt-4"
          >
            <RefreshCw className="h-4 w-4 mr-2" />
            重新載入
          </Button>
        </CardContent>
      </Card>
    );
  }

  if (!status) {
    return (
      <Card className={className}>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Database className="h-5 w-5" />
            資料庫監控
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p>無法獲取資料庫狀態</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Database className="h-5 w-5" />
            資料庫監控
          </div>
          <Button 
            onClick={fetchStatus} 
            variant="outline" 
            size="sm"
            disabled={loading}
          >
            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
            刷新
          </Button>
        </CardTitle>
        <CardDescription>
          監控主機和備機資料庫的連接狀態
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* 整體狀態 */}
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium">備援狀態</span>
          <Badge variant={status.isEnabled ? "default" : "secondary"}>
            {status.isEnabled ? "啟用" : "停用"}
          </Badge>
        </div>

        {/* 當前資料庫 */}
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium">當前資料庫</span>
          <Badge variant={status.currentDatabase === 'master' ? "default" : "secondary"}>
            {status.currentDatabase === 'master' ? "主機" : "備機"}
          </Badge>
        </div>

        {/* 主機狀態 */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Server className="h-4 w-4" />
              <span className="text-sm font-medium">主機資料庫</span>
            </div>
            <div className="flex items-center gap-2">
              {status.masterHealthy ? (
                <CheckCircle className="h-4 w-4 text-green-500" />
              ) : (
                <AlertTriangle className="h-4 w-4 text-red-500" />
              )}
              <Badge variant={status.masterHealthy ? "default" : "destructive"}>
                {status.masterHealthy ? "正常" : "異常"}
              </Badge>
            </div>
          </div>
          {status.masterHealthy && (
            <Button
              onClick={() => switchDatabase('master')}
              variant="outline"
              size="sm"
              disabled={switching || status.currentDatabase === 'master'}
              className="w-full"
            >
              切換到主機
            </Button>
          )}
        </div>

        {/* 備機狀態 */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Server className="h-4 w-4" />
              <span className="text-sm font-medium">備機資料庫</span>
            </div>
            <div className="flex items-center gap-2">
              {status.slaveHealthy ? (
                <CheckCircle className="h-4 w-4 text-green-500" />
              ) : (
                <AlertTriangle className="h-4 w-4 text-red-500" />
              )}
              <Badge variant={status.slaveHealthy ? "default" : "destructive"}>
                {status.slaveHealthy ? "正常" : "異常"}
              </Badge>
            </div>
          </div>
          {status.slaveHealthy && (
            <Button
              onClick={() => switchDatabase('slave')}
              variant="outline"
              size="sm"
              disabled={switching || status.currentDatabase === 'slave'}
              className="w-full"
            >
              切換到備機
            </Button>
          )}
        </div>

        {/* 統計信息 */}
        <div className="pt-4 border-t space-y-2">
          <div className="flex items-center justify-between text-sm">
            <span>連續失敗次數</span>
            <span className="font-mono">{status.consecutiveFailures}</span>
          </div>
          <div className="flex items-center justify-between text-sm">
            <span>最後檢查時間</span>
            <span className="font-mono">{formatTime(status.lastHealthCheck)}</span>
          </div>
          <div className="flex items-center justify-between text-sm">
            <span>系統運行時間</span>
            <span className="font-mono">{formatUptime(status.uptime)}</span>
          </div>
        </div>

        {/* 警告信息 */}
        {status.consecutiveFailures > 0 && (
          <Alert>
            <AlertTriangle className="h-4 w-4" />
            <AlertDescription>
              資料庫已連續失敗 {status.consecutiveFailures} 次，請檢查連接狀態
            </AlertDescription>
          </Alert>
        )}
      </CardContent>
    </Card>
  );
}
