// ===== Toast Notification System =====
const { useState: useS_Toast, useEffect: useE_Toast } = React;

// Global toast state
let toastQueue = [];
let toastListeners = [];

const addToastListener = (listener) => {
  toastListeners.push(listener);
  return () => toastListeners = toastListeners.filter(l => l !== listener);
};

const showToast = (message, type = "info", duration = 3000) => {
  const id = Math.random().toString(36).substr(2, 9);
  const toast = { id, message, type, duration };
  toastQueue = [...toastQueue, toast];
  toastListeners.forEach(listener => listener([...toastQueue]));

  if (duration > 0) {
    setTimeout(() => {
      toastQueue = toastQueue.filter(t => t.id !== id);
      toastListeners.forEach(listener => listener([...toastQueue]));
    }, duration);
  }
  return id;
};

function ToastContainer() {
  const [toasts, setToasts] = useS_Toast([]);

  useE_Toast(() => {
    const unsubscribe = addToastListener(setToasts);
    return unsubscribe;
  }, []);

  const removeToast = (id) => {
    setToasts(t => t.filter(toast => toast.id !== id));
  };

  // Separate toasts by position
  const isTopRightToast = (msg) => msg.includes("Request komoditas berhasil") || msg.includes("Periksa kembali form");
  const topRightToasts = toasts.filter(t => isTopRightToast(t.message));
  const centerToasts = toasts.filter(t => !isTopRightToast(t.message));

  return (
    <>
      {/* Center positioned toasts */}
      <div style={{
        position: "fixed",
        top: "50%",
        left: "50%",
        transform: "translateX(-50%) translateY(-50%)",
        zIndex: 9999,
        pointerEvents: "none",
        display: "flex",
        flexDirection: "column",
        gap: 10,
        alignItems: "center"
      }}>
        {centerToasts.map(toast => (
          <div
            key={toast.id}
            onClick={() => removeToast(toast.id)}
            style={{
              pointerEvents: "auto",
              cursor: "pointer",
              padding: "14px 24px",
              borderRadius: 8,
              fontSize: 14,
              fontWeight: 500,
              boxShadow: "0 8px 24px rgba(6, 81, 173, 0.25)",
              display: "flex",
              alignItems: "center",
              gap: 12,
              animation: "slideInTop 0.3s ease-out",
              background: "linear-gradient(135deg, #0651ad, #0d6efd)",
              color: "#fff",
              backdropFilter: "blur(10px)",
              minWidth: 300,
              justifyContent: "center",
              textAlign: "center"
            }}
          >
            <span>{toast.message}</span>
          </div>
        ))}
      </div>

      {/* Top-right positioned toasts (Request komoditas success) */}
      <div style={{
        position: "fixed",
        top: 16,
        right: 16,
        zIndex: 9999,
        pointerEvents: "none",
        display: "flex",
        flexDirection: "column",
        gap: 10
      }}>
        {topRightToasts.map(toast => (
          <div
            key={toast.id}
            onClick={() => removeToast(toast.id)}
            style={{
              pointerEvents: "auto",
              cursor: "pointer",
              padding: "12px 16px",
              borderRadius: 8,
              fontSize: 13,
              fontWeight: 500,
              boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
              display: "flex",
              alignItems: "center",
              gap: 10,
              animation: "slideInRight 0.3s ease-out",
              background: "linear-gradient(135deg, #0651ad, #0d6efd)",
              color: "#fff",
              backdropFilter: "blur(8px)"
            }}
          >
            <span>{toast.message}</span>
          </div>
        ))}
      </div>
    </>
  );
}

// Export untuk digunakan di komponen
window.showToast = showToast;

// Add animation styles
const style = document.createElement('style');
style.textContent = `
  @keyframes slideInTop {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-100%);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(-50%);
    }
  }
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(400px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
`;
document.head.appendChild(style);