import { useEffect, useRef } from 'react'
import { useLocation } from 'react-router-dom'

const CONSENT_KEY = 'vbn_analytics_consent_choice'

function hasConsent(): boolean {
  return localStorage.getItem(CONSENT_KEY) === 'accepted'
}

export function sendEvent(type: string, data: Record<string, unknown>): void {
  if (!hasConsent()) return
  fetch('/api/analytics/event', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ type, ...data }),
    keepalive: true,
  }).catch(() => {})
}

// --- Scroll depth ---
export function useScrollDepthTracking() {
  const location = useLocation()
  const milestones = useRef(new Set<number>())

  useEffect(() => {
    milestones.current = new Set()

    function onScroll() {
      if (!hasConsent()) return
      const el = document.documentElement
      const pct = Math.round((el.scrollTop / (el.scrollHeight - el.clientHeight)) * 100)
      for (const mark of [25, 50, 75, 90]) {
        if (pct >= mark && !milestones.current.has(mark)) {
          milestones.current.add(mark)
          sendEvent('scroll_depth', { path: location.pathname, depth: mark })
        }
      }
    }

    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [location.pathname])
}

// --- Time on page ---
export function useTimeOnPage() {
  const location = useLocation()
  const enteredAt = useRef(Date.now())
  const path = useRef(location.pathname)

  useEffect(() => {
    enteredAt.current = Date.now()
    path.current = location.pathname

    function send() {
      if (!hasConsent()) return
      const seconds = Math.round((Date.now() - enteredAt.current) / 1000)
      if (seconds < 3) return
      sendEvent('time_on_page', { path: path.current, seconds })
    }

    const onVisibilityChange = () => { if (document.hidden) send() }
    document.addEventListener('visibilitychange', onVisibilityChange)

    return () => {
      document.removeEventListener('visibilitychange', onVisibilityChange)
      send()
    }
  }, [location.pathname])
}

// --- UTM capture (runs once per page load) ---
export function useUTMCapture() {
  const captured = useRef(false)

  useEffect(() => {
    if (captured.current || !hasConsent()) return
    const params = new URLSearchParams(window.location.search)
    const utm: Record<string, string> = {}
    for (const key of ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term']) {
      const val = params.get(key)
      if (val) utm[key] = val
    }
    if (Object.keys(utm).length === 0) return
    captured.current = true
    sendEvent('utm', { path: window.location.pathname, ...utm })
  }, [])
}

// --- All link clicks (internal + external) ---
export function useLinkClickTracking() {
  useEffect(() => {
    function onClick(e: MouseEvent) {
      if (!hasConsent()) return
      const target = (e.target as HTMLElement).closest('a')
      if (!target) return
      const href = target.getAttribute('href') ?? ''
      if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:')) return

      let url: string
      let internal: boolean

      if (href.startsWith('http') || href.startsWith('//')) {
        try {
          const parsed = new URL(href)
          if (parsed.hostname === window.location.hostname) {
            url = parsed.pathname
            internal = true
          } else {
            url = href
            internal = false
          }
        } catch { return }
      } else if (href.startsWith('/')) {
        url = href.split('?')[0]
        internal = true
      } else {
        return
      }

      sendEvent('link_click', { url: url.slice(0, 500), internal })
    }
    document.addEventListener('click', onClick, { capture: true })
    return () => document.removeEventListener('click', onClick, { capture: true })
  }, [])
}

/** @deprecated Use useLinkClickTracking instead */
export function useOutboundLinkTracking() { useLinkClickTracking() }
