/**
 * 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 { clsx } from '@finos/legend-art';
import { AppBar, Box, Container, Toolbar } from '@mui/material';
import { observer } from 'mobx-react-lite';
import { LEGEND_MARKETPLACE_TEST_ID } from '../../__lib__/LegendMarketplaceTesting.js';
import {
  ReleaseLogManager,
  ReleaseNotesManager,
  useApplicationStore,
} from '@finos/legend-application';
import { LEGEND_MARKETPLACE_ROUTE_PATTERN } from '../../__lib__/LegendMarketplaceNavigation.js';
import { LegendMarketplaceIconToolbar } from './LegendMarketplaceIconToolbar.js';
import { matchPath } from '@finos/legend-application/browser';
import { useEffect, useState } from 'react';
import { LegendMarketplaceTelemetryHelper } from '../../__lib__/LegendMarketplaceTelemetryHelper.js';
import { useAuth } from 'react-oidc-context';

const HEADER_HEIGHT = 64;
const MIN_HEADER_OPACITY = 0.75;

interface LegendMarketplaceHeaderPage {
  title: string;
  urlRoute: string;
  /**
   * Optional short label rendered as a pill next to the tab title, e.g. `NEW`.
   */
  badge?: string;
}

const LegendMarketPlaceHeaderTabs = observer(
  (props: { pages: LegendMarketplaceHeaderPage[] }) => {
    const { pages } = props;

    const applicationStore = useApplicationStore();

    const navigateToPage = (route: string): void => {
      applicationStore.navigationService.navigator.goToLocation(route);
    };

    return (
      <Box className="legend-marketplace-header__tabs">
        {pages.map((page) => {
          const isSelectedTab =
            matchPath(
              page.urlRoute,
              applicationStore.navigationService.navigator.getCurrentLocation(),
            ) !== null;

          return (
            <a
              key={page.title}
              className={clsx('legend-marketplace-header__tab', {
                'legend-marketplace-header__tab--selected': isSelectedTab,
              })}
              onClick={() => {
                navigateToPage(page.urlRoute);
                LegendMarketplaceTelemetryHelper.logEvent_ClickHeadertab(
                  applicationStore.telemetryService,
                  page.title,
                );
              }}
            >
              {page.title}
              {page.badge !== undefined && (
                <span className="legend-marketplace-header__tab__badge">
                  {page.badge}
                </span>
              )}
            </a>
          );
        })}
      </Box>
    );
  },
);

const LegendMarketplaceBaseHeader = observer(
  (props: {
    headerName: string;
    homeUrl: string;
    pages: LegendMarketplaceHeaderPage[];
    showIcons?: boolean;
  }) => {
    const { homeUrl, pages, showIcons } = props;

    const applicationStore = useApplicationStore();
    const auth = useAuth();

    const isDarkMode =
      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;

    const [headerBackdropOpacity, setHeaderBackdropOpacity] = useState(1);
    const [headerBlurOpacity, setHeaderBlurOpacity] = useState(0);

    // The below handles the scroll effect for the header's blur effect. When the user is at the top of the page,
    // the header is fully opaque (i.e., no blur), so we hide the blur component and show the backdrop image component
    // (which is rendered behind the header). As the user scrolls down, we increase the opacity of the blur component
    // while reducing the opacity of the backdrop image component until a certain threshold.
    useEffect(() => {
      const appElement = document.querySelector('.app');

      const listenerCallback = () => {
        const scrollTop = appElement?.scrollTop ?? 0;
        const newBackdropOpacity = Math.max(
          MIN_HEADER_OPACITY,
          Math.min(1, 1 - (scrollTop - HEADER_HEIGHT) / HEADER_HEIGHT),
        );
        const newBlurOpacity = Math.max(
          0,
          Math.min(1, (scrollTop - HEADER_HEIGHT) / HEADER_HEIGHT),
        );
        setHeaderBackdropOpacity(newBackdropOpacity);
        setHeaderBlurOpacity(newBlurOpacity);
      };

      if (appElement) {
        appElement.addEventListener('scroll', listenerCallback);
      }
      return () => {
        if (appElement) {
          appElement.removeEventListener('scroll', listenerCallback);
        }
      };
    }, []);

    useEffect(() => {
      if (auth.isAuthenticated) {
        applicationStore.releaseNotesService.updateViewedVersion();
      }
    }, [applicationStore, auth.isAuthenticated]);

    const navigateToHome = (): void => {
      applicationStore.navigationService.navigator.goToLocation(homeUrl);
    };

    return (
      <AppBar
        position="sticky"
        className="legend-marketplace-header"
        data-testid={LEGEND_MARKETPLACE_TEST_ID.HEADER}
      >
        <div
          className="legend-marketplace-header__backdrop-image"
          style={{ opacity: headerBackdropOpacity }}
        />
        <div
          className="legend-marketplace-header__backdrop"
          style={{ opacity: headerBlurOpacity }}
        />
        <Container
          className="legend-marketplace-header__container"
          maxWidth={false}
        >
          <Toolbar disableGutters={true}>
            <div
              className="legend-marketplace-header__name"
              onClick={() => navigateToHome()}
            >
              <img
                src={
                  isDarkMode
                    ? '/assets/headerLogoDark.svg'
                    : '/assets/headerLogoLight.svg'
                }
                alt="Goldman Sachs Logo"
                className="legend-marketplace-header__logo"
              />
            </div>
            <LegendMarketPlaceHeaderTabs pages={pages} />
            {showIcons && <LegendMarketplaceIconToolbar />}
          </Toolbar>
        </Container>
        <ReleaseLogManager />
        <ReleaseNotesManager />
      </AppBar>
    );
  },
);

export const MarketplaceLakehouseHeader = observer(() => {
  return (
    <LegendMarketplaceBaseHeader
      headerName=""
      homeUrl={LEGEND_MARKETPLACE_ROUTE_PATTERN.HOME_PAGE}
      pages={[
        {
          title: 'Dataspaces',
          urlRoute: LEGEND_MARKETPLACE_ROUTE_PATTERN.DATA_SPACE_SEARCH_RESULTS,
        },
        {
          title: 'Lakehouse Access',
          urlRoute:
            LEGEND_MARKETPLACE_ROUTE_PATTERN.LAKEHOUSE_ACCESS_SEARCH_RESULTS,
          badge: 'NEW',
        },
        {
          title: 'Data APIs',
          urlRoute: LEGEND_MARKETPLACE_ROUTE_PATTERN.DATA_APIS,
        },
        {
          title: 'Intelligence and AI Agents',
          urlRoute: LEGEND_MARKETPLACE_ROUTE_PATTERN.AGENTS,
        },
        {
          title: 'Terminals and Addons',
          urlRoute: LEGEND_MARKETPLACE_ROUTE_PATTERN.TERMINAL_ADD_ONS,
        },
      ]}
      showIcons={true}
    />
  );
});