import { For, createSignal } from 'solid-js'
import { Section, SectionDescription } from '@tanstack/devtools-ui'
import { createStyles } from '../../styles/use-styles'
import { createHeadChanges } from '../../hooks/use-head-changes'

const SOCIALS = [
  {
    network: 'Facebook',
    tags: [
      { key: 'og:title', prop: 'title' },
      { key: 'og:description', prop: 'description' },
      { key: 'og:image', prop: 'image' },
      { key: 'og:url', prop: 'url' },
    ],
    color: '#4267B2',
  },
  {
    network: 'X/Twitter',
    tags: [
      { key: 'twitter:title', prop: 'title' },
      { key: 'twitter:description', prop: 'description' },
      { key: 'twitter:image', prop: 'image' },
      { key: 'twitter:url', prop: 'url' },
    ],
    color: '#1DA1F2',
  },
  {
    network: 'LinkedIn',
    tags: [
      { key: 'og:title', prop: 'title' },
      { key: 'og:description', prop: 'description' },
      { key: 'og:image', prop: 'image' },
      { key: 'og:url', prop: 'url' },
    ],
    color: '#0077B5',
  },
  {
    network: 'Discord',
    tags: [
      { key: 'og:title', prop: 'title' },
      { key: 'og:description', prop: 'description' },
      { key: 'og:image', prop: 'image' },
      { key: 'og:url', prop: 'url' },
    ],
    color: '#5865F2',
  },
  {
    network: 'Slack',
    tags: [
      { key: 'og:title', prop: 'title' },
      { key: 'og:description', prop: 'description' },
      { key: 'og:image', prop: 'image' },
      { key: 'og:url', prop: 'url' },
    ],
    color: '#4A154B',
  },
  {
    network: 'Mastodon',
    tags: [
      { key: 'og:title', prop: 'title' },
      { key: 'og:description', prop: 'description' },
      { key: 'og:image', prop: 'image' },
      { key: 'og:url', prop: 'url' },
    ],
    color: '#6364FF',
  },
  {
    network: 'Bluesky',
    tags: [
      { key: 'og:title', prop: 'title' },
      { key: 'og:description', prop: 'description' },
      { key: 'og:image', prop: 'image' },
      { key: 'og:url', prop: 'url' },
    ],
    color: '#1185FE',
  },
  // Add more networks as needed
]

type SocialMeta = {
  title?: string
  description?: string
  image?: string
  url?: string
}

type SocialReport = {
  network: string
  found: Partial<SocialMeta>
  missing: Array<string>
}

function SocialPreview(props: {
  meta: SocialMeta
  color: string
  network: string
}) {
  const styles = createStyles()

  return (
    <div
      class={styles().seoPreviewCard}
      style={{ 'border-color': props.color }}
    >
      <div class={styles().seoPreviewHeader} style={{ color: props.color }}>
        {props.network} Preview
      </div>
      {props.meta.image ? (
        <img
          src={props.meta.image}
          alt="Preview"
          class={styles().seoPreviewImage}
        />
      ) : (
        <div
          class={styles().seoPreviewImage}
          style={{
            background: '#222',
            color: '#888',
            display: 'flex',
            'align-items': 'center',
            'justify-content': 'center',
            'min-height': '80px',
            width: '100%',
          }}
        >
          No Image
        </div>
      )}
      <div class={styles().seoPreviewTitle}>
        {props.meta.title || 'No Title'}
      </div>
      <div class={styles().seoPreviewDesc}>
        {props.meta.description || 'No Description'}
      </div>
      <div class={styles().seoPreviewUrl}>
        {props.meta.url || window.location.href}
      </div>
    </div>
  )
}

export function SocialPreviewsSection() {
  const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())
  const styles = createStyles()

  function analyzeHead(): Array<SocialReport> {
    const metaTags = Array.from(document.head.querySelectorAll('meta'))
    const reports: Array<SocialReport> = []

    for (const social of SOCIALS) {
      const found: Partial<SocialMeta> = {}
      const missing: Array<string> = []
      for (const tag of social.tags) {
        const meta = metaTags.find(
          (m) =>
            (tag.key.includes('twitter:')
              ? false
              : m.getAttribute('property') === tag.key) ||
            m.getAttribute('name') === tag.key,
        )

        if (meta && meta.getAttribute('content')) {
          found[tag.prop as keyof SocialMeta] =
            meta.getAttribute('content') || undefined
        } else {
          missing.push(tag.key)
        }
      }
      reports.push({ network: social.network, found, missing })
    }
    return reports
  }

  createHeadChanges(() => {
    setReports(analyzeHead())
  })

  return (
    <Section>
      <SectionDescription>
        See how your current page will look when shared on popular social
        networks. The tool checks for essential meta tags and highlights any
        that are missing.
      </SectionDescription>
      <div class={styles().seoPreviewSection}>
        <For each={reports()}>
          {(report, i) => {
            const social = SOCIALS[i()]
            return (
              <div>
                <SocialPreview
                  meta={report.found}
                  color={social!.color}
                  network={social!.network}
                />
                {report.missing.length > 0 ? (
                  <>
                    <div class={styles().seoMissingTagsSection}>
                      <strong>Missing tags for {social?.network}:</strong>

                      <ul class={styles().seoMissingTagsList}>
                        <For each={report.missing}>
                          {(tag) => (
                            <li class={styles().seoMissingTag}>{tag}</li>
                          )}
                        </For>
                      </ul>
                    </div>
                  </>
                ) : null}
              </div>
            )
          }}
        </For>
      </div>
    </Section>
  )
}