import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-toast{display:flex;align-items:flex-start;gap:12px;background:var(--steel-900);color:#fff;border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-lg);min-width:300px;max-width:420px;font-family:var(--font-sans);animation:nbl-toast-in var(--dur-slow) var(--ease-out);}
@keyframes nbl-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nbl-toast__icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;margin-top:1px;}
.nbl-toast--success .nbl-toast__icon{color:var(--green-500);}
.nbl-toast--danger .nbl-toast__icon{color:var(--red-500);}
.nbl-toast--info .nbl-toast__icon{color:var(--blue-400);}
.nbl-toast__body{flex:1;min-width:0;}
.nbl-toast__title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:#fff;margin:0 0 2px;line-height:var(--leading-snug);}
.nbl-toast__msg{font-size:var(--text-sm);color:var(--steel-300);margin:0;line-height:var(--leading-normal);}
.nbl-toast__close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--steel-400);cursor:pointer;flex-shrink:0;transition:background var(--dur-fast),color var(--dur-fast);padding:0;}
.nbl-toast__close:hover{background:var(--steel-700);color:#fff;}
`;

inject('nbl-toast-css', css);

const icons: Record<string, React.ReactNode> = {
  success: (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
      <path d="M5 8l2 2 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  danger: (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
      <path d="M8 5v4M8 11v.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  ),
  info: (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
      <path d="M8 7v5M8 5v.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  ),
};

export interface ToastProps {
  tone?: 'success' | 'danger' | 'info';
  title: string;
  message?: string;
  onClose?: () => void;
  className?: string;
}

export function Toast({ tone = 'info', title, message, onClose, className = '' }: ToastProps) {
  inject('nbl-toast-css', css);
  const cls = ['nbl-toast', `nbl-toast--${tone}`, className].filter(Boolean).join(' ');

  return (
    <div className={cls} role="alert" aria-live="assertive">
      <span className="nbl-toast__icon">{icons[tone]}</span>
      <div className="nbl-toast__body">
        <p className="nbl-toast__title">{title}</p>
        {message && <p className="nbl-toast__msg">{message}</p>}
      </div>
      {onClose && (
        <button className="nbl-toast__close" onClick={onClose} aria-label="Dismiss">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
          </svg>
        </button>
      )}
    </div>
  );
}