/* global React, ReactDOM */
// Toast system — Phase 3 placeholder helper
(function () {
  const LOG = 'toast-root';
  let rootEl = null;
  let queue = [];
  let nextId = 1;
  let rerender = null;

  function Toast({ items }) {
    return (
      <div className="toast-stack">
        {items.map(t => (
          <div key={t.id} className={`toast ${t.leaving ? 'leave' : ''}`}>
            <i data-lucide="info"></i>
            <span>{t.msg}</span>
          </div>
        ))}
      </div>
    );
  }

  function ToastHost() {
    const [items, setItems] = React.useState([]);
    React.useEffect(() => {
      rerender = setItems;
      setItems(queue.slice());
    }, []);
    React.useEffect(() => {
      if (window.lucide) window.lucide.createIcons();
    });
    return <Toast items={items} />;
  }

  function ensureRoot() {
    if (rootEl) return;
    const host = document.createElement('div');
    host.id = LOG;
    document.body.appendChild(host);
    rootEl = ReactDOM.createRoot(host);
    rootEl.render(<ToastHost />);
  }

  window.showToast = function (msg) {
    ensureRoot();
    const id = nextId++;
    const item = { id, msg: msg || 'Phase 3에서 구현됩니다', leaving: false };
    queue.push(item);
    if (rerender) rerender(queue.slice());
    // fade-out after 1.7s, remove after 2s
    setTimeout(() => {
      item.leaving = true;
      if (rerender) rerender(queue.slice());
    }, 1700);
    setTimeout(() => {
      queue = queue.filter(q => q.id !== id);
      if (rerender) rerender(queue.slice());
    }, 2000);
  };

  window.phase3 = function () { window.showToast('Phase 3에서 구현됩니다'); };
})();