import { Fragment } from 'react'
import GlossaryMark from '../components/GlossaryMark'
import { GLOSSARY } from '../glossary/terms'

function escapeRegExp(value: string): string {
  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}

const MATCH_TO_ID = new Map<string, string>()
for (const entry of GLOSSARY) {
  for (const surface of entry.match) {
    MATCH_TO_ID.set(surface, entry.id)
  }
}

const ALL_SURFACES = [...MATCH_TO_ID.keys()].sort((a, b) => b.length - a.length)
const GLOSSARY_REGEX = new RegExp(`\\b(${ALL_SURFACES.map(escapeRegExp).join('|')})\\b`, 'g')

/** Wraps every occurrence of a known glossary term in `text` with a hoverable, linked <GlossaryMark>.
 *  Always returns a single inline element — never a bare array — so callers can safely place the
 *  result inside a `flex` container (e.g. a bulleted `<li>`) without each fragment becoming its own
 *  flex item and breaking the reading order. */
export function linkify(text: string): React.ReactNode {
  const parts = text.split(GLOSSARY_REGEX)
  if (parts.length === 1) return text

  return (
    <span>
      {parts.map((part, i) => {
        const id = MATCH_TO_ID.get(part)
        if (id === undefined) return <Fragment key={i}>{part}</Fragment>
        return (
          <GlossaryMark key={i} id={id}>
            {part}
          </GlossaryMark>
        )
      })}
    </span>
  )
}