import { useQuery } from '@tanstack/react-query'
import { Helmet } from 'react-helmet-async'
import { useLocation, useParams } from 'react-router-dom'

import PrefetchLink from '@/components/PrefetchLink'
import MainArea from '@/components/layout/MainArea'
import { SITE_TITLE } from '@/config'
import { getHelpArticle,
	 getHelpEditionContent,
	 helpEditionDate,
	 parseHelpEdition } from '@/lib/help'
import { dateString } from '@/lib/utils'
import { helpKeys } from '@/lib/queryKeys'
import NotFound from '@/pages/NotFound'

import type { FC } from 'react'


const HelpDetailPage: FC = () => {
  const { identifier = '' } = useParams ()
  const location = useLocation ()

  // Locale 対応が入るまでは ja 固定
  const language = 'ja'

  const { data: article, isLoading: articleLoading } = useQuery ({
      queryKey: helpKeys.article (identifier),
      queryFn: () => getHelpArticle (identifier),
      staleTime: Infinity })

  const query = new URLSearchParams (location.search)
  const requestedEdition = query.get ('edition')

  const languageMeta = article?.languages[language]

  const edition = requestedEdition ?? languageMeta?.currentEdition
  const editionInfo = parseHelpEdition (edition ?? '')
  const editionDate = helpEditionDate (edition ?? '')

  const editions = languageMeta?.publishedEditions ?? []

  const index = edition ? editions.indexOf (edition) : -1
  const pred = index > 0 ? editions[index - 1] : undefined
  const succ =
      index >= 0 && index < editions.length - 1
      ? editions[index + 1]
      : undefined

  const { data: current, isSuccess, isError } = useQuery ({
      enabled: edition != null && editionInfo != null && editions.includes (edition),
      queryKey: helpKeys.edition (identifier, language, edition ?? ''),
      queryFn: () => getHelpEditionContent (identifier, language, edition ?? ''),
      staleTime: Infinity })

  if (!articleLoading
      && (article == null
	  || languageMeta == null
	  || edition == null
	  || editionInfo == null
	  || !(editions.includes (edition))))
    return <NotFound/>

  if (isError || (isSuccess && current == null))
    return <NotFound/>

  const Content = current?.content

  return (
      <MainArea>
	<Helmet>
	  <title>{current?.title || identifier} ヘルプ | {SITE_TITLE}</title>
	</Helmet>

	{requestedEdition && (
	    <div className="text-sm flex gap-3 items-center justify-center
			    border border-gray-700 rounded px-2 py-1 mb-4">
	      {pred
	       ? (
		  <PrefetchLink
		      to={`/help/${ encodeURIComponent (identifier) }?edition=${ pred }`}>
		    &lt; 古
		  </PrefetchLink>)
	       : '(最古)'}

	      <span>
		{editionDate != null && dateString (editionDate, 'hour')}
		{editionInfo?.revision != null && ` .${ editionInfo.revision }`}
	      </span>

	      {succ
	       ? (
		  <PrefetchLink
		      to={`/help/${ encodeURIComponent (identifier) }?edition=${ succ }`}>
		    新 &gt;
		  </PrefetchLink>)
	       : '(最新)'}
	    </div>)}

	<article className="prose dark:prose-invert mx-auto p-4">
	  {Content ? <Content/> : <div>Loading...</div>}
	</article>
      </MainArea>)
}


export default HelpDetailPage