import React, { createContext, useContext, useState, useCallback } from 'react';

const ToastContext = createContext(null);

let toastId = 0;

export function ToastProvider({ children }) {
  const [toasts, setToasts] = useState([]);

  const addToast = useCallback((message, type = 'info', duration = 4000) => {
    const id = ++toastId;
    setToasts(prev => [...prev, { id, message, type }]);
    if (duration > 0) {
      setTimeout(() => {
        setToasts(prev => prev.filter(t => t.id !== id));
      }, duration);
    }
    return id;
  }, []);

  const removeToast = useCallback((id) => {
    setToasts(prev => prev.filter(t => t.id !== id));
  }, []);

  const toast = useCallback((message, type, duration) => addToast(message, type, duration), [addToast]);
  toast.success = (msg, duration) => addToast(msg, 'success', duration);
  toast.error = (msg, duration) => addToast(msg, 'error', duration ?? 6000);
  toast.warning = (msg, duration) => addToast(msg, 'warning', duration);
  toast.info = (msg, duration) => addToast(msg, 'info', duration);

  return (
    <ToastContext.Provider value={toast}>
      {children}
      <ToastContainer toasts={toasts} onDismiss={removeToast} />
    </ToastContext.Provider>
  );
}

export function useToast() {
  const ctx = useContext(ToastContext);
  if (!ctx) throw new Error('useToast must be used within a ToastProvider');
  return ctx;
}

// --- Toast UI ---

const TOAST_STYLES = {
  container: {
    position: 'fixed',
    top: '1rem',
    right: '1rem',
    zIndex: 99999,
    display: 'flex',
    flexDirection: 'column',
    gap: '0.5rem',
    pointerEvents: 'none',
    maxWidth: '400px',
  },
  toast: {
    pointerEvents: 'auto',
    padding: '0.75rem 1rem',
    borderRadius: '0.5rem',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '0.8rem',
    color: '#E2E8F0',
    display: 'flex',
    alignItems: 'center',
    gap: '0.5rem',
    boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
    animation: 'toast-slide-in 0.2s ease-out',
    cursor: 'pointer',
  },
  success: {
    background: 'linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08))',
    border: '1px solid rgba(16, 185, 129, 0.5)',
  },
  error: {
    background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08))',
    border: '1px solid rgba(239, 68, 68, 0.5)',
  },
  warning: {
    background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08))',
    border: '1px solid rgba(245, 158, 11, 0.5)',
  },
  info: {
    background: 'linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.08))',
    border: '1px solid rgba(14, 165, 233, 0.5)',
  },
};

const TOAST_ICONS = {
  success: '✓',
  error: '✕',
  warning: '⚠',
  info: 'ℹ',
};

function ToastContainer({ toasts, onDismiss }) {
  if (toasts.length === 0) return null;

  return (
    <div style={TOAST_STYLES.container}>
      {toasts.map(t => (
        <div
          key={t.id}
          style={{ ...TOAST_STYLES.toast, ...TOAST_STYLES[t.type] }}
          onClick={() => onDismiss(t.id)}
          role="alert"
          aria-live="polite"
        >
          <span style={{ fontSize: '1rem', flexShrink: 0 }}>{TOAST_ICONS[t.type]}</span>
          <span>{t.message}</span>
        </div>
      ))}
    </div>
  );
}
