"use client";

import { useEffect, useState } from "react";

export interface ToastMessage {
  id?: number;
  tone?: "success" | "error" | "info";
  message: string;
}

let counter = 0;
const listeners = new Set<(t: ToastMessage) => void>();

export function toast(message: string, tone: ToastMessage["tone"] = "success") {
  counter += 1;
  const item: ToastMessage = { id: counter, message, tone };
  for (const l of listeners) l(item);
}

export function ToastHost() {
  const [items, setItems] = useState<ToastMessage[]>([]);
  useEffect(() => {
    const l = (t: ToastMessage) => {
      setItems((prev) => [...prev, t]);
      setTimeout(() => {
        setItems((prev) => prev.filter((x) => x.id !== t.id));
      }, 4000);
    };
    listeners.add(l);
    return () => {
      listeners.delete(l);
    };
  }, []);
  return (
    <div className="fixed bottom-4 right-4 z-[60] flex flex-col gap-2">
      {items.map((t) => (
        <div
          key={t.id}
          className={`rounded-lg border px-4 py-2 text-sm shadow-md ${
            t.tone === "error"
              ? "border-red-200 bg-red-50 text-red-800"
              : t.tone === "info"
                ? "border-blue-200 bg-blue-50 text-blue-800"
                : "border-green-200 bg-green-50 text-green-800"
          }`}
        >
          {t.message}
        </div>
      ))}
    </div>
  );
}