import React from 'react'
import { Head } from '@inertiajs/react'

function normalizeJsonLd(input) {
  if (!input) return []
  return (Array.isArray(input) ? input : [input]).filter((schema) => schema && typeof schema === 'object')
}

export default function SeoHead({ seo = {}, title = null, description = null, jsonLd = null }) {
  const metaTitle = seo?.title || title || 'Skinbase'
  const metaDescription = seo?.description || description || ''
  const canonical = seo?.canonical || null
  const robots = seo?.robots || null
  const prev = seo?.prev || null
  const next = seo?.next || null
  const ogTitle = seo?.og_title || metaTitle
  const ogDescription = seo?.og_description || metaDescription
  const ogUrl = seo?.og_url || canonical
  const ogType = seo?.og_type || 'website'
  const ogImage = seo?.og_image || null
  const keywords = seo?.keywords || null
  const twitterCard = seo?.twitter_card || (ogImage ? 'summary_large_image' : 'summary')
  const twitterTitle = seo?.twitter_title || ogTitle
  const twitterDescription = seo?.twitter_description || ogDescription
  const twitterImage = seo?.twitter_image || ogImage || null
  const schemas = [...normalizeJsonLd(seo?.json_ld), ...normalizeJsonLd(jsonLd)]

  return (
    <Head>
      <title>{metaTitle}</title>
      {metaDescription ? <meta head-key="description" name="description" content={metaDescription} /> : null}
      {keywords ? <meta head-key="keywords" name="keywords" content={keywords} /> : null}
      {robots ? <meta head-key="robots" name="robots" content={robots} /> : null}
      {canonical ? <link head-key="canonical" rel="canonical" href={canonical} /> : null}
      {prev ? <link head-key="prev" rel="prev" href={prev} /> : null}
      {next ? <link head-key="next" rel="next" href={next} /> : null}

      <meta head-key="og:site_name" property="og:site_name" content={seo?.og_site_name || 'Skinbase'} />
      <meta head-key="og:type" property="og:type" content={ogType} />
      <meta head-key="og:title" property="og:title" content={ogTitle} />
      {ogDescription ? <meta head-key="og:description" property="og:description" content={ogDescription} /> : null}
      {ogUrl ? <meta head-key="og:url" property="og:url" content={ogUrl} /> : null}
      {ogImage ? <meta head-key="og:image" property="og:image" content={ogImage} /> : null}
      {seo?.og_image_alt ? <meta head-key="og:image:alt" property="og:image:alt" content={seo.og_image_alt} /> : null}
      {seo?.og_image_width ? <meta head-key="og:image:width" property="og:image:width" content={String(seo.og_image_width)} /> : null}
      {seo?.og_image_height ? <meta head-key="og:image:height" property="og:image:height" content={String(seo.og_image_height)} /> : null}

      <meta head-key="twitter:card" name="twitter:card" content={twitterCard} />
      <meta head-key="twitter:title" name="twitter:title" content={twitterTitle} />
      {twitterDescription ? <meta head-key="twitter:description" name="twitter:description" content={twitterDescription} /> : null}
      {twitterImage ? <meta head-key="twitter:image" name="twitter:image" content={twitterImage} /> : null}

      {schemas.map((schema, index) => {
        const schemaType = typeof schema?.['@type'] === 'string' ? schema['@type'] : 'schema'

        return (
          <script
            key={`jsonld-${schemaType}-${index}`}
            head-key={`jsonld-${schemaType}-${index}`}
            type="application/ld+json"
            dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
          />
        )
      })}
    </Head>
  )
}