"use client"

import { useSyncExternalStore, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useDispatch } from "react-redux"

import { Button } from "@/src/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/src/components/ui/dialog"
import { logout } from "@/src/state/auth"
import type { AppDispatch } from "@/src/state/store"

const TOKEN_KEY = process.env.NEXT_PUBLIC_TOKEN_KEY as string

function isTokenExpired(token: string): boolean {
  try {
    const payload = JSON.parse(atob(token.split(".")[1]))
    return payload.exp * 1000 < Date.now()
  } catch {
    return true
  }
}

function getToken() {
  return localStorage.getItem(TOKEN_KEY)
}

function subscribe() {
  return () => {}
}

export default function AuthGuard({ children }: { children: React.ReactNode }) {
  const router = useRouter()
  const dispatch = useDispatch<AppDispatch>()

  const token = useSyncExternalStore(subscribe, getToken, () => null)

  useEffect(() => {
    if (token === null && getToken() === null) {
      router.replace("/signin")
    }
  }, [token, router])

  if (token === null) {
    return null
  }

  const expired = isTokenExpired(token)

  function handleLogin() {
    dispatch(logout())
    router.replace("/signin")
  }

  return (
    <>
      {children}

      <Dialog open={expired} onOpenChange={() => { }}>
        <DialogContent
          className="sm:max-w-sm"
          onInteractOutside={(e) => e.preventDefault()}
          showCloseButton={false}
        >
          <DialogHeader>
            <DialogTitle>Session expirée</DialogTitle>
            <DialogDescription>
              Votre session a expiré. Veuillez vous reconnecter pour continuer.
            </DialogDescription>
          </DialogHeader>
          <Button onClick={handleLogin} className="w-full" size="lg">
            Se connecter
          </Button>
        </DialogContent>
      </Dialog>
    </>
  )
}