import { useHead, useSeoMeta, useRoute } from '#imports'

interface SeoOptions {
  title?: string
  description?: string
  ogImage?: string
  canonicalUrl?: string
  articleDate?: string
  structuredData?: Record<string, unknown>
}

export function useSeo(options: SeoOptions = {}) {
  const { locale } = useI18n()
  const route = useRoute()
  const baseURL = 'https://aranroig.com'

  // Map locale codes to BCP 47 tags
  const localeToIso: Record<string, string> = {
    en: 'en-US',
    es: 'es-ES',
    ca: 'ca-ES'
  }

  const canonicalPath = computed(() => {
    if (!options.canonicalUrl) return ''
    return options.canonicalUrl.startsWith('http') ? options.canonicalUrl : `${baseURL}${options.canonicalUrl}`
  })

  // Hreflang alternate links for all locales
  const hreflangs = computed(() => {
    const currentPath = typeof route.path === 'string' ? route.path : ''
    const base = currentPath.replace(/^(\/en|\/es|\/ca)?\//, '/')

    return [
      { rel: 'alternate', hreflang: 'en', href: `${baseURL}/en${base}` },
      { rel: 'alternate', hreflang: 'es', href: `${baseURL}/es${base}` },
      { rel: 'alternate', hreflang: 'ca', href: `${baseURL}/ca${base}` }
    ] as Array<{rel: string; hreflang: string; href: string}>
  })

  const seoTitle = computed(() => {
    if (options.title) return `${options.title} | Aran Roig`
    return 'Aran Roig — Developer, Artist & Designer'
  })

  const seoDescription = options.description || 'Personal website of Aran Roig — developer, artist, and designer. Explore projects, blog posts, art gallery, and more.'

  useSeoMeta({
    title: seoTitle.value,
    description: seoDescription,
    ogTitle: seoTitle.value,
    ogDescription: seoDescription,
    ogImage: options.ogImage || `${baseURL}/og-image.png`,
    ogUrl: canonicalPath.value,
    ogType: 'website',
    twitterCard: 'summary_large_image',
    twitterTitle: seoTitle.value,
    twitterDescription: seoDescription,
    twitterImage: options.ogImage || `${baseURL}/og-image.png`,
    canonical: canonicalPath.value
  })

  useHead({
    htmlAttrs: { lang: computed(() => localeToIso[locale.value] || 'en-US') },
    link: [
      ...hreflangs.value,
      ...(canonicalPath.value ? [{ rel: 'canonical', href: canonicalPath.value }] : [])
    ],
    script: options.structuredData ? [
      {
        type: 'application/ld+json',
        innerHTML: JSON.stringify(options.structuredData)
      }
    ] : []
  })
}