'use client';

import { useEffect, useState } from 'react';

export default function NotificationDebug() {
  const [debug, setDebug] = useState<any>({});

  useEffect(() => {
    const info = {
      notificationSupported: 'Notification' in window,
      serviceWorkerSupported: 'serviceWorker' in navigator,
      pushManagerSupported: 'PushManager' in window,
      permission: 'Notification' in window ? Notification.permission : 'N/A',
      localStorage: typeof localStorage !== 'undefined' ? localStorage.getItem('notification-prompt-dismissed') : 'N/A',
    };
    setDebug(info);
  }, []);

  return (
    <div className="fixed bottom-4 left-4 bg-black text-white text-xs p-3 rounded-lg max-w-xs z-50 font-mono">
      <div className="font-bold mb-2">Push Debug:</div>
      <div>Notification: {debug.notificationSupported ? '✓' : '✗'}</div>
      <div>ServiceWorker: {debug.serviceWorkerSupported ? '✓' : '✗'}</div>
      <div>PushManager: {debug.pushManagerSupported ? '✓' : '✗'}</div>
      <div>Permission: {debug.permission}</div>
      <div>Dismissed: {debug.localStorage || 'No'}</div>
    </div>
  );
}