"use client";

import { useEffect, useRef, useState } from "react";

type ToastState = "idle" | "sending" | "ok" | "error";

type Props = {
  state: ToastState;
  successTitle?: string;
  successMessage?: string;
  onDismiss?: () => void;
};

/**
 * Inline toast that appears below the submit button.
 * - Slides up + fades in when visible
 * - Auto-dismisses after 6 s on success
 * - Shows a close button for manual dismiss
 */
export default function SubmitToast({
  state,
  successTitle = "Submitted successfully",
  successMessage = "Your submission has been received.",
  onDismiss,
}: Props) {
  const [visible, setVisible] = useState(false);
  const [mounted, setMounted] = useState(false);
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const isActive = state === "ok" || state === "error";

  // Mount → trigger CSS enter transition
  useEffect(() => {
    if (isActive) {
      setMounted(true);
      // Tiny delay so the browser registers the initial state before animating
      requestAnimationFrame(() => {
        requestAnimationFrame(() => setVisible(true));
      });
      // Auto-dismiss success after 6 s
      if (state === "ok") {
        timerRef.current = setTimeout(() => handleDismiss(), 6000);
      }
    } else {
      // Slide out then unmount
      setVisible(false);
      timerRef.current = setTimeout(() => setMounted(false), 400);
    }
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isActive, state]);

  const handleDismiss = () => {
    if (timerRef.current) clearTimeout(timerRef.current);
    setVisible(false);
    setTimeout(() => {
      setMounted(false);
      onDismiss?.();
    }, 400);
  };

  if (!mounted) return null;

  const isSuccess = state === "ok";

  return (
    <div
      role={isSuccess ? "status" : "alert"}
      aria-live="polite"
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : "translateY(12px)",
        transition: "opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1)",
        pointerEvents: visible ? "auto" : "none",
      }}
      className={[
        "mt-5 w-full rounded-xl border px-5 py-4 flex items-start gap-4",
        isSuccess
          ? "border-primary/40 bg-primary/10 text-primary"
          : "border-red-500/40 bg-red-500/10 text-red-300",
      ].join(" ")}
    >
      {/* Icon */}
      <span
        className="material-symbols-outlined text-[28px] shrink-0 mt-0.5"
        style={{ fontVariationSettings: "'FILL' 1" }}
      >
        {isSuccess ? "check_circle" : "error"}
      </span>

      {/* Text */}
      <div className="flex-1 min-w-0">
        <p className="font-[var(--font-display-lg)] font-semibold text-sm leading-snug">
          {isSuccess ? successTitle : "Submission failed"}
        </p>
        <p className="mt-1 text-[13px] leading-relaxed opacity-80">
          {isSuccess
            ? successMessage
            : "Please check your connection and try again."}
        </p>
      </div>

      {/* Close button */}
      <button
        type="button"
        aria-label="Dismiss notification"
        onClick={handleDismiss}
        className="shrink-0 mt-0.5 opacity-60 hover:opacity-100 transition-opacity"
      >
        <span className="material-symbols-outlined text-[20px]">close</span>
      </button>
    </div>
  );
}