import OLButton from '@/shared/components/ol/ol-button'
import OLTooltip from '@/shared/components/ol/ol-tooltip'
import MaterialIcon from '@/shared/components/material-icon'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { postJSON } from '@/infrastructure/fetch-json'
import getMeta from '@/utils/meta'
import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'

// One-click shortcut: publish the compiled presentation as a private
// (logged-in-users-only) standalone page and open it in a new tab. For finer
// control (public links, unpublish) use the Share dialog.
//
// Only meaningful for HTML/RevealJS decks — a PDF compile has nothing to
// "present", so the button hides itself when the current output isn't HTML.
export default function PresentationPreviewButton() {
  const { t } = useTranslation()
  const [loading, setLoading] = useState(false)
  const projectId = getMeta('ol-project_id')
  const { pdfFile } = useCompileContext()
  const isHtmlPresentation = pdfFile?.path === 'output.html'

  const handleClick = useCallback(() => {
    setLoading(true)
    // Open the tab synchronously inside the click handler to avoid popup
    // blockers, then redirect it once we have the published URL.
    const win = window.open('', '_blank')
    postJSON(`/project/${projectId}/publish-presentation`)
      .then((data: { loginUrl?: string }) => {
        const url = data?.loginUrl
        if (url && win) {
          win.location.href = url
        } else if (url) {
          window.open(url, '_blank')
        } else if (win) {
          win.close()
        }
      })
      .catch(() => {
        if (win) win.close()
      })
      .finally(() => setLoading(false))
  }, [projectId])

  if (!isHtmlPresentation) {
    return null
  }

  return (
    <div className="ide-redesign-toolbar-button-container">
      <OLTooltip
        id="presentation-present-button"
        description={t('present_publishes_and_opens_in_new_tab')}
        overlayProps={{ placement: 'bottom' }}
      >
        <OLButton
          size="sm"
          variant="secondary"
          leadingIcon={<MaterialIcon type="slideshow" />}
          onClick={handleClick}
          disabled={loading}
        >
          {t('present')}
        </OLButton>
      </OLTooltip>
    </div>
  )
}