import { useCallback, useEffect, useMemo, useState } from 'react'
import type { ReactNode } from 'react'
import { Navigate, Outlet, useLocation } from 'react-router-dom'
import { complianceApi } from '../../lib/api'
import {
  ComplianceContext,
  COMPLIANCE_ONLY_PATHS,
  useCompliance,
  type ComplianceStatus,
} from './compliance-context'

export { useCompliance } from './compliance-context'

export function ComplianceProvider({ children }: { children: ReactNode }) {
  const [status, setStatus] = useState<ComplianceStatus | null>(null)
  const [loading, setLoading] = useState(true)

  const refresh = useCallback(async () => {
    const data = await complianceApi.status()
    setStatus(data)
  }, [])

  useEffect(() => {
    refresh().finally(() => setLoading(false))
    const onFocus = () => { refresh().catch(() => undefined) }
    window.addEventListener('focus', onFocus)
    return () => window.removeEventListener('focus', onFocus)
  }, [refresh])

  const value = useMemo(() => ({ status, loading, refresh }), [status, loading, refresh])

  return <ComplianceContext.Provider value={value}>{children}</ComplianceContext.Provider>
}

export function ComplianceGate() {
  const { status, loading } = useCompliance()
  const location = useLocation()

  if (loading) return <div className="auth-loading">Checking compliance status…</div>

  const unlocked = status?.console_unlocked ?? false
  const allowed = COMPLIANCE_ONLY_PATHS.includes(location.pathname) || location.pathname === '/console/account'

  if (!unlocked && !allowed) {
    return <Navigate to="/console/dlt" replace />
  }

  return <Outlet />
}