import { memo } from 'react';
import { HelpTip } from '../HelpTip';
import type { PlaybookTreeNode } from '../../help/deployRecon';

export default memo(function PlaybookWizardModal({
  open,
  onClose,
  tree,
  focusLane,
}: {
  open: boolean;
  onClose: () => void;
  tree: PlaybookTreeNode[];
  focusLane?: string;
}) {
  if (!open) return null;
  const root = tree[0];
  return (
    <div className="dr-modal-backdrop" role="dialog" aria-modal="true" data-testid="dr-playbook-modal">
      <div className="dr-modal">
        <div className="dr-modal-head">
          <h2>Playbook wizard <HelpTip field="dr_playbook_wizard" /></h2>
          <button type="button" className="btn btn-outline btn-sm" onClick={onClose}>
            Close
          </button>
        </div>
        {root ? (
          <div className="dr-playbook-tree">
            <p className="dr-playbook-root">
              Target <span className="font-tech">{root.label}</span>
            </p>
            <ul>
              {(root.children ?? []).map((node) => (
                <li key={node.id} className={focusLane === node.id ? 'focused' : ''}>
                  <a href={node.href} target="_blank" rel="noreferrer">
                    {node.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ) : (
          <p className="dr-empty">Run a scan to populate spread lanes.</p>
        )}
      </div>
    </div>
  );
});