import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import type { RequestLog, PageResponse } from '../../types/monitoring';
import type { ServiceInfo } from '../../types/service';
import { searchLogs } from '../../services/monitoringService';
import { getServices } from '../../services/serviceService';

const METHOD_COLOR: Record<string, string> = {
  GET: 'bg-green-100 text-green-800',
  POST: 'bg-blue-100 text-blue-800',
  PUT: 'bg-orange-100 text-orange-800',
  DELETE: 'bg-red-100 text-red-800',
};

const STATUS_BADGE: Record<string, string> = {
  SUCCESS: 'bg-green-100 text-green-800',
  DENIED: 'bg-red-100 text-red-800',
  EXPIRED: 'bg-orange-100 text-orange-800',
  INVALID_KEY: 'bg-red-100 text-red-800',
  FAILED: 'bg-gray-100 text-gray-800',
};

const REQUEST_STATUSES = ['SUCCESS', 'DENIED', 'EXPIRED', 'INVALID_KEY', 'FAILED'];
const HTTP_METHODS = ['GET', 'POST', 'PUT', 'DELETE'];
const DEFAULT_PAGE_SIZE = 20;

const getTodayString = (): string => {
  const d = new Date();
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

const formatDateTime = (dateStr: string): string => {
  const d = new Date(dateStr);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  const hours = String(d.getHours()).padStart(2, '0');
  const minutes = String(d.getMinutes()).padStart(2, '0');
  const seconds = String(d.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const RequestLogsPage = () => {
  const navigate = useNavigate();

  const [startDate, setStartDate] = useState(getTodayString());
  const [endDate, setEndDate] = useState(getTodayString());
  const [serviceId, setServiceId] = useState('');
  const [requestStatus, setRequestStatus] = useState('');
  const [requestMethod, setRequestMethod] = useState('');
  const [requestIp, setRequestIp] = useState('');

  const [services, setServices] = useState<ServiceInfo[]>([]);
  const [result, setResult] = useState<PageResponse<RequestLog> | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [currentPage, setCurrentPage] = useState(0);

  const fetchServices = async () => {
    try {
      const res = await getServices();
      if (res.success && res.data) {
        setServices(res.data);
      }
    } catch {
      // 서비스 목록 로딩 실패는 무시
    }
  };

  const handleSearch = async (page: number) => {
    setLoading(true);
    setError(null);
    setCurrentPage(page);

    try {
      const params: Record<string, string | number | undefined> = {
        startDate: startDate || undefined,
        endDate: endDate || undefined,
        serviceId: serviceId ? Number(serviceId) : undefined,
        requestStatus: requestStatus || undefined,
        requestMethod: requestMethod || undefined,
        requestIp: requestIp || undefined,
        page,
        size: DEFAULT_PAGE_SIZE,
      };
      const res = await searchLogs(params);
      if (res.success && res.data) {
        setResult(res.data);
      } else {
        setError(res.message || '로그 조회에 실패했습니다.');
      }
    } catch {
      setError('로그 조회에 실패했습니다.');
    } finally {
      setLoading(false);
    }
  };

  const handleReset = () => {
    setStartDate(getTodayString());
    setEndDate(getTodayString());
    setServiceId('');
    setRequestStatus('');
    setRequestMethod('');
    setRequestIp('');
    setCurrentPage(0);
  };

  useEffect(() => {
    fetchServices();
    handleSearch(0);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleResetAndSearch = () => {
    handleReset();
    // 초기화 후 기본값으로 검색 (setState는 비동기이므로 직접 호출)
    setLoading(true);
    setError(null);
    setCurrentPage(0);
    const today = getTodayString();
    const params: Record<string, string | number | undefined> = {
      startDate: today,
      endDate: today,
      page: 0,
      size: DEFAULT_PAGE_SIZE,
    };
    searchLogs(params)
      .then((res) => {
        if (res.success && res.data) {
          setResult(res.data);
        } else {
          setError(res.message || '로그 조회에 실패했습니다.');
        }
      })
      .catch(() => {
        setError('로그 조회에 실패했습니다.');
      })
      .finally(() => {
        setLoading(false);
      });
  };

  const handleRowClick = (logId: number) => {
    navigate(`/monitoring/request-logs/${logId}`);
  };

  const handlePrev = () => {
    if (currentPage > 0) {
      handleSearch(currentPage - 1);
    }
  };

  const handleNext = () => {
    if (result && currentPage < result.totalPages - 1) {
      handleSearch(currentPage + 1);
    }
  };

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Request Logs</h1>

      {/* Search Form */}
      <div className="bg-white rounded-lg shadow p-6 mb-6">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">기간</label>
            <div className="flex items-center gap-2">
              <input
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                className="flex-1 border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
              <span className="text-gray-500">~</span>
              <input
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                className="flex-1 border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">서비스</label>
            <select
              value={serviceId}
              onChange={(e) => setServiceId(e.target.value)}
              className="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
            >
              <option value="">전체</option>
              {services.map((s) => (
                <option key={s.serviceId} value={s.serviceId}>
                  {s.serviceName}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">상태</label>
            <select
              value={requestStatus}
              onChange={(e) => setRequestStatus(e.target.value)}
              className="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
            >
              <option value="">전체</option>
              {REQUEST_STATUSES.map((s) => (
                <option key={s} value={s}>{s}</option>
              ))}
            </select>
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">HTTP Method</label>
            <select
              value={requestMethod}
              onChange={(e) => setRequestMethod(e.target.value)}
              className="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
            >
              <option value="">전체</option>
              {HTTP_METHODS.map((m) => (
                <option key={m} value={m}>{m}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">IP</label>
            <input
              type="text"
              value={requestIp}
              onChange={(e) => setRequestIp(e.target.value)}
              placeholder="IP 주소"
              className="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
            />
          </div>
          <div className="flex items-end gap-2">
            <button
              onClick={() => handleSearch(0)}
              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium"
            >
              검색
            </button>
            <button
              onClick={handleResetAndSearch}
              className="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium"
            >
              초기화
            </button>
          </div>
        </div>
      </div>

      {error && (
        <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>
      )}

      {/* Results Table */}
      <div className="overflow-x-auto bg-white rounded-lg shadow mb-6">
        {loading ? (
          <div className="text-center py-10 text-gray-500">로딩 중...</div>
        ) : (
          <table className="w-full divide-y divide-gray-200 text-sm">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 py-3 text-left font-medium text-gray-500">시간</th>
                <th className="px-4 py-3 text-left font-medium text-gray-500">서비스</th>
                <th className="px-4 py-3 text-left font-medium text-gray-500">Method</th>
                <th className="px-4 py-3 text-left font-medium text-gray-500">URL</th>
                <th className="px-4 py-3 text-left font-medium text-gray-500">Status Code</th>
                <th className="px-4 py-3 text-left font-medium text-gray-500">응답시간(ms)</th>
                <th className="px-4 py-3 text-left font-medium text-gray-500">상태</th>
                <th className="px-4 py-3 text-left font-medium text-gray-500">IP</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {result && result.content.length > 0 ? (
                result.content.map((log) => (
                  <tr
                    key={log.logId}
                    onClick={() => handleRowClick(log.logId)}
                    className="cursor-pointer hover:bg-gray-50"
                  >
                    <td className="px-4 py-3 whitespace-nowrap">
                      {formatDateTime(log.requestedAt)}
                    </td>
                    <td className="px-4 py-3">{log.serviceName || '-'}</td>
                    <td className="px-4 py-3">
                      <span
                        className={`inline-block px-2 py-0.5 rounded text-xs font-bold ${
                          METHOD_COLOR[log.requestMethod] || 'bg-gray-100 text-gray-800'
                        }`}
                      >
                        {log.requestMethod}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-gray-500 truncate max-w-[250px]" title={log.requestUrl}>
                      {log.requestUrl}
                    </td>
                    <td className="px-4 py-3">
                      {log.responseStatus != null ? log.responseStatus : '-'}
                    </td>
                    <td className="px-4 py-3">
                      {log.responseTime != null ? log.responseTime : '-'}
                    </td>
                    <td className="px-4 py-3">
                      <span
                        className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${
                          STATUS_BADGE[log.requestStatus] || 'bg-gray-100 text-gray-800'
                        }`}
                      >
                        {log.requestStatus}
                      </span>
                    </td>
                    <td className="px-4 py-3 font-mono text-xs">{log.requestIp}</td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan={8} className="px-4 py-8 text-center text-gray-400">
                    검색 결과가 없습니다
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        )}
      </div>

      {/* Pagination */}
      {result && result.totalElements > 0 && (
        <div className="flex items-center justify-between">
          <span className="text-sm text-gray-600">
            총 {result.totalElements}건 / {result.page + 1} / {result.totalPages} 페이지
          </span>
          <div className="flex gap-2">
            <button
              onClick={handlePrev}
              disabled={currentPage === 0}
              className="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
            >
              이전
            </button>
            <button
              onClick={handleNext}
              disabled={!result || currentPage >= result.totalPages - 1}
              className="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
            >
              다음
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default RequestLogsPage;