import React from "react";

function ensureStyle(id, css) {
  if (typeof document === "undefined") return;
  if (document.getElementById(id)) return;
  const el = document.createElement("style");
  el.id = id; el.textContent = css;
  document.head.appendChild(el);
}

ensureStyle("at-toast", `
  .at-toast{display:grid;grid-template-columns:18px 1fr auto;gap:9px;align-items:start;max-width:360px;
    padding:12px 14px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);
    background:var(--at-white);box-shadow:var(--shadow-md);font-family:var(--font-sans);
    animation:at-toast-in .16s cubic-bezier(.22,1,.36,1)}
  @keyframes at-toast-in{from{transform:translateX(12px);opacity:0}to{transform:translateX(0);opacity:1}}
  .at-toast__icon{width:18px;height:18px;border-radius:var(--radius-pill);display:grid;place-items:center;font-size:11px;font-weight:700}
  .at-toast__title{font-size:13px;line-height:18px;font-weight:700;color:var(--fg-1)}
  .at-toast__description{margin-top:2px;font-size:12px;line-height:16px;color:var(--fg-3)}
  .at-toast__dismiss{border:0;background:transparent;color:var(--fg-4);width:22px;height:22px;border-radius:var(--radius-sm);cursor:pointer}
  .at-toast__dismiss:hover{background:var(--at-plum-100);color:var(--fg-1)}
  .at-toast--success .at-toast__icon{background:var(--at-success-bg);color:var(--at-success-fg)}
  .at-toast--error .at-toast__icon{background:var(--at-flush-50);color:var(--at-flush-700)}
  .at-toast--info .at-toast__icon{background:var(--at-info-bg);color:var(--at-info-fg)}
`);

const ICON = { success: "✓", error: "!", info: "i" };

/**
 * Transient feedback card. Position it from a toast stack, not inside Toast.
 */
export function Toast({ tone, title, description, onDismiss }) {
  return (
    <div className={`at-toast at-toast--${tone}`} role={tone === "error" ? "alert" : "status"}>
      <span className="at-toast__icon" aria-hidden="true">{ICON[tone]}</span>
      <div>
        <div className="at-toast__title">{title}</div>
        {description && <div className="at-toast__description">{description}</div>}
      </div>
      {onDismiss && <button type="button" className="at-toast__dismiss" onClick={onDismiss} aria-label="Dismiss">×</button>}
    </div>
  );
}