'use client';

import { useEffect, useState } from 'react';
import api from '@/lib/api';

function urlBase64ToUint8Array(base64String: string): Uint8Array {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);
  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

export default function PushNotificationToggle() {
  const [supported, setSupported] = useState(false);
  const [enabled, setEnabled] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const check = async () => {
      if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
        setLoading(false);
        return;
      }
      setSupported(true);

      try {
        const reg = await navigator.serviceWorker.ready;
        const sub = await reg.pushManager.getSubscription();
        setEnabled(!!sub);
      } catch {
        // ignore
      }
      setLoading(false);
    };
    check();
  }, []);

  const toggle = async () => {
    if (loading) return;
    setLoading(true);

    try {
      const reg = await navigator.serviceWorker.ready;

      if (enabled) {
        // Unsubscribe
        const sub = await reg.pushManager.getSubscription();
        if (sub) {
          await api.notifications.unsubscribe(sub.endpoint);
          await sub.unsubscribe();
        }
        setEnabled(false);
      } else {
        // Subscribe
        const permission = await Notification.requestPermission();
        if (permission !== 'granted') {
          setLoading(false);
          return;
        }

        const { public_key } = await api.notifications.getVapidPublicKey();
        const sub = await reg.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: urlBase64ToUint8Array(public_key).buffer as ArrayBuffer,
        });

        const subJson = sub.toJSON();
        await api.notifications.subscribe(subJson);
        setEnabled(true);
      }
    } catch (err) {
      console.error('Push notification toggle failed:', err);
    }
    setLoading(false);
  };

  if (!supported) return null;

  return (
    <div className="flex items-center justify-between p-4">
      <div>
        <p className="font-medium text-gray-900 dark:text-gray-100">Push notifications</p>
        <p className="text-sm text-gray-500 dark:text-gray-400">Get reminders on this device</p>
      </div>
      <button
        onClick={toggle}
        disabled={loading}
        className={`w-12 h-7 rounded-full transition-colors ${
          enabled ? 'bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
        } ${loading ? 'opacity-50' : ''}`}
      >
        <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ml-1 ${
          enabled ? 'translate-x-5' : ''
        }`} />
      </button>
    </div>
  );
}
