/**
 * API 调用日志页面
 */

'use client';

import { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';

interface ApiLog {
  id: string;
  apiKeyName: string;
  endpoint: string;
  method: string;
  statusCode: number;
  responseTime: number;
  requestBody: any;
  responseBody: any;
  taskNo: string | null;
  createdAt: string;
}

export default function ApiLogsPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [logs, setLogs] = useState<ApiLog[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedLog, setSelectedLog] = useState<ApiLog | null>(null);
  
  // 筛选条件
  const [taskNo, setTaskNo] = useState('');
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [offset, setOffset] = useState(0);
  const [total, setTotal] = useState(0);
  const limit = 50;

  // 权限检查
  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/login');
    } else if (status === 'authenticated' && session?.user) {
      const userRole = (session.user as any).role;
      if (userRole !== 'ADMIN' && userRole !== 'SYSTEM_ADMIN') {
        router.push('/');
      }
    }
  }, [status, session, router]);

  // 加载日志
  useEffect(() => {
    if (status === 'authenticated') {
      fetchLogs();
    }
  }, [status, offset]);

  const fetchLogs = async () => {
    try {
      setLoading(true);
      const params = new URLSearchParams({
        limit: limit.toString(),
        offset: offset.toString(),
      });
      
      if (taskNo) params.append('taskNo', taskNo);
      if (startDate) params.append('startDate', startDate);
      if (endDate) params.append('endDate', endDate);

      const response = await fetch(`/api/admin/api-logs?${params}`);
      if (response.ok) {
        const result = await response.json();
        setLogs(result.data.logs);
        setTotal(result.data.total);
      }
    } catch (error) {
      console.error('加载失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = () => {
    setOffset(0);
    fetchLogs();
  };

  const handleReset = () => {
    setTaskNo('');
    setStartDate('');
    setEndDate('');
    setOffset(0);
    setTimeout(fetchLogs, 0);
  };

  const getStatusColor = (statusCode: number) => {
    if (statusCode >= 200 && statusCode < 300) return 'text-green-600';
    if (statusCode >= 400 && statusCode < 500) return 'text-yellow-600';
    return 'text-red-600';
  };

  if (loading && logs.length === 0) {
    return <div className="p-8">加载中...</div>;
  }

  const totalPages = Math.ceil(total / limit);
  const currentPage = Math.floor(offset / limit) + 1;

  return (
    <div className="p-8">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-2xl font-bold mb-6">API 调用日志</h1>

        {/* 筛选条件 */}
        <div className="bg-white rounded-lg shadow p-4 mb-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                任务号
              </label>
              <input
                type="text"
                value={taskNo}
                onChange={(e) => setTaskNo(e.target.value)}
                placeholder="输入任务号"
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none 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={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none 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={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div className="flex items-end space-x-2">
              <button
                onClick={handleSearch}
                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
              >
                查询
              </button>
              <button
                onClick={handleReset}
                className="flex-1 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50"
              >
                重置
              </button>
            </div>
          </div>
        </div>

        {/* 统计信息 */}
        <div className="mb-4 text-sm text-gray-600">
          共 {total} 条记录，当前显示第 {offset + 1} - {Math.min(offset + limit, total)} 条
        </div>

        {/* 日志列表 */}
        <div className="bg-white rounded-lg shadow overflow-hidden">
          <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">时间</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">API Key</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">任务号</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">接口</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">方法</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">状态码</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">响应时间</th>
                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">操作</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {logs.map((log) => (
                  <tr key={log.id} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {new Date(log.createdAt).toLocaleString('zh-CN')}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">{log.apiKeyName}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-mono">
                      {log.taskNo || '-'}
                    </td>
                    <td className="px-6 py-4 text-sm font-mono">{log.endpoint}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                      <span className="px-2 py-1 bg-gray-100 rounded text-xs">{log.method}</span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                      <span className={`font-medium ${getStatusColor(log.statusCode)}`}>
                        {log.statusCode}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {log.responseTime}ms
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm">
                      <button
                        onClick={() => setSelectedLog(log)}
                        className="text-blue-600 hover:text-blue-800"
                      >
                        详情
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* 分页 */}
        {totalPages > 1 && (
          <div className="flex justify-center items-center mt-6 space-x-2">
            <button
              onClick={() => setOffset(Math.max(0, offset - limit))}
              disabled={offset === 0}
              className="px-4 py-2 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
            >
              上一页
            </button>
            <span className="px-4 py-2">
              第 {currentPage} / {totalPages} 页
            </span>
            <button
              onClick={() => setOffset(Math.min(total - limit, offset + limit))}
              disabled={offset + limit >= total}
              className="px-4 py-2 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
            >
              下一页
            </button>
          </div>
        )}

        {/* 详情模态框 */}
        {selectedLog && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div className="bg-white rounded-lg p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto">
              <div className="flex justify-between items-start mb-4">
                <h2 className="text-xl font-bold">调用详情</h2>
                <button
                  onClick={() => setSelectedLog(null)}
                  className="text-gray-500 hover:text-gray-700"
                >
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>

              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <span className="text-sm text-gray-500">时间：</span>
                    <span className="text-sm font-medium">
                      {new Date(selectedLog.createdAt).toLocaleString('zh-CN')}
                    </span>
                  </div>
                  <div>
                    <span className="text-sm text-gray-500">API Key：</span>
                    <span className="text-sm font-medium">{selectedLog.apiKeyName}</span>
                  </div>
                  <div>
                    <span className="text-sm text-gray-500">任务号：</span>
                    <span className="text-sm font-mono">{selectedLog.taskNo || '-'}</span>
                  </div>
                  <div>
                    <span className="text-sm text-gray-500">接口：</span>
                    <span className="text-sm font-mono">{selectedLog.endpoint}</span>
                  </div>
                  <div>
                    <span className="text-sm text-gray-500">方法：</span>
                    <span className="text-sm font-medium">{selectedLog.method}</span>
                  </div>
                  <div>
                    <span className="text-sm text-gray-500">状态码：</span>
                    <span className={`text-sm font-medium ${getStatusColor(selectedLog.statusCode)}`}>
                      {selectedLog.statusCode}
                    </span>
                  </div>
                  <div>
                    <span className="text-sm text-gray-500">响应时间：</span>
                    <span className="text-sm font-medium">{selectedLog.responseTime}ms</span>
                  </div>
                </div>

                {selectedLog.requestBody && (
                  <div>
                    <h3 className="text-sm font-medium mb-2">请求体</h3>
                    <pre className="bg-gray-100 p-3 rounded text-xs overflow-x-auto">
                      {JSON.stringify(selectedLog.requestBody, null, 2)}
                    </pre>
                  </div>
                )}

                {selectedLog.responseBody && (
                  <div>
                    <h3 className="text-sm font-medium mb-2">响应体</h3>
                    <pre className="bg-gray-100 p-3 rounded text-xs overflow-x-auto">
                      {JSON.stringify(selectedLog.responseBody, null, 2)}
                    </pre>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}