"use client";

import { observer } from "mobx-react";
import Image from "next/image";
import Link from "next/link";
import { useTheme } from "next-themes";
import useSWR from "swr";
// plane imports
import { SPACE_BASE_PATH } from "@plane/constants";
// assets
import PlaneBackgroundPatternDark from "@/app/assets/auth/background-pattern-dark.svg?url";
import PlaneBackgroundPattern from "@/app/assets/auth/background-pattern.svg?url";
import BlackHorizontalLogo from "@/app/assets/plane-logos/black-horizontal-with-blue-logo.png?url";
import WhiteHorizontalLogo from "@/app/assets/plane-logos/white-horizontal-with-blue-logo.png?url";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { InstanceFailureView } from "@/components/instance/instance-failure-view";
// hooks
import { useInstance } from "@/hooks/store/use-instance";
import { useUser } from "@/hooks/store/use-user";

export const InstanceProvider = observer(({ children }: { children: React.ReactNode }) => {
  const { fetchInstanceInfo, instance, error } = useInstance();
  const { fetchCurrentUser } = useUser();
  const { resolvedTheme } = useTheme();

  const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;

  useSWR("INSTANCE_INFO", () => fetchInstanceInfo(), {
    revalidateOnFocus: false,
    revalidateIfStale: false,
    errorRetryCount: 0,
  });
  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
    shouldRetryOnError: false,
    revalidateOnFocus: true,
    revalidateIfStale: true,
  });

  if (!instance && !error)
    return (
      <div className="flex items-center justify-center h-screen w-full">
        <LogoSpinner />
      </div>
    );

  const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
  if (error) {
    return (
      <div className="relative">
        <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
          <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
            <div className="flex items-center gap-x-2 py-10">
              <Link href={`${SPACE_BASE_PATH}/`} className="h-[30px] w-[133px]">
                <Image src={logo} alt="Plane logo" />
              </Link>
            </div>
          </div>
          <div className="absolute inset-0 z-0">
            <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
          </div>
          <div className="relative z-10 flex-grow">
            <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
              <InstanceFailureView />
            </div>
          </div>
        </div>
      </div>
    );
  }

  return children;
});