<script lang="ts">
  import { t } from '$lib/translations';
  import { popupForm } from '../../../store';
  import { getLocaleUrl } from '$lib/translations';
  import moment from 'moment';
  import type { IWebinar } from '$type/webinars';
  import flagIcon from '$assets/images/main/webinars/flag.svg';

  export let webinars: { upcoming: IWebinar[]; past: IWebinar[] } = { upcoming: [], past: [] };

  const upcomingCount = webinars.upcoming.length;
  const pastCount = webinars.past.length;
  const formatDate = (dateString: string) => {
    if (!dateString) return '';
    return moment(dateString).format('MMMM D, HH:mm [GMT+3]');
  };

  $: containerClass = `block-webinars__container ${
    webinars.upcoming.length === 0 && webinars.past.length > 0 ? 'block-webinars__container--past-only' : ''
  }`;
</script>

<div class="block-webinars">
  <div class={containerClass}>
    {#if webinars.upcoming.length > 0}
      <div class="block-webinars__upcoming">
        <div class="block-webinars__header-item">
          <h3 class="block-webinars__title">{$t('Upcoming webinars')}</h3>
          <span class="block-webinars__separator">·</span>
          <div class="block-webinars__count">{upcomingCount}</div>
          <a href={getLocaleUrl('/webinars')} class="block-webinars__arrow">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M9 18L15 12L9 6"
                stroke="#FF282B"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </a>
        </div>
        <div class="block-webinars__list">
          {#each webinars.upcoming.slice(0, 1) as webinar (webinar.title + webinar.date)}
            <div class="block-webinars__card">
              <div class="block-webinars__card-header">
                <div class="block-webinars__card-date">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_916_8131)">
                      <path
                        d="M7.99992 3.99968V7.99968L10.6666 9.33301M14.6666 7.99968C14.6666 11.6816 11.6818 14.6663 7.99992 14.6663C4.31802 14.6663 1.33325 11.6816 1.33325 7.99968C1.33325 4.31778 4.31802 1.33301 7.99992 1.33301C11.6818 1.33301 14.6666 4.31778 14.6666 7.99968Z"
                        stroke="#7D8387"
                        stroke-width="1.33333"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_916_8131">
                        <rect width="16" height="16" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>
                  <span>{formatDate(webinar.date)}</span>
                </div>
                <div class="block-webinars__card-tag block-webinars__card-tag--upcoming">
                  {$t('Upcoming')}
                </div>
              </div>
              <h4 class="block-webinars__card-title">{webinar.title}</h4>
              <div class="block-webinars__card-takeaways">
                {@html webinar.agenda}
              </div>
              <div class="block-webinars__card-speaker">
                {#if webinar.presenters && webinar.presenters.length > 0}
                  {@const presenter = webinar.presenters[0]}
                  <img src={presenter.avatar} alt={presenter.name} class="block-webinars__card-speaker-avatar" />
                  <div class="block-webinars__card-speaker-info">
                    <div class="block-webinars__card-speaker-name">{presenter.name}</div>
                    <div class="block-webinars__card-speaker-position">{presenter.position}</div>
                  </div>
                {/if}
              </div>
              <div
                on:click={() => popupForm.set(true)}
                class="block-webinars__card-button block-webinars__card-button--register"
              >
                {$t('Register')}
              </div>
            </div>
          {/each}
        </div>
      </div>
    {/if}

    {#if webinars.upcoming.length > 0 && webinars.past.length > 0}
      <div class="block-webinars__divider">
        <div class="block-webinars__divider-line" />
        <div class="block-webinars__divider-flag">
          <img src={flagIcon} alt="" />
        </div>
      </div>
    {/if}

    {#if webinars.past.length > 0}
      <div class="block-webinars__past">
        <div class="block-webinars__header-item">
          <h3 class="block-webinars__title">{$t('Past')}</h3>
          <span class="block-webinars__separator">·</span>
          <div class="block-webinars__count">{pastCount}</div>
          <a href={getLocaleUrl('/webinars')} class="block-webinars__arrow">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M9 18L15 12L9 6"
                stroke="#FF282B"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </a>
        </div>
        <div class="block-webinars__list block-webinars__list--past">
          {#each webinars.past.slice(0, 3) as webinar (webinar.title + webinar.date)}
            <div class="block-webinars__card">
              <div class="block-webinars__card-header">
                <div class="block-webinars__card-tag block-webinars__card-tag--past">
                  {$t('Past')}
                </div>
              </div>
              <h4 class="block-webinars__card-title">{webinar.title}</h4>
              <div class="block-webinars__card-takeaways">
                {@html webinar.agenda}
              </div>
              <div class="block-webinars__card-speaker">
                {#if webinar.presenters && webinar.presenters.length > 0}
                  {@const presenter = webinar.presenters[0]}
                  <img src={presenter.avatar} alt={presenter.name} class="block-webinars__card-speaker-avatar" />
                  <div class="block-webinars__card-speaker-info">
                    <div class="block-webinars__card-speaker-name">{presenter.name}</div>
                    <div class="block-webinars__card-speaker-position">{presenter.position}</div>
                  </div>
                {/if}
              </div>
              {#if webinar.youTubeLink && webinar.youTubeLink !== ''}
                <a
                  href={webinar.youTubeLink}
                  target="_blank"
                  class="block-webinars__card-button block-webinars__card-button--watch"
                >
                  {$t('Watch recording')}
                </a>
              {/if}
            </div>
          {/each}
        </div>
      </div>
    {/if}
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .block-webinars {
    background: #f2f5f7;
    padding-top: 112px;
    @media (max-width: 1023px) {
      padding: 88px 0;
    }

    @media (max-width: 479px) {
      padding: 88px 0 0 0;
    }

    &__container {
      display: grid;
      max-width: 1440px;
      grid-template-columns: 408px auto 1fr;
      gap: 40px;
      margin: 0 auto;
      padding: 0 56px;

      @media (max-width: 1366px) {
        display: flex;
        overflow-x: auto;
        padding: 0 40px;
        -webkit-overflow-scrolling: touch;

        &::-webkit-scrollbar {
          display: none;
        }

        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      @media (max-width: 1024px) {
        padding: 0 32px;
      }

      @media (max-width: 719px) {
        padding: 0 24px;
        gap: 24px;
      }

      @media (max-width: 479px) {
        padding: 0 20px;
      }

      &--past-only {
        grid-template-columns: 1fr;

        .block-webinars__past {
          .block-webinars__list--past {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
          }
        }
      }
    }

    &__header-item {
      display: flex;
      align-items: center;
      gap: 9px;

      @media (max-width: 479px) {
        gap: 8px;
      }
    }

    &__title {
      font-size: 32px;
      line-height: 40px;
      font-weight: 400;
      color: $fontPrimary;
      margin: 0;

      @media (max-width: 1365px) {
        font-size: 28px;
        line-height: 36px;
      }

      @media (max-width: 719px) {
        font-size: 24px;
        line-height: 28px;
      }

      @media (max-width: 479px) {
        font-size: 20px;
        line-height: 26px;
      }
    }

    &__separator {
      font-size: 24px;
      line-height: 32px;
      color: $fontPrimary;

      @media (max-width: 1365px) {
        font-size: 28px;
        line-height: 36px;
      }

      @media (max-width: 719px) {
        font-size: 24px;
        line-height: 28px;
      }

      @media (max-width: 479px) {
        font-size: 20px;
        line-height: 26px;
      }
    }

    &__count {
      font-size: 32px;
      line-height: 40px;
      font-weight: 400;
      color: #7d8387;

      @media (max-width: 1365px) {
        font-size: 28px;
        line-height: 36px;
      }

      @media (max-width: 719px) {
        font-size: 24px;
        line-height: 28px;
      }

      @media (max-width: 479px) {
        font-size: 20px;
        line-height: 26px;
      }
    }

    &__arrow {
      display: flex;
      align-items: center;
      transition: transform 0.2s ease;

      &:hover {
        transform: translateX(4px);
      }
    }

    &__upcoming {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 24px;

      @media (max-width: 1365px) {
        width: 394px;
      }

      @media (max-width: 1023px) {
        width: 364px;
      }

      @media (max-width: 719px) {
        width: 300px;
      }
    }

    &__past {
      overflow-x: auto;
      overflow-y: visible;
      min-width: 0;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: flex-start;

      @media (max-width: 1365px) {
        overflow-x: visible;
        width: auto;
      }

      &::-webkit-scrollbar {
        display: none;
      }

      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &__list {
      display: flex;
      flex-direction: column;
      gap: 24px;

      &--past {
        flex-direction: row;
        gap: 24px;
        width: fit-content;
        min-width: 100%;
      }
    }

    &__divider {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      width: 1px;
      flex-shrink: 0;
      align-self: stretch;
      margin-top: 64px;

      @media (max-width: 1365px) {
        align-self: stretch;
      }

      @media (max-width: 719px) {
        display: none;
      }

      &-line {
        position: absolute;
        top: 0;
        width: 1px;
        background: repeating-linear-gradient(to bottom, #d4d8db 0px, #d4d8db 4px, transparent 4px, transparent 8px);

        @media (min-width: 1366px) {
          bottom: 0;
          height: 100%;
        }

        @media (max-width: 1365px) {
          height: 100%;
        }
      }

      &-flag {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        width: 32px;
        height: 32px;
        background: #eaecef;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        @media (max-width: 1023px) {
          top: 16px;
        }

        img {
          width: 16px;
          height: 16px;
        }
      }
    }

    &__card {
      background: white;
      border-radius: 32px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: 408px;
      height: 480px;
      flex-shrink: 0;
      @media (max-width: 1366px) {
        max-width: 394px;
      }

      @media (max-width: 1023px) {
        max-width: 364px;
        height: 500px;
      }

      @media (max-width: 719px) {
        max-width: 300px;
        padding: 20px;
        height: 468px;
      }
    }

    &__card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      gap: 16px;

      @media (max-width: 719px) {
        margin-bottom: 0;
      }
    }

    &__card-date {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #1b1c1d;

      @media (max-width: 719px) {
        margin-top: 5px;
        margin-bottom: 8px;
      }

      svg {
        width: 16px;
        height: 16px;
        color: #525659;
      }
    }

    &__card-tag {
      padding: 6px 12px;
      border-radius: 10px;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      white-space: nowrap;

      &--upcoming {
        background: #f2f5f7;
        color: $fontPrimary;

        @media (max-width: 719px) {
          display: none;
        }
      }

      &--past {
        background: #f2f5f7;
        color: $fontPrimary;
      }
    }

    &__card-title {
      font-size: 20px;
      line-height: 26px;
      color: $fontPrimary;
      font-weight: 400;

      @media (max-width: 1024px) {
        font-size: 18px;
      }

      @media (max-width: 479px) {
        line-height: 24px;
      }
    }

    &__card-takeaways {
      color: $fontPrimary;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      @media (max-width: 1439px) {
        margin-bottom: 2px;
      }
      @media (max-width: 719px) {
        margin-bottom: 0;
      }

      :global(p) {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 24px;

        @media (max-width: 1439px) {
          margin-bottom: 27px;
        }

        @media (max-width: 719px) {
          margin-bottom: 25px;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }

      :global(ul) {
        overflow-y: auto;
        font-size: 12px;
        line-height: 16px;
        height: 75px;
        margin-bottom: 24px;

        &::-webkit-scrollbar {
          width: 4px;
        }

        &::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background: #d4d8db;
          border-radius: 2px;
        }
      }

      :global(li) {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 9px;

        @media (max-width: 1439px) {
          margin-bottom: 8px;
        }

        &:before {
          background: url('../../../assets/icons/check.svg');
          width: 16px;
          height: 16px;
          content: '';
          color: #00a651;
          font-weight: 700;
          flex-shrink: 0;
        }
      }
    }

    &__card-speaker {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
    }

    &__card-speaker-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }

    &__card-speaker-info {
      flex: 1;
    }

    &__card-speaker-name {
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
      color: #1b1c1d;
      margin-bottom: 2px;
    }

    &__card-speaker-position {
      font-size: 14px;
      line-height: 20px;
      color: #7d8387;
    }

    &__card-button {
      padding: 8px 12px;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      text-decoration: none;
      transition: all 0.2s ease;
      align-self: flex-start;
      margin-top: 16px;

      @media (max-width: 719px) {
        margin-top: 17px;
      }

      &--register {
        padding: 8px 17px;
        background: $redPrimary;
        color: $techWhite;
        border-radius: 1000px;
        cursor: pointer;

        @media (max-width: 719px) {
          width: 100%;
        }

        &:hover {
          background: #e60019;
        }
      }

      &--watch {
        display: flex;
        align-items: center;
        gap: 4px;
        background: transparent;
        color: $fontPrimary;
        border: 1px solid #d4d8db;
        border-radius: 48px;

        &:hover {
          border-color: #c4c8cb;
        }

        &::after {
          content: '';
          display: none;
          width: 10px;
          height: 10px;
          background: url('../../../assets/icons/arrow-right.svg') center/contain no-repeat;
        }

        @media (max-width: 1366px) {
          &::after {
            display: block;
          }
        }
      }
    }
  }
</style>