import { useQuery } from "@tanstack/react-query";
import { User } from "../types/User";
import api from "../utils/api";
import { Server } from "../types/Server";
import DesktopCard from "../components/DesktopCard";
import Badge from "../components/Badge";
import { Session } from "../types/Session";
import SessionCard from "../components/SessionCard";
import Button from "../components/Button";
import ChevronRightIcon from "../components/icons/ChevronRightIcon";
import { useNavigate } from "react-router";

function DashboardPage() {
  const { data: me } = useQuery({
    queryKey: ["me"],
    queryFn: () => api.get("auth/me").json<User>(),
  });

  const { data: servers } = useQuery({
    queryKey: ["servers"],
    queryFn: () => api.get("servers?withLastSession=true").json<Server[]>(),
    enabled: !!me,
    refetchInterval: 1000,
  });

  const { data: sessions } = useQuery({
    queryKey: ["last-sessions"],
    queryFn: () =>
      api.get("sessions", { searchParams: { limit: 5 } }).json<Session[]>(),
    enabled: !!me,
  });

  // async function logout() {
  //   return await api.get("auth/logout").json();
  // }

  // async function handleClickLogout() {
  //   try {
  //     await logout();
  //     setToken(null);
  //   } catch (error) {
  //     toast.error((await (error as HTTPError).response.json<IError>()).error);
  //   }
  // }

  const navigate = useNavigate();

  return (
    <div className="flex flex-col gap-[5vw] min-h-dvh">
      <div className="w-full flex justify-between">
        <div className="w-[42.5vw] flex flex-col gap-[1.667vw]">
          <div className="flex items-center gap-[0.833vw]">
            <h1 className="title-l font-medium">Интерактивные столы</h1>
            <Badge count={servers?.length || 0} />
          </div>
          <div className="flex gap-[0.833vw] flex-wrap">
            {servers?.map((server) => (
              <DesktopCard key={server.id} server={server} />
            ))}
          </div>
        </div>
      </div>
      <div className="w-full">
        <div className="flex flex-col gap-[1.667vw]">
          <h1 className="title-l font-medium">Последние сеансы</h1>
          <div className="w-full flex flex-col gap-[0.833vw]">
            <div className="flex flex-col gap-[0.278vw]">
              {sessions
                ?.filter(
                  (session) =>
                    session.status === "ended" || session.status === "ending"
                )
                .map((session) => (
                  <SessionCard key={session.id} session={session} />
                ))}
            </div>
            <Button
              variant="primary"
              size="large"
              className="flex gap-[0.556vw] items-center justify-center w-full"
              onClick={() => navigate("/sessions")}
            >
              <p>Смотреть все</p>
              <span className="w-[1.111vw] h-[1.111vw] flex items-center justify-center">
                <ChevronRightIcon />
              </span>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default DashboardPage;
