import { useHead } from '@vueuse/head'
import { computed, unref } from 'vue'
/**
 * useMeta composable:
 * - Dynamically sets page meta tags and title using @vueuse/head.
 * - Supports Open Graph, Twitter Card, and standard SEO metadata.
 * - Localizes `og:locale` automatically based on current locale.
 */

// Interface for supported meta tag fields
interface MetaData {
  title?: string
  description?: string
  keywords?: string[]
  image?: string
  type?: string
  author?: string
  canonical?: string
  robots?: string
  structuredData?: Record<string, any>
  ['og:locale']?: string
  ['og:site_name']?: string
  ['twitter:card']?: string
  ['twitter:creator']?: string
  ['twitter:title']?: string
  ['twitter:description']?: string
  ['twitter:image']?: string
}

export function useMeta(data: MetaData | any, locale: string | any) {
  const d = () => unref(data) as MetaData
  const loc = () => unref(locale) as string

  const withHost = (u?: string) => {
    if (!u) return undefined
    if (/^https?:\/\//i.test(u)) return u
    if (u.startsWith('//')) return 'https:' + u

    const base = 'https://www.mucomutfak.com'

    if (u.startsWith('/')) return base + u

    return `${base}/${u}`
  }

  const ogLocale = computed(() => {
    return d()['og:locale'] || (loc() === 'tr' ? 'tr_TR' : 'en_US')
  })

  const canonical = computed(() => {
    return withHost(d().canonical)
  })

  const structuredData = computed(() => {
    const schema = d().structuredData

    if (!schema) return undefined

    return JSON.stringify({
      ...schema,
      url: withHost(schema.url),
      image: withHost(schema.image),
    })
  })

  useHead({
    title: computed(() => d().title ?? '') as any,

    htmlAttrs: {
      lang: computed(() => loc() || 'en'),
    },

    meta: [
      { name: 'description', content: computed(() => d().description) },
      {
        name: 'keywords',
        content: computed(() =>
          d().keywords?.length ? d().keywords!.join(', ') : undefined,
        ),
      },
      { name: 'author', content: computed(() => d().author) },
      { name: 'robots', content: computed(() => d().robots) },

      { property: 'og:title', content: computed(() => d().title) },
      { property: 'og:description', content: computed(() => d().description) },
      { property: 'og:image', content: computed(() => withHost(d().image)) },
      { property: 'og:url', content: canonical },
      { property: 'og:type', content: computed(() => d().type) },
      { property: 'og:locale', content: ogLocale },
      { property: 'og:site_name', content: computed(() => d()['og:site_name']) },

      { name: 'twitter:card', content: computed(() => d()['twitter:card']) },
      { name: 'twitter:creator', content: computed(() => d()['twitter:creator']) },
      { name: 'twitter:title', content: computed(() => d()['twitter:title'] || d().title) },
      {
        name: 'twitter:description',
        content: computed(() => d()['twitter:description'] || d().description),
      },
      {
        name: 'twitter:image',
        content: computed(() => withHost(d()['twitter:image'] || d().image)),
      },
    ],

    link: [
      { rel: 'canonical', href: canonical },
    ],

    script: computed(() =>
      structuredData.value
        ? [
            {
              type: 'application/ld+json',
              children: structuredData.value,
            },
          ]
        : [],
    ) as any,
  })
}