---
import { Accordion, AccordionItem } from 'free-astro-components'
import InfoIcon from '~/icons/InfoIcon.astro'

import { releaseNotes as releaseNotesData } from '~/release-notes'
import { getLocale, getPath, getUI } from '~/utils/i18n'
import { type BreakingChange, type ReleaseNote, getReleaseNoteFirefoxVersion } from '../release-notes'
export type Props = ReleaseNote
const { isTwilight, ...props } = Astro.props

const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const {
  routes: {
    releaseNotes: {
      components: { releaseNoteItem },
    },
  },
} = getUI(locale)

let date: Date | undefined
if (props.date) {
  const [day, month, year] = props.date.split('/')
  date = new Date(Date.parse(`${year}-${month}-${day}`))
}

const ffVersion = getReleaseNoteFirefoxVersion(props)
const currentReleaseIndex = releaseNotesData.findIndex((releaseNote: ReleaseNote) => releaseNote.version === props.version)
const prevReleaseNote = releaseNotesData[currentReleaseIndex + 1]
let compareLink = ''
if (prevReleaseNote && !isTwilight) {
  compareLink = `https://github.com/zen-browser/desktop/compare/${prevReleaseNote.version}...${props.version}`
}
---

<section
  class="release-note-item relative mt-24 flex flex-col border-t pt-24 lg:flex-row"
  id={props.version}
>
  <div class="px-5 md:px-10 md:pr-32">
    {
      isTwilight ? (
        <a
          class="!mb-2 block w-fit rounded-full bg-coral px-3 py-1 text-xs text-paper"
          href={getLocalePath('/download?twilight')}
        >
          {releaseNoteItem.twilight}
        </a>
      ) : null
    }
    <h1 class="flex items-center text-3xl font-bold">
      {
        isTwilight ? (
          <>
            {releaseNoteItem.twilightChanges} {props.version} 🌙
          </>
        ) : (
          <>
            {releaseNoteItem.releaseChanges.replaceAll(
              '{version}',
              props.version,
            )}
          </>
        )
      }
      {
        ffVersion ? (
          <div class="!mb-2 ml-6 mt-1 block inline w-fit rounded-full bg-blue-500 px-3 py-1 text-xs text-paper dark:bg-blue-50">
            {releaseNoteItem.firefoxVersion.replace('{version}', ffVersion)}
          </div>
        ) : null
      }
    </h1>
    {date && date.toLocaleDateString('en-US', { dateStyle: 'long' })}
    <div class="mt-2">
      <a
        rel="noopener noreferrer"
        class="zen-link whitespace-nowrap text-sm opacity-60"
        target="_blank"
        href={`https://github.com/zen-browser/desktop/releases/tag/${isTwilight ? 'twilight' : props.version}`}
        >{releaseNoteItem.githubRelease}</a
      >
      {
        !isTwilight ? (
          <>
            <span class="text-muted-foreground mx-auto">•</span>
            <a
              rel="noopener noreferrer"
              class="zen-link whitespace-nowrap text-sm opacity-60"
              target="_blank"
              href={`https://github.com/zen-browser/desktop/actions/runs/${props.workflowId}`}
            >
              {releaseNoteItem.workflowRun}
            </a>
          </>
        ) : null
      }
      {
        compareLink !== '' ? (
          <>
            <span class="text-muted-foreground mx-auto">•</span>
            <a
              rel="noopener noreferrer"
              class="zen-link whitespace-nowrap text-sm opacity-60"
              target="_blank"
              href={compareLink}
            >
              {releaseNoteItem.compareChanges}
            </a>
          </>
        ) : null
      }
    </div>
    <div class="text-muted-forground mt-6 flex text-sm opacity-70">
      {isTwilight ? <InfoIcon class="mx-4 my-0 size-6 text-yellow-500" /> : null}
      <p class="m-0">
        {isTwilight ? <>{releaseNoteItem.twilightWarning}</> : null}
        <span set:html={releaseNoteItem.reportIssues} />
      </p>
    </div>

    {
      props.extra ? (
        <p class="text-md text-muted-foreground extra mt-2">
          <Fragment set:html={props.extra.replace(/\n/g, '<br />')} />
        </p>
      ) : null
    }
    <div class="mt-8" data-orientation="vertical"></div>
    <Accordion>
      {
        props.fixes?.length ? (
          <AccordionItem title="Fixes">
            <ul class="list-inside list-disc">
              {props.fixes.map((fix: any) => (
                <li class="text-md text-muted-foreground">
                  {typeof fix === 'string' ? (
                    fix
                  ) : (
                    <>
                      {fix.description}
                      {fix.issue ? (
                        <>
                          {' '}
                          <a
                            class="zen-link"
                            href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
                            rel="noopener noreferrer"
                            target="_blank"
                            aria-label={releaseNoteItem.viewIssue.replace(
                              '{issue}',
                              fix.issue,
                            )}
                          >
                            #{fix.issue}
                          </a>
                        </>
                      ) : null}
                    </>
                  )}
                </li>
              ))}
            </ul>
          </AccordionItem>
        ) : null
      }
      {
        props.features?.length ? (
          <AccordionItem title={releaseNoteItem.sections.features}>
            <ul class="list-inside list-disc">
              {props.features.map((feature: string) => (
                <li class="text-md text-muted-foreground">{feature}</li>
              ))}
            </ul>
          </AccordionItem>
        ) : null
      }
      {
        props.themeChanges?.length ? (
          <AccordionItem title={releaseNoteItem.sections.themeChanges}>
            <ul class="list-inside list-disc">
              {props.themeChanges.map((themeChange: string) => (
                <li class="text-md text-muted-foreground">{themeChange}</li>
              ))}
            </ul>
          </AccordionItem>
        ) : null
      }
      {
        props.breakingChanges?.length ? (
          <AccordionItem title={releaseNoteItem.sections.breakingChanges.title}>
            <ul class="list-inside list-disc">
              {props.breakingChanges.map((breakingChange: BreakingChange) => (
                <li class="text-md text-muted-foreground">
                  {typeof breakingChange === 'string' ? (
                    <Fragment set:html={breakingChange} />
                  ) : (
                    <>
                      {breakingChange.description}
                      <a
                        class="zen-link"
                        href={breakingChange.link}
                        rel="noopener noreferrer"
                        target="_blank"
                        aria-label={
                          releaseNoteItem.sections.breakingChanges.description
                        }
                      >
                        {releaseNoteItem.learnMore}
                      </a>
                    </>
                  )}
                </li>
              ))}
            </ul>
          </AccordionItem>
        ) : null
      }
    </Accordion>
  </div>
  <style is:global>
    .ac-accordion-item-title {
      @apply !text-dark;
      flex-direction: row-reverse !important;

      &:hover {
        opacity: 0.8 !important;
      }

      & > svg {
        color: var(--zen-dark) !important;
      }
    }

    .ac-accordion-item {
      transition: height 0.2s ease-in-out !important;

      & li {
        opacity: 0.5;
      }
    }
    .ac-accordion {
      &.ac-accordion--light {
        > * + * {
          border-color: light-dark(
            rgba(0, 0, 0, 0.1),
            rgba(255, 255, 255, 0.1)
          ) !important;
          width: 100%;
        }
      }
    }

    .extra {
      & a {
        @apply !text-coral underline underline-offset-4;
      }
    }

    .release-note-item {
      border-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    }
  </style>
</section>
