import React, { useState, useEffect } from 'react';
import { adminApi } from '@/lib/api';
import {
  Clock,
  Globe,
  Activity,
  Filter,
  ChevronDown,
  ChevronUp,
  Calendar,
  BarChart3,
  RefreshCw,
  AlertTriangle,
  CheckCircle,
  XCircle,
  AlertCircle,
  Trash2
} from 'lucide-react';

interface LogEntry {
  id: number;
  request_id: string;
  endpoint: string;
  method: string;
  path: string;
  query_params?: any;
  request_body?: any;
  headers?: any;
  status_code: number;
  response_size?: number;
  user_agent?: string;
  client_ip?: string;
  response_time_ms?: number;
  created_at?: string;
  // Error specific fields
  error_type?: string;
  error_message?: string;
  error_detail?: any;
  stack_trace?: string;
  is_error?: boolean;
}

interface LogStats {
  total_requests: number;
  success_requests: number;
  client_error_requests: number;
  server_error_requests: number;
  success_rate: number;
  requests_by_method: { [key: string]: number };
  requests_by_status_code: { [key: string]: number };
  requests_by_endpoint: { [key: string]: number };
  average_response_time_ms: number;
  start_date: string;
  end_date: string;
}

const UnifiedLogViewer: React.FC = () => {
  const [isClient, setIsClient] = useState(false);
  const [logs, setLogs] = useState<LogEntry[]>([]);
  const [stats, setStats] = useState<LogStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [showFilters, setShowFilters] = useState(false);
  const [showStats, setShowStats] = useState(true);
  const [expandedLog, setExpandedLog] = useState<number | null>(null);
  const [logType, setLogType] = useState<'all' | 'errors' | 'success' | 'data'>('data');
  
  // Filter state
  const [filters, setFilters] = useState({
    start_date: '',
    end_date: '',
    method: '',
    status_code: '',
    endpoint: '',
    page: 1,
    page_size: 50
  });

  const fetchLogs = async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      Object.entries(filters).forEach(([key, value]) => {
        if (value) {
          if (key === 'start_date') {
            params.append(key, value.toString() + 'T00:00:00Z');
          } else if (key === 'end_date') {
            params.append(key, value.toString() + 'T23:59:59Z');
          } else {
            params.append(key, value.toString());
          }
        }
      });

      // Filter by log type
      if (logType === 'errors') {
        params.append('min_status_code', '500');
      } else if (logType === 'success') {
        params.append('status_code', '200');
      }

      let allLogs: LogEntry[] = [];

      if (logType === 'data') {
        // Fetch financial and price data requests separately and combine
        try {
          const financialParams = new URLSearchParams(params);
          financialParams.append('endpoint', '/api/v1/financial/*');

          const priceParams = new URLSearchParams(params);
          priceParams.append('endpoint', '/api/v1/price/*');

          const [financialData, priceData] = await Promise.all([
            adminApi.getRequestLogs(Object.fromEntries(financialParams)),
            adminApi.getRequestLogs(Object.fromEntries(priceParams))
          ]);

          // Combine and sort by created_at
          allLogs = [...(financialData.items || []), ...(priceData.items || [])].sort((a: LogEntry, b: LogEntry) =>
            new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime()
          );
        } catch (error) {
          console.error('Error fetching data logs:', error);
        }
      } else {
        try {
          const data = await adminApi.getRequestLogs(Object.fromEntries(params));
          allLogs = data.items || [];
        } catch (error) {
          console.error('Error fetching logs:', error);
        }
      }

      // Fetch error details for 500 errors
      const enrichedLogs = await Promise.all(
        allLogs.map(async (log: LogEntry) => {
          if (log.status_code >= 500) {
            try {
              const errorData = await adminApi.getErrorByRequestId(log.request_id);
              return {
                ...log,
                is_error: true,
                error_type: errorData.error_type,
                error_message: errorData.error_message,
                error_detail: errorData.error_detail,
                stack_trace: errorData.stack_trace
              };
            } catch (error) {
              console.error('Error fetching error details:', error);
            }
          }
          return { ...log, is_error: log.status_code >= 400 };
        })
      );
      
      setLogs(enrichedLogs);
    } catch (error) {
      console.error('Error fetching logs:', error);
    }
    setLoading(false);
  };

  const fetchStats = async () => {
    try {
      const params: Record<string, string> = {};
      if (filters.start_date) params.start_date = filters.start_date + 'T00:00:00Z';
      if (filters.end_date) params.end_date = filters.end_date + 'T23:59:59Z';

      const data = await adminApi.getRequestStats(params);
      setStats(data);
    } catch (error) {
      console.error('Error fetching stats:', error);
    }
  };

  const clearAllLogs = async () => {
    if (!window.confirm('정말로 모든 로그를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.')) {
      return;
    }
    
    try {
      setLoading(true);
      
      // Clear both request logs and error logs
      const [requestResult, errorResult] = await Promise.all([
        adminApi.deleteRequestLogs({ confirm: 'true' }),
        adminApi.deleteErrorLogs({ confirm: 'true' })
      ]);

      alert(`성공적으로 삭제되었습니다:\n- 요청 로그: ${requestResult.deleted_count}개\n- 에러 로그: ${errorResult.deleted_count}개`);

      // Refresh data
      await fetchLogs();
      await fetchStats();
    } catch (error) {
      console.error('Error clearing logs:', error);
      alert('로그 삭제 중 오류가 발생했습니다.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    setIsClient(true);
  }, []);

  useEffect(() => {
    if (isClient) {
      fetchLogs();
      fetchStats();
    }
  }, [filters, logType, isClient]);

  const getStatusIcon = (statusCode: number) => {
    if (statusCode >= 200 && statusCode < 300) return <CheckCircle className="w-4 h-4 text-green-600" />;
    if (statusCode >= 400 && statusCode < 500) return <AlertCircle className="w-4 h-4 text-yellow-600" />;
    if (statusCode >= 500) return <XCircle className="w-4 h-4 text-red-600" />;
    return <Activity className="w-4 h-4 text-gray-600" />;
  };

  const getStatusCodeColor = (statusCode: number): string => {
    if (statusCode >= 200 && statusCode < 300) return 'text-green-600 bg-green-50';
    if (statusCode >= 300 && statusCode < 400) return 'text-blue-600 bg-blue-50';
    if (statusCode >= 400 && statusCode < 500) return 'text-yellow-600 bg-yellow-50';
    if (statusCode >= 500) return 'text-red-600 bg-red-50';
    return 'text-gray-600 bg-gray-50';
  };

  const getMethodColor = (method: string): string => {
    const colors: Record<string, string> = {
      'GET': 'text-green-600 bg-green-50',
      'POST': 'text-blue-600 bg-blue-50',
      'PUT': 'text-yellow-600 bg-yellow-50',
      'DELETE': 'text-red-600 bg-red-50',
      'PATCH': 'text-purple-600 bg-purple-50'
    };
    return colors[method] || 'text-gray-600 bg-gray-50';
  };

  const formatResponseTime = (ms?: number): string => {
    if (!ms) return 'N/A';
    if (ms < 1000) return `${ms.toFixed(0)}ms`;
    return `${(ms / 1000).toFixed(2)}s`;
  };

  const formatSize = (bytes?: number): string => {
    if (!bytes) return 'N/A';
    if (bytes < 1024) return `${bytes}B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
  };

  const formatDateTime = (dateString?: string): string => {
    if (!dateString || !isClient) return 'N/A';
    try {
      return new Date(dateString).toLocaleString('ko-KR');
    } catch (error) {
      return dateString;
    }
  };

  if (!isClient) {
    return (
      <div className="min-h-screen bg-gray-50 p-6">
        <div className="max-w-7xl mx-auto">
          <div className="p-8 text-center">
            <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
            <p className="text-gray-600">로그 시스템 초기화 중...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-2">
                <Activity className="w-8 h-8 text-blue-600" />
                시스템 로그
              </h1>
              <p className="text-gray-600 mt-2">
                모든 API 요청 및 에러 로그를 확인할 수 있습니다
              </p>
            </div>
            <div className="flex gap-2">
              <button
                onClick={() => setShowStats(!showStats)}
                className={`px-4 py-2 rounded-lg flex items-center gap-2 ${
                  showStats 
                    ? 'bg-blue-600 text-white' 
                    : 'bg-white text-gray-600 hover:bg-gray-50'
                } border transition-colors`}
              >
                <BarChart3 className="w-4 h-4" />
                통계
              </button>
              <button
                onClick={() => setShowFilters(!showFilters)}
                className={`px-4 py-2 rounded-lg flex items-center gap-2 ${
                  showFilters 
                    ? 'bg-blue-600 text-white' 
                    : 'bg-white text-gray-600 hover:bg-gray-50'
                } border transition-colors`}
              >
                <Filter className="w-4 h-4" />
                필터
                {showFilters ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
              </button>
              <button
                onClick={clearAllLogs}
                className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 border border-red-600 rounded-lg flex items-center gap-2 transition-colors"
              >
                <Trash2 className="w-4 h-4" />
                모든 로그 삭제
              </button>
              <button
                onClick={() => { fetchLogs(); fetchStats(); }}
                className="px-4 py-2 bg-white text-gray-600 hover:bg-gray-50 border rounded-lg flex items-center gap-2 transition-colors"
              >
                <RefreshCw className="w-4 h-4" />
                새로고침
              </button>
            </div>
          </div>
        </div>

        {/* Log Type Selector */}
        <div className="mb-6 flex gap-2 flex-wrap">
          <button
            onClick={() => setLogType('data')}
            className={`px-4 py-2 rounded-lg flex items-center gap-2 ${
              logType === 'data' 
                ? 'bg-purple-600 text-white' 
                : 'bg-white text-gray-600 hover:bg-gray-50 border'
            } transition-colors`}
          >
            <BarChart3 className="w-4 h-4" />
            데이터 요청 로그
          </button>
          <button
            onClick={() => setLogType('all')}
            className={`px-4 py-2 rounded-lg ${
              logType === 'all' 
                ? 'bg-blue-600 text-white' 
                : 'bg-white text-gray-600 hover:bg-gray-50 border'
            } transition-colors`}
          >
            전체 로그
          </button>
          <button
            onClick={() => setLogType('errors')}
            className={`px-4 py-2 rounded-lg flex items-center gap-2 ${
              logType === 'errors' 
                ? 'bg-red-600 text-white' 
                : 'bg-white text-gray-600 hover:bg-gray-50 border'
            } transition-colors`}
          >
            <AlertTriangle className="w-4 h-4" />
            에러 로그
          </button>
          <button
            onClick={() => setLogType('success')}
            className={`px-4 py-2 rounded-lg flex items-center gap-2 ${
              logType === 'success' 
                ? 'bg-green-600 text-white' 
                : 'bg-white text-gray-600 hover:bg-gray-50 border'
            } transition-colors`}
          >
            <CheckCircle className="w-4 h-4" />
            성공 로그
          </button>
        </div>

        {/* Statistics */}
        {showStats && (
          <div className="mb-6 grid grid-cols-1 md:grid-cols-5 gap-4">
            <div className="bg-white p-4 rounded-lg border">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">총 요청</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {stats?.total_requests !== undefined ? stats.total_requests.toLocaleString() : 'Loading...'}
                  </p>
                </div>
                <Globe className="w-8 h-8 text-blue-600" />
              </div>
            </div>
            <div className="bg-white p-4 rounded-lg border">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">성공</p>
                  <p className="text-2xl font-bold text-green-600">
                    {stats?.success_requests !== undefined ? stats.success_requests.toLocaleString() : 'Loading...'}
                  </p>
                </div>
                <CheckCircle className="w-8 h-8 text-green-600" />
              </div>
            </div>
            <div className="bg-white p-4 rounded-lg border">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">클라이언트 에러</p>
                  <p className="text-2xl font-bold text-yellow-600">
                    {stats?.client_error_requests !== undefined ? stats.client_error_requests.toLocaleString() : 'Loading...'}
                  </p>
                </div>
                <AlertCircle className="w-8 h-8 text-yellow-600" />
              </div>
            </div>
            <div className="bg-white p-4 rounded-lg border">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">서버 에러</p>
                  <p className="text-2xl font-bold text-red-600">
                    {stats?.server_error_requests !== undefined ? stats.server_error_requests.toLocaleString() : 'Loading...'}
                  </p>
                </div>
                <XCircle className="w-8 h-8 text-red-600" />
              </div>
            </div>
            <div className="bg-white p-4 rounded-lg border">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">평균 응답시간</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {stats?.average_response_time_ms !== undefined ? formatResponseTime(stats.average_response_time_ms) : 'Loading...'}
                  </p>
                </div>
                <Clock className="w-8 h-8 text-orange-600" />
              </div>
            </div>
          </div>
        )}

        {/* Filters */}
        {showFilters && (
          <div className="mb-6 bg-white p-4 rounded-lg border">
            <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">시작 날짜</label>
                <input
                  type="date"
                  value={filters.start_date}
                  onChange={(e) => setFilters({ ...filters, start_date: e.target.value })}
                  className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">종료 날짜</label>
                <input
                  type="date"
                  value={filters.end_date}
                  onChange={(e) => setFilters({ ...filters, end_date: e.target.value })}
                  className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">HTTP 메서드</label>
                <select
                  value={filters.method}
                  onChange={(e) => setFilters({ ...filters, method: e.target.value })}
                  className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">전체</option>
                  <option value="GET">GET</option>
                  <option value="POST">POST</option>
                  <option value="PUT">PUT</option>
                  <option value="DELETE">DELETE</option>
                  <option value="PATCH">PATCH</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">상태 코드</label>
                <input
                  type="number"
                  placeholder="예: 200, 404, 500"
                  value={filters.status_code}
                  onChange={(e) => setFilters({ ...filters, status_code: e.target.value })}
                  className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">엔드포인트</label>
                <input
                  type="text"
                  placeholder="예: /api/v1/financial/*"
                  value={filters.endpoint}
                  onChange={(e) => setFilters({ ...filters, endpoint: e.target.value })}
                  className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
                />
              </div>
            </div>
          </div>
        )}

        {/* Logs Table */}
        <div className="bg-white rounded-lg border overflow-hidden">
          {loading ? (
            <div className="p-8 text-center">
              <RefreshCw className="w-8 h-8 text-blue-600 animate-spin mx-auto mb-4" />
              <p className="text-gray-600">로그를 불러오는 중...</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      상태
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      시간
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      메서드
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      엔드포인트
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      상태코드
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      응답시간
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      IP
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      상세
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {logs.map((log) => (
                    <React.Fragment key={log.id}>
                      <tr className={`hover:bg-gray-50 ${log.is_error ? 'bg-red-50' : ''}`}>
                        <td className="px-6 py-4 whitespace-nowrap">
                          {getStatusIcon(log.status_code)}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {formatDateTime(log.created_at)}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className={`px-2 py-1 text-xs font-medium rounded-full ${getMethodColor(log.method)}`}>
                            {log.method}
                          </span>
                        </td>
                        <td className="px-6 py-4 text-sm text-gray-900 max-w-xs truncate" title={log.path}>
                          {log.endpoint}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusCodeColor(log.status_code)}`}>
                            {log.status_code}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                          {formatResponseTime(log.response_time_ms)}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {log.client_ip || 'N/A'}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          <button
                            onClick={() => setExpandedLog(expandedLog === log.id ? null : log.id)}
                            className="text-blue-600 hover:text-blue-800"
                          >
                            {expandedLog === log.id ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                          </button>
                        </td>
                      </tr>
                      {expandedLog === log.id && (
                        <tr>
                          <td colSpan={8} className="px-6 py-4 bg-gray-50">
                            <div className="space-y-4">
                              {/* Request Information */}
                              <div>
                                <h4 className="text-sm font-medium text-gray-900 mb-2">요청 정보</h4>
                                <div className="bg-white p-3 rounded border text-sm text-gray-900">
                                  <p className="text-gray-900"><span className="font-medium text-gray-700">Request ID:</span> {log.request_id}</p>
                                  <p className="text-gray-900"><span className="font-medium text-gray-700">Full Path:</span> {log.path}</p>
                                  <p className="text-gray-900"><span className="font-medium text-gray-700">User Agent:</span> {log.user_agent || 'N/A'}</p>
                                  
                                  {/* Data Source Info for successful requests */}
                                  {log.status_code >= 200 && log.status_code < 300 && log.headers?.['X-Data-Source'] && (
                                    <div className="mt-2 p-2 bg-blue-50 border border-blue-200 rounded">
                                      <p className="text-blue-900">
                                        <span className="font-medium text-blue-700">데이터 소스:</span> 
                                        <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                          {log.headers['X-Data-Source'] === 'database-cache' ? 'bg-green-100 text-green-800' :
                                           log.headers['X-Data-Source'] === 'yfinance-fresh' ? 'bg-yellow-100 text-yellow-800' :
                                           log.headers['X-Data-Source'] === 'yfinance-partial' ? 'bg-orange-100 text-orange-800' :
                                           'bg-gray-100 text-gray-800'}">
                                          {log.headers['X-Data-Source'] === 'database-cache' ? '🗄️ DB 캐시' :
                                           log.headers['X-Data-Source'] === 'yfinance-fresh' ? '🔄 Yahoo Finance (신규)' :
                                           log.headers['X-Data-Source'] === 'yfinance-partial' ? '📊 Yahoo Finance (부분)' :
                                           log.headers['X-Data-Source']}
                                        </span>
                                      </p>
                                    </div>
                                  )}
                                  {log.headers && Object.keys(log.headers).length > 0 && (
                                    <div className="mt-2">
                                      <span className="font-medium text-gray-700">Headers:</span>
                                      <pre className="mt-1 bg-gray-50 p-2 rounded text-xs overflow-x-auto text-gray-800">
                                        {JSON.stringify(log.headers, null, 2)}
                                      </pre>
                                    </div>
                                  )}
                                  {log.query_params && Object.keys(log.query_params).length > 0 && (
                                    <div className="mt-2">
                                      <span className="font-medium text-gray-700">Query Parameters:</span>
                                      <pre className="mt-1 bg-gray-50 p-2 rounded text-xs overflow-x-auto text-gray-800">
                                        {JSON.stringify(log.query_params, null, 2)}
                                      </pre>
                                    </div>
                                  )}
                                  {log.request_body && (
                                    <div className="mt-2">
                                      <span className="font-medium text-gray-700">Request Body:</span>
                                      <pre className="mt-1 bg-gray-50 p-2 rounded text-xs overflow-x-auto text-gray-800">
                                        {JSON.stringify(log.request_body, null, 2)}
                                      </pre>
                                    </div>
                                  )}
                                </div>
                              </div>

                              {/* Error Information */}
                              {log.is_error && (log.error_message || log.status_code >= 400) && (
                                <div>
                                  <h4 className="text-sm font-medium text-red-900 mb-2">에러 정보</h4>
                                  <div className="bg-red-50 p-3 rounded border border-red-200 text-sm text-red-900">
                                    <p className="text-red-900"><span className="font-medium text-red-700">Status Code:</span> {log.status_code}</p>
                                    {log.error_type && (
                                      <p className="text-red-900"><span className="font-medium text-red-700">Error Type:</span> {log.error_type}</p>
                                    )}
                                    {log.error_message && (
                                      <p className="text-red-900"><span className="font-medium text-red-700">Error Message:</span> {log.error_message}</p>
                                    )}
                                    
                                    {/* Error Response Body - show raw response from error_detail */}
                                    {log.error_detail && (
                                      <div className="mt-2">
                                        <span className="font-medium text-red-700">에러 응답:</span>
                                        <pre className="mt-1 bg-white p-2 rounded text-xs overflow-x-auto text-red-800 max-h-48 overflow-y-auto">
                                          {typeof log.error_detail === 'string' ? log.error_detail : JSON.stringify(log.error_detail, null, 2)}
                                        </pre>
                                      </div>
                                    )}
                                    
                                    {log.stack_trace && (
                                      <div className="mt-2">
                                        <span className="font-medium text-red-700">Stack Trace:</span>
                                        <pre className="mt-1 bg-white p-2 rounded text-xs overflow-x-auto max-h-64 overflow-y-auto text-gray-800">
                                          {log.stack_trace}
                                        </pre>
                                      </div>
                                    )}
                                  </div>
                                </div>
                              )}
                            </div>
                          </td>
                        </tr>
                      )}
                    </React.Fragment>
                  ))}
                </tbody>
              </table>
              {logs.length === 0 && (
                <div className="p-8 text-center">
                  <Activity className="w-12 h-12 text-gray-300 mx-auto mb-4" />
                  <p className="text-gray-500">조건에 맞는 로그가 없습니다.</p>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default UnifiedLogViewer;