"use client";

import { useEffect, useState } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

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

type FlashMessageProps = {
  type: "success" | "error";
  message: string;
  clearDelayMs?: number;
};

export function FlashMessage({
  type,
  message,
  clearDelayMs = 4000,
}: FlashMessageProps) {
  const pathname = usePathname();
  const router = useRouter();
  const searchParams = useSearchParams();
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    setVisible(true);
  }, [message, pathname, searchParams]);

  useEffect(() => {
    if (!message) {
      return undefined;
    }

    const timeoutId = window.setTimeout(() => {
      setVisible(false);

      const nextParams = new URLSearchParams(searchParams.toString());
      nextParams.delete("success");
      nextParams.delete("error");

      const nextQuery = nextParams.toString();
      router.replace(nextQuery ? `${pathname}?${nextQuery}` : pathname, {
        scroll: false,
      });
    }, clearDelayMs);

    return () => {
      window.clearTimeout(timeoutId);
    };
  }, [clearDelayMs, message, pathname, router, searchParams]);

  if (!visible) {
    return null;
  }

  return (
    <p
      className={cn(
        "rounded-nested border px-4 py-3 text-sm",
        type === "success"
          ? "border-status-success/30 bg-status-success/10 text-status-success"
          : "border-destructive/30 bg-destructive/10 text-destructive",
      )}
    >
      {message}
    </p>
  );
}