// StationModal — the station editor as a modal dialog. Chrome copied from
// TaskModal (overlay, backdrop-blur, rounded-3xl panel, ESC + scroll lock);
// the body is the EXISTING StationPanel editor, reused unchanged (it brings
// its own header + close button). Pure composite — the create page owns the
// graph working copy and applies the ops StationPanel emits.
//
// Props: exactly StationPanel's — { node, template, templates, features,
//        edges, nodes, readOnly, onEdit, onClose }

const StationModal = ({ node, template, templates, features, edges, nodes, readOnly, onEdit, onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose && onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [onClose]);

  if (!node) return null;
  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-8" role="dialog" aria-modal="true">
      <div className="absolute inset-0 bg-neutral-900/60 backdrop-blur-sm motion-enter" onClick={() => onClose && onClose()} />
      <div className="relative bg-white rounded-3xl shadow-2xl border border-neutral-200 w-full max-w-3xl max-h-[92vh] flex flex-col overflow-hidden motion-enter">
        <window.StationPanel
          key={node.id}
          node={node}
          template={template}
          templates={templates}
          features={features}
          edges={edges}
          nodes={nodes}
          readOnly={readOnly}
          onEdit={onEdit}
          onClose={onClose}
        />
      </div>
    </div>
  );
};

if (typeof window !== 'undefined') {
  window.StationModal = StationModal;
}