// T2 Falcon Admin — Drawers (Add Node / Edit Node)

const { useState: useStateDr, useEffect: useEffectDr } = React;

const Drawer = ({ title, onClose, children, footer }) => {
  useEffectDr(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <aside className="drawer" role="dialog" aria-modal="true">
        <div className="drawer-head">
          <div className="drawer-title">{title}</div>
          <button className="drawer-close" onClick={onClose} aria-label="Close"><IcClose size={14} stroke={2} /></button>
        </div>
        <div className="drawer-body">
          {children}
        </div>
        <div className="drawer-foot">{footer}</div>
      </aside>
    </>
  );
};

const NodeDrawer = ({ mode, initialName = '', onSubmit, onClose, t }) => {
  const [name, setName] = useStateDr(initialName);
  const isEdit = mode === 'edit';
  const submit = () => {
    if (!name.trim()) return;
    onSubmit(name.trim());
  };
  return (
    <Drawer
      title={isEdit ? t.editNode : t.addNode}
      onClose={onClose}
      footer={(
        <>
          <button className="btn btn-secondary" onClick={onClose}>{t.cancel}</button>
          <button className="btn btn-primary" onClick={submit} disabled={!name.trim()}>
            {isEdit ? t.save : t.add}
          </button>
        </>
      )}
    >
      <div className="field">
        <label className="field-label">{t.nodeName}</label>
        <input
          className="field-input"
          autoFocus
          value={name}
          onChange={(e) => setName(e.target.value)}
          onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
        />
      </div>
    </Drawer>
  );
};

window.Drawer = Drawer;
window.NodeDrawer = NodeDrawer;