const css = `
.m-gate{background:var(--panel);border:1px solid var(--violet-dim);font-family:var(--mono);color:var(--ink);animation:maestro-rise .25s ease both;border-radius:var(--radius-md,6px);overflow:hidden}
.m-gate-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
.m-gate--collapsed .m-gate-head{border-bottom:none}
.m-gate-hx{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.m-gate-fold{font-family:var(--mono);font-size:12px;line-height:1;cursor:pointer;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-sm,4px);padding:3px 7px;transition:color .12s,border-color .12s}
.m-gate-fold:hover{color:var(--violet);border-color:var(--violet-dim)}
.m-gate-kind{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--bg);background:var(--violet);padding:2px 8px;border-radius:var(--radius-xs,3px)}
.m-gate-title{font-weight:600;font-size:13px}
.m-gate-body{padding:12px 14px;font-size:12.5px}
.m-gate-actions{display:flex;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line-soft)}
.m-gate-doclabel{font-size:10.5px;color:var(--muted);letter-spacing:.18em;margin:8px 0 4px}
.m-gate-doclabel:first-child{margin-top:0}
.m-gate-doc{background:var(--bg-deep);border:1px solid var(--line-soft);border-left:2px solid var(--green-dim);padding:10px 12px;font-family:var(--mono);font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto;color:var(--ink);margin:0;border-radius:var(--radius-sm,4px)}
.m-gate-stripe{height:5px;background:repeating-linear-gradient(-45deg,var(--violet) 0 9px,transparent 9px 18px);opacity:.8;border-radius:3px}
`;
function ensureCss() {
  if (typeof document === 'undefined' || document.getElementById('m-gate-css')) return;
  const s = document.createElement('style'); s.id = 'm-gate-css'; s.textContent = css;
  document.head.appendChild(s);
}
const GATE_LABEL = { plan: '拆解评审', spec: '方案评审', exec: '结果评审' };

export function GateCard({ gate = 'spec', kindLabel, title, meta, docLabel, doc, actions, children, style, collapsed, foldable, onToggleFold, foldTitle, headerExtra, onHeaderDoubleClick, headerTitle }) {
  ensureCss();
  return (
    <div className={'m-gate' + (collapsed ? ' m-gate--collapsed' : '')} style={style} onDoubleClick={onHeaderDoubleClick}>
      <div className="m-gate-head" title={headerTitle}>
        <span className="m-gate-kind">{kindLabel || GATE_LABEL[gate] || gate}</span>
        <span className="m-gate-title">{title}</span>
        {meta ? <span style={{ fontSize: 11, color: 'var(--muted)' }}>{meta}</span> : null}
        {(headerExtra || foldable) ? (
          <span className="m-gate-hx">
            {headerExtra}
            {foldable ? (
              <button type="button" className="m-gate-fold" title={foldTitle}
                onClick={(e) => { e.stopPropagation(); onToggleFold && onToggleFold(); }}>
                {collapsed ? '▸' : '▾'}
              </button>
            ) : null}
          </span>
        ) : null}
      </div>
      {!collapsed ? (
        <React.Fragment>
          <div className="m-gate-body">
            {docLabel ? <div className="m-gate-doclabel">{docLabel}</div> : null}
            {doc ? <pre className="m-gate-doc">{doc}</pre> : null}
            {children}
          </div>
          {actions ? <div className="m-gate-actions">{actions}</div> : null}
        </React.Fragment>
      ) : null}
    </div>
  );
}

export function GateStripe() {
  ensureCss();
  return <div className="m-gate-stripe"></div>;
}