import OLButton from '@/shared/components/ol/ol-button'
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'

// 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.
export default function PresentationPreviewButton() {
  const { t } = useTranslation()
  const [loading, setLoading] = useState(false)
  const projectId = getMeta('ol-project_id')

  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`, {
      body: { visibility: 'private' },
    })
      .then((data: { url?: string }) => {
        if (data?.url && win) {
          win.location.href = data.url
        } else if (data?.url) {
          window.open(data.url, '_blank')
        } else if (win) {
          win.close()
        }
      })
      .catch(() => {
        if (win) win.close()
      })
      .finally(() => setLoading(false))
  }, [projectId])

  return (
    <div className="ide-redesign-toolbar-button-container">
      <OLButton
        size="sm"
        variant="secondary"
        leadingIcon={<MaterialIcon type="slideshow" />}
        onClick={handleClick}
        disabled={loading}
      >
        {t('preview')}
      </OLButton>
    </div>
  )
}