"use client";

import { useEffect, useState, useCallback } from "react";
import { CheckCircle, AlertCircle, Info, X } from "lucide-react";
import styles from "./Toast.module.css";

type ToastVariant = "success" | "error" | "info" | "warning";

interface ToastItem {
  id: string;
  message: string;
  variant: ToastVariant;
}

// Singleton event emitter untuk toast global
type ToastListener = (toast: ToastItem) => void;
const listeners: ToastListener[] = [];

function emit(toast: ToastItem) {
  listeners.forEach((l) => l(toast));
}

/** Tampilkan toast dari mana saja (termasuk server action handler) */
export function showToast(message: string, variant: ToastVariant = "info") {
  emit({ id: `${Date.now()}-${Math.random()}`, message, variant });
}

const icons: Record<ToastVariant, typeof CheckCircle> = {
  success: CheckCircle,
  error: AlertCircle,
  info: Info,
  warning: AlertCircle,
};

export default function ToastProvider() {
  const [toasts, setToasts] = useState<ToastItem[]>([]);

  const addToast = useCallback((toast: ToastItem) => {
    setToasts((prev) => [...prev, toast]);
    setTimeout(() => {
      setToasts((prev) => prev.filter((t) => t.id !== toast.id));
    }, 4000);
  }, []);

  useEffect(() => {
    listeners.push(addToast);
    return () => {
      const idx = listeners.indexOf(addToast);
      if (idx > -1) listeners.splice(idx, 1);
    };
  }, [addToast]);

  const dismiss = (id: string) =>
    setToasts((prev) => prev.filter((t) => t.id !== id));

  if (toasts.length === 0) return null;

  return (
    <div className={styles.container} aria-live="assertive" aria-atomic="true">
      {toasts.map((toast) => {
        const Icon = icons[toast.variant];
        return (
          <div
            key={toast.id}
            className={`${styles.toast} ${styles[toast.variant]}`}
            role="alert"
          >
            <Icon size={16} className={styles.icon} aria-hidden />
            <span className={styles.message}>{toast.message}</span>
            <button
              onClick={() => dismiss(toast.id)}
              className={styles.close}
              aria-label="Tutup notifikasi"
            >
              <X size={14} />
            </button>
          </div>
        );
      })}
    </div>
  );
}