import { useEffect, useState } from "react"

import { Button } from "@/components/ui/button"

interface PwaUpdateToastProps {
  needRefresh: boolean
  updateServiceWorker: (() => Promise<void>) | undefined
}

export function PwaUpdateToast({
  needRefresh,
  updateServiceWorker,
}: PwaUpdateToastProps) {
  const [dismissed, setDismissed] = useState(false)

  useEffect(() => {
    if (needRefresh) {
      setDismissed(false)
    }
  }, [needRefresh])

  if (!needRefresh || dismissed) {
    return null
  }

  return (
    <div className="fixed right-4 bottom-4 z-50 flex max-w-sm items-center gap-3 rounded-lg border border-border bg-card p-3 shadow-lg">
      <div className="flex-1 text-xs">
        <p className="font-medium">A new version is available.</p>
        <p className="text-muted-foreground">Reload to update the dashboard.</p>
      </div>
      <div className="flex items-center gap-2">
        <Button
          variant="outline"
          size="xs"
          onClick={() => setDismissed(true)}
          aria-label="Dismiss update notice"
        >
          Later
        </Button>
        <Button size="xs" onClick={() => void updateServiceWorker?.()}>
          Reload
        </Button>
      </div>
    </div>
  )
}