import React from 'react';
import { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from '@/Components/AnimatedIcons';
import { Toast, ToastSeverity } from '@/types/notifications';

// ── Severity config ───────────────────────────────────────────────────────────

interface SeverityConfig {
  containerClass: string;
  borderClass: string;
  titleClass: string;
  icon: React.ReactNode;
}

const SEVERITY_CONFIG: Record<ToastSeverity, SeverityConfig> = {
  info: {
    containerClass: 'bg-slate-800',
    borderClass:    'border-slate-600',
    titleClass:     'text-blue-300',
    icon: <Info className="w-4 h-4 text-blue-400 flex-shrink-0 mt-0.5" aria-hidden="true" />,
  },
  success: {
    containerClass: 'bg-slate-800',
    borderClass:    'border-emerald-500/40',
    titleClass:     'text-emerald-300',
    icon: <CheckCircle2 className="w-4 h-4 text-emerald-400 flex-shrink-0 mt-0.5" aria-hidden="true" />,
  },
  warning: {
    containerClass: 'bg-slate-800',
    borderClass:    'border-amber-500/40',
    titleClass:     'text-amber-300',
    icon: <AlertTriangle className="w-4 h-4 text-amber-400 flex-shrink-0 mt-0.5" aria-hidden="true" />,
  },
  error: {
    containerClass: 'bg-slate-800',
    borderClass:    'border-rose-500/40',
    titleClass:     'text-rose-300',
    icon: <AlertCircle className="w-4 h-4 text-rose-400 flex-shrink-0 mt-0.5" aria-hidden="true" />,
  },
};

// ── Single Toast Item ─────────────────────────────────────────────────────────

interface ToastItemProps {
  toast: Toast;
  onDismiss: (id: string) => void;
}

export function ToastItem({ toast, onDismiss }: ToastItemProps) {
  const config = SEVERITY_CONFIG[toast.severity];

  return (
    <div
      role="alert"
      aria-atomic="true"
      aria-live="assertive"
      className={`
        pointer-events-auto w-full ${config.containerClass} ${config.borderClass}
        border rounded-2xl shadow-2xl shadow-black/30 p-4 flex items-start gap-3
        animate-slide-up
      `}
    >
      {config.icon}

      <div className="flex-1 min-w-0">
        <p className={`text-sm font-bold leading-tight ${config.titleClass}`}>
          {toast.title}
        </p>
        {toast.message && (
          <p className="text-xs text-slate-400 mt-0.5 leading-relaxed">
            {toast.message}
          </p>
        )}
      </div>

      <button
        type="button"
        onClick={() => onDismiss(toast.id)}
        className="text-slate-500 hover:text-white transition-colors p-1 rounded-lg hover:bg-white/10 flex-shrink-0"
        aria-label={`Dismiss ${toast.severity} notification: ${toast.title}`}
      >
        <X className="w-3.5 h-3.5" aria-hidden="true" />
      </button>
    </div>
  );
}

// ── Toast Container (portal-style, stacked at bottom-right) ──────────────────

interface ToastContainerProps {
  toasts: Toast[];
  onDismiss: (id: string) => void;
}

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

  return (
    <div
      role="region"
      aria-label="Notifications"
      aria-live="polite"
      className="fixed bottom-5 right-5 z-[9999] flex flex-col gap-3 items-end w-full max-w-sm pointer-events-none"
    >
      {toasts.map((t) => (
        <ToastItem key={t.id} toast={t} onDismiss={onDismiss} />
      ))}
    </div>
  );
}