'use client'

import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react'
import Link from 'next/link'
import { getPostureGlossaryTerm, type PostureGlossaryTermId } from '@/data/postureGlossary'

interface PostureGlossaryContextValue {
  openTerm: (termId: PostureGlossaryTermId) => void
  close: () => void
}

const PostureGlossaryContext = createContext<PostureGlossaryContextValue | null>(null)

export function PostureGlossaryProvider({ children }: { children: ReactNode }) {
  const [activeTermId, setActiveTermId] = useState<PostureGlossaryTermId | null>(null)
  const activeTerm = useMemo(
    () => (activeTermId ? getPostureGlossaryTerm(activeTermId) ?? null : null),
    [activeTermId],
  )

  const openTerm = useCallback((termId: PostureGlossaryTermId) => {
    setActiveTermId(termId)
  }, [])

  const close = useCallback(() => {
    setActiveTermId(null)
  }, [])

  return (
    <PostureGlossaryContext.Provider value={{ openTerm, close }}>
      {children}
      {activeTerm ? (
        <div className="fixed inset-0 z-[80] flex items-end justify-center bg-black/45 p-4 sm:items-center" onClick={close}>
          <div
            role="dialog"
            aria-modal="true"
            aria-labelledby="posture-glossary-title"
            className="max-h-[85vh] w-full max-w-xl overflow-y-auto rounded-2xl border border-gray-200 bg-white p-6 shadow-2xl dark:border-gray-700 dark:bg-gray-950"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="flex items-start justify-between gap-4">
              <div>
                <p className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Posture glossary</p>
                <h2 id="posture-glossary-title" className="mt-1 text-xl font-semibold text-gray-900 dark:text-white">
                  {activeTerm.title}
                </h2>
              </div>
              <button
                type="button"
                onClick={close}
                className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-900"
              >
                Close
              </button>
            </div>
            <p className="mt-4 text-sm leading-6 text-gray-700 dark:text-gray-300">{activeTerm.summary}</p>
            <div className="mt-4 rounded-xl border border-sky-200 bg-sky-50/70 p-4 text-sm leading-6 text-sky-950 dark:border-sky-900/50 dark:bg-sky-950/20 dark:text-sky-100">
              <p className="text-xs font-semibold uppercase tracking-wide text-sky-700 dark:text-sky-300">Methodology</p>
              <p className="mt-2">{activeTerm.methodology}</p>
            </div>
            <div className="mt-5 flex flex-wrap gap-3 text-sm">
              <Link href="/docs/posture-glossary" className="font-medium text-primary-600 hover:underline" onClick={close}>
                Full glossary
              </Link>
              <Link href="/docs/gru" className="font-medium text-primary-600 hover:underline" onClick={close}>
                GRU guide
              </Link>
            </div>
          </div>
        </div>
      ) : null}
    </PostureGlossaryContext.Provider>
  )
}

export function usePostureGlossary() {
  const context = useContext(PostureGlossaryContext)
  if (!context) {
    throw new Error('usePostureGlossary must be used within PostureGlossaryProvider')
  }
  return context
}
