"use client";

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

/**
 * [FormMessage 컴포넌트]
 * - 로그인/회원가입 실패 메시지를 보여줍니다.
 * - [UX 개선] 메시지가 보인 후, URL에서 ?message=... 부분을 지워서
 *   새로고침 시 메시지가 다시 뜨지 않도록 합니다.
 */
export default function FormMessage({ message }: { message: string }) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    // 메시지가 있고, URL에 message 파라미터가 있다면
    if (message && searchParams.has("message")) {
      // 1. 현재 URL 파라미터 복사
      const params = new URLSearchParams(searchParams.toString());
      // 2. message 파라미터 삭제
      params.delete("message");

      // 3. URL 업데이트 (페이지 새로고침 없이 주소만 변경)
      // replaceState를 사용하여 히스토리에 남기지 않고 주소창만 깔끔하게 바꿉니다.
      const newUrl = params.toString()
        ? `${pathname}?${params.toString()}`
        : pathname;
      window.history.replaceState(null, "", newUrl);
    }
  }, [message, pathname, searchParams]);

  if (!message) return null;

  // 에러 메시지인지 성공 메시지인지 대략적으로 판단 (성공 메시지는 보통 '확인', '완료' 등이 포함됨)
  // 여기서는 간단하게 모든 메시지를 동일한 스타일로 보여주되, 필요하면 분기 가능합니다.
  const isError = !message.includes("완료") && !message.includes("확인");

  return (
    <div
      className={`rounded-md p-4 text-sm ${
        isError
          ? "bg-red-50 text-red-700 dark:bg-red-900/50 dark:text-red-200"
          : "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-200"
      }`}
    >
      {message}
    </div>
  );
}