"use client";

import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";
import { useEffect, useState, type CSSProperties } from "react";
import { Toaster as Sonner, type ToasterProps } from "sonner";

import { cn } from "@/lib/utils";

export function Toaster(props: ToasterProps) {
  const pathname = usePathname();
  const { resolvedTheme = "light" } = useTheme();
  const [documentLang, setDocumentLang] = useState("de");

  useEffect(() => {
    setDocumentLang(document.documentElement.lang || "de");
  }, [pathname]);

  const isArabic = documentLang === "ar";
  const toastFontClassName = isArabic ? "font-arabic text-right tracking-normal" : "font-latin text-left";
  const toasterStyle: CSSProperties & Record<"--width", string> = {
    "--width": "max-content",
    left: "50%",
    right: "auto",
    transform: "translateX(-50%)",
    ...(props.style ?? {}),
  };

  return (
    <Sonner
      {...props}
      dir={props.dir ?? "ltr"}
      theme={resolvedTheme as ToasterProps["theme"]}
      position={props.position ?? "top-center"}
      duration={props.duration ?? 1800}
      closeButton={props.closeButton ?? false}
      offset={props.offset ?? "16px"}
      mobileOffset={props.mobileOffset ?? "16px"}
      className={cn("toaster group", props.className)}
      style={toasterStyle}
      toastOptions={{
        ...props.toastOptions,
        style: {
          ...(props.toastOptions?.style ?? {}),
          borderRadius: "16px",
          padding: "10px 12px",
          minWidth: "0",
          maxWidth: "min(calc(100vw - 2rem), 32rem)",
          background: "hsl(var(--card))",
          color: "hsl(var(--card-foreground))",
          border: "1px solid hsl(var(--border))",
          direction: isArabic ? "rtl" : "ltr",
          textAlign: isArabic ? "right" : "left",
        },
        classNames: {
          ...props.toastOptions?.classNames,
          toast: cn(
            "group toast group-[.toaster]:min-w-0 group-[.toaster]:w-fit group-[.toaster]:max-w-[min(calc(100vw-2rem),32rem)] group-[.toaster]:rounded-[16px] group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:bg-card group-[.toaster]:px-3 group-[.toaster]:py-2 group-[.toaster]:text-card-foreground group-[.toaster]:shadow-panel",
            toastFontClassName,
            props.toastOptions?.classNames?.toast,
          ),
          title: cn(
            "text-[13px] font-medium leading-5",
            isArabic ? "text-right" : "text-left",
            props.toastOptions?.classNames?.title,
          ),
          description: cn(
            "text-[13px] leading-5 text-muted-foreground",
            isArabic ? "text-right" : "text-left",
            props.toastOptions?.classNames?.description,
          ),
          default: cn(
            "border-border bg-card text-card-foreground",
            props.toastOptions?.classNames?.default,
          ),
          success: cn(
            "border-status-success/30 bg-status-success-soft text-status-success dark:border-status-success/40 dark:bg-status-success-soft dark:text-status-success",
            props.toastOptions?.classNames?.success,
          ),
          error: cn(
            "border-destructive/30 bg-destructive/10 text-destructive dark:border-destructive/40 dark:bg-destructive/20 dark:text-destructive-foreground",
            props.toastOptions?.classNames?.error,
          ),
          closeButton: "hidden",
        },
      }}
    />
  );
}