"use client";

import { useEffect, useState } from "react";
import type { Notification } from "../../hooks/useClients";

interface ToastProps {
  notification: Notification | null;
}

export function Toast({ notification }: ToastProps) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (notification) {
      setVisible(true);
    } else {
      const t = setTimeout(() => setVisible(false), 300);
      return () => clearTimeout(t);
    }
  }, [notification]);

  if (!visible && !notification) return null;

  const isSuccess = notification?.type === "success";

  return (
    <div
      role="status"
      aria-live="polite"
      aria-atomic="true"
      style={{
        position: "fixed",
        bottom: 24,
        left: "50%",
        transform: `translateX(-50%) translateY(${notification ? "0" : "16px"})`,
        zIndex: 9999,
        transition: "transform 250ms ease, opacity 250ms ease",
        opacity: notification ? 1 : 0,
        pointerEvents: "none",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 10,
          padding: "0.75rem 1.25rem",
          borderRadius: "var(--radius-full)",
          background: isSuccess ? "#065F46" : "#7F1D1D",
          color: "#FFFFFF",
          fontSize: 13,
          fontWeight: 600,
          boxShadow: "0 8px 32px rgba(0,0,0,0.25)",
          maxWidth: "90vw",
          whiteSpace: "nowrap",
          fontFamily: "var(--font-sans)",
        }}
      >
        <span style={{ fontSize: 16 }}>{isSuccess ? "✓" : "⚠"}</span>
        <span>{notification?.message}</span>
      </div>
    </div>
  );
}