Scrum4Me/components/notifications/push-toggle.tsx

'use client'

import { useEffect, useState } from 'react'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import {
  isPushSupported,
  isIOSSafari,
  isStandalonePWA,
  subscribeToPush,
  unsubscribeFromPush,
} from '@/lib/push-client'
import { debugProps } from '@/lib/debug'

type PushStatus =
  | 'loading'
  | 'unsupported'
  | 'ios-needs-install'
  | 'denied'
  | 'subscribed'
  | 'unsubscribed'

interface PushToggleProps {
  vapidPublicKey?: string
}

export function PushToggle({ vapidPublicKey }: PushToggleProps) {
  const [status, setStatus] = useState<PushStatus>('loading')

  useEffect(() => {
    async function detectStatus() {
      if (!isPushSupported()) {
        if (isIOSSafari() && !isStandalonePWA()) {
          setStatus('ios-needs-install')
        } else {
          setStatus('unsupported')
        }
        return
      }

      if (Notification.permission === 'denied') {
        setStatus('denied')
        return
      }

      try {
        const reg = await navigator.serviceWorker.getRegistration()
        const sub = await reg?.pushManager.getSubscription()
        setStatus(sub ? 'subscribed' : 'unsubscribed')
      } catch {
        setStatus('unsubscribed')
      }
    }

    detectStatus()
  }, [])

  async function handleSubscribe() {
    if (!vapidPublicKey) {
      toast.error('Push niet beschikbaar — VAPID-sleutel ontbreekt')
      return
    }
    try {
      await subscribeToPush(vapidPublicKey)
      setStatus('subscribed')
      toast.success('Push-notificaties geactiveerd')
    } catch {
      if (Notification.permission === 'denied') {
        setStatus('denied')
      }
      toast.error('Kon push niet activeren. Controleer je browserinstellingen.')
    }
  }

  async function handleUnsubscribe() {
    try {
      await unsubscribeFromPush()
      setStatus('unsubscribed')
      toast.success('Push-notificaties uitgeschakeld')
    } catch {
      toast.error('Kon push niet uitschakelen')
    }
  }

  if (status === 'loading' || status === 'unsupported') return null

  if (status === 'ios-needs-install') {
    return (
      <div className="rounded-lg bg-surface-variant p-3 text-sm text-on-surface-variant" {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
        Op iPhone/iPad: tik op het delen-icoon en kies{' '}
        <strong>Zet op beginscherm</strong>. Daarna kun je notificaties activeren.
      </div>
    )
  }

  if (status === 'denied') {
    return (
      <p className="text-sm text-on-surface-variant" {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
        Notificaties zijn geblokkeerd. Schakel ze in via je browser-instellingen.
      </p>
    )
  }

  if (status === 'unsubscribed') {
    return (
      <div {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
        <Button variant="default" size="sm" onClick={handleSubscribe} data-debug-id="push-toggle__switch">
          <span data-debug-id="push-toggle__label">Activeer push</span>
        </Button>
      </div>
    )
  }

  return (
    <div {...debugProps('push-toggle', 'PushToggle', 'components/notifications/push-toggle.tsx')}>
      <Button variant="outline" size="sm" onClick={handleUnsubscribe} data-debug-id="push-toggle__switch">
        <span data-debug-id="push-toggle__label">Push uitzetten</span>
      </Button>
    </div>
  )
}