/* eslint-disable @typescript-eslint/no-explicit-any */
import ky from "ky";
import { useEffect, useState } from "react";
import { parseUserAgent } from "react-device-detect";

function HistoryPage() {
  const [history, setHistory] = useState([]);

  async function getHistory() {
    const result: any = await ky
      .get(`${import.meta.env.VITE_COORD_URL}/session_history`)
      .json();

    setHistory(result);
  }

  useEffect(() => {
    getHistory();
  }, []);

  return (
    <div className="text-[#F2F2F2] space-y-4 p-4">
      <p>Всего сессий: {history.length}</p>
      {history.map(
        (item: any) =>
          item.city &&
          item.headers && (
            <div key={item.id} className="p-4 rounded-lg bg-[#22222A]">
              <p>
                Дата и время: <b>{new Date(item.createdAt).toLocaleString()}</b>
              </p>
              <p>
                Сборка: <b>{item.title}</b>
              </p>
              <p>
                Город: <b>{item.city}</b>
              </p>
              <p>
                Устройство:{" "}
                <b>
                  {parseUserAgent(item.headers["user-agent"]).os.name}{" "}
                  {parseUserAgent(item.headers["user-agent"]).os.version} (
                  {parseUserAgent(item.headers["user-agent"]).browser.name})
                </b>
              </p>
              <p>Локация: {item.location}</p>
              <p>Сервер: {item.server}</p>
              <p>IP клиента: {item.headers["x-forwarded-for"]}</p>
            </div>
          )
      )}
    </div>
  );
}

export default HistoryPage;
