import { useParams, useNavigate } from "react-router";
import { useQuery } from "@tanstack/react-query";
import { api } from "../lib/api";
import LoaderIcon from "../components/icons/LoaderIcon";
import CheckIcon from "../components/icons/CheckIcon";
import ClockIcon from "../components/icons/ClockIcon";
import WarningIcon from "../components/icons/WarningIcon";
import StartIcon from "../components/icons/StartIcon";
import Button from "../components/ui/Button";
import clsx from "clsx";
import { useEffect } from "react";
import { PixelStreamingWrapper } from "../components/PixelStreamingWrapper";

interface Session {
  id: string;
  appId: string;
  userId: string | null;
  mode: "stream" | "local";
  status: "starting" | "started" | "ending" | "ended";
  tier: "demo" | "prod" | null;
  serverId: string | null;
  appPid: number | null;
  cirrusPid: number | null;
  streamerPort: number | null;
  playerPort: number | null;
  sfuPort: number | null;
  startAt: string;
  endAt: string | null;
  createdAt: string;
  updatedAt: string;
  app?: {
    id: string;
    name: string;
    title: string;
    gpuLimitMb: number | null;
    psVersion: number | null;
  };
  server?: {
    id: string;
    localIp: string;
    hostname: string;
    type: "stream" | "local";
    tier: "demo" | "prod" | null;
    location: "ru1" | "uae1" | null;
  } | null;
  user?: {
    id: string;
    email: string;
    role: string;
    displayName: string;
  } | null;
}

function SessionPage() {
  const { id } = useParams();
  const navigate = useNavigate();

  const {
    data: sessionData,
    isLoading,
    error,
    refetch,
  } = useQuery({
    queryKey: ["session", id],
    queryFn: async () => {
      const response = await api.get(`sessions/${id}`).json<{
        session: Session;
      }>();
      return response;
    },
    refetchInterval: (query) => {
      // Автоматически обновляем каждые 2 секунды, если сессия в процессе запуска
      const data = query.state.data;
      if (
        data?.session.status === "starting" ||
        data?.session.status === "ending"
      ) {
        return 2000;
      }
      return false;
    },
  });

  const session = sessionData?.session;

  // Перенаправление на тестовую страницу при завершении сессии
  useEffect(() => {
    if (session?.status === "ended") {
      const timer = setTimeout(() => {
        navigate("/test");
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [session?.status, navigate]);

  if (isLoading) {
    return (
      <div className="flex justify-center items-center min-h-screen bg-gray-50">
        <div className="flex flex-col gap-4 items-center">
          <div className="size-12 text-[#7B60F3] animate-spin">
            <LoaderIcon />
          </div>
          <p className="text-gray-600 text-m">
            Загрузка информации о сессии...
          </p>
        </div>
      </div>
    );
  }

  if (error || !session) {
    return (
      <div className="flex justify-center items-center min-h-screen bg-gray-50">
        <div className="p-8 w-full max-w-2xl bg-white rounded-lg shadow-md">
          <div className="flex gap-4 items-start">
            <div className="text-red-500 size-6">
              <WarningIcon />
            </div>
            <div className="flex-1">
              <h1 className="mb-2 text-red-900 title-l">Сессия не найдена</h1>
              <p className="mb-6 text-gray-600 text-m">
                {error instanceof Error
                  ? error.message
                  : "Не удалось загрузить информацию о сессии"}
              </p>
              <Button variant="primary" onClick={() => navigate("/test")}>
                Вернуться назад
              </Button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="px-4 py-8 min-h-screen bg-gray-50">
      <div className="mx-auto max-w-4xl">
        {/* Header с названием приложения */}
        <div className="flex gap-4 justify-between items-center mb-6">
          <div>
            <h1 className="font-bold text-gray-900 title-l">
              {session.app?.title || "Приложение"}
            </h1>
            <p className="text-gray-500 text-s">
              ID сессии: {session.id.slice(0, 8)}...
            </p>
          </div>
          <StatusBadge status={session.status} />
        </div>

        {/* Pixel Streaming Player - показывается когда сессия запущена */}
        {session.status === "started" && session.playerPort && (
          <div className="mb-6 aspect-video">
            <PixelStreamingWrapper
              initialSettings={{
                ss: `ws://127.0.0.1:${session.playerPort}`,
                AutoPlayVideo: true,
                AutoConnect: true,
                StartVideoMuted: true,
                HoveringMouse: true,
                WaitForStreamer: true,
              }}
              // onVideoInitialized={() => setIsVideoInitialized(true)}
            />
          </div>
        )}

        {/* Основная карточка с информацией */}
        <div className="grid gap-6 mb-6 md:grid-cols-2">
          {/* Информация о сессии */}
          <div className="p-6 bg-white rounded-2xl shadow-sm">
            <h2 className="flex gap-2 items-center mb-4 font-semibold text-gray-900 title-m">
              <div className="size-5 text-[#7B60F3]">
                <StartIcon />
              </div>
              Информация о сессии
            </h2>
            <div className="space-y-3">
              <InfoRow label="Режим" value={getModeLabel(session.mode)} />
              {session.tier && (
                <InfoRow label="Уровень" value={getTierLabel(session.tier)} />
              )}
              <InfoRow label="Начало" value={formatDateTime(session.startAt)} />
              {session.endAt && (
                <InfoRow
                  label="Завершение"
                  value={formatDateTime(session.endAt)}
                />
              )}
              {session.appPid && (
                <InfoRow label="PID приложения" value={session.appPid} />
              )}
              {session.cirrusPid && (
                <InfoRow label="PID Cirrus" value={session.cirrusPid} />
              )}
              {session.streamerPort && (
                <InfoRow label="Streamer Port" value={session.streamerPort} />
              )}
              {session.playerPort && (
                <InfoRow label="Player Port" value={session.playerPort} />
              )}
              {session.sfuPort && (
                <InfoRow label="SFU Port" value={session.sfuPort} />
              )}
            </div>
          </div>

          {/* Информация о сервере */}
          {session.server && (
            <div className="p-6 bg-white rounded-2xl shadow-sm">
              <h2 className="flex gap-2 items-center mb-4 font-semibold text-gray-900 title-m">
                <div className="size-5 text-[#7B60F3]">
                  <CheckIcon />
                </div>
                Сервер
              </h2>
              <div className="space-y-3">
                <InfoRow label="Hostname" value={session.server.hostname} />
                <InfoRow label="IP адрес" value={session.server.localIp} />
                <InfoRow
                  label="Тип"
                  value={
                    session.server.type === "stream" ? "Стрим" : "Локальный"
                  }
                />
                {session.server.location && (
                  <InfoRow
                    label="Локация"
                    value={getLocationLabel(session.server.location)}
                  />
                )}
                {session.server.tier && (
                  <InfoRow
                    label="Уровень"
                    value={getTierLabel(session.server.tier)}
                  />
                )}
              </div>
            </div>
          )}

          {/* Если сервер еще не назначен */}
          {!session.server && session.status === "starting" && (
            <div className="p-6 bg-white rounded-2xl shadow-sm">
              <h2 className="flex gap-2 items-center mb-4 font-semibold text-gray-900 title-m">
                <div className="text-yellow-500 animate-spin size-5">
                  <LoaderIcon />
                </div>
                Сервер
              </h2>
              <p className="text-gray-600 text-s">
                Подбирается подходящий сервер...
              </p>
            </div>
          )}

          {/* Информация о приложении */}
          {session.app && (
            <div className="p-6 bg-white rounded-2xl shadow-sm md:col-span-2">
              <h2 className="flex gap-2 items-center mb-4 font-semibold text-gray-900 title-m">
                <div className="size-5 text-[#7B60F3]">
                  <ClockIcon />
                </div>
                Приложение
              </h2>
              <div className="grid gap-3 md:grid-cols-2">
                <InfoRow label="Название" value={session.app.title} />
                <InfoRow label="Имя системное" value={session.app.name} />
                {session.app.gpuLimitMb && (
                  <InfoRow
                    label="Лимит GPU"
                    value={`${session.app.gpuLimitMb} МБ`}
                  />
                )}
                {session.app.psVersion && (
                  <InfoRow label="Версия PS" value={session.app.psVersion} />
                )}
              </div>
            </div>
          )}
        </div>

        {/* Статусное сообщение */}
        <StatusMessage status={session.status} />

        {/* Кнопки управления */}
        <div className="flex gap-4 justify-center">
          <Button variant="secondary" onClick={() => navigate("/test")}>
            Вернуться назад
          </Button>
          {(session.status === "starting" || session.status === "ending") && (
            <Button variant="primary" onClick={() => refetch()}>
              Обновить
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}

// Компоненты помощники
function StatusBadge({ status }: { status: Session["status"] }) {
  const config = {
    starting: {
      label: "Запускается",
      color: "bg-yellow-100 text-yellow-800",
      icon: <LoaderIcon />,
      animate: true,
    },
    started: {
      label: "Запущена",
      color: "bg-green-100 text-green-800",
      icon: <CheckIcon />,
      animate: false,
    },
    ending: {
      label: "Завершается",
      color: "bg-orange-100 text-orange-800",
      icon: <LoaderIcon />,
      animate: true,
    },
    ended: {
      label: "Завершена",
      color: "bg-gray-100 text-gray-800",
      icon: <ClockIcon />,
      animate: false,
    },
  };

  const statusConfig = config[status];

  return (
    <div
      className={clsx(
        "flex gap-2 items-center px-4 py-2 rounded-xl button-m font-medium",
        statusConfig.color
      )}
    >
      <div className={clsx("size-4", statusConfig.animate && "animate-spin")}>
        {statusConfig.icon}
      </div>
      {statusConfig.label}
    </div>
  );
}

function InfoRow({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="flex justify-between items-start">
      <span className="text-gray-500 text-s">{label}:</span>
      <span className="font-medium text-right text-gray-900 text-s">
        {value}
      </span>
    </div>
  );
}

function StatusMessage({ status }: { status: Session["status"] }) {
  const messages = {
    starting: {
      text: "Сессия запускается. Пожалуйста, подождите...",
      color: "bg-yellow-50 border-yellow-200 text-yellow-800",
      icon: <LoaderIcon />,
    },
    started: {
      text: "Сессия успешно запущена и готова к работе!",
      color: "bg-green-50 border-green-200 text-green-800",
      icon: <CheckIcon />,
    },
    ending: {
      text: "Сессия завершается...",
      color: "bg-orange-50 border-orange-200 text-orange-800",
      icon: <LoaderIcon />,
    },
    ended: {
      text: "Сессия завершена. Через 5 секунд вы будете перенаправлены на главную страницу.",
      color: "bg-gray-50 border-gray-200 text-gray-800",
      icon: <ClockIcon />,
    },
  };

  const message = messages[status];

  return (
    <div
      className={clsx(
        "flex gap-4 items-start p-4 mb-6 rounded-xl border",
        message.color
      )}
    >
      <div className="size-5 flex-shrink-0 mt-0.5">{message.icon}</div>
      <p className="text-m">{message.text}</p>
    </div>
  );
}

// Утилиты форматирования
function formatDateTime(dateString: string): string {
  const date = new Date(dateString);
  return new Intl.DateTimeFormat("ru-RU", {
    dateStyle: "short",
    timeStyle: "medium",
  }).format(date);
}

function getModeLabel(mode: "stream" | "local"): string {
  return mode === "stream" ? "Стриминг" : "Локальный";
}

function getTierLabel(tier: "demo" | "prod"): string {
  return tier === "demo" ? "Демо" : "Продакшн";
}

function getLocationLabel(location: "ru1" | "uae1"): string {
  const labels = {
    ru1: "Россия (ru1)",
    uae1: "ОАЭ (uae1)",
  };
  return labels[location] || location;
}

export default SessionPage;
