// Tiny imperative toast system. Anywhere in the app you can call
//   toast.success('saved')   toast.error('something went wrong')   toast.info('…')
// and a styled glass card slides in at the top-right and auto-dismisses.

const Toaster = (() => {
  let nextId = 0;
  let items = [];
  const subs = new Set();
  const emit = () => subs.forEach(fn => fn(items));

  const push = (message, type = 'info', duration = 4000) => {
    const id = ++nextId;
    items = [...items, { id, message: String(message), type }];
    emit();
    if (duration) setTimeout(() => dismiss(id), duration);
    return id;
  };
  const dismiss = (id) => {
    items = items.filter(t => t.id !== id);
    emit();
  };
  const subscribe = (fn) => { subs.add(fn); return () => subs.delete(fn); };

  return { push, dismiss, subscribe, get: () => items };
})();

const toast = (msg, type, dur) => Toaster.push(msg, type, dur);
toast.success = (m, d) => Toaster.push(m, 'success', d);
toast.error   = (m, d) => Toaster.push(m, 'error', d ?? 6000);
toast.info    = (m, d) => Toaster.push(m, 'info', d);
toast.dismiss = (id)   => Toaster.dismiss(id);

window.toast = toast;

const TOAST_COLORS = {
  success: { fg: '#34d399', bg: 'rgba(52,211,153,0.14)',  border: 'rgba(52,211,153,0.45)',  icon: 'check' },
  error:   { fg: '#f87171', bg: 'rgba(239,68,68,0.16)',   border: 'rgba(239,68,68,0.5)',    icon: 'x' },
  info:    { fg: '#a78bfa', bg: 'rgba(167,139,250,0.14)', border: 'rgba(167,139,250,0.45)', icon: 'help' },
};

function ToastContainer() {
  const [list, setList] = React.useState(Toaster.get());
  React.useEffect(() => Toaster.subscribe(setList), []);

  return (
    <div style={{
      position: 'fixed', top: 20, right: 20, zIndex: 1000,
      display: 'flex', flexDirection: 'column', gap: 10,
      maxWidth: 'calc(100vw - 40px)', pointerEvents: 'none',
    }}>
      {list.map(t => {
        const c = TOAST_COLORS[t.type] || TOAST_COLORS.info;
        return (
          <div key={t.id}
            onClick={() => Toaster.dismiss(t.id)}
            style={{
              display: 'flex', alignItems: 'center', gap: 10,
              minWidth: 280, maxWidth: 420,
              padding: '12px 16px', borderRadius: 14,
              background: c.bg,
              backdropFilter: 'blur(20px) saturate(140%)',
              WebkitBackdropFilter: 'blur(20px) saturate(140%)',
              border: `1px solid ${c.border}`,
              boxShadow: '0 12px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08)',
              color: '#fff',
              fontSize: 13.5, fontWeight: 500,
              cursor: 'pointer', pointerEvents: 'auto',
              animation: 'toastIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1)',
            }}
          >
            <div style={{
              flexShrink: 0, width: 28, height: 28, borderRadius: '50%',
              background: c.fg, display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <ApIcon name={c.icon} size={16} color="#0a0a14"/>
            </div>
            <div style={{ flex: 1, lineHeight: 1.4, color: c.fg }}>
              {t.message}
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.ToastContainer = ToastContainer;