import { useState } from 'react';
import { useRegisterSW } from 'virtual:pwa-register/react';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

function PWAUpdate() {
  const {
    needRefresh: [needRefresh, setNeedRefresh],
    updateServiceWorker,
  } = useRegisterSW({
    onNeedRefresh() {
      setNeedRefresh(true);
    },
  });

  const [isLoading, setIsLoading] = useState(false);

  const handleUpdate = async () => {
    setIsLoading(true);
    await updateServiceWorker(true);
    setIsLoading(false);
  };

  const handleDismiss = () => {
    setNeedRefresh(false);
  };

  if (!needRefresh) {
    return null;
  }

  return (
    <div className="fixed bottom-4 right-4 z-50">
      <Card className="w-80 shadow-lg">
        <CardHeader className="pb-3">
          <CardTitle>发现新版本</CardTitle>
          <CardDescription>有新版本可用，点击立即更新</CardDescription>
        </CardHeader>
        <CardContent className="pt-0" />
        <CardFooter className="gap-2">
          <Button variant="outline" size="sm" onClick={handleDismiss}>
            稍后
          </Button>
          <Button size="sm" onClick={handleUpdate} disabled={isLoading}>
            {isLoading ? '更新中...' : '立即更新'}
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}

export default PWAUpdate;