import { useState, useEffect } from "react";

export default function App() {
  // Mock server data
  const initialServers = [
    { id: 1, name: "Сервер 1 (API)", url: "api.example.com" },
    { id: 2, name: "Сервер 2 (База данных)", url: "db.example.com" },
    { id: 3, name: "Сервер 3 (Фронтенд)", url: "web.example.com" },
    { id: 4, name: "Сервер 4 (Аутентификация)", url: "auth.example.com" },
    { id: 5, name: "Сервер 5 (Хранилище)", url: "storage.example.com" },
  ];

  // State for server statuses
  const [serverStatuses, setServerStatuses] = useState(
    initialServers.map((server) => ({
      id: server.id,
      delay: 0,
      statusCode: 0,
      statusText: "",
      lastChecked: new Date(),
    }))
  );

  // Simulate server monitoring updates
  useEffect(() => {
    const interval = setInterval(() => {
      setServerStatuses((prev) =>
        prev.map((status) => {
          // Simulate random response times (20-300ms)
          const delay = Math.floor(Math.random() * 280) + 20;
          
          // Simulate status codes (mostly 200, occasionally errors)
          let statusCode;
          if (Math.random() > 0.15) {
            statusCode = 200;
          } else {
            statusCode = [404, 500, 503][Math.floor(Math.random() * 3)];
          }
          
          // Determine status text
          let statusText = "";
          switch (statusCode) {
            case 200:
              statusText = "OK";
              break;
            case 404:
              statusText = "Не найден";
              break;
            case 500:
              statusText = "Внутренняя ошибка";
              break;
            case 503:
              statusText = "Недоступен";
              break;
            default:
              statusText = "Неизвестно";
          }
          
          return {
            ...status,
            delay,
            statusCode,
            statusText,
            lastChecked: new Date(),
          };
        })
      );
    }, 2000);
    
    return () => clearInterval(interval);
  }, []);

  // Get status color based on HTTP code
  const getStatusColor = (code) => {
    if (code === 200) return "bg-green-100 text-green-800";
    if (code >= 400 && code < 500) return "bg-orange-100 text-orange-800";
    if (code >= 500) return "bg-red-100 text-red-800";
    return "bg-gray-100 text-gray-800";
  };

  // Format date to HH:mm:ss
  const formatTime = (date) => {
    return date.toLocaleTimeString("ru-RU", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    });
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-100">
      {/* Header with logo */}
      <header className="bg-white shadow-sm py-4">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
          <div className="flex items-center">
            <div className="flex items-center">
              <span className="text-2xl font-bold text-blue-900">Sell</span>
              <span className="text-2xl font-bold text-blue-600">Kit</span>
            </div>
          </div>
          <div className="text-sm text-gray-500 hidden md:block">
            Панель мониторинга серверов
          </div>
        </div>
      </header>

      {/* Main content */}
      <div className="py-8 px-4 sm:px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-10">
            <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
              Панель мониторинга серверов
            </h1>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              В реальном времени отслеживайте состояние серверов, время отклика и HTTP-статусы
            </p>
          </div>

          <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200">
            <div className="grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
              {/* Left Panel - Server List */}
              <div className="p-6">
                <div className="flex items-center mb-6">
                  <div className="bg-indigo-100 p-2 rounded-lg mr-3">
                    <div className="w-6 h-6 text-indigo-600 font-bold">≡</div>
                  </div>
                  <h2 className="text-xl font-bold text-gray-900">Список серверов</h2>
                </div>
                
                <div className="space-y-4">
                  {initialServers.map((server) => {
                    const status = serverStatuses.find(s => s.id === server.id);
                    const isHealthy = status?.statusCode === 200;
                    
                    return (
                      <div 
                        key={server.id} 
                        className={`p-4 rounded-xl border transition-all duration-300 ${
                        isHealthy 
                          ? "border-green-200 bg-green-50 hover:shadow-md" 
                          : "border-red-200 bg-red-50 hover:shadow-md"
                      }`}
                      >
                        <div className="flex items-start justify-between">
                          <div>
                            <h3 className="font-bold text-lg text-gray-900">{server.name}</h3>
                            <p className="text-gray-600 mt-1">{server.url}</p>
                          </div>
                          <div className={`ml-3 flex-shrink-0 px-3 py-1 rounded-full text-xs font-medium ${
                            isHealthy 
                              ? "bg-green-100 text-green-800" 
                              : "bg-red-100 text-red-800"
                          }`}>
                            {isHealthy ? "Онлайн" : "Проблемы"}
                          </div>
                        </div>
                        
                        <div className="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between text-sm">
                          <span className="text-gray-500">Последняя проверка:</span>
                          <span className="font-medium text-gray-900">
                            {status ? formatTime(status.lastChecked) : "—"}
                          </span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
              
              {/* Right Panel - Metrics */}
              <div className="p-6">
                <div className="flex items-center mb-6">
                  <div className="bg-purple-100 p-2 rounded-lg mr-3">
                    <div className="w-6 h-6 text-purple-600">⏱️</div>
                  </div>
                  <h2 className="text-xl font-bold text-gray-900">Метрики отклика</h2>
                </div>
                
                <div className="space-y-5">
                  {initialServers.map((server) => {
                    const status = serverStatuses.find(s => s.id === server.id);
                    if (!status) return null;
                    
                    return (
                      <div key={server.id} className="border border-gray-200 rounded-xl p-5 bg-gray-50 hover:bg-white transition-all duration-300 shadow-sm hover:shadow-md">
                        <div className="flex items-center justify-between mb-4">
                          <h3 className="font-bold text-lg text-gray-900">{server.name}</h3>
                          <div className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(status.statusCode)}`}>
                            {status.statusCode} {status.statusText}
                          </div>
                        </div>
                        
                        <div className="space-y-4">
                          <div>
                            <div className="flex justify-between text-sm mb-1">
                              <span className="text-gray-600">Время задержки</span>
                              <span className="font-medium text-gray-900">{status.delay} мс</span>
                            </div>
                            <div className="w-full bg-gray-200 rounded-full h-2.5">
                              <div 
                                className={`h-2.5 rounded-full ${
                                  status.delay < 100 
                                    ? "bg-green-500" 
                                    : status.delay < 200 
                                    ? "bg-yellow-400" 
                                    : "bg-red-500"
                                }`}
                                style={{ width: `${Math.min(status.delay / 300 * 100, 100)}%` }}
                              ></div>
                            </div>
                          </div>
                          
                          <div className="flex items-center justify-between text-sm">
                            <div>
                              <span className="text-gray-600">Последняя проверка:</span>
                              <span className="ml-2 font-medium text-gray-900">{formatTime(status.lastChecked)}</span>
                            </div>
                            <div className={`flex items-center ${
                              status.statusCode === 200 ? "text-green-600" : "text-red-600"
                            }`}>
                              <span className="mr-1">●</span>
                              <span className="font-medium">
                                {status.statusCode === 200 ? "Стабильно" : "Требует внимания"}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
                
                <div className="mt-8 p-4 bg-blue-50 rounded-xl border border-blue-100">
                  <div className="flex items-start">
                    <div className="flex-shrink-0 mt-1">
                      <div className="w-5 h-5 rounded-full bg-blue-200 flex items-center justify-center">
                        <span className="text-blue-800 font-bold text-xs">i</span>
                      </div>
                    </div>
                    <div className="ml-3">
                      <h3 className="font-medium text-gray-900">Как интерпретировать метрики</h3>
                      <ul className="mt-2 text-sm text-gray-700 space-y-1">
                        <li>🟢 Задержка &lt; 100 мс: Отличная производительность</li>
                        <li>🟡 Задержка 100-200 мс: Удовлетворительная производительность</li>
                        <li>🔴 Задержка &gt; 200 мс: Проблемы с производительностью</li>
                        <li>Коды 2xx: Нормальная работа сервера</li>
                        <li>Коды 4xx/5xx: Требуется вмешательство</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div className="mt-8 text-center text-sm text-gray-500">
            <p>Данные обновляются в реальном времени • Имитация мониторинга для демонстрации</p>
          </div>
        </div>
      </div>
    </div>
  );
}