"use client";

import NextTopLoader from "nextjs-toploader";
import { NextUIProvider } from "@nextui-org/react";
import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
import { ToastPosition, Toaster } from "react-hot-toast";
import { useEffect, useState } from "react";

type ProvidersProps = {
  children: React.ReactNode;
};

function ToasterWithTheme() {
  const { resolvedTheme } = useTheme();
  const [position, setPosition] = useState<ToastPosition>("top-right");

  useEffect(() => {
    setPosition(window.innerWidth >= 1280 ? "top-right" : "top-center");

    const handleResize = () => {
      setPosition(window.innerWidth >= 1280 ? "top-right" : "top-center");
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <Toaster
      position={position}
      toastOptions={{
        className: "p-4 font-noto text-sm",
        duration: 5000,
        ariaProps: {
          role: "status",
          "aria-live": "polite",
        },
        style: {
          background: resolvedTheme === "dark" ? "#262624" : "#ffffff",
          color: resolvedTheme === "dark" ? "#f9fafb" : "#262624",
        },
      }}
    />
  );
}

export function Providers({ children }: ProvidersProps) {
  return (
    <NextUIProvider locale="en-GB">
      <NextThemesProvider attribute="class" defaultTheme="light">
        <>
          <NextTopLoader
            showSpinner
            color="#00B0FF"
            shadow={false}
            showAtBottom={false}
          />
          {children}
          <ToasterWithTheme />
        </>
      </NextThemesProvider>
    </NextUIProvider>
  );
}