/**
 * Copyright (c) 2020-present, Goldman Sachs
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { observer } from 'mobx-react-lite';
import { useEditorStore } from '../../EditorStoreProvider.js';
import {
  type AccessPointGroupState,
  type AccessPointState,
  type LakehouseAccessPointState,
  DATA_PRODUCT_TAB,
  DATA_PRODUCT_TYPE,
  DataProductEditorState,
  ModelAccessPointGroupState,
} from '../../../../stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
import {
  BugIcon,
  BuildingIcon,
  CaretDownIcon,
  Checkbox,
  CloseEyeIcon,
  clsx,
  compressImage,
  ControlledDropdownMenu,
  CustomSelectorInput,
  Dialog,
  DragPreviewLayer,
  ErrorWarnIcon,
  EyeIcon,
  GroupWorkIcon,
  HomeIcon,
  IconSelectorGrid,
  IconSelectorIcons,
  InfoCircleIcon,
  ListEditor,
  LockIcon,
  MenuContent,
  MenuContentItem,
  Modal,
  ModalBody,
  ModalFooter,
  ModalFooterButton,
  ModalHeader,
  PanelContent,
  PanelDnDEntry,
  PanelEntryDragHandle,
  PanelFormTextField,
  PanelHeader,
  PanelHeaderActionItem,
  PanelHeaderActions,
  PencilEditIcon,
  PlusIcon,
  QuestionCircleIcon,
  ResizablePanel,
  ResizablePanelGroup,
  ResizablePanelSplitter,
  Switch,
  TimesIcon,
  Tooltip,
  UploadIcon,
  useDragPreviewLayer,
  WarningIcon,
  LongArrowRightIcon,
  PURE_MappingIcon,
  GitBranchIcon,
  ListIcon,
  PanelLoadingIndicator,
  GearSuggestIcon,
  FlaskIcon,
  SparkleIcon,
} from '@finos/legend-art';
import {
  type ChangeEventHandler,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import {
  assertErrorThrown,
  guaranteeNonNullable,
  guaranteeType,
  HttpStatus,
  isNonNullable,
  NetworkClientError,
  UserSearchService,
} from '@finos/legend-shared';
import {
  AccessorQueryBuilderState,
  getCompatibleRuntimesFromAccessorOwner,
  InlineLambdaEditor,
  LineageViewer,
  QueryBuilderActionConfig,
  QueryBuilderAdvancedWorkflowState,
  type QueryBuilderState,
} from '@finos/legend-query-builder';
import { action, autorun, flowResult, runInAction } from 'mobx';
import { DataProductTestableEditor } from './testable/DataProductTestableEditor.js';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import {
  type Expertise,
  type GraphManagerState,
  type LakehouseAccessPoint,
  type Mapping,
  type PackageableElement,
  type AccessPointGroup,
  DataProduct,
  DataProductEmbeddedImageIcon,
  DataProductLibraryIcon,
  Email,
  LakehouseTargetEnv,
  StereotypeExplicitReference,
  V1_DataProduct,
  V1_DataProductIconLibraryId,
  V1_PureGraphManager,
  V1_RemoteEngine,
  validate_PureExecutionMapping,
  InternalDataProductType,
  ExternalDataProductType,
  DataProductLink,
  observer_DataProductLink,
  Region,
  DeliveryFrequency,
  AppDirOwner,
  AppDirNode,
  observe_AppDirOwner,
  observe_AppDirNode,
  AppDirLevel,
} from '@finos/legend-graph';
import {
  accessPoint_setClassification,
  accessPoint_setReproducible,
  accessPointGroup_addTarget,
  accessPointGroup_deleteTarget,
  accessPointGroup_setDescription,
  accessPointGroup_setName,
  dataProduct_setDescription,
  dataProduct_setIcon,
  dataProduct_setSupportInfoIfAbsent,
  dataProduct_setTitle,
  supportInfo_addEmail,
  supportInfo_deleteEmail,
  supportInfo_setDocumentationUrl,
  supportInfo_setFaqUrl,
  supportInfo_setLinkLabel,
  supportInfo_setSupportUrl,
  supportInfo_setWebsite,
  dataProduct_setType,
  expertise_setDescription,
  expertise_addId,
  expertise_deleteId,
  supportInfo_deleteExpertise,
  externalType_setLinkURL,
  externalType_setLinkLabel,
  accessPointGroup_setTitle,
  accessPoint_setDescription,
  accessPoint_setTitle,
  dataProduct_setOperationalMetadataIfAbsent,
  operationalMetadata_deleteCoverageRegion,
  operationalMetadata_addCoverageRegion,
  operationalMetadata_setUpdateFrequency,
  dataProduct_setOwner,
  appDirOwner_setProduction,
  appDirOwner_setProdParallel,
  appDirNode_setAppDirId,
} from '../../../../stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.js';
import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import {
  ActionAlertActionType,
  ActionAlertType,
  useApplicationNavigationContext,
} from '@finos/legend-application';
import { useDrag, useDrop } from 'react-dnd';
import {
  annotatedElement_addStereotype,
  annotatedElement_deleteStereotype,
} from '../../../../stores/graph-modifier/DomainGraphModifierHelper.js';
import {
  buildElementOption,
  type PackageableElementOption,
} from '@finos/legend-lego/graph-editor';
import {
  DataProductViewerState,
  ProductViewer,
} from '@finos/legend-extension-dsl-data-product';
import type { LegendStudioApplicationStore } from '../../../../stores/LegendStudioBaseStore.js';
import type { DepotServerClient } from '@finos/legend-server-depot';
import { RelationElementSampleValuesEditor } from '../data-editor/RelationElementSampleValuesEditor.js';
import type {
  AccessPointGroupMeta,
  AccessPointMeta,
  DataProductDocResponse,
  DSL_DataProduct_LegendStudioApplicationPlugin_Extension,
} from '../../../../stores/extensions/DSL_DataProduct_LegendStudioApplicationPlugin_Extension.js';
import {
  LEGENDAI_SUGGEST_MATCH_STRATEGY,
  LEGENDAI_SUGGEST_STAGE,
  LEGENDAI_SUGGEST_SURFACE,
} from '../../../../__lib__/LegendStudioTelemetryHelper.js';
import { useLegendAISuggestTelemetry } from '../LegendAISuggestTelemetryHooks.js';
import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../__lib__/LegendStudioDocumentation.js';

export enum AP_GROUP_MODAL_ERRORS {
  GROUP_NAME_EMPTY = 'Group Name is empty',
  GROUP_NAME_EXISTS = 'Group Name already exists',
  GROUP_DESCRIPTION_EMPTY = 'Group Description is empty',
  AP_NAME_EMPTY = 'Access Point Name is empty',
  AP_NAME_EXISTS = 'Access Point Name already exists',
  AP_DESCRIPTION_EMPTY = 'Access Point Description is empty',
}

export const AP_EMPTY_DESC_WARNING =
  'Click here to describe the data this access point produces';

const AP_DND_TYPE = 'ACCESS_POINT';
const AP_GROUP_DND_TYPE = 'ACCESS_POINT_GROUP';

export type AccessPointDragSource = {
  accessPointState: AccessPointState;
};

export type APGDragSource = {
  groupState: AccessPointGroupState;
};

const newNamePlaceholder = '';

interface HoverTextAreaProps {
  text: string;
  handleMouseOver: (event: React.MouseEvent<HTMLDivElement>) => void;
  handleMouseOut: (event: React.MouseEvent<HTMLDivElement>) => void;
  className?: string;
}

const HoverTextArea: React.FC<HoverTextAreaProps> = ({
  text: text,
  handleMouseOver,
  handleMouseOut,
  className,
}) => {
  return (
    <div
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
      className={clsx(className)}
      style={{ whiteSpace: 'pre-line' }}
    >
      {text}
    </div>
  );
};

const hoverIcon = () => {
  return (
    <div data-testid={LEGEND_STUDIO_TEST_ID.HOVER_EDIT_ICON}>
      <PencilEditIcon />
    </div>
  );
};

const AccessPointTitle = observer(
  (props: {
    accessPointState: LakehouseAccessPointState;
    aiSuggestionMeta?: AccessPointMeta | undefined;
  }) => {
    const { accessPointState, aiSuggestionMeta } = props;
    const accessPoint = accessPointState.accessPoint;
    const [editingName, setEditingName] = useState(
      accessPoint.id === newNamePlaceholder,
    );
    const handleNameEdit = () => setEditingName(true);
    const handleNameBlur = () => {
      if (accessPoint.id !== newNamePlaceholder) {
        setEditingName(false);
        const relationElement =
          accessPointState.relationElementState?.relationElement;
        if (relationElement) {
          relationElement.paths[0] = accessPoint.id;
        }
      }
    };
    const updateAccessPointName: React.ChangeEventHandler<HTMLTextAreaElement> =
      action((event) => {
        if (event.target.value.match(/^[0-9a-zA-Z_]*$/)) {
          accessPoint.id = event.target.value;
        }
      });

    return (
      <div style={{ flex: '1 1 auto', minWidth: 0 }}>
        {editingName ? (
          <textarea
            className="access-point-editor__name"
            spellCheck={false}
            value={accessPoint.id}
            onChange={updateAccessPointName}
            placeholder={'Access Point Name'}
            onBlur={handleNameBlur}
            style={{
              borderColor:
                accessPoint.id === newNamePlaceholder
                  ? 'var(--color-red-300)'
                  : 'transparent',
            }}
          />
        ) : (
          <div
            className="access-point-editor__name__label"
            onClick={handleNameEdit}
            title="Click to edit access point name"
          >
            {accessPoint.id}
          </div>
        )}
        {aiSuggestionMeta && (
          <div className="data-product-editor__ai-suggestion-inline">
            {aiSuggestionMeta.name}
          </div>
        )}
      </div>
    );
  },
);

const AP_RENDER_CHUNK_SIZE = 50;
const AP_SENTINEL_ROOT_MARGIN = '0px 0px 400px 0px';
const DEFAULT_CLASSIFICATION_LABEL = 'Classification';

const toClassificationOption = (
  classification: string,
): { label: string; value: string } => ({
  label: classification,
  value: classification,
});

const AccessPointClassification = observer(
  (props: {
    accessPoint: LakehouseAccessPoint;
    groupState: AccessPointGroupState;
  }) => {
    const { accessPoint, groupState } = props;
    const applicationStore = useEditorStore().applicationStore;
    const updateAccessPointClassificationTextbox: React.ChangeEventHandler<HTMLTextAreaElement> =
      action((event) => {
        accessPoint.classification = event.target.value;
      });

    const classificationOptions = useMemo(
      () =>
        [DEFAULT_CLASSIFICATION_LABEL]
          .concat(groupState.classifications)
          .map(toClassificationOption),
      [groupState.classifications],
    );

    const updateAccessPointClassificationFromDropdown = action(
      (val: { label: string; value: string } | null): void => {
        accessPoint_setClassification(
          accessPoint,
          val?.value === DEFAULT_CLASSIFICATION_LABEL ? undefined : val?.value,
        );
      },
    );

    const currentClassification = useMemo(
      () =>
        toClassificationOption(
          accessPoint.classification ?? DEFAULT_CLASSIFICATION_LABEL,
        ),
      [accessPoint.classification],
    );

    const classificationDocumentationLink = (): void => {
      const docLink =
        applicationStore.config.options.dataProductConfig?.classificationDoc;
      if (docLink) {
        applicationStore.navigationService.navigator.visitAddress(docLink);
      }
    };
    return (
      <div className="access-point-editor__classification">
        {classificationOptions.length > 1 ? (
          <div
            style={{
              borderWidth: 'thin',
              borderColor:
                currentClassification.label === DEFAULT_CLASSIFICATION_LABEL
                  ? 'var(--color-red-300)'
                  : 'transparent',
            }}
          >
            <CustomSelectorInput
              className="explorer__new-element-modal__driver__dropdown"
              options={classificationOptions}
              onChange={updateAccessPointClassificationFromDropdown}
              value={currentClassification}
              darkMode={
                !applicationStore.layoutService
                  .TEMPORARY__isLightColorThemeEnabled
              }
            />
          </div>
        ) : (
          <textarea
            className="panel__content__form__section__input"
            spellCheck={false}
            value={accessPoint.classification ?? ''}
            onChange={updateAccessPointClassificationTextbox}
            placeholder="Add classification"
            style={{
              overflow: 'hidden',
              width: '125px',
              resize: 'none',
              padding: '0.25rem',
            }}
          />
        )}
        <Tooltip
          title="Learn more about data classification scheme here."
          arrow={true}
          placement={'top'}
        >
          <button onClick={classificationDocumentationLink}>
            <InfoCircleIcon />
          </button>
        </Tooltip>
      </div>
    );
  },
);

const AccessPointGenerationViewer = observer(
  (props: {
    accessPointState: LakehouseAccessPointState;
    generationOutput: string;
  }) => {
    const { accessPointState, generationOutput } = props;
    const editorStore = accessPointState.state.state.editorStore;
    const closeDebug = (): void => {
      accessPointState.setArtifactContent(undefined);
    };

    return (
      <Dialog
        open={accessPointState.artifactGenerationContent !== undefined}
        onClose={closeDebug}
        classes={{
          root: 'editor-modal__root-container',
          container: 'editor-modal__container',
          paper: 'editor-modal__content',
        }}
      >
        <Modal
          className="editor-modal"
          darkMode={
            !editorStore.applicationStore.layoutService
              .TEMPORARY__isLightColorThemeEnabled
          }
        >
          <ModalHeader
            title={`${accessPointState.accessPoint.id} Plan Generation`}
          />
          <ModalBody>
            <div className="panel__content execution-plan-viewer__panel__content">
              <CodeEditor
                inputValue={generationOutput}
                isReadOnly={true}
                language={CODE_EDITOR_LANGUAGE.JSON}
                hidePadding={true}
                hideMinimap={true}
              />
            </div>
          </ModalBody>
          <ModalFooter>
            <ModalFooterButton
              title="Close plan generation modal"
              onClick={closeDebug}
              text="Close"
              type="secondary"
            />
          </ModalFooter>
        </Modal>
      </Dialog>
    );
  },
);

export const LakehouseDataProductAccessPointEditor = observer(
  (props: {
    accessPointState: LakehouseAccessPointState;
    isReadOnly: boolean;
    aiSuggestionMeta?: AccessPointMeta | undefined;
  }) => {
    const { accessPointState, aiSuggestionMeta } = props;
    const editorStore = useEditorStore();
    const accessPoint = accessPointState.accessPoint;
    const groupState = accessPointState.state;
    const lambdaEditorState = accessPointState.lambdaState;
    const propertyHasParserError = groupState.hasParserError;
    const [editingDescription, setEditingDescription] = useState(false);
    const [isHoveringDesc, setIsHoveringDesc] = useState(false);
    const [editingTitle, setEditingTitle] = useState(false);
    const [isHoveringTitle, setIsHoveringTitle] = useState(false);
    const ref = useRef<HTMLDivElement>(null);

    const handleEditorBlur = useCallback(() => {
      flowResult(lambdaEditorState.updateLambdaRelationColumns()).catch(
        editorStore.applicationStore.alertUnhandledError,
      );
    }, [lambdaEditorState, editorStore.applicationStore]);

    const handleDescriptionEdit = () => setEditingDescription(true);
    const handleDescriptionBlur = () => {
      setEditingDescription(false);
      setIsHoveringDesc(false);
    };
    const handleMouseOverDesc: React.MouseEventHandler<HTMLDivElement> = () => {
      setIsHoveringDesc(true);
    };
    const handleMouseOutDesc: React.MouseEventHandler<HTMLDivElement> = () => {
      setIsHoveringDesc(false);
    };

    const handleTitleEdit = () => setEditingTitle(true);
    const handleTitleBlur = () => {
      setEditingTitle(false);
      setIsHoveringTitle(false);
    };
    const handleMouseOverTitle: React.MouseEventHandler<
      HTMLDivElement
    > = () => {
      setIsHoveringTitle(true);
    };
    const handleMouseOutTitle: React.MouseEventHandler<HTMLDivElement> = () => {
      setIsHoveringTitle(false);
    };

    const updateAccessPointTargetEnvironment = action(
      (targetEnvironment: LakehouseTargetEnv | undefined) => {
        if (
          targetEnvironment !== undefined &&
          groupState.value.targets?.length
        ) {
          groupState.value.targets = undefined;
        }
        accessPoint.targetEnvironment = targetEnvironment;
      },
    );

    const debugPlanGeneration =
      editorStore.applicationStore.guardUnhandledError(() =>
        flowResult(accessPointState.generateArtifact()),
      );

    const handleRemoveAccessPoint = (): void => {
      editorStore.applicationStore.alertService.setActionAlertInfo({
        message: `Are you sure you want to delete Access Point ${accessPoint.id}?`,
        type: ActionAlertType.CAUTION,
        actions: [
          {
            label: 'Confirm',
            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
            handler: (): void => {
              groupState.deleteAccessPoint(accessPointState);
            },
          },
          {
            label: 'Cancel',
            type: ActionAlertActionType.PROCEED,
            default: true,
          },
        ],
      });
    };

    //Drag and drop - reorder access points/move between groups
    const handleHover = useCallback(
      (item: AccessPointDragSource): void => {
        const draggingProperty = item.accessPointState;
        const hoveredProperty = accessPointState;
        groupState.swapAccessPoints(draggingProperty, hoveredProperty);
      },
      [accessPointState, groupState],
    );

    const [{ isBeingDraggedAP }, dropConnector] = useDrop<
      AccessPointDragSource,
      void,
      { isBeingDraggedAP: AccessPointState | undefined }
    >(
      () => ({
        accept: [AP_DND_TYPE],
        hover: (item) => handleHover(item),
        collect: (monitor) => ({
          isBeingDraggedAP: monitor.getItem<AccessPointDragSource | null>()
            ?.accessPointState,
        }),
      }),
      [handleHover],
    );
    const isBeingDragged = accessPoint === isBeingDraggedAP?.accessPoint;

    const [, dragConnector, dragPreviewConnector] =
      useDrag<AccessPointDragSource>(
        () => ({
          type: AP_DND_TYPE,
          item: () => ({
            accessPointState: accessPointState,
          }),
          collect: (monitor) => ({
            isDragging: monitor.isDragging(),
          }),
        }),
        [accessPointState],
      );
    dragConnector(ref);
    dropConnector(ref);
    useDragPreviewLayer(dragPreviewConnector);
    const generateLineage = editorStore.applicationStore.guardUnhandledError(
      () => flowResult(accessPointState.generateLineage()),
    );

    const editLambdaInQueryBuilder =
      editorStore.applicationStore.guardUnhandledError(async () => {
        const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
        const applicationStore = editorStore.applicationStore;
        const ingestDefinition =
          editorStore.graphManagerState.graph.ownIngests.find(isNonNullable);
        if (!ingestDefinition) {
          applicationStore.notificationService.notifyError(
            'No ingest definition found in this project',
          );
          return;
        }
        await flowResult(
          embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
            setupQueryBuilderState: async (): Promise<QueryBuilderState> => {
              const queryBuilderState = new AccessorQueryBuilderState(
                applicationStore,
                undefined,
                editorStore.graphManagerState,
                QueryBuilderAdvancedWorkflowState.INSTANCE,
                QueryBuilderActionConfig.INSTANCE,
                applicationStore.config.options.queryBuilderConfig,
                editorStore.editorMode.getSourceInfo(),
              );
              await queryBuilderState.changeAccessorOwner(ingestDefinition);
              const compatibleRuntimes = getCompatibleRuntimesFromAccessorOwner(
                ingestDefinition,
                editorStore.graphManagerState,
              );
              if (compatibleRuntimes.length > 0) {
                queryBuilderState.changeSelectedRuntime(
                  guaranteeNonNullable(compatibleRuntimes[0]),
                );
              }
              queryBuilderState.initializeWithQuery(accessPoint.func);
              return queryBuilderState;
            },
            actionConfigs: [
              {
                key: 'save-query-btn',
                renderer: (
                  queryBuilderState: QueryBuilderState,
                ): React.ReactNode => {
                  const save = applicationStore.guardUnhandledError(
                    async () => {
                      try {
                        const rawLambda =
                          queryBuilderState.buildQueryForPersistence();
                        accessPoint.func = rawLambda;
                        embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
                          undefined,
                        );
                        await flowResult(
                          lambdaEditorState.convertLambdaObjectToGrammarString({
                            pretty: true,
                          }),
                        );
                      } catch (error) {
                        assertErrorThrown(error);
                        applicationStore.notificationService.notifyError(
                          `Can't save access point lambda: ${error.message}`,
                        );
                      }
                    },
                  );
                  return (
                    <button
                      className="query-builder__dialog__header__custom-action"
                      tabIndex={-1}
                      disabled={props.isReadOnly}
                      onClick={save}
                    >
                      Save Lambda
                    </button>
                  );
                },
              },
            ],
            disableCompile: true,
          }),
        );
      });

    return (
      <PanelDnDEntry
        ref={ref}
        placeholder={<div className="dnd__placeholder--light"></div>}
        showPlaceholder={isBeingDragged}
      >
        <div
          className={clsx('access-point-editor', {
            backdrop__element: propertyHasParserError,
          })}
        >
          <PanelEntryDragHandle
            dragSourceConnector={ref}
            isDragging={isBeingDragged}
            title={'Drag this Access Point to another group'}
            className="access-point-editor__dnd-handle"
          />
          <div style={{ flex: 1 }}>
            <div className="access-point-editor__metadata">
              <AccessPointTitle
                accessPointState={accessPointState}
                aiSuggestionMeta={aiSuggestionMeta}
              />
              <div className="access-point-editor__info">
                <div className="access-point-editor__reproducible">
                  <Checkbox
                    disabled={groupState.state.isReadOnly}
                    checked={accessPoint.reproducible ?? false}
                    onChange={() =>
                      accessPoint_setReproducible(
                        accessPoint,
                        !accessPoint.reproducible,
                      )
                    }
                    size="small"
                    style={{ padding: 0, margin: 0 }}
                  />
                  <Tooltip
                    title={
                      <div
                        style={{
                          maxWidth: '400px',
                          whiteSpace: 'normal',
                          wordWrap: 'break-word',
                        }}
                      >
                        Marking as &quot;reproducible&quot; means consumers can
                        consistently retrieve the exact historical data as it
                        existed at any specific Lakehouse batch.
                      </div>
                    }
                    arrow={true}
                    placement={'top'}
                  >
                    <div>Reproducible</div>
                  </Tooltip>
                </div>
                <RelationElementSampleValuesEditor
                  title={`${accessPointState.accessPoint.title ?? accessPointState.accessPoint.id} Sample Values`}
                  relationElementState={accessPointState.relationElementState}
                  isReadOnly={props.isReadOnly}
                  hideColumnDefinitions={true}
                  hasMismatch={accessPointState.hasRelationElementMismatch}
                  mismatchMessage={accessPointState.getRelationElementMismatchMessage()}
                  readOnlySource={(() => {
                    const dataElementPath =
                      accessPointState.relationElementExistsinDataElementReference();
                    return dataElementPath !== undefined
                      ? {
                          label: dataElementPath,
                          onNavigate: () => {
                            const dataElement =
                              editorStore.graphManagerState.graph.getNullableElement(
                                dataElementPath,
                              );
                            if (dataElement) {
                              editorStore.graphEditorMode.openElement(
                                dataElement,
                              );
                            }
                          },
                        }
                      : undefined;
                  })()}
                  deleteConfirmMessage={`Are you sure you want to delete sample values for Access Point ${accessPointState.accessPoint.id}?`}
                  onAdd={() =>
                    flowResult(accessPointState.createAndaddRelationElement())
                  }
                  onDelete={() => accessPointState.deleteRelationElement()}
                />
                {editorStore.applicationStore.config.options
                  .dataProductConfig && (
                  <AccessPointClassification
                    accessPoint={accessPoint}
                    groupState={groupState}
                  />
                )}
                <div
                  className={clsx('access-point-editor__type')}
                  title={'Change target environment'}
                >
                  <div className="access-point-editor__type__label">
                    {accessPoint.targetEnvironment}
                  </div>
                  <ControlledDropdownMenu
                    className="access-point-editor__dropdown"
                    content={
                      <MenuContent>
                        <MenuContentItem
                          className="btn__dropdown-combo__option"
                          title="Clear"
                          onClick={() =>
                            updateAccessPointTargetEnvironment(undefined)
                          }
                        >
                          {' '}
                        </MenuContentItem>
                        {Object.values(LakehouseTargetEnv).map(
                          (environment) => (
                            <MenuContentItem
                              key={environment}
                              className="btn__dropdown-combo__option"
                              onClick={() =>
                                updateAccessPointTargetEnvironment(environment)
                              }
                            >
                              {environment}
                            </MenuContentItem>
                          ),
                        )}
                      </MenuContent>
                    }
                    menuProps={{
                      anchorOrigin: {
                        vertical: 'bottom',
                        horizontal: 'right',
                      },
                      transformOrigin: {
                        vertical: 'top',
                        horizontal: 'right',
                      },
                    }}
                  >
                    <CaretDownIcon />
                  </ControlledDropdownMenu>
                </div>
                <ControlledDropdownMenu
                  className="access-point-editor__dropdown"
                  content={
                    <MenuContent>
                      <MenuContentItem
                        className="btn__dropdown-combo__option"
                        onClick={debugPlanGeneration}
                      >
                        <div
                          style={{
                            display: 'flex',
                            gap: '0.5rem',
                            alignItems: 'center',
                          }}
                        >
                          <BugIcon /> <span>AP Plan Generation</span>
                        </div>
                      </MenuContentItem>
                      <MenuContentItem
                        className="btn__dropdown-combo__option"
                        onClick={generateLineage}
                      >
                        <div
                          style={{
                            display: 'flex',
                            gap: '0.5rem',
                            alignItems: 'center',
                          }}
                        >
                          <span
                            style={{
                              display: 'flex',
                              alignItems: 'center',
                              transform: 'rotate(90deg)',
                            }}
                          >
                            <GitBranchIcon />
                          </span>
                          <span>Lineage Viewer</span>
                        </div>
                      </MenuContentItem>
                    </MenuContent>
                  }
                  menuProps={{
                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
                    transformOrigin: { vertical: 'top', horizontal: 'right' },
                  }}
                >
                  <div
                    className="access-point-editor__generic-entry__remove-btn__debug"
                    tabIndex={-1}
                    title="Access Point Tools"
                    style={{
                      background: 'var(--color-blue-200)',
                      borderRadius: '4px',
                      marginRight: '1.5rem',
                      padding: '0.25rem 0.5rem',
                      display: 'flex',
                      alignItems: 'center',
                      color: 'white',
                    }}
                  >
                    <ListIcon />
                  </div>
                </ControlledDropdownMenu>
              </div>
            </div>
            {editingTitle ? (
              <textarea
                className="access-point-editor__name"
                spellCheck={false}
                value={accessPoint.title}
                onChange={(event) =>
                  accessPoint_setTitle(accessPoint, event.target.value)
                }
                placeholder={'Access Point Title'}
                onBlur={handleTitleBlur}
                style={{
                  borderColor: 'transparent',
                  margin: '0.5rem',
                }}
              />
            ) : (
              <div
                onClick={handleTitleEdit}
                title="Click to edit access point title"
                className="access-point-editor__description-container"
              >
                {accessPoint.title ? (
                  <HoverTextArea
                    text={accessPoint.title}
                    handleMouseOver={handleMouseOverTitle}
                    handleMouseOut={handleMouseOutTitle}
                    className="access-point-editor__title"
                  />
                ) : (
                  <div
                    className="access-point-editor__group-container__description--warning"
                    onMouseOver={handleMouseOverTitle}
                    onMouseOut={handleMouseOutTitle}
                    style={{ fontSize: '15px' }}
                  >
                    <ErrorWarnIcon />
                    Provide a title for this Access Point
                  </div>
                )}
                {isHoveringTitle && hoverIcon()}
              </div>
            )}
            {aiSuggestionMeta && (
              <div className="data-product-editor__ai-suggestion-inline">
                {aiSuggestionMeta.title}
              </div>
            )}
            {editingDescription ? (
              <textarea
                className="panel__content__form__section__input"
                spellCheck={false}
                value={accessPoint.description ?? ''}
                onChange={(event) =>
                  accessPoint_setDescription(accessPoint, event.target.value)
                }
                placeholder="Access Point description"
                onBlur={handleDescriptionBlur}
                style={{
                  resize: 'vertical',
                  padding: '0.25rem',
                  marginLeft: '0.5rem',
                  marginTop: '0.5rem',
                  height: 'auto',
                }}
              />
            ) : (
              <div
                onClick={handleDescriptionEdit}
                title="Click to edit access point description"
                className="access-point-editor__description-container"
              >
                {accessPoint.description ? (
                  <HoverTextArea
                    text={accessPoint.description}
                    handleMouseOver={handleMouseOverDesc}
                    handleMouseOut={handleMouseOutDesc}
                  />
                ) : (
                  <div
                    className="access-point-editor__group-container__description--warning"
                    onMouseOver={handleMouseOverDesc}
                    onMouseOut={handleMouseOutDesc}
                  >
                    <ErrorWarnIcon />
                    {AP_EMPTY_DESC_WARNING}
                  </div>
                )}
                {isHoveringDesc && hoverIcon()}
              </div>
            )}
            {aiSuggestionMeta && (
              <div className="data-product-editor__ai-suggestion-inline">
                {aiSuggestionMeta.description}
              </div>
            )}
            <div className="access-point-editor__content">
              <div className="access-point-editor__generic-entry">
                <div className="access-point-editor__entry__container">
                  <div className="access-point-editor__entry">
                    <button
                      className="access-point-editor__query-builder-btn"
                      onClick={editLambdaInQueryBuilder}
                      disabled={props.isReadOnly}
                      title="Edit lambda with query builder"
                    >
                      <PencilEditIcon />
                      <span>Query Builder</span>
                    </button>
                    <InlineLambdaEditor
                      className={'access-point-editor__lambda-editor'}
                      disabled={
                        lambdaEditorState.val.state.state
                          .isConvertingTransformLambdaObjects
                      }
                      lambdaEditorState={lambdaEditorState}
                      forceBackdrop={Boolean(lambdaEditorState.parserError)}
                      onEditorBlur={handleEditorBlur}
                    />
                  </div>
                </div>
              </div>
            </div>
            {<LineageViewer lineageState={accessPointState.lineageState} />}
          </div>
          <button
            className="access-point-editor__generic-entry__remove-btn"
            onClick={() => {
              handleRemoveAccessPoint();
            }}
            tabIndex={-1}
            title="Remove"
          >
            <TimesIcon />
          </button>
          {accessPointState.artifactGenerationContent && (
            <AccessPointGenerationViewer
              accessPointState={accessPointState}
              generationOutput={accessPointState.artifactGenerationContent}
            />
          )}
        </div>
      </PanelDnDEntry>
    );
  },
);

const AccessPointGroupPublicToggle = observer(
  (props: { groupState: AccessPointGroupState }) => {
    const { groupState } = props;

    const handleSwitchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      const isChecked = event.target.checked;
      if (isChecked && groupState.publicStereotype) {
        annotatedElement_addStereotype(
          groupState.value,
          StereotypeExplicitReference.create(groupState.publicStereotype),
        );
      } else if (groupState.containsPublicStereotype) {
        annotatedElement_deleteStereotype(
          groupState.value,
          groupState.containsPublicStereotype,
        );
      }
    };
    return (
      <div className="access-point-editor__toggle">
        <Switch
          checked={Boolean(groupState.containsPublicStereotype)}
          onChange={handleSwitchChange}
          sx={{
            '& .MuiSwitch-track': {
              backgroundColor: groupState.containsPublicStereotype
                ? 'default'
                : 'var(--color-light-grey-400)',
            },
          }}
        />
        <BuildingIcon />
        Enterprise Data. Anyone at the firm can access this without approvals.
      </div>
    );
  },
);

const ModelAccessPointGroupEditor = observer(
  (props: { groupState: ModelAccessPointGroupState; isReadOnly: boolean }) => {
    const { groupState, isReadOnly } = props;
    const editorStore = useEditorStore();

    // mapping
    const mapping = groupState.value.mapping;
    const isMappingEmpty = validate_PureExecutionMapping(
      groupState.value.mapping.value,
    );
    const mappingOptions =
      groupState.state.editorStore.graphManagerState.usableMappings.map(
        buildElementOption,
      );
    const selectedMappingOption = {
      value: mapping.value,
      label: mapping.value.path === '' ? '(none)' : mapping.value.path,
    } as PackageableElementOption<Mapping>;
    const onMappingChange = (val: PackageableElementOption<Mapping>): void => {
      if (val.value !== mapping.value) {
        groupState.setMapping(val.value);
      }
    };

    const visitElement = (element: PackageableElement): void => {
      editorStore.graphEditorMode.openElement(element);
    };

    return (
      <div className="data-product-editor__model-apg-editor">
        <div className="data-product-editor__model-apg-editor__label">
          Mapping
        </div>
        <div
          className="service-execution-editor__configuration__item"
          style={{ padding: '0 1rem' }}
        >
          <div className="btn--sm service-execution-editor__configuration__item__label">
            <PURE_MappingIcon />
          </div>
          <CustomSelectorInput
            className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
            disabled={isReadOnly}
            options={mappingOptions}
            onChange={onMappingChange}
            value={selectedMappingOption}
            darkMode={
              !groupState.state.editorStore.applicationStore.layoutService
                .TEMPORARY__isLightColorThemeEnabled
            }
            hasError={Boolean(isMappingEmpty)}
          />
          <button
            className="btn--dark btn--sm service-execution-editor__configuration__item__btn"
            onClick={() => {
              visitElement(groupState.value.mapping.value);
            }}
            tabIndex={-1}
            title="See mapping"
            disabled={Boolean(isMappingEmpty)}
          >
            <LongArrowRightIcon />
          </button>
        </div>
      </div>
    );
  },
);

const AccessPointLoadingSentinel = (props: {
  ref?: React.Ref<HTMLDivElement>;
}) => <div ref={props.ref} className="access-point-editor__sentinel" />;

/**
 * Finds the suggested metadata for an access point group: by group name
 * first, falling back to the group's position in the product.
 */
const matchAccessPointGroupSuggestion = (
  suggestion: DataProductDocResponse,
  groupId: string,
  groupIndex: number,
): {
  groupMeta: AccessPointGroupMeta | undefined;
  accessPointMetas: AccessPointMeta[];
} => {
  const groupMeta =
    suggestion.access_point_groups.find((g) => g.name === groupId) ??
    suggestion.access_point_groups[groupIndex];
  const accessPointMetas = suggestion.access_points.filter(
    (ap) => ap.group === (groupMeta?.name ?? groupId),
  );
  return { groupMeta, accessPointMetas };
};

/**
 * Flattens the access point group fields a LegendAI suggestion writes so the
 * applied value can be compared with what is eventually pushed.
 */
const serializeAccessPointGroupAppliedFields = (
  group: AccessPointGroup,
  accessPointCount: number,
): string =>
  [
    group.title ?? '',
    group.description ?? '',
    ...group.accessPoints
      .slice(0, accessPointCount)
      .flatMap((ap) => [ap.id, ap.title ?? '', ap.description ?? '']),
  ].join('\n');

const AccessPointGroupEditor = observer(
  (props: { groupState: AccessPointGroupState; isReadOnly: boolean }) => {
    const { groupState, isReadOnly } = props;
    const editorStore = useEditorStore();
    const productEditorState = groupState.state;
    const [editingDescription, setEditingDescription] = useState(false);
    const [isHoveringDescription, setIsHoveringDescription] = useState(false);
    const [editingName, setEditingName] = useState(
      groupState.value.id === newNamePlaceholder,
    );
    const [isHoveringName, setIsHoveringName] = useState(false);
    const [editingTitle, setEditingTitle] = useState(false);
    const [isHoveringTitle, setIsHoveringTitle] = useState(false);
    const [isSuggestingWithAI, setIsSuggestingWithAI] = useState(false);
    const [aiSuggestion, setAISuggestion] = useState<
      DataProductDocResponse | undefined
    >(undefined);

    const lakehouseAccessPointStates =
      groupState.accessPointStates as LakehouseAccessPointState[];
    const accessPointCount = lakehouseAccessPointStates.length;
    const [renderedCount, setRenderedCount] = useState(AP_RENDER_CHUNK_SIZE);
    const accessPointsSentinelRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
      const sentinel = accessPointsSentinelRef.current;
      if (!sentinel) {
        return undefined;
      }
      const intersectionObserver = new IntersectionObserver(
        (entries) => {
          if (entries[0]?.isIntersecting) {
            setRenderedCount((count) =>
              Math.min(count + AP_RENDER_CHUNK_SIZE, accessPointCount),
            );
          }
        },
        { rootMargin: AP_SENTINEL_ROOT_MARGIN },
      );
      intersectionObserver.observe(sentinel);
      return () => intersectionObserver.disconnect();
    }, [accessPointCount, renderedCount]);

    useEffect(() => {
      flowResult(
        productEditorState.batchUpdateLambdaRelationColumns(
          lakehouseAccessPointStates.slice(0, renderedCount),
        ),
      ).catch(editorStore.applicationStore.alertUnhandledError);
    }, [
      renderedCount,
      accessPointCount,
      lakehouseAccessPointStates,
      productEditorState,
      editorStore.applicationStore.alertUnhandledError,
    ]);

    const handleDescriptionEdit = () => setEditingDescription(true);
    const handleDescriptionBlur = () => {
      setEditingDescription(false);
      setIsHoveringDescription(false);
    };
    const handleMouseOverDescription: React.MouseEventHandler<
      HTMLDivElement
    > = () => {
      setIsHoveringDescription(true);
    };
    const handleMouseOutDescription: React.MouseEventHandler<
      HTMLDivElement
    > = () => {
      setIsHoveringDescription(false);
    };
    const updateGroupDescription = (val: string): void => {
      accessPointGroup_setDescription(groupState.value, val);
    };

    const handleNameEdit = () => setEditingName(true);
    const handleNameBlur = () => {
      if (groupState.value.id !== newNamePlaceholder) {
        setEditingName(false);
        setIsHoveringName(false);
      }
    };
    const handleMouseOverName: React.MouseEventHandler<HTMLDivElement> = () => {
      setIsHoveringName(true);
    };
    const handleMouseOutName: React.MouseEventHandler<HTMLDivElement> = () => {
      setIsHoveringName(false);
    };
    const updateGroupName = (val: string): void => {
      if (val.match(/^[0-9a-zA-Z_]+$/)) {
        accessPointGroup_setName(groupState.value, val);
      }
    };

    const handleTitleEdit = () => setEditingTitle(true);
    const handleTitleBlur = () => {
      setEditingTitle(false);
      setIsHoveringTitle(false);
    };
    const handleMouseOverTitle: React.MouseEventHandler<
      HTMLDivElement
    > = () => {
      setIsHoveringTitle(true);
    };
    const handleMouseOutTitle: React.MouseEventHandler<HTMLDivElement> = () => {
      setIsHoveringTitle(false);
    };
    const updateGroupTitle = (val: string | undefined): void => {
      accessPointGroup_setTitle(groupState.value, val);
    };

    const getTargetEnvironmentOptions = () => {
      const existingTargets = groupState.value.targets ?? [];
      return Object.values(LakehouseTargetEnv)
        .filter((target) => !existingTargets.includes(target))
        .map((target) => ({
          label: target,
          value: target,
        }));
    };

    const handleAddTargetEnvironment = action(
      (val: { label: string; value: LakehouseTargetEnv } | null): void => {
        if (val) {
          accessPointGroup_addTarget(groupState.value, val.value);
          lakehouseAccessPointStates.forEach((accessPointState) => {
            accessPointState.accessPoint.targetEnvironment = undefined;
          });
        }
      },
    );

    const handleRemoveTargetEnvironment = (target: string) => {
      accessPointGroup_deleteTarget(groupState.value, target);
    };

    // AI suggestion for APG
    const legendAIUrl = editorStore.applicationStore.config.legendAIUrl;
    const aiDocSuggester = legendAIUrl
      ? editorStore.pluginManager
          .getApplicationPlugins()
          .map((p) =>
            (
              p as DSL_DataProduct_LegendStudioApplicationPlugin_Extension
            ).getExtraDataProductDocumentationAISuggester?.bind(p),
          )
          .find(Boolean)
      : undefined;
    const aiSuggestTelemetry = useLegendAISuggestTelemetry(
      editorStore,
      {
        surface: LEGENDAI_SUGGEST_SURFACE.DATA_PRODUCT,
        elementPath: productEditorState.product.path,
        accessPointGroupId: groupState.value.id,
      },
      { legendAIUrl, available: Boolean(aiDocSuggester), isReadOnly },
    );
    const suggestWithAI = async (): Promise<void> => {
      if (!aiDocSuggester || !legendAIUrl) {
        return;
      }
      const request = aiSuggestTelemetry.launch({
        existingText: groupState.value.description,
        accessPointCount: groupState.value.accessPoints.length,
      });
      setIsSuggestingWithAI(true);
      setAISuggestion(undefined);
      let stage = LEGENDAI_SUGGEST_STAGE.SERIALIZE;
      try {
        const definitions =
          await editorStore.graphManagerState.graphManager.graphToPureCode(
            editorStore.graphManagerState.graph,
          );
        stage = LEGENDAI_SUGGEST_STAGE.REQUEST;
        const product = productEditorState.product;
        const suggestion = await aiDocSuggester(
          { definitions, data_product_name: product.path },
          legendAIUrl,
        );
        const { groupMeta, accessPointMetas } = matchAccessPointGroupSuggestion(
          suggestion,
          groupState.value.id,
          productEditorState.accessPointGroupStates.indexOf(groupState),
        );
        const shouldShow = aiSuggestTelemetry.succeed(request, {
          // the response is structured, so measure the parts shown for this group
          suggestionText: [
            groupMeta?.title,
            groupMeta?.description,
            ...accessPointMetas.flatMap((ap) => [
              ap.name,
              ap.title,
              ap.description,
            ]),
          ]
            .filter(Boolean)
            .join('\n'),
          definitionsLength: definitions.length,
          currentText: groupState.value.description,
          confidence: groupMeta?.confidence,
          accessPointSuggestionCount: accessPointMetas.length,
        });
        if (!shouldShow) {
          editorStore.applicationStore.notificationService.notifyWarning(
            `LegendAI did not return a suggestion for access point group '${groupState.value.id}'`,
          );
        }
        runInAction(() => {
          setAISuggestion(shouldShow ? suggestion : undefined);
        });
      } catch (error) {
        assertErrorThrown(error);
        aiSuggestTelemetry.fail(request, error, stage);
        if (
          error instanceof NetworkClientError &&
          (error.response.status === HttpStatus.UNAUTHORIZED ||
            error.response.status === HttpStatus.FORBIDDEN)
        ) {
          const docEntry =
            editorStore.applicationStore.documentationService.getDocEntry(
              LEGEND_STUDIO_DOCUMENTATION_KEY.LEGENDAI_HOW_TO_GET_ENTITLEMENTS,
            );
          if (docEntry?.url) {
            error.message = `${error.message}. Please check how to get entitlements: ${docEntry.url}`;
          }
        }
        throw error;
      } finally {
        runInAction(() => {
          setIsSuggestingWithAI(false);
        });
      }
    };
    const applyAISuggestion = (): void => {
      if (!aiSuggestion) {
        return;
      }
      const group = groupState.value;
      const existingText = group.description;
      // Find matching group in the response
      const { groupMeta, accessPointMetas: apMetas } =
        matchAccessPointGroupSuggestion(
          aiSuggestion,
          group.id,
          productEditorState.accessPointGroupStates.indexOf(groupState),
        );
      const matchStrategy = !groupMeta
        ? LEGENDAI_SUGGEST_MATCH_STRATEGY.NONE
        : groupMeta.name === group.id
          ? LEGENDAI_SUGGEST_MATCH_STRATEGY.NAME
          : LEGENDAI_SUGGEST_MATCH_STRATEGY.INDEX;
      if (groupMeta) {
        accessPointGroup_setTitle(group, groupMeta.title);
        accessPointGroup_setDescription(group, groupMeta.description);
      }
      // Apply access point metadata for this group
      const accessPointsUpdated = Math.min(
        apMetas.length,
        group.accessPoints.length,
      );
      let accessPointsRenamed = 0;
      let namesSanitized = 0;
      for (let j = 0; j < accessPointsUpdated; j++) {
        const apMeta = apMetas[j] as (typeof apMetas)[number];
        const ap = group.accessPoints[j] as (typeof group.accessPoints)[number];
        // Convert suggested name to valid identifier (alphanumeric + underscore)
        const sanitizedName = apMeta.name.replace(/[^0-9a-zA-Z_]/g, '_');
        if (sanitizedName !== apMeta.name) {
          namesSanitized++;
        }
        if (sanitizedName) {
          if (ap.id !== sanitizedName) {
            accessPointsRenamed++;
          }
          ap.id = sanitizedName;
        }
        accessPoint_setTitle(ap, apMeta.title);
        accessPoint_setDescription(ap, apMeta.description);
      }
      const productPath = productEditorState.product.path;
      const groupId = group.id;
      aiSuggestTelemetry.apply({
        existingText,
        appliedText:
          groupMeta || accessPointsUpdated
            ? serializeAccessPointGroupAppliedFields(group, accessPointsUpdated)
            : '',
        readCurrentText: (store) => {
          const element =
            store.graphManagerState.graph.getNullableElement(productPath);
          const currentGroup =
            element instanceof DataProduct
              ? element.accessPointGroups.find((g) => g.id === groupId)
              : undefined;
          return currentGroup
            ? {
                found: true,
                text: serializeAccessPointGroupAppliedFields(
                  currentGroup,
                  accessPointsUpdated,
                ),
              }
            : { found: false };
        },
        dataProduct: {
          matchStrategy,
          accessPointsUpdated,
          accessPointsRenamed,
          namesSanitized,
          accessPointCountMismatch:
            apMetas.length !== group.accessPoints.length,
        },
      });
      setAISuggestion(undefined);
    };
    const discardAISuggestion = (): void => {
      aiSuggestTelemetry.discard();
      setAISuggestion(undefined);
    };

    // Computed AI suggestion for current group
    const { groupMeta: aiGroupMeta, accessPointMetas: aiAccessPointMetas } =
      aiSuggestion
        ? matchAccessPointGroupSuggestion(
            aiSuggestion,
            groupState.value.id,
            productEditorState.accessPointGroupStates.indexOf(groupState),
          )
        : { groupMeta: undefined, accessPointMetas: undefined };

    const handleRemoveAccessPointGroup = (): void => {
      editorStore.applicationStore.alertService.setActionAlertInfo({
        message:
          groupState instanceof ModelAccessPointGroupState
            ? `Are you sure you want to delete Model Access Point Group "${groupState.value.id}"?`
            : `Are you sure you want to delete Access Point Group "${groupState.value.id}" and all of its Access Points?`,
        type: ActionAlertType.CAUTION,
        actions: [
          {
            label: 'Confirm',
            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
            handler: (): void => {
              productEditorState.deleteAccessPointGroup(groupState);
            },
          },
          {
            label: 'Cancel',
            type: ActionAlertActionType.PROCEED,
            default: true,
          },
        ],
      });
    };

    const handleAddAccessPoint = () => {
      productEditorState.addAccessPoint(
        newNamePlaceholder,
        undefined,
        productEditorState.selectedGroupState ?? groupState,
      );
      setRenderedCount(groupState.accessPointStates.length);
    };

    return (
      <div
        className="access-point-editor__group-container"
        data-testid={LEGEND_STUDIO_TEST_ID.ACCESS_POINT_GROUP_EDITOR}
      >
        <PanelLoadingIndicator isLoading={groupState.isRunningProcess} />
        <div className="access-point-editor__group-container__name-editor">
          {editingName ? (
            <textarea
              className="panel__content__form__section__input"
              spellCheck={false}
              value={groupState.value.id}
              onChange={(event) => updateGroupName(event.target.value)}
              placeholder="Access Point Group Name"
              onBlur={handleNameBlur}
              style={{
                overflow: 'hidden',
                resize: 'none',
                padding: '0.25rem',
                borderColor:
                  groupState.value.id === newNamePlaceholder
                    ? 'var(--color-red-300)'
                    : 'transparent',
                borderWidth: 'thin',
              }}
            />
          ) : (
            <div
              onClick={handleNameEdit}
              title="Click to edit group name"
              className="access-point-editor__group-container__name"
            >
              <HoverTextArea
                text={groupState.value.id}
                handleMouseOver={handleMouseOverName}
                handleMouseOut={handleMouseOutName}
                className="access-point-editor__group-container__name"
              />

              {isHoveringName && hoverIcon()}
            </div>
          )}
          <button
            className="access-point-editor__generic-entry__remove-btn--group"
            onClick={() => {
              handleRemoveAccessPointGroup();
            }}
            tabIndex={-1}
            title="Remove Access Point Group"
          >
            <TimesIcon />
          </button>
        </div>
        {aiDocSuggester && (
          <div style={{ padding: '0.25rem 0.5rem' }}>
            <PanelLoadingIndicator isLoading={isSuggestingWithAI} />
            {aiSuggestion ? (
              <div className="data-product-editor__ai-suggestion__actions">
                <button
                  className="btn btn--dark data-product-editor__ai-suggestion__apply-btn"
                  onClick={applyAISuggestion}
                  title="Apply AI-generated title, description, and access point metadata for this group"
                >
                  Apply
                </button>
                <button
                  className="btn data-product-editor__ai-suggestion__dismiss-btn"
                  onClick={discardAISuggestion}
                >
                  Dismiss
                </button>
                <span className="data-product-editor__ai-suggestion-badge">
                  <SparkleIcon />
                  AI Suggestion
                </span>
              </div>
            ) : (
              <button
                className="data-product-editor__ai-suggest-btn"
                onClick={(): void => {
                  suggestWithAI().catch(
                    editorStore.applicationStore.alertUnhandledError,
                  );
                }}
                disabled={isSuggestingWithAI || isReadOnly}
                title="Use AI to suggest title and descriptions for this access point group"
              >
                <SparkleIcon />
                <span>
                  {isSuggestingWithAI ? 'Suggesting...' : 'Suggest with AI'}
                </span>
              </button>
            )}
          </div>
        )}
        <div className="access-point-editor__group-container__name-editor">
          {editingTitle ? (
            <textarea
              className="panel__content__form__section__input"
              spellCheck={false}
              value={groupState.value.title}
              onChange={(event) => updateGroupTitle(event.target.value)}
              placeholder="Access Point Group Title"
              onBlur={handleTitleBlur}
              style={{
                overflow: 'hidden',
                resize: 'none',
                padding: '0.25rem',
                margin: '0.5rem 0.5rem 0.5rem 0rem',
              }}
            />
          ) : (
            <div
              onClick={handleTitleEdit}
              title="Click to edit group title"
              className="access-point-editor__group-container__description"
            >
              {groupState.value.title ? (
                <HoverTextArea
                  text={groupState.value.title}
                  handleMouseOver={handleMouseOverTitle}
                  handleMouseOut={handleMouseOutTitle}
                  className="access-point-editor__group-container__title"
                />
              ) : (
                <div
                  className="access-point-editor__group-container__description--warning"
                  onMouseOver={handleMouseOverTitle}
                  onMouseOut={handleMouseOutTitle}
                  style={{ fontSize: '15px' }}
                >
                  <ErrorWarnIcon />
                  Provide a title for this Access Point Group
                </div>
              )}
              {isHoveringTitle && hoverIcon()}
            </div>
          )}
        </div>
        {aiGroupMeta && (
          <div className="data-product-editor__ai-suggestion-inline">
            {aiGroupMeta.title}
          </div>
        )}
        <div className="access-point-editor__group-container__description-editor">
          {editingDescription ? (
            <textarea
              className="panel__content__form__section__input"
              spellCheck={false}
              value={groupState.value.description ?? ''}
              onChange={(event) => updateGroupDescription(event.target.value)}
              placeholder="Provide a description for this Access Point Group"
              onBlur={handleDescriptionBlur}
              style={{
                overflow: 'hidden',
                padding: '0.25rem',
                height: 'auto',
              }}
            />
          ) : (
            <div
              onClick={handleDescriptionEdit}
              title="Click to edit group description"
              className="access-point-editor__description-container"
            >
              {groupState.value.description ? (
                <HoverTextArea
                  text={groupState.value.description}
                  handleMouseOver={handleMouseOverDescription}
                  handleMouseOut={handleMouseOutDescription}
                  className="access-point-editor__group-container__description"
                />
              ) : (
                <div
                  className="access-point-editor__group-container__description--warning"
                  onMouseOver={handleMouseOverDescription}
                  onMouseOut={handleMouseOutDescription}
                >
                  <ErrorWarnIcon />
                  Users request access at the access point group level. Click
                  here to add a meaningful description to guide users.
                </div>
              )}
              {isHoveringDescription && hoverIcon()}
            </div>
          )}
          {aiGroupMeta && (
            <div className="data-product-editor__ai-suggestion-inline">
              {aiGroupMeta.description}
            </div>
          )}
        </div>
        <div className="data-product-editor__operational-input data-product-editor__apg-targets-input">
          <div
            className="panel__content__form__section__header__label"
            style={{ justifyContent: 'space-between', width: '45rem' }}
          >
            Target Environments
          </div>
          <div className="panel__content__form__section__header__prompt">
            Select where this Data Product will be deployed.
          </div>
          <div className="panel__content__form__section__list__id-list">
            {groupState.value.targets?.map((target) => (
              <div
                className="panel__content__form__section__list__item"
                key={target}
              >
                {target}
                <button
                  className="panel__content__form__section__list__item__remove-btn"
                  disabled={isReadOnly}
                  onClick={() => handleRemoveTargetEnvironment(target)}
                  tabIndex={-1}
                  title="Remove Target Environment"
                >
                  <TimesIcon />
                </button>
              </div>
            ))}
          </div>
          <CustomSelectorInput
            className="panel__content__form__section__dropdown"
            options={getTargetEnvironmentOptions()}
            onChange={handleAddTargetEnvironment}
            placeholder={'Add Target Environment...'}
            darkMode={
              !productEditorState.editorStore.applicationStore.layoutService
                .TEMPORARY__isLightColorThemeEnabled
            }
            disabled={isReadOnly}
          />
        </div>
        {editorStore.applicationStore.config.options.dataProductConfig && (
          <AccessPointGroupPublicToggle groupState={groupState} />
        )}
        {groupState instanceof ModelAccessPointGroupState ? (
          <ModelAccessPointGroupEditor
            groupState={groupState}
            isReadOnly={isReadOnly}
          />
        ) : (
          <>
            <PanelHeader className="panel__header--access-point">
              <div className="panel__header__title">Access Points</div>
              <PanelHeaderActions>
                <PanelHeaderActionItem
                  className="panel__header__action"
                  onClick={handleAddAccessPoint}
                  title="Create new access point"
                >
                  <PlusIcon />
                </PanelHeaderActionItem>
              </PanelHeaderActions>
            </PanelHeader>
            {groupState.accessPointStates.length === 0 && (
              <div
                className="access-point-editor__group-container__description--warning"
                style={{ color: 'var(--color-red-300)' }}
              >
                <WarningIcon />
                This group needs at least one access point defined.
              </div>
            )}
            <div
              style={{ gap: '1rem', display: 'flex', flexDirection: 'column' }}
            >
              {lakehouseAccessPointStates
                .slice(0, renderedCount)
                .map((apState, idx) => (
                  <LakehouseDataProductAccessPointEditor
                    key={apState.uuid}
                    isReadOnly={isReadOnly}
                    accessPointState={apState}
                    aiSuggestionMeta={aiAccessPointMetas?.[idx]}
                  />
                ))}
              {accessPointCount > renderedCount && (
                <AccessPointLoadingSentinel ref={accessPointsSentinelRef} />
              )}
            </div>
          </>
        )}
      </div>
    );
  },
);

const GroupTabRenderer = observer(
  (props: {
    group: AccessPointGroupState;
    dataProductEditorState: DataProductEditorState;
  }) => {
    const { group, dataProductEditorState } = props;
    const changeGroup = (newGroup: AccessPointGroupState): void => {
      dataProductEditorState.setSelectedGroupState(newGroup);
    };
    const selectedGroupState = dataProductEditorState.selectedGroupState;
    const ref = useRef<HTMLDivElement>(null);

    //Drag and Drop - reorder groups and accept access points from other groups
    const handleHover = useCallback(
      (item: APGDragSource): void => {
        const draggingProperty = item.groupState;
        const hoveredProperty = group;
        dataProductEditorState.swapAccessPointGroups(
          draggingProperty,
          hoveredProperty,
        );
      },
      [group, dataProductEditorState],
    );

    const [{ isOver }, dropConnector] = useDrop<
      APGDragSource | AccessPointDragSource,
      void,
      {
        isOver: boolean;
      }
    >(
      () => ({
        accept: [AP_GROUP_DND_TYPE, AP_DND_TYPE],
        canDrop: (item, monitor) => {
          const itemType = monitor.getItemType();
          if (
            itemType === AP_DND_TYPE &&
            group instanceof ModelAccessPointGroupState
          ) {
            return false;
          }
          return true;
        },
        hover: (item, monitor) => {
          const itemType = monitor.getItemType();
          if (itemType === AP_GROUP_DND_TYPE) {
            const groupItem = item as APGDragSource;
            handleHover(groupItem);
          }
        },
        drop: (item, monitor) => {
          const itemType = monitor.getItemType();
          if (itemType === AP_DND_TYPE) {
            const accessPointItem = item as AccessPointDragSource;
            group.addAccessPoint(accessPointItem.accessPointState);
            accessPointItem.accessPointState.state.deleteAccessPoint(
              accessPointItem.accessPointState,
            );
            accessPointItem.accessPointState.changeGroupState(group);
          }
        },
        collect: (monitor) => ({
          isBeingDraggedAPG:
            monitor.getItemType() === AP_GROUP_DND_TYPE
              ? monitor.getItem<APGDragSource | null>()?.groupState
              : undefined,
          isBeingDraggedAP:
            monitor.getItemType() === AP_DND_TYPE
              ? monitor.getItem<AccessPointDragSource | null>()
                  ?.accessPointState
              : undefined,
          isOver: monitor.isOver() && monitor.canDrop(),
        }),
      }),
      [handleHover, group],
    );

    const [, dragConnector, dragPreviewConnector] = useDrag<APGDragSource>(
      () => ({
        type: AP_GROUP_DND_TYPE,
        item: () => ({
          groupState: group,
        }),
        collect: (monitor) => ({
          isDragging: monitor.isDragging(),
        }),
      }),
      [group],
    );
    dragConnector(ref);
    dropConnector(ref);
    dragPreviewConnector(ref);

    return (
      <div
        ref={ref}
        key={group.uuid}
        onClick={(): void => changeGroup(group)}
        className={clsx('service-editor__tab', {
          'service-editor__tab--active': group === selectedGroupState,
        })}
        style={{
          backgroundColor: isOver
            ? 'var(--color-bg-panel)'
            : 'var(--color-bg-app)',
        }}
        role="tab"
      >
        {group.value.id}
        &nbsp;
        {group.hasErrors() && (
          <ErrorWarnIcon
            title="Resolve Access Point Group error(s)"
            style={{ color: 'var(--color-red-300)' }}
          />
        )}
      </div>
    );
  },
);

const AccessPointGroupTab = observer(
  (props: {
    dataProductEditorState: DataProductEditorState;
    isReadOnly: boolean;
  }) => {
    const { dataProductEditorState, isReadOnly } = props;
    const groupStates = dataProductEditorState.accessPointGroupStates;
    const selectedGroupState = dataProductEditorState.selectedGroupState;
    const handleAddAccessPointGroup = () => {
      const newGroup =
        dataProductEditorState.createGroupAndAdd(newNamePlaceholder);
      dataProductEditorState.setSelectedGroupState(newGroup);
    };

    const handleAddModelAccessPointGroup = () => {
      const newGroup = dataProductEditorState.createGroupAndAdd(
        newNamePlaceholder,
        undefined,
        true,
      );
      dataProductEditorState.setSelectedGroupState(newGroup);
    };

    const AccessPointDragPreviewLayer: React.FC = () => (
      <DragPreviewLayer
        labelGetter={(item: AccessPointDragSource): string => {
          return item.accessPointState.accessPoint.id;
        }}
        types={[AP_DND_TYPE]}
      />
    );

    const disableAddGroup = Boolean(
      dataProductEditorState.accessPointGroupStates.find(
        (group) => group.value.id === newNamePlaceholder,
      ),
    );

    return (
      <div className="panel" style={{ overflow: 'visible' }}>
        <AccessPointDragPreviewLayer />
        <div
          className="panel__content__form__section__header__label"
          style={{ paddingLeft: '1rem' }}
        >
          Access Point Groups
        </div>
        <PanelHeader>
          <div className="uml-element-editor__tabs">
            {groupStates.map((group) => {
              return (
                <GroupTabRenderer
                  key={group.uuid}
                  group={group}
                  dataProductEditorState={dataProductEditorState}
                />
              );
            })}
            {
              <ControlledDropdownMenu
                className="panel__header__action"
                disabled={disableAddGroup || isReadOnly}
                content={
                  <MenuContent>
                    <MenuContentItem
                      className="btn__dropdown-combo__option"
                      onClick={handleAddAccessPointGroup}
                    >
                      New Access Point Group
                    </MenuContentItem>
                    <MenuContentItem
                      className="btn__dropdown-combo__option"
                      onClick={handleAddModelAccessPointGroup}
                    >
                      New Model Access Point Group
                    </MenuContentItem>
                  </MenuContent>
                }
                menuProps={{
                  anchorOrigin: {
                    vertical: 'bottom',
                    horizontal: 'left',
                  },
                  transformOrigin: {
                    vertical: 'top',
                    horizontal: 'left',
                  },
                }}
              >
                <PlusIcon
                  title={
                    disableAddGroup
                      ? 'Provide all group names'
                      : 'Create new access point group'
                  }
                />
              </ControlledDropdownMenu>
            }
          </div>
        </PanelHeader>
        <PanelContent>
          {selectedGroupState && (
            <AccessPointGroupEditor
              key={selectedGroupState.uuid}
              groupState={selectedGroupState}
              isReadOnly={isReadOnly}
            />
          )}
        </PanelContent>
      </div>
    );
  },
);

const DataProductSidebar = observer(
  (props: { dataProductEditorState: DataProductEditorState }) => {
    const { dataProductEditorState } = props;
    const sidebarTabs = [
      {
        label: DATA_PRODUCT_TAB.HOME,
        icon: <HomeIcon />,
      },
      {
        label: DATA_PRODUCT_TAB.APG,
        title: 'Access Point Groups',
        icon: <GroupWorkIcon />,
      },
      {
        label: DATA_PRODUCT_TAB.OPERATIONAL,
        title: 'Operational Metadata',
        icon: <GearSuggestIcon />,
      },
      {
        label: DATA_PRODUCT_TAB.TESTING,
        title: 'Testing',
        icon: <FlaskIcon />,
      },
      {
        label: DATA_PRODUCT_TAB.SUPPORT,
        icon: <QuestionCircleIcon />,
      },
    ];
    return (
      <div
        className="data-space__viewer__activity-bar"
        style={{ position: 'static', maxHeight: '100%' }}
      >
        <div className="data-space__viewer__activity-bar__items">
          {sidebarTabs.map((activity) => (
            <button
              key={activity.label}
              className={clsx('data-space__viewer__activity-bar__item', {
                'data-space__viewer__activity-bar__item--active':
                  dataProductEditorState.selectedTab === activity.label,
              })}
              onClick={() =>
                dataProductEditorState.setSelectedTab(activity.label)
              }
              tabIndex={-1}
              title={activity.title ?? activity.label}
              style={{
                flexDirection: 'column',
                fontSize: '10px',
                margin: '0.5rem 0rem',
              }}
            >
              {activity.icon}
              {activity.label}
            </button>
          ))}
        </div>
      </div>
    );
  },
);

const IconPreviewComponent = observer((props: { dataProduct: DataProduct }) => {
  const { dataProduct } = props;

  if (dataProduct.icon instanceof DataProductLibraryIcon) {
    const iconId = dataProduct.icon.iconId;
    const IconComponent = IconSelectorIcons[iconId];
    return (
      <div className="data-product-editor__icon-preview">
        {IconComponent ? <IconComponent /> : 'No icon selected'}
      </div>
    );
  } else if (dataProduct.icon instanceof DataProductEmbeddedImageIcon) {
    return (
      <img
        src={dataProduct.icon.imageUrl}
        alt="Data Product Image"
        className="data-product-editor__icon-preview__image"
      />
    );
  }
  return (
    <div className="data-product-editor__icon-preview">
      <div className="data-product-editor__icon-preview__no-icon">
        No icon selected
      </div>
    </div>
  );
});

const IconSelectorComponent = observer(
  (props: { dataProduct: DataProduct; isReadOnly: boolean }) => {
    const { dataProduct, isReadOnly } = props;

    const handleChange = (iconId: string | undefined): void => {
      if (iconId === undefined) {
        dataProduct_setIcon(dataProduct, undefined);
      } else {
        const _dataProductLibraryIcon = new DataProductLibraryIcon(
          V1_DataProductIconLibraryId.REACT_ICONS,
          iconId,
        );
        dataProduct_setIcon(dataProduct, _dataProductLibraryIcon);
      }
    };

    return (
      <IconSelectorGrid
        iconId={
          dataProduct.icon instanceof DataProductLibraryIcon
            ? dataProduct.icon.iconId
            : undefined
        }
        onChange={handleChange}
        isReadOnly={isReadOnly}
        disableHighlightNoneOption={
          dataProduct.icon instanceof DataProductEmbeddedImageIcon
        }
      />
    );
  },
);

const ImageSelectorComponent = observer(
  (props: { dataProduct: DataProduct; isReadOnly: boolean }) => {
    const { dataProduct, isReadOnly } = props;

    const editorStore = useEditorStore();
    const imageInputRef = useRef<HTMLInputElement>(null);
    const imageConfig =
      editorStore.applicationStore.config.options.dataProductConfig
        ?.imageConfig;

    const handleFileChange = async (
      event: React.ChangeEvent<HTMLInputElement>,
    ) => {
      const file = event.target.files?.[0];
      if (file) {
        try {
          // Check file size first
          const fileSizeKB = file.size / 1024;
          if (fileSizeKB > (imageConfig?.maxUploadSizeKB ?? 1024 * 5)) {
            // 5MB limit by default
            editorStore.applicationStore.notificationService.notifyError(
              `File size must be less than ${imageConfig?.maxUploadSizeKB ?? 1024 * 5}KB`,
            );
            return;
          }

          const compressedImage = await compressImage(
            file,
            imageConfig?.maxSizeKB ?? 128,
            imageConfig?.maxDimension ?? 800,
          );
          const dataProductEmbeddedImageIcon = new DataProductEmbeddedImageIcon(
            compressedImage,
          );
          dataProduct_setIcon(dataProduct, dataProductEmbeddedImageIcon);
        } catch {
          editorStore.applicationStore.notificationService.notifyError(
            'Failed to process image. Please try a different file.',
          );
        }
      }
    };

    return (
      <div>
        <div className="panel__content__form__section__header__prompt">
          Upload an image to represent this Data Product in the marketplace.
        </div>
        <div className="data-product-editor__image-selector__container">
          <input
            id="data-product-image-upload"
            name="data-product-image-upload"
            type="file"
            accept="image/*"
            disabled={isReadOnly}
            onChange={(event) => {
              // eslint-disable-next-line no-void
              void handleFileChange(event);
            }}
            className="data-product-editor__image-selector__input"
            value={
              dataProduct.icon instanceof DataProductEmbeddedImageIcon
                ? ''
                : undefined
            }
            ref={imageInputRef}
          />
          <button
            onClick={() => imageInputRef.current?.click()}
            className="data-product-editor__image-selector__upload-btn btn btn--dark"
          >
            <UploadIcon /> Upload File
          </button>
          <div className="data-product-editor__image-selector__hint">
            Supported formats: PNG, JPG, JPEG, GIF (max{' '}
            {(imageConfig?.maxUploadSizeKB ?? 1024 * 5) / 1024}MB)
          </div>
        </div>
      </div>
    );
  },
);

const DataProductIconEditor = observer(
  (props: { product: DataProduct; isReadOnly: boolean }) => {
    const { product, isReadOnly } = props;

    return (
      <div className="panel__content__form__section data-product-editor__icon-editor">
        <div className="panel__content__form__section__header__label">
          Icon/Image
        </div>
        <IconPreviewComponent dataProduct={product} />
        <IconSelectorComponent dataProduct={product} isReadOnly={isReadOnly} />
        <div
          className="panel__content__form__section__header__prompt"
          style={{ marginBottom: 0 }}
        >
          <b>or</b>
        </div>
        <ImageSelectorComponent dataProduct={product} isReadOnly={isReadOnly} />
      </div>
    );
  },
);

const DataProductOwnershipEditor = observer(
  (props: { product: DataProduct; isReadOnly: boolean }) => {
    const { product, isReadOnly } = props;
    const owner =
      product.owner instanceof AppDirOwner ? product.owner : undefined;

    const ensureOwner = (): AppDirOwner => {
      if (owner) {
        return owner;
      }
      const newOwner = observe_AppDirOwner(new AppDirOwner());
      dataProduct_setOwner(product, newOwner);
      return newOwner;
    };

    const handleProductionChange: ChangeEventHandler<HTMLInputElement> = (
      event,
    ) => {
      const currentOwner = ensureOwner();
      const val = event.target.value;
      if (val === '') {
        appDirOwner_setProduction(currentOwner, undefined);
        if (!currentOwner.prodParallel) {
          dataProduct_setOwner(product, undefined);
        }
        return;
      }
      const num = Number(val);
      if (Number.isNaN(num)) {
        return;
      }
      if (currentOwner.production) {
        appDirNode_setAppDirId(currentOwner.production, num);
        return;
      }
      const node = observe_AppDirNode(new AppDirNode());
      node.appDirId = num;
      node.level = AppDirLevel.DEPLOYMENT;
      appDirOwner_setProduction(currentOwner, node);
    };

    const handleProdParallelChange: ChangeEventHandler<HTMLInputElement> = (
      event,
    ) => {
      const currentOwner = ensureOwner();
      const val = event.target.value;
      if (val === '') {
        appDirOwner_setProdParallel(currentOwner, undefined);
        if (!currentOwner.production) {
          dataProduct_setOwner(product, undefined);
        }
        return;
      }
      const num = Number(val);
      if (Number.isNaN(num)) {
        return;
      }
      if (currentOwner.prodParallel) {
        appDirNode_setAppDirId(currentOwner.prodParallel, num);
        return;
      }
      const node = observe_AppDirNode(new AppDirNode());
      node.appDirId = num;
      node.level = AppDirLevel.DEPLOYMENT;
      appDirOwner_setProdParallel(currentOwner, node);
    };

    return (
      <>
        <div className="panel__content__form__section">
          <div className="panel__content__form__section__header__label">
            Ownership
          </div>
          <div className="panel__content__form__section__header__prompt">
            Set the AppDir ownership for this Data Product.
          </div>
          <div className="panel__content__form__section__header__prompt">
            Production AppDir ID
          </div>
          <input
            className="input input-group__input panel__content__form__section__input input--dark input--small"
            type="number"
            disabled={isReadOnly}
            value={owner?.production?.appDirId ?? ''}
            onChange={handleProductionChange}
            placeholder="Enter production AppDir ID"
          />
        </div>
        <div className="panel__content__form__section">
          <div className="panel__content__form__section__header__prompt">
            Prod Parallel AppDir ID
          </div>
          <input
            className="input input-group__input panel__content__form__section__input input--dark input--small"
            type="number"
            disabled={isReadOnly}
            value={owner?.prodParallel?.appDirId ?? ''}
            onChange={handleProdParallelChange}
            placeholder="Enter prod parallel AppDir ID"
          />
        </div>
      </>
    );
  },
);

const HomeTab = observer(
  (props: {
    dataProductEditorState: DataProductEditorState;
    isReadOnly: boolean;
  }) => {
    const { dataProductEditorState, isReadOnly } = props;
    const product = dataProductEditorState.product;

    const updateDataProductTitle = (val: string | undefined): void => {
      dataProduct_setTitle(product, val ?? '');
    };
    const updateDataProductDescription: ChangeEventHandler<
      HTMLTextAreaElement
    > = (event) => {
      dataProduct_setDescription(product, event.target.value);
    };

    const DATA_PRODUCT_TYPE_OPTIONS = [
      { label: DATA_PRODUCT_TYPE.INTERNAL, value: DATA_PRODUCT_TYPE.INTERNAL },
      { label: DATA_PRODUCT_TYPE.EXTERNAL, value: DATA_PRODUCT_TYPE.EXTERNAL },
    ];

    const handleDataProductTypeChange = action(
      (val: { label: string; value: string } | null): void => {
        if (val?.value === DATA_PRODUCT_TYPE.INTERNAL) {
          dataProduct_setType(product, new InternalDataProductType());
        } else if (val?.value === DATA_PRODUCT_TYPE.EXTERNAL) {
          const externalType = new ExternalDataProductType();
          const externalLink = observer_DataProductLink(
            new DataProductLink(''),
          );
          externalType.link = externalLink;
          dataProduct_setType(product, externalType);
        }
      },
    );
    const handleExternalURLChange: ChangeEventHandler<HTMLTextAreaElement> = (
      event,
    ) => {
      if (
        product.type instanceof ExternalDataProductType &&
        event.target.value
      ) {
        externalType_setLinkURL(product.type, event.target.value);
      }
    };
    const handleExternalLabelChange: ChangeEventHandler<HTMLTextAreaElement> = (
      event,
    ) => {
      if (product.type instanceof ExternalDataProductType) {
        externalType_setLinkLabel(product.type, event.target.value);
      }
    };

    return (
      <div className="panel__content">
        <div className="data-product-editor__home-tab">
          <PanelFormTextField
            name="Title"
            value={product.title}
            prompt="Provide a descriptive name for the Data Product to appear in Marketplace."
            update={updateDataProductTitle}
            placeholder="Enter title"
            hasError={product.title === '' || product.title === undefined}
            errorClassName="data-product-editor__textbox-error"
          />
          <div className="panel__content__form__section">
            <div
              className="panel__content__form__section__header__label"
              style={{ justifyContent: 'space-between', width: '45rem' }}
            >
              Description
            </div>
            <div
              className="panel__content__form__section__header__prompt"
              style={{
                color:
                  product.description === '' ||
                  product.description === undefined
                    ? 'var(--color-red-300)'
                    : 'var(--color-light-grey-400)',
                width: '45rem',
              }}
            >
              Clearly describe the purpose, content, and intended use of the
              Data Product. Markdown is supported.
            </div>
            <textarea
              className="panel__content__form__section__textarea"
              spellCheck={false}
              disabled={isReadOnly}
              value={product.description}
              onChange={updateDataProductDescription}
              style={{
                padding: '0.5rem',
                width: '45rem',
                height: '10rem',
                borderColor:
                  product.description === '' ||
                  product.description === undefined
                    ? 'var(--color-red-300)'
                    : 'transparent',
                resize: 'vertical',
                maxHeight: '100%',
                maxWidth: '100%',
              }}
            />
          </div>
          <div className="panel__content__form__section">
            <div
              className="panel__content__form__section__header__label"
              style={{ justifyContent: 'space-between', width: '45rem' }}
            >
              Data Product Type
            </div>
            <div className="panel__content__form__section__header__prompt">
              Select if this Data Product is Internal or External
            </div>
            <CustomSelectorInput
              className="panel__content__form__section__dropdown"
              options={DATA_PRODUCT_TYPE_OPTIONS}
              onChange={handleDataProductTypeChange}
              value={
                product.type instanceof InternalDataProductType
                  ? DATA_PRODUCT_TYPE_OPTIONS.find(
                      (option) => option.value === DATA_PRODUCT_TYPE.INTERNAL,
                    )
                  : product.type instanceof ExternalDataProductType
                    ? DATA_PRODUCT_TYPE_OPTIONS.find(
                        (option) => option.value === DATA_PRODUCT_TYPE.EXTERNAL,
                      )
                    : null
              }
              darkMode={
                !dataProductEditorState.editorStore.applicationStore
                  .layoutService.TEMPORARY__isLightColorThemeEnabled
              }
            />
            {product.type instanceof ExternalDataProductType && (
              <div className="data-product-editor__external-link">
                <div className="panel__content__form__section__header__prompt">
                  External Link
                </div>
                <textarea
                  className="input input-group__input panel__content__form__section__input input--dark input--small"
                  spellCheck={false}
                  disabled={isReadOnly}
                  placeholder="External URL"
                  value={product.type.link.url}
                  onChange={handleExternalURLChange}
                  style={{
                    resize: 'none',
                    padding: '0.25rem 0.5rem',
                  }}
                />
                <textarea
                  className="input input-group__input panel__content__form__section__input input--dark input--small"
                  spellCheck={false}
                  disabled={isReadOnly}
                  placeholder="External Link Label"
                  value={product.type.link.label ?? ''}
                  onChange={handleExternalLabelChange}
                  style={{
                    resize: 'none',
                    padding: '0.25rem 0.5rem',
                  }}
                />
              </div>
            )}
          </div>
          <DataProductIconEditor product={product} isReadOnly={isReadOnly} />
          <DataProductOwnershipEditor
            product={product}
            isReadOnly={isReadOnly}
          />
        </div>
      </div>
    );
  },
);

const ExpertiseEditor = observer(
  (props: { dataProductEditorState: DataProductEditorState }) => {
    const { dataProductEditorState } = props;
    const product = dataProductEditorState.product;

    const NewExpertIdComponent = observer(
      (newElementProps: { expertise: Expertise }) => {
        const { expertise } = newElementProps;
        const [title, setTitle] = useState('');

        return (
          <div className="data-product-editor__support-info__expertise-id-container">
            <div className="panel__content__form__section__list__new-item__input">
              <input
                className="input input-group__input panel__content__form__section__input input--dark"
                type="title"
                placeholder="Enter User ID"
                value={title}
                onChange={(event) => {
                  setTitle(event.target.value);
                }}
              />
            </div>
            <button
              className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
              onClick={() => {
                expertise_addId(expertise, title);
                setTitle('');
              }}
            >
              Save
            </button>
          </div>
        );
      },
    );

    const addNewExpertise = () => {
      dataProductEditorState.createExpertise();
    };

    const updateExpertiseDescription = (
      expertise: Expertise,
      val: string | undefined,
    ): void => {
      if (val) {
        expertise_setDescription(expertise, val);
      }
    };

    const handleRemoveId = (expertise: Expertise, id: string) => {
      expertise_deleteId(expertise, id);
    };

    const handleRemoveExpertise = (expertise: Expertise) => {
      if (product.supportInfo) {
        supportInfo_deleteExpertise(product.supportInfo, expertise);
      }
    };

    return (
      <>
        <PanelHeader className="panel__header--access-point">
          <div className="panel__content__form__section__header__label">
            Expertise
          </div>
          <PanelHeaderActions>
            <PanelHeaderActionItem
              className="panel__header__action"
              onClick={addNewExpertise}
              title="Add new expertise"
            >
              <PlusIcon />
            </PanelHeaderActionItem>
          </PanelHeaderActions>
        </PanelHeader>
        {dataProductEditorState.product.supportInfo?.expertise?.map(
          (expertise) => (
            <>
              <div className="data-product-editor__expertise">
                <div className="panel__content__form__section">
                  <div className="panel__content__form__section__header__prompt">
                    Description
                  </div>
                  <textarea
                    className="panel__content__form__section__textarea"
                    spellCheck={false}
                    disabled={dataProductEditorState.isReadOnly}
                    value={expertise.description ?? ''}
                    onChange={(event) =>
                      updateExpertiseDescription(expertise, event.target.value)
                    }
                    style={{
                      height: '100%',
                    }}
                  />
                </div>
                <div className="panel__content__form__section">
                  <div className="panel__content__form__section__header__prompt">
                    User IDs
                  </div>
                  <div className="panel__content__form__section__list__id-list">
                    {expertise.expertIds?.map((id) => (
                      <div
                        className="panel__content__form__section__list__item"
                        key={id}
                      >
                        {id}

                        <button
                          className="panel__content__form__section__list__item__remove-btn"
                          disabled={dataProductEditorState.isReadOnly}
                          onClick={() => handleRemoveId(expertise, id)}
                          tabIndex={-1}
                        >
                          <TimesIcon />
                        </button>
                      </div>
                    ))}
                  </div>
                  <NewExpertIdComponent expertise={expertise} />
                </div>
                <div className="data-product-editor__expertise__actions">
                  <button
                    className="access-point-editor__generic-entry__remove-btn--group"
                    onClick={() => {
                      handleRemoveExpertise(expertise);
                    }}
                    tabIndex={-1}
                    title="Remove Expertise"
                  >
                    <TimesIcon />
                  </button>
                </div>
              </div>
            </>
          ),
        )}
      </>
    );
  },
);

const SupportTab = observer(
  (props: {
    dataProductEditorState: DataProductEditorState;
    isReadOnly: boolean;
  }) => {
    const { dataProductEditorState, isReadOnly } = props;
    const product = dataProductEditorState.product;
    const updateSupportInfoDocumentationUrl = (
      val: string | undefined,
    ): void => {
      dataProduct_setSupportInfoIfAbsent(product);
      if (product.supportInfo) {
        supportInfo_setDocumentationUrl(product.supportInfo, val ?? '');
      }
      if (!val) {
        dataProductEditorState.clearSupportInfo();
      }
    };
    const updateSupportInfoDocumentationLabel = (
      val: string | undefined,
    ): void => {
      if (product.supportInfo?.documentation) {
        supportInfo_setLinkLabel(product.supportInfo.documentation, val);
      }
    };

    const updateSupportInfoWebsite = (val: string | undefined): void => {
      dataProduct_setSupportInfoIfAbsent(product);
      if (product.supportInfo) {
        supportInfo_setWebsite(product.supportInfo, val ?? '');
      }
      if (!val) {
        dataProductEditorState.clearSupportInfo();
      }
    };
    const updateSupportInfoWebsiteLabel = (val: string | undefined): void => {
      if (product.supportInfo?.website) {
        supportInfo_setLinkLabel(product.supportInfo.website, val);
      }
    };

    const updateSupportInfoFaqUrl = (val: string | undefined): void => {
      dataProduct_setSupportInfoIfAbsent(product);
      if (product.supportInfo) {
        supportInfo_setFaqUrl(product.supportInfo, val ?? '');
      }
      if (!val) {
        dataProductEditorState.clearSupportInfo();
      }
    };
    const updateSupportInfoFaqLabel = (val: string | undefined): void => {
      if (product.supportInfo?.faqUrl) {
        supportInfo_setLinkLabel(product.supportInfo.faqUrl, val);
      }
    };

    const updateSupportInfoSupportUrl = (val: string | undefined): void => {
      dataProduct_setSupportInfoIfAbsent(product);
      if (product.supportInfo) {
        supportInfo_setSupportUrl(product.supportInfo, val ?? '');
      }
      if (!val) {
        dataProductEditorState.clearSupportInfo();
      }
      const supportLabelOptions = ['Keystone', 'Jira', 'ServiceNow'];
      supportLabelOptions.forEach((derivedLabel) => {
        if (
          val?.includes(derivedLabel.toLowerCase()) &&
          product.supportInfo?.supportUrl
        ) {
          supportInfo_setLinkLabel(
            product.supportInfo.supportUrl,
            derivedLabel,
          );
        }
      });
    };
    const updateSupportInfoSupportLabel = (val: string | undefined): void => {
      if (product.supportInfo?.supportUrl) {
        supportInfo_setLinkLabel(product.supportInfo.supportUrl, val);
      }
    };

    const handleSupportInfoEmailAdd = (
      address: string,
      title: string,
    ): void => {
      dataProduct_setSupportInfoIfAbsent(product);
      if (product.supportInfo) {
        supportInfo_addEmail(product.supportInfo, new Email(address, title));
      }
    };

    const handleSupportInfoEmailRemove = (email: Email): void => {
      if (product.supportInfo) {
        supportInfo_deleteEmail(product.supportInfo, email);
      }
      if (product.supportInfo?.emails.length === 0) {
        dataProductEditorState.clearSupportInfo();
      }
    };

    const SupportEmailComponent = observer(
      (supportEmailProps: { item: Email }): React.ReactElement => {
        const { item } = supportEmailProps;

        return (
          <div className="panel__content__form__section__list__item__rows">
            <div className="row">
              <label className="label">Address</label>
              <div className="textbox">{item.address}</div>
            </div>
            <div className="row">
              <label className="label">Title</label>
              <div className="textbox">{item.title}</div>
            </div>
          </div>
        );
      },
    );

    const NewSupportEmailComponent = observer(
      (newSupportEmailProps: { onFinishEditing: () => void }) => {
        const { onFinishEditing } = newSupportEmailProps;
        const [address, setAddress] = useState('');
        const [title, setTitle] = useState('');

        return (
          <div className="data-product-editor__support-info__new-email">
            <div className="panel__content__form__section__list__new-item__input">
              <input
                className="input input-group__input panel__content__form__section__input input--dark"
                type="email"
                placeholder="Enter email"
                value={address}
                onChange={(event) => {
                  setAddress(event.target.value);
                }}
              />
            </div>
            <div className="panel__content__form__section__list__new-item__input">
              <input
                className="input input-group__input panel__content__form__section__input input--dark"
                type="title"
                placeholder="Enter title"
                value={title}
                onChange={(event) => {
                  setTitle(event.target.value);
                }}
              />
            </div>
            <button
              className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
              onClick={() => {
                handleSupportInfoEmailAdd(address, title);
                setAddress('');
                setTitle('');
                onFinishEditing();
              }}
            >
              Save
            </button>
          </div>
        );
      },
    );

    return (
      <div className="data-product-editor__support-info">
        <div className="panel__content__form__section__header__label">
          Support Information
        </div>
        <div className="panel__content__form__section__header__prompt">
          Configure support information for this Lakehouse Data Product.
        </div>
        <div className="data-product-editor__support-info__link-container">
          <PanelFormTextField
            className="data-product-editor__support-info__input"
            name="Documentation"
            prompt="URL"
            value={product.supportInfo?.documentation?.url ?? ''}
            update={updateSupportInfoDocumentationUrl}
            placeholder="Documentation URL"
          />
          <PanelFormTextField
            className="data-product-editor__support-info__input"
            name=""
            prompt="Label"
            isReadOnly={!Boolean(product.supportInfo?.documentation)}
            value={product.supportInfo?.documentation?.label ?? ''}
            update={updateSupportInfoDocumentationLabel}
            placeholder="Documentation Label"
          />
        </div>

        <div className="data-product-editor__support-info__link-container">
          <PanelFormTextField
            name="Website"
            prompt="URL"
            value={product.supportInfo?.website?.url ?? ''}
            update={updateSupportInfoWebsite}
            placeholder="Website URL"
          />
          <PanelFormTextField
            name=""
            prompt="Label"
            isReadOnly={!Boolean(product.supportInfo?.website)}
            value={product.supportInfo?.website?.label ?? ''}
            update={updateSupportInfoWebsiteLabel}
            placeholder="Website Label"
          />
        </div>

        <div className="data-product-editor__support-info__link-container">
          <PanelFormTextField
            name="FAQ"
            prompt="URL"
            value={product.supportInfo?.faqUrl?.url}
            update={updateSupportInfoFaqUrl}
            placeholder="FAQ URL"
          />
          <PanelFormTextField
            name=""
            prompt="Label"
            isReadOnly={!Boolean(product.supportInfo?.faqUrl)}
            value={product.supportInfo?.faqUrl?.label}
            update={updateSupportInfoFaqLabel}
            placeholder="FAQ Label"
          />
        </div>

        <div className="data-product-editor__support-info__link-container">
          <PanelFormTextField
            name="Support"
            prompt="URL"
            value={product.supportInfo?.supportUrl?.url ?? ''}
            update={updateSupportInfoSupportUrl}
            placeholder="Support URL"
          />
          <PanelFormTextField
            name=""
            prompt="Label"
            isReadOnly={!Boolean(product.supportInfo?.supportUrl)}
            value={product.supportInfo?.supportUrl?.label}
            update={updateSupportInfoSupportLabel}
            placeholder="Support Label"
          />
        </div>

        <ListEditor
          title="Emails"
          items={product.supportInfo?.emails}
          keySelector={(email: Email) => email.address + email.title}
          ItemComponent={SupportEmailComponent}
          NewItemComponent={NewSupportEmailComponent}
          handleRemoveItem={handleSupportInfoEmailRemove}
          isReadOnly={isReadOnly}
          emptyMessage="No emails specified"
        />
        <ExpertiseEditor dataProductEditorState={dataProductEditorState} />
      </div>
    );
  },
);

const getDataProductViewerState = (
  product: DataProduct,
  graphManagerState: GraphManagerState,
  applicationStore: LegendStudioApplicationStore,
  depotServerClient: DepotServerClient,
) => {
  const graphManager = guaranteeType(
    graphManagerState.graphManager,
    V1_PureGraphManager,
  );
  const v1_dataProduct = guaranteeType(
    graphManager.elementToProtocol(product),
    V1_DataProduct,
  );
  const remoteEngine = guaranteeType(graphManager.engine, V1_RemoteEngine);
  let userSearchService: UserSearchService | undefined = undefined;
  if (applicationStore.pluginManager.getUserPlugins().length > 0) {
    applicationStore.pluginManager
      .getUserPlugins()
      .forEach((plugin) =>
        plugin.setup(
          applicationStore.config.options.userSearchConfig
            ?.applicationDirectoryUrl,
        ),
      );
    userSearchService = new UserSearchService({
      userProfileImageUrl:
        applicationStore.config.options.userSearchConfig?.userProfileImageUrl,
      applicationDirectoryUrl:
        applicationStore.config.options.userSearchConfig
          ?.applicationDirectoryUrl,
    });
    userSearchService.registerPlugins(
      applicationStore.pluginManager.getUserPlugins(),
    );
  }
  const dataProductViewerState = new DataProductViewerState(
    v1_dataProduct,
    applicationStore,
    remoteEngine.getEngineServerClient(),
    depotServerClient,
    graphManagerState,
    applicationStore.config.options.dataProductConfig,
    userSearchService,
    undefined,
    {},
  );
  dataProductViewerState.init();
  return dataProductViewerState;
};

const OperationalTab = observer(
  (props: {
    dataProductEditorState: DataProductEditorState;
    isReadOnly: boolean;
  }) => {
    const { dataProductEditorState, isReadOnly } = props;
    const product = dataProductEditorState.product;
    const CHOOSE_REGION = 'Add Coverage Region...';
    type EnumOption<T extends string> = { label: string; value: T };

    const getCoverageRegionOptions = (): EnumOption<Region>[] => {
      const existingRegions =
        product.operationalMetadata?.coverageRegions ?? [];
      return (Object.values(Region) as Region[])
        .filter((region) => !existingRegions.includes(region))
        .map((region) => ({
          label: region,
          value: region,
        }));
    };

    const handleAddRegion = (val: EnumOption<Region> | null): void => {
      dataProduct_setOperationalMetadataIfAbsent(product);
      if (product.operationalMetadata && val) {
        operationalMetadata_addCoverageRegion(
          product.operationalMetadata,
          val.value,
        );
      }
    };

    const handleRemoveRegion = (region: Region) => {
      if (product.operationalMetadata) {
        operationalMetadata_deleteCoverageRegion(
          product.operationalMetadata,
          region,
        );
      }
    };

    const handleUpdateFrequencyChange = (
      val: EnumOption<DeliveryFrequency> | null,
    ): void => {
      dataProduct_setOperationalMetadataIfAbsent(product);
      if (product.operationalMetadata && val) {
        operationalMetadata_setUpdateFrequency(
          product.operationalMetadata,
          val.value,
        );
      }
    };

    return (
      <div>
        <div
          className="panel__content__form__section__header__label"
          style={{ paddingLeft: '1rem' }}
        >
          Operational Metadata
        </div>
        <div
          className="panel__content__form__section__header__prompt"
          style={{ paddingLeft: '1rem' }}
        >
          Configure operational metadata for this Data Product.
        </div>
        <div className="data-product-editor__operational-input">
          <div
            className="panel__content__form__section__header__label"
            style={{ justifyContent: 'space-between', width: '45rem' }}
          >
            Coverage Regions
          </div>
          <div className="panel__content__form__section__header__prompt">
            Select the regions this Data Product covers.
          </div>
          <div className="panel__content__form__section__list__id-list">
            {product.operationalMetadata?.coverageRegions?.map((region) => (
              <div
                className="panel__content__form__section__list__item"
                key={region}
              >
                {region}
                <button
                  className="panel__content__form__section__list__item__remove-btn"
                  disabled={dataProductEditorState.isReadOnly}
                  onClick={() => handleRemoveRegion(region)}
                  tabIndex={-1}
                  title="Remove Region"
                >
                  <TimesIcon />
                </button>
              </div>
            ))}
          </div>
          <CustomSelectorInput<EnumOption<Region>>
            className="panel__content__form__section__dropdown"
            options={getCoverageRegionOptions()}
            onChange={handleAddRegion}
            placeholder={CHOOSE_REGION}
            darkMode={true}
            disabled={isReadOnly}
          />
        </div>
        <div className="data-product-editor__operational-input">
          <div
            className="panel__content__form__section__header__label"
            style={{ justifyContent: 'space-between', width: '45rem' }}
          >
            Update Frequency
          </div>
          <div className="panel__content__form__section__header__prompt">
            Select the update frequency of this Data Product.
          </div>
          <CustomSelectorInput<EnumOption<DeliveryFrequency>>
            className="panel__content__form__section__dropdown"
            options={(
              Object.values(DeliveryFrequency) as DeliveryFrequency[]
            ).map((frequency) => ({
              label: frequency,
              value: frequency,
            }))}
            onChange={handleUpdateFrequencyChange}
            value={
              product.operationalMetadata?.updateFrequency
                ? {
                    label: product.operationalMetadata.updateFrequency,
                    value: product.operationalMetadata.updateFrequency,
                  }
                : null
            }
            placeholder="Select update frequency..."
            darkMode={true}
            disabled={isReadOnly}
          />
        </div>
      </div>
    );
  },
);

export const DataProductEditor = observer(() => {
  const editorStore = useEditorStore();
  const dataProductEditorState =
    editorStore.tabManagerState.getCurrentEditorState(DataProductEditorState);
  const product = dataProductEditorState.product;
  const isReadOnly = dataProductEditorState.isReadOnly;
  const [showPreview, setShowPreview] = useState(false);
  const [dataProductViewerState, setDataProductViewerState] =
    useState<DataProductViewerState>();

  const selectedActivity = dataProductEditorState.selectedTab;
  const renderActivivtyBarTab = (): React.ReactNode => {
    switch (selectedActivity) {
      case DATA_PRODUCT_TAB.HOME:
        return (
          <HomeTab
            dataProductEditorState={dataProductEditorState}
            isReadOnly={isReadOnly}
          />
        );
      case DATA_PRODUCT_TAB.SUPPORT:
        return (
          <SupportTab
            dataProductEditorState={dataProductEditorState}
            isReadOnly={isReadOnly}
          />
        );
      case DATA_PRODUCT_TAB.APG:
        return (
          <AccessPointGroupTab
            dataProductEditorState={dataProductEditorState}
            isReadOnly={isReadOnly}
          />
        );
      case DATA_PRODUCT_TAB.OPERATIONAL:
        return (
          <OperationalTab
            dataProductEditorState={dataProductEditorState}
            isReadOnly={isReadOnly}
          />
        );
      case DATA_PRODUCT_TAB.TESTING:
        return (
          <DataProductTestableEditor
            dataProductEditorState={dataProductEditorState}
            isReadOnly={isReadOnly}
          />
        );
      default:
        return null;
    }
  };

  useApplicationNavigationContext(
    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATA_PRODUCT_EDITOR,
  );

  useEffect(() => {
    flowResult(dataProductEditorState.convertAccessPointsFuncObjects()).catch(
      dataProductEditorState.editorStore.applicationStore.alertUnhandledError,
    );
  }, [dataProductEditorState]);

  useEffect(
    () =>
      autorun(
        () => {
          if (showPreview) {
            setDataProductViewerState(
              getDataProductViewerState(
                product,
                editorStore.graphManagerState,
                editorStore.applicationStore,
                editorStore.depotServerClient,
              ),
            );
          }
        },
        { delay: 1000 },
      ),
    [
      editorStore.applicationStore,
      editorStore.graphManagerState,
      editorStore.depotServerClient,
      product,
      showPreview,
    ],
  );

  return (
    <div className="data-product-editor">
      <div className="panel">
        <div className="panel__header">
          <div className="panel__header__title">
            {isReadOnly && (
              <div className="uml-element-editor__header__lock">
                <LockIcon />
              </div>
            )}
            <div className="panel__header__title__label">data product</div>
          </div>
          <PanelHeaderActions>
            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
              <button
                className="btn__dropdown-combo__label"
                onClick={() => {
                  setShowPreview((prev) => {
                    if (!prev) {
                      setDataProductViewerState(
                        getDataProductViewerState(
                          product,
                          editorStore.graphManagerState,
                          editorStore.applicationStore,
                          editorStore.depotServerClient,
                        ),
                      );
                    }
                    return !prev;
                  });
                }}
                title={showPreview ? 'Hide Preview' : 'Preview Description'}
                tabIndex={-1}
                style={{
                  width: '12rem',
                  justifyContent: 'center',
                }}
              >
                {showPreview ? (
                  <>
                    <CloseEyeIcon className="btn__dropdown-combo__label__icon" />
                    <div className="btn__dropdown-combo__label__title">
                      Hide Preview
                    </div>
                  </>
                ) : (
                  <>
                    <EyeIcon className="btn__dropdown-combo__label__icon" />
                    <div className="btn__dropdown-combo__label__title">
                      Preview
                    </div>
                  </>
                )}
              </button>
            </div>
          </PanelHeaderActions>
        </div>

        <div className="panel data-product-editor__content-panel">
          <DataProductSidebar dataProductEditorState={dataProductEditorState} />
          <ResizablePanelGroup orientation="vertical">
            <ResizablePanel>{renderActivivtyBarTab()}</ResizablePanel>
            {showPreview && dataProductViewerState && (
              <ResizablePanelSplitter />
            )}
            {showPreview && dataProductViewerState && (
              <ResizablePanel>
                <div className="data-product-editor__preview-container theme__hc-light">
                  <ProductViewer productViewerState={dataProductViewerState} />
                </div>
              </ResizablePanel>
            )}
          </ResizablePanelGroup>
        </div>
      </div>
    </div>
  );
});