import React, { useEffect } from 'react';
import { LearnMoreColumn, TravelMiniCTAProps } from './types';
import {
  Container,
  ContentWrapper,
  LeftSection,
  TextContainer,
  Description,
  RightSection,
  ButtonsContainer,
  PrimaryButton,
  StyledTHLogo,
  LearnMoreButton,
  LearnMoreLabel,
  ExpandableSection,
  ExpandableIntro,
  ColumnsGrid,
  ColumnItem,
  ColumnTitle,
  ColumnDescription,
  ColumnPhoneLink,
  ColumnPhoneNumber
} from './styles';
import { getAppContentLocation } from '../../utils';
import { TravelEnquiryForm } from '../travel-enquiry-form';
import { ChevronDown } from '../travel-enquiry-form/ChevronDown';

// Extend Window interface for LivePerson
declare global {
  interface Window {
    lpTag?: {
      [key: string]: any;
    };

    utag?: {
      link: (params: Record<string, any>) => void;
    };
  }
}

const DEFAULT_LEARN_MORE_INTRO =
  'For years, The Times and The Sunday Times have been a trusted source of travel inspiration thanks to our award-winning journalists. Now with Times Holidays, our in-house agency, you can book your next getaway directly with us.';

const DEFAULT_LEARN_MORE_COLUMNS: LearnMoreColumn[] = [
  {
    title: "Book the trips you've read about ",
    description:
      'If you loved a particular feature, you can book the exact itinerary the writer experienced with us.'
  },
  {
    title: 'Expert recommendations',
    description:
      'Our dedicated advisors only work with partners approved by the editorial team for a trip you can trust.'
  },
  {
    title: 'A holiday made just for you',
    description:
      'Our network of premier travel partners will help us curate a bespoke itinerary based on your preferences.'
  },
  {
    title: 'Call us on',
    phone: { number: '0808 1342945' },
    description: 'Opening hours:\nMon-Fri: 9am-6pm\nSat & Sun: 10am-5pm'
  }
];

export const TravelMiniCTA: React.FC<TravelMiniCTAProps> = ({
  isApp,
  isOnChannelPage,
  learnMoreIntro = DEFAULT_LEARN_MORE_INTRO,
  learnMoreColumns = DEFAULT_LEARN_MORE_COLUMNS,
  learnMoreColumnCount = 4
}) => {
  const [showEnquiryForm, setShowEnquiryForm] = React.useState(false);
  const [isExpanded, setIsExpanded] = React.useState(false);
  const travelMiniCTARef = React.useRef<HTMLDivElement>(null);

  const hasLearnMoreColumns = Boolean(
    learnMoreColumns && learnMoreColumns.length > 0
  );
  const hasLearnMoreContent = Boolean(learnMoreIntro) || hasLearnMoreColumns;

  const handleOnClickTracking = (userInteraction: string) =>
    window.utag &&
    window.utag.link({
      event_navigation_action: 'navigation',
      event_navigation_name: `mini slice: ${userInteraction.toLowerCase()}`,
      event_navigation_browsing_method: 'click',
      app_content_location: getAppContentLocation('nuk_preferred_edition')
    });

  const setupImpressionTracking = () => {
    const element = travelMiniCTARef.current;
    if (!element) {
      return;
    }

    const intersectionObserver = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting && window.utag) {
            window.utag.link({
              event_navigation_action: 'navigation',
              event_navigation_name: 'mini slice: impression',
              event_navigation_browsing_method: 'scroll',
              app_content_location: getAppContentLocation(
                'nuk_preferred_edition'
              )
            });
            intersectionObserver.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.5 }
    );

    intersectionObserver.observe(element);

    return () => {
      intersectionObserver.unobserve(element);
    };
  };

  useEffect(() => {
    if (typeof window === 'undefined') {
      return;
    }

    const cleanupTracking = setupImpressionTracking();

    return () => {
      if (cleanupTracking) {
        cleanupTracking();
      }
    };
  }, []);

  return (
    <Container
      data-testid="travel-mini-cta"
      ref={travelMiniCTARef}
      isApp={isApp}
      $isOnChannelPage={isOnChannelPage}
    >
      <ContentWrapper $isOnChannelPage={isOnChannelPage}>
        <LeftSection $isOnChannelPage={isOnChannelPage}>
          <StyledTHLogo isApp={isApp} />
          <TextContainer $isOnChannelPage={isOnChannelPage}>
            <Description isApp={isApp}>
              You can now book your holiday with The Times via our own travel
              agency.
            </Description>
            {hasLearnMoreContent && (
              <LearnMoreButton
                type="button"
                isApp={isApp}
                $expanded={isExpanded}
                aria-expanded={isExpanded}
                data-testid="travel-learn-more-button"
                onClick={() => {
                  handleOnClickTracking(isExpanded ? 'Close' : 'Learn more');
                  setIsExpanded(prev => !prev);
                }}
              >
                <LearnMoreLabel>
                  {isExpanded ? 'Close' : 'Learn more'}
                </LearnMoreLabel>
                <ChevronDown />
              </LearnMoreButton>
            )}
          </TextContainer>
        </LeftSection>

        <RightSection $isOnChannelPage={isOnChannelPage}>
          <ButtonsContainer $isOnChannelPage={isOnChannelPage}>
            {isApp ? (
              <PrimaryButton
                href="https://www.thetimes.com/holidays/contact-us/"
                onClick={() => handleOnClickTracking('Enquire now')}
                isApp={isApp}
                data-testid="travel-enquire-button"
              >
                Enquire now
              </PrimaryButton>
            ) : (
              <PrimaryButton
                as="button"
                type="button"
                onClick={() => {
                  handleOnClickTracking('Enquire now');
                  setShowEnquiryForm(true);
                }}
                isApp={isApp}
                data-testid="travel-enquire-button"
              >
                Enquire now
              </PrimaryButton>
            )}
          </ButtonsContainer>
        </RightSection>
        {hasLearnMoreContent && (
          <LearnMoreButton
            type="button"
            isApp={isApp}
            $expanded={isExpanded}
            $mobile
            aria-expanded={isExpanded}
            data-testid="travel-learn-more-button-mobile"
            onClick={() => {
              handleOnClickTracking(isExpanded ? 'Close' : 'Learn more');
              setIsExpanded(prev => !prev);
            }}
          >
            <LearnMoreLabel>
              {isExpanded ? 'Close' : 'Learn more'}
            </LearnMoreLabel>
            <ChevronDown />
          </LearnMoreButton>
        )}
      </ContentWrapper>
      {isExpanded &&
        hasLearnMoreContent && (
          <ExpandableSection
            isApp={isApp}
            data-testid="travel-learn-more-content"
          >
            {learnMoreIntro && (
              <ExpandableIntro isApp={isApp}>{learnMoreIntro}</ExpandableIntro>
            )}
            {hasLearnMoreColumns && (
              <ColumnsGrid $columnCount={learnMoreColumnCount}>
                {(learnMoreColumns || []).map((column, index) => {
                  const phoneLink = column.phone && (
                    <ColumnPhoneLink
                      href={`tel:${column.phone.number.replace(/\s/g, '')}`}
                      onClick={() =>
                        handleOnClickTracking('phone number click')
                      }
                      isApp={isApp}
                    >
                      <ColumnPhoneNumber isApp={isApp}>
                        {column.phone.number}
                      </ColumnPhoneNumber>
                    </ColumnPhoneLink>
                  );

                  return (
                    <ColumnItem key={`${column.title}-${index}`}>
                      <ColumnTitle isApp={isApp}>
                        {column.title}
                        {phoneLink && <> {phoneLink}</>}
                      </ColumnTitle>
                      {column.description && (
                        <ColumnDescription isApp={isApp}>
                          {column.description}
                        </ColumnDescription>
                      )}
                    </ColumnItem>
                  );
                })}
              </ColumnsGrid>
            )}
          </ExpandableSection>
        )}
      {showEnquiryForm && (
        <TravelEnquiryForm
          isApp={isApp}
          onClose={() => setShowEnquiryForm(false)}
        />
      )}
    </Container>
  );
};