// blueprint-route-wrapper.jsx
// Route-scoped Blueprint context wrapper. Disabled by default.
// It must wrap existing legacy route content as children, never replace it.

function isBlueprintRouteWrapperEnabled(view) {
  return (view === 'cmj' || view === 'sj' || view === 'imtp' || view === 'field-test' || view === 'training' || view === 'calendar' || view === 'norms' || view === 'knowledge' || view === 'team' || view === 'settings' || view === 'individual' || view === 'report' || view === 'injury' || view === 'rehab' || view === 'movement-screen') && document.documentElement.dataset.blueprintRouteWrapper === '1';
}

function BlueprintRouteWrapper({
  section,
  routeLabel,
  breadcrumb,
  children,
}) {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      flex: 1,
      minHeight: 0,
      background: 'var(--bg)',
    }}>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 16,
        padding: '7px 18px',
        borderBottom: '1px solid rgba(15,23,42,.06)',
        background: 'color-mix(in srgb, var(--panel) 32%, var(--bg) 68%)',
        flexShrink: 0,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
          <span style={{
            fontSize: 10.5,
            letterSpacing: '.06em',
            textTransform: 'uppercase',
            color: 'var(--muted-2)',
            fontWeight: 600,
          }}>{section}</span>
          <span style={{
            width: 1,
            height: 12,
            background: 'var(--border)',
            display: 'inline-block',
            flexShrink: 0,
          }} />
          <strong style={{
            fontSize: 13,
            color: 'var(--text)',
            fontWeight: 600,
            whiteSpace: 'nowrap',
          }}>{routeLabel}</strong>
        </div>
        <span style={{
          fontSize: 10.5,
          color: 'var(--muted-2)',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          flexShrink: 0,
        }}>{breadcrumb}</span>
      </div>
      <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
        {children}
      </div>
    </div>
  );
}