SEO Meta Preview

"use client"

import * as React from "react"
import {
  Mapbase,
  MapbaseError,
  type CountryCode,
  type SeoMetaResponse,
} from "mapbase"

import { cn } from "@/lib/utils"

export type SeoMetaPreviewProps = {
  apiKey: string
  baseUrl?: string
  lng: number
  lat: number
  country?: CountryCode
  siteBaseUrl?: string
  siteName?: string
  debounceMs?: number
  disabled?: boolean
  className?: string
}

/**
 * Renders suggested title, description, and canonical URL from
 * `GET /v1/seo/meta` in a Google-style snippet preview.
 */
export function SeoMetaPreview({
  apiKey,
  baseUrl,
  lng,
  lat,
  country,
  siteBaseUrl,
  siteName,
  debounceMs = 300,
  disabled,
  className,
}: SeoMetaPreviewProps) {
  const [data, setData] = React.useState<SeoMetaResponse | null>(null)
  const [loading, setLoading] = React.useState(false)
  const [error, setError] = React.useState<MapbaseError | null>(null)

  const client = React.useMemo(
    () => new Mapbase(apiKey, baseUrl ? { baseUrl } : undefined),
    [apiKey, baseUrl],
  )

  const countryKey = country ?? ""

  React.useEffect(() => {
    if (disabled) return
    if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
      setData(null)
      setError(null)
      setLoading(false)
      return
    }

    const controller = new AbortController()
    const timer = window.setTimeout(async () => {
      setLoading(true)
      setError(null)

      const response = await client.seo.meta(
        {
          lng,
          lat,
          ...(country ? { country } : {}),
          ...(siteBaseUrl ? { base_url: siteBaseUrl } : {}),
          ...(siteName ? { site_name: siteName } : {}),
        },
        { signal: controller.signal },
      )

      if (controller.signal.aborted) return

      if (response.error) {
        setError(response.error)
        setData(null)
      } else {
        setData(response.data)
      }
      setLoading(false)
    }, debounceMs)

    return () => {
      controller.abort()
      window.clearTimeout(timer)
    }
  }, [
    client,
    lng,
    lat,
    countryKey,
    siteBaseUrl,
    siteName,
    debounceMs,
    disabled,
  ])

  if (loading) {
    return (
      <p className={cn("text-xs text-muted-foreground", className)}>
        Loading meta…
      </p>
    )
  }

  if (error) {
    return (
      <p className={cn("text-xs text-destructive", className)} role="alert">
        {error.message}
      </p>
    )
  }

  if (!data) {
    return (
      <p className={cn("text-xs text-muted-foreground", className)}>
        No meta suggestions for this point.
      </p>
    )
  }

  const displayUrl = data.canonical_url ?? data.canonical_path

  return (
    <div className={cn("flex flex-col gap-3", className)}>
      <div className="rounded-md border bg-background p-4">
        <p className="truncate text-sm text-[#1a0dab]">{data.title}</p>
        <p className="truncate text-xs text-[#006621]">{displayUrl}</p>
        <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
          {data.description}
        </p>
      </div>
      <dl className="grid gap-2 text-xs">
        <div>
          <dt className="font-medium text-muted-foreground">og:title</dt>
          <dd className="font-mono">{data.og_title}</dd>
        </div>
        <div>
          <dt className="font-medium text-muted-foreground">slug_path</dt>
          <dd className="font-mono">{data.slug_path}</dd>
        </div>
      </dl>
    </div>
  )
}