import { Helmet } from 'react-helmet-async'

interface PageMetaProps {
  title?: string
  description?: string
  ogImage?: string
  ogType?: string
  /** Canonical/Open Graph URL. Defaults to `window.location.href` in the browser. */
  url?: string
}

const SITE_NAME = 'ResolutionFlow'
const DEFAULT_TAGLINE = 'AI-Powered Troubleshooting for MSPs'
const DEFAULT_DESCRIPTION = 'Transform troubleshooting into guided workflows with automatic documentation'

/**
 * Sets page-level <title> and Open Graph meta tags.
 * Wrap the app in <HelmetProvider> (see main.tsx).
 */
export function PageMeta({
  title,
  description = DEFAULT_DESCRIPTION,
  ogImage,
  ogType = 'website',
  url,
}: PageMetaProps) {
  const fullTitle = title ? `${title} | ${SITE_NAME}` : `${SITE_NAME} — ${DEFAULT_TAGLINE}`
  const resolvedUrl =
    url ?? (typeof window !== 'undefined' ? window.location.href : undefined)
  const twitterCard = ogImage ? 'summary_large_image' : 'summary'

  return (
    <Helmet>
      <title>{fullTitle}</title>
      <meta name="description" content={description} />

      {/* Open Graph */}
      <meta property="og:title" content={fullTitle} />
      <meta property="og:description" content={description} />
      <meta property="og:type" content={ogType} />
      <meta property="og:site_name" content={SITE_NAME} />
      {resolvedUrl && <meta property="og:url" content={resolvedUrl} />}
      {ogImage && <meta property="og:image" content={ogImage} />}

      {/* Twitter */}
      <meta name="twitter:card" content={twitterCard} />
      <meta name="twitter:title" content={fullTitle} />
      <meta name="twitter:description" content={description} />
      {ogImage && <meta name="twitter:image" content={ogImage} />}
    </Helmet>
  )
}