---
import DownloadPopup from './DownloadPopup.astro';
import Icon from './Icon.astro';
import LoginComponent from './Login/LoginComponent';
import LoginPopup from './Login/LoginPopup.astro';
import RoadmapHint from './RoadmapHint.astro';
import RoadmapNote from './RoadmapNote.astro';
import SubscribePopup from './SubscribePopup.astro';
import TopicSearch from './TopicSearch/TopicSearch.astro';
import YouTubeAlert from './YouTubeAlert.astro';

export interface Props {
  title: string;
  description: string;
  note?: string;
  tnsBannerLink?: string;
  roadmapId: string;
  isUpcoming?: boolean;
  hasSearch?: boolean;
  hasTopics?: boolean;
}

const {
  title,
  description,
  roadmapId,
  tnsBannerLink,
  isUpcoming = false,
  hasSearch = false,
  note,
  hasTopics = false,
} = Astro.props;

const isRoadmapReady = !isUpcoming;
---

<LoginPopup />
<DownloadPopup />
<SubscribePopup />

<div class='border-b'>
  <div class='container relative py-5 sm:py-12'>
    <YouTubeAlert />

    <div class='mt-0 mb-3 sm:mb-4 sm:mt-4'>
      <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'>
        {title}
      </h1>
      <p class='text-sm text-gray-500 sm:text-lg'>{description}</p>
    </div>

    <div class='flex justify-between'>
      <div class='flex gap-1 sm:gap-2'>
        {
          !hasSearch && (
            <>
              <a
                href='/roadmaps'
                class='rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm'
                aria-label='Back to All Roadmaps'
              >
                &larr;<span class='hidden sm:inline'>&nbsp;All Roadmaps</span>
              </a>

              {isRoadmapReady && (
                <button
                  id='download-button'
                  data-popup='login-popup'
                  class='inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
                  aria-label='Download Roadmap'
                  ga-category='Subscription'
                  ga-action='Clicked Popup Opener'
                  ga-label='Download Roadmap Popup'
                >
                  <Icon icon='download' />
                  <span class='ml-2 hidden sm:inline'>Download</span>
                </button>
              )}

              {isRoadmapReady && (
                <a
                  id='download-link'
                  class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
                  aria-label='Download Roadmap'
                  ga-category='Subscription'
                  ga-action='Clicked Popup Opener'
                  ga-label='Download Roadmap Popup'
                  href='/pdfs'
                >
                  <Icon icon='download' />
                  <span class='ml-2 hidden sm:inline'>Download</span>
                </a>
              )}

              <button
                id='subscribe-button'
                data-popup='login-popup'
                class='inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
                aria-label='Subscribe for Updates'
                ga-category='Subscription'
                ga-action='Clicked Popup Opener'
                ga-label='Subscribe Roadmap Popup'
              >
                <Icon icon='email' />
                <span class='ml-2'>Subscribe</span>
              </button>
            </>
          )
        }

        {
          hasSearch && (
            <a
              href={`/${roadmapId}`}
              class='rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm'
              aria-label='Back to Visual Roadmap'
            >
              &larr;
              <span class='inline'>&nbsp;Visual Roadmap</span>
            </a>
          )
        }
      </div>

      {
        isRoadmapReady && (
          <a
            href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
            target='_blank'
            class='inline-flex items-center justify-center rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm'
            aria-label='Suggest Changes'
          >
            <Icon icon='comment' class='h-3 w-3' />
            <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
            <span class='ml-2 inline sm:hidden'>Suggest</span>
          </a>
        )
      }
    </div>

    <!-- Desktop: Roadmap Resources - Alert -->
    {
      hasTopics && (
        <RoadmapHint roadmapId={roadmapId} tnsBannerLink={tnsBannerLink} />
      )
    }

    {hasSearch && <TopicSearch />}
  </div>
</div>

{note && <RoadmapNote text={note} />}

<script>
  import Cookies from 'js-cookie';
  import { TOKEN_COOKIE_NAME } from '../lib/constants';

  const subscribeButton = document.getElementById('subscribe-button');
  const downloadButton = document.getElementById('download-button');
  const downloadLink = document.getElementById('download-link');
  const token = Cookies.get(TOKEN_COOKIE_NAME);

  if (token) {
    subscribeButton?.classList.add('hidden');
    downloadButton?.classList.add('hidden');
    downloadLink?.classList.remove('hidden');
  }
</script>