import Link from "next/link";
import { ReactNode } from "react";
import {
  FaCheckCircle,
  FaExclamationTriangle,
  FaTimesCircle,
} from "react-icons/fa";
import { FaCircleInfo } from "react-icons/fa6";

import { SUPPORT_EMAIL } from "@/constants/signup-form-constants";

type ErrorMessageProps = {
  title: string;
  message: string;
  showSupportEmail?: boolean;
  linkTitle?: string;
  linkHref?: string;
  variant: "success" | "alert" | "error" | "info";
  forceDarkMode?: boolean;
};

function Alert({
  title,
  message,
  showSupportEmail,
  linkTitle,
  linkHref,
  variant,
  forceDarkMode,
}: ErrorMessageProps) {
  const variantClasses = {
    success: "bg-green-50",
    alert: "bg-yellow-50",
    error: "bg-red-50",
    info: "bg-blue-50",
  };

  const darkModeClasses = {
    success: "bg-green-50 dark:bg-green-900/10",
    alert: "bg-yellow-50 dark:bg-yellow-900/10",
    error: "bg-red-50 dark:bg-red-900/10",
    info: "bg-blue-50 dark:bg-blue-900/10",
  };

  const variantIcons: Record<string, ReactNode> = {
    success: <FaCheckCircle />,
    alert: <FaExclamationTriangle />,
    error: <FaTimesCircle />,
    info: <FaCircleInfo />,
  };

  const variantTextClasses = {
    success: "text-green-700 text-sm",
    alert: "text-yellow-800 text-sm",
    error: "text-red-700 text-sm",
    info: "text-blue-700 text-sm",
  };

  const darkModeTextClasses = {
    success: "text-green-700 text-sm dark:text-green-300",
    alert: "text-yellow-800 text-sm dark:text-yellow-300",
    error: "text-red-900 text-sm dark:text-red-300",
    info: "text-blue-800 text-sm dark:text-blue-300",
  };

  const variantClassesWithDarkMode = forceDarkMode
    ? darkModeClasses
    : variantClasses;

  const variantTextClassesWithDarkMode = forceDarkMode
    ? darkModeTextClasses
    : variantTextClasses;

  return (
    <div
      aria-live={variant === "error" ? "assertive" : "polite"}
      className={`${variantClassesWithDarkMode[variant]} font-noto rounded-md p-4 text-center sm:text-left`}
      role={variant === "error" ? "alert" : undefined}
    >
      <div className="flex flex-col items-center sm:flex-row sm:items-start">
        <div
          aria-hidden
          className={`${variantTextClassesWithDarkMode[variant]} size-4 mt-1`}
        >
          {variantIcons[variant]}
        </div>
        <div className="ms-0 md:ms-3">
          <h2
            className={`${variantTextClassesWithDarkMode[variant]} font-extrabold text-base`}
          >
            {title}
          </h2>
          <p
            className={`mt-2 ${variantTextClassesWithDarkMode[variant]} font-medium`}
          >
            {message}
            {showSupportEmail && (
              <>
                <Link
                  className={`${variantTextClassesWithDarkMode[variant]} underline underline-offset-2 decoration-dotted cursor-pointer`}
                  href={`mailto:${SUPPORT_EMAIL}`}
                >
                  <span className="text-sm">{SUPPORT_EMAIL}</span>
                </Link>
                <span>.</span>
              </>
            )}
          </p>
          {linkTitle && linkHref && (
            <div
              className={`${variantTextClassesWithDarkMode[variant]} underline decoration-dotted cursor-pointer font-semibold mt-3`}
            >
              <Link href={linkHref}>{linkTitle}</Link>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default Alert;